@ui5/webcomponents-base - npm Package Compare versions

Comparing version 0.0.0-2db62badf to 0.0.0-389bdbabc

dist/dates/CalendarDate.js

@@ -152,3 +152,3 @@ import UniversalDate from "@ui5/webcomponents-utils/dist/sap/ui/core/date/UniversalDate.js";
 		}
-		if (!isValidDate()) {
+		if (!isValidDate(oJSDate)) {
 			throw new Error(`Date parameter must be a JavaScript Date object: [${oJSDate}].`);
@@ -155,0 +155,0 @@ }

dist/delegate/ItemNavigation.js

@@ -0,1 +1,2 @@
+import RenderScheduler from "../RenderScheduler.js";
 import {
@@ -31,5 +32,5 @@ isDown,
 		this.rootWebComponent.addEventListener("keydown", this.onkeydown.bind(this));
-		this.rootWebComponent.addEventListener("_componentStateFinalized", () => {
+		this.rootWebComponent._onComponentStateFinalized = () => {
 			this._init();
-		});
+		};
 	}
@@ -51,33 +52,15 @@
 
-	_onKeyPress(event) {
-		const items = this._getItems();
-		if (this.currentIndex >= items.length) {
-			if (this.behavior !== ItemNavigationBehavior.Cyclic) {
-				if (this.behavior === ItemNavigationBehavior.Paging) {
-					this.currentIndex = this.currentIndex - items.length;
-				} else {
-					this.currentIndex = items.length - 1;
-				}
-				this.fireEvent(ItemNavigation.BORDER_REACH, { start: false, end: true, offset: this.currentIndex });
-			} else {
-				this.currentIndex = this.currentIndex - items.length;
-			}
+	async _onKeyPress(event) {
+		if (this.currentIndex >= this._getItems().length) {
+			this.onOverflowBottomEdge();
 		} else if (this.currentIndex < 0) {
-			if (this.behavior !== ItemNavigationBehavior.Cyclic) {
-				if (this.behavior === ItemNavigationBehavior.Paging) {
-					this.currentIndex = items.length + this.currentIndex - this.rowSize + (this.rowSize - (this._getItems().length % this.rowSize));
-				} else {
-					this.currentIndex = 0;
-				}
-				this.fireEvent(ItemNavigation.BORDER_REACH, { start: true, end: false, offset: this.currentIndex });
-			} else {
-				this.currentIndex = items.length + this.currentIndex;
-			}
+			this.onOverflowTopEdge();
 		}
 
+		event.preventDefault();
+
+		await RenderScheduler.whenFinished();
+
 		this.update();
 		this.focusCurrent();
-
-		// stops browser scrolling with up/down keys
-		event.preventDefault();
 	}
@@ -232,6 +215,63 @@
 	}
+
+	onOverflowBottomEdge() {
+		const items = this._getItems();
+		const rowIndex = this.currentIndex - items.length;
+		if (this.behavior === ItemNavigationBehavior.Cyclic) {
+			return;
+		}
+
+		if (this.behavior === ItemNavigationBehavior.Paging) {
+			this._handleNextPage();
+		}
+
+		this.fireEvent(ItemNavigation.BORDER_REACH, {
+			start: false, end: true, offset: this.currentIndex, rowIndex,
+		});
+	}
+
+	onOverflowTopEdge() {
+		const items = this._getItems();
+		const rowIndex = this.currentIndex + this.rowSize;
+
+		if (this.behavior === ItemNavigationBehavior.Cyclic) {
+			this.currentIndex = items.length + this.currentIndex;
+			return;
+		}
+
+		if (this.behavior === ItemNavigationBehavior.Paging) {
+			this._handlePrevPage();
+		}
+
+		this.fireEvent(ItemNavigation.BORDER_REACH, {
+			start: true, end: false, offset: this.currentIndex, rowIndex,
+		});
+	}
+
+	_handleNextPage() {
+		this.fireEvent(ItemNavigation.PAGE_BOTTOM);
+		const items = this._getItems();
+
+		if (!this.hasNextPage) {
+			this.currentIndex = items.length - 1;
+		} else {
+			this.currentIndex = 0;
+		}
+	}
+
+	_handlePrevPage() {
+		this.fireEvent(ItemNavigation.PAGE_TOP);
+
+		if (!this.hasPrevPage) {
+			this.currentIndex = 0;
+		} else {
+			this.currentIndex = 41;
+		}
+	}
 }
 
+ItemNavigation.PAGE_TOP = "PageTop";
+ItemNavigation.PAGE_BOTTOM = "PageBottom";
 ItemNavigation.BORDER_REACH = "_borderReach";
 
 export default ItemNavigation;

dist/RenderScheduler.js

@@ -15,2 +15,4 @@ import RenderQueue from "./RenderQueue.js";
 
+let mutationObserverTimer;
+
 /**
@@ -87,7 +89,10 @@ * Class that manages the rendering/re-rendering of web components
 		// wait for Mutation observer just in case
-		setTimeout(() => {
-			if (invalidatedWebComponents.getList().length === 0) {
-				RenderScheduler._resolveTaskPromise();
-			}
-		}, 200);
+		if (!mutationObserverTimer) {
+			mutationObserverTimer = setTimeout(() => {
+				mutationObserverTimer = undefined;
+				if (invalidatedWebComponents.getList().length === 0) {
+					RenderScheduler._resolveTaskPromise();
+				}
+			}, 200);
+		}
 
@@ -94,0 +99,0 @@ renderTaskId = undefined;

dist/UI5Element.js

@@ -6,2 +6,3 @@ import merge from "@ui5/webcomponents-utils/dist/sap/base/util/merge.js";
 import UI5ElementMetadata from "./UI5ElementMetadata.js";
+import StaticAreaItem from "./StaticAreaItem.js";
 import Integer from "./types/Integer.js";
@@ -23,2 +24,4 @@ import RenderScheduler from "./RenderScheduler.js";
 
+const elementTimeouts = new Map();
+
 /**
@@ -40,3 +43,3 @@ * Base class for all UI5 Web Components
 		this._upgradeAllProperties();
-		this._initializeShadowRoot();
+		this._initializeContainers();
 
@@ -62,18 +65,22 @@ let deferredResolve;
 	 */
-	_initializeShadowRoot() {
-		if (!this.constructor._needsShadowDOM()) {
-			return;
-		}
+	_initializeContainers() {
+		// Init Shadow Root
+		if (this.constructor._needsShadowDOM()) {
+			this.attachShadow({ mode: "open" });
 
-		this.attachShadow({ mode: "open" });
+			// IE11, Edge
+			if (window.ShadyDOM) {
+				createHeadStyle(this.constructor);
+			}
 
-		// IE11, Edge
-		if (window.ShadyDOM) {
-			createHeadStyle(this.constructor);
+			// Chrome
+			if (document.adoptedStyleSheets) {
+				const style = getConstructableStyle(this.constructor);
+				this.shadowRoot.adoptedStyleSheets = [style];
+			}
 		}
 
-		// Chrome
-		if (document.adoptedStyleSheets) {
-			const style = getConstructableStyle(this.constructor);
-			this.shadowRoot.adoptedStyleSheets = [style];
+		// Init StaticAreaItem only if needed
+		if (this.constructor._needsStaticArea()) {
+			this.staticAreaItem = new StaticAreaItem(this);
 		}
@@ -87,14 +94,18 @@ }
 	async connectedCallback() {
-		if (!this.constructor._needsShadowDOM()) {
-			return;
+		// Render the Shadow DOM
+		if (this.constructor._needsShadowDOM()) {
+			// always register the observer before yielding control to the main thread (await)
+			this._startObservingDOMChildren();
+
+			await this._processChildren();
+			await RenderScheduler.renderImmediately(this);
+			this._domRefReadyPromise._deferredResolve();
+			if (typeof this.onEnterDOM === "function") {
+				this.onEnterDOM();
+			}
 		}
 
-		// always register the observer before yielding control to the main thread (await)
-		this._startObservingDOMChildren();
-
-		await this._processChildren();
-		await RenderScheduler.renderImmediately(this);
-		this._domRefReadyPromise._deferredResolve();
-		if (typeof this.onEnterDOM === "function") {
-			this.onEnterDOM();
+		// Render Fragment if neccessary
+		if (this.constructor._needsStaticArea()) {
+			this.staticAreaItem._updateFragment(this);
 		}
@@ -108,9 +119,11 @@ }
 	disconnectedCallback() {
-		if (!this.constructor._needsShadowDOM()) {
-			return;
+		if (this.constructor._needsShadowDOM()) {
+			this._stopObservingDOMChildren();
+			if (typeof this.onExitDOM === "function") {
+				this.onExitDOM();
+			}
 		}
 
-		this._stopObservingDOMChildren();
-		if (typeof this.onExitDOM === "function") {
-			this.onExitDOM();
+		if (this.constructor._needsStaticArea()) {
+			this.staticAreaItem._removeFragmentFromStaticArea();
 		}
@@ -196,3 +209,7 @@ }
 						const whenDefinedPromise = window.customElements.whenDefined(localName); // Class registered, but instances not upgraded yet
-						const timeoutPromise = new Promise(resolve => setTimeout(resolve, 1000));
+						let timeoutPromise = elementTimeouts.get(localName);
+						if (!timeoutPromise) {
+							timeoutPromise = new Promise(resolve => setTimeout(resolve, 1000));
+							elementTimeouts.set(localName, timeoutPromise);
+						}
 						await Promise.race([whenDefinedPromise, timeoutPromise]);
@@ -429,3 +446,5 @@ }
 		// Intended for framework usage only. Currently ItemNavigation updates tab indexes after the component has updated its state but before the template is rendered
-		this.dispatchEvent(new CustomEvent("_componentStateFinalized"));
+		if (this._onComponentStateFinalized) {
+			this._onComponentStateFinalized();
+		}
 
@@ -440,2 +459,6 @@ // resume normal invalidation handling
 
+		if (this.constructor._needsStaticArea()) {
+			this.staticAreaItem._updateFragment(this);
+		}
+
 		// Safari requires that children get the slot attribute only after the slot tags have been rendered in the shadow DOM
@@ -639,2 +662,16 @@ this._assignIndividualSlotsToChildren();
 	 */
+	static _needsStaticArea() {
+		return typeof this.staticAreaTemplate === "function";
+	}
+
+	/**
+	 * @public
+	 */
+	getStaticAreaItemDomRef() {
+		return this.staticAreaItem.getDomRef();
+	}
+
+	/**
+	 * @private
+	 */
 	static _getDefaultState() {
@@ -641,0 +678,0 @@ if (this._defaultState) {

package.json

 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.0.0-2db62badf",
+  "version": "0.0.0-389bdbabc",
   "description": "UI5 Web Components: webcomponents.base",
@@ -26,3 +26,3 @@ "author": "SAP SE (https://www.sap.com)",
   "dependencies": {
-    "@ui5/webcomponents-utils": "0.0.0-2db62badf",
+    "@ui5/webcomponents-utils": "0.0.0-389bdbabc",
     "css-vars-ponyfill": "^2.1.2",
@@ -34,3 +34,3 @@ "lit-html": "^1.0.0",
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-2db62badf",
+    "@ui5/webcomponents-tools": "0.0.0-389bdbabc",
     "array-uniq": "^2.0.0",
@@ -37,0 +37,0 @@ "copy-and-watch": "^0.1.4",

src/dates/CalendarDate.js

@@ -152,3 +152,3 @@ import UniversalDate from "@ui5/webcomponents-utils/dist/sap/ui/core/date/UniversalDate.js";
 		}
-		if (!isValidDate()) {
+		if (!isValidDate(oJSDate)) {
 			throw new Error(`Date parameter must be a JavaScript Date object: [${oJSDate}].`);
@@ -155,0 +155,0 @@ }

src/delegate/ItemNavigation.js

@@ -0,1 +1,2 @@
+import RenderScheduler from "../RenderScheduler.js";
 import {
@@ -31,5 +32,5 @@ isDown,
 		this.rootWebComponent.addEventListener("keydown", this.onkeydown.bind(this));
-		this.rootWebComponent.addEventListener("_componentStateFinalized", () => {
+		this.rootWebComponent._onComponentStateFinalized = () => {
 			this._init();
-		});
+		};
 	}
@@ -51,33 +52,15 @@
 
-	_onKeyPress(event) {
-		const items = this._getItems();
-		if (this.currentIndex >= items.length) {
-			if (this.behavior !== ItemNavigationBehavior.Cyclic) {
-				if (this.behavior === ItemNavigationBehavior.Paging) {
-					this.currentIndex = this.currentIndex - items.length;
-				} else {
-					this.currentIndex = items.length - 1;
-				}
-				this.fireEvent(ItemNavigation.BORDER_REACH, { start: false, end: true, offset: this.currentIndex });
-			} else {
-				this.currentIndex = this.currentIndex - items.length;
-			}
+	async _onKeyPress(event) {
+		if (this.currentIndex >= this._getItems().length) {
+			this.onOverflowBottomEdge();
 		} else if (this.currentIndex < 0) {
-			if (this.behavior !== ItemNavigationBehavior.Cyclic) {
-				if (this.behavior === ItemNavigationBehavior.Paging) {
-					this.currentIndex = items.length + this.currentIndex - this.rowSize + (this.rowSize - (this._getItems().length % this.rowSize));
-				} else {
-					this.currentIndex = 0;
-				}
-				this.fireEvent(ItemNavigation.BORDER_REACH, { start: true, end: false, offset: this.currentIndex });
-			} else {
-				this.currentIndex = items.length + this.currentIndex;
-			}
+			this.onOverflowTopEdge();
 		}
 
+		event.preventDefault();
+
+		await RenderScheduler.whenFinished();
+
 		this.update();
 		this.focusCurrent();
-
-		// stops browser scrolling with up/down keys
-		event.preventDefault();
 	}
@@ -232,6 +215,63 @@
 	}
+
+	onOverflowBottomEdge() {
+		const items = this._getItems();
+		const rowIndex = this.currentIndex - items.length;
+		if (this.behavior === ItemNavigationBehavior.Cyclic) {
+			return;
+		}
+
+		if (this.behavior === ItemNavigationBehavior.Paging) {
+			this._handleNextPage();
+		}
+
+		this.fireEvent(ItemNavigation.BORDER_REACH, {
+			start: false, end: true, offset: this.currentIndex, rowIndex,
+		});
+	}
+
+	onOverflowTopEdge() {
+		const items = this._getItems();
+		const rowIndex = this.currentIndex + this.rowSize;
+
+		if (this.behavior === ItemNavigationBehavior.Cyclic) {
+			this.currentIndex = items.length + this.currentIndex;
+			return;
+		}
+
+		if (this.behavior === ItemNavigationBehavior.Paging) {
+			this._handlePrevPage();
+		}
+
+		this.fireEvent(ItemNavigation.BORDER_REACH, {
+			start: true, end: false, offset: this.currentIndex, rowIndex,
+		});
+	}
+
+	_handleNextPage() {
+		this.fireEvent(ItemNavigation.PAGE_BOTTOM);
+		const items = this._getItems();
+
+		if (!this.hasNextPage) {
+			this.currentIndex = items.length - 1;
+		} else {
+			this.currentIndex = 0;
+		}
+	}
+
+	_handlePrevPage() {
+		this.fireEvent(ItemNavigation.PAGE_TOP);
+
+		if (!this.hasPrevPage) {
+			this.currentIndex = 0;
+		} else {
+			this.currentIndex = 41;
+		}
+	}
 }
 
+ItemNavigation.PAGE_TOP = "PageTop";
+ItemNavigation.PAGE_BOTTOM = "PageBottom";
 ItemNavigation.BORDER_REACH = "_borderReach";
 
 export default ItemNavigation;

src/RenderScheduler.js

@@ -15,2 +15,4 @@ import RenderQueue from "./RenderQueue.js";
 
+let mutationObserverTimer;
+
 /**
@@ -87,7 +89,10 @@ * Class that manages the rendering/re-rendering of web components
 		// wait for Mutation observer just in case
-		setTimeout(() => {
-			if (invalidatedWebComponents.getList().length === 0) {
-				RenderScheduler._resolveTaskPromise();
-			}
-		}, 200);
+		if (!mutationObserverTimer) {
+			mutationObserverTimer = setTimeout(() => {
+				mutationObserverTimer = undefined;
+				if (invalidatedWebComponents.getList().length === 0) {
+					RenderScheduler._resolveTaskPromise();
+				}
+			}, 200);
+		}
 
@@ -94,0 +99,0 @@ renderTaskId = undefined;

src/UI5Element.js

@@ -6,2 +6,3 @@ import merge from "@ui5/webcomponents-utils/dist/sap/base/util/merge.js";
 import UI5ElementMetadata from "./UI5ElementMetadata.js";
+import StaticAreaItem from "./StaticAreaItem.js";
 import Integer from "./types/Integer.js";
@@ -23,2 +24,4 @@ import RenderScheduler from "./RenderScheduler.js";
 
+const elementTimeouts = new Map();
+
 /**
@@ -40,3 +43,3 @@ * Base class for all UI5 Web Components
 		this._upgradeAllProperties();
-		this._initializeShadowRoot();
+		this._initializeContainers();
 
@@ -62,18 +65,22 @@ let deferredResolve;
 	 */
-	_initializeShadowRoot() {
-		if (!this.constructor._needsShadowDOM()) {
-			return;
-		}
+	_initializeContainers() {
+		// Init Shadow Root
+		if (this.constructor._needsShadowDOM()) {
+			this.attachShadow({ mode: "open" });
 
-		this.attachShadow({ mode: "open" });
+			// IE11, Edge
+			if (window.ShadyDOM) {
+				createHeadStyle(this.constructor);
+			}
 
-		// IE11, Edge
-		if (window.ShadyDOM) {
-			createHeadStyle(this.constructor);
+			// Chrome
+			if (document.adoptedStyleSheets) {
+				const style = getConstructableStyle(this.constructor);
+				this.shadowRoot.adoptedStyleSheets = [style];
+			}
 		}
 
-		// Chrome
-		if (document.adoptedStyleSheets) {
-			const style = getConstructableStyle(this.constructor);
-			this.shadowRoot.adoptedStyleSheets = [style];
+		// Init StaticAreaItem only if needed
+		if (this.constructor._needsStaticArea()) {
+			this.staticAreaItem = new StaticAreaItem(this);
 		}
@@ -87,14 +94,18 @@ }
 	async connectedCallback() {
-		if (!this.constructor._needsShadowDOM()) {
-			return;
+		// Render the Shadow DOM
+		if (this.constructor._needsShadowDOM()) {
+			// always register the observer before yielding control to the main thread (await)
+			this._startObservingDOMChildren();
+
+			await this._processChildren();
+			await RenderScheduler.renderImmediately(this);
+			this._domRefReadyPromise._deferredResolve();
+			if (typeof this.onEnterDOM === "function") {
+				this.onEnterDOM();
+			}
 		}
 
-		// always register the observer before yielding control to the main thread (await)
-		this._startObservingDOMChildren();
-
-		await this._processChildren();
-		await RenderScheduler.renderImmediately(this);
-		this._domRefReadyPromise._deferredResolve();
-		if (typeof this.onEnterDOM === "function") {
-			this.onEnterDOM();
+		// Render Fragment if neccessary
+		if (this.constructor._needsStaticArea()) {
+			this.staticAreaItem._updateFragment(this);
 		}
@@ -108,9 +119,11 @@ }
 	disconnectedCallback() {
-		if (!this.constructor._needsShadowDOM()) {
-			return;
+		if (this.constructor._needsShadowDOM()) {
+			this._stopObservingDOMChildren();
+			if (typeof this.onExitDOM === "function") {
+				this.onExitDOM();
+			}
 		}
 
-		this._stopObservingDOMChildren();
-		if (typeof this.onExitDOM === "function") {
-			this.onExitDOM();
+		if (this.constructor._needsStaticArea()) {
+			this.staticAreaItem._removeFragmentFromStaticArea();
 		}
@@ -196,3 +209,7 @@ }
 						const whenDefinedPromise = window.customElements.whenDefined(localName); // Class registered, but instances not upgraded yet
-						const timeoutPromise = new Promise(resolve => setTimeout(resolve, 1000));
+						let timeoutPromise = elementTimeouts.get(localName);
+						if (!timeoutPromise) {
+							timeoutPromise = new Promise(resolve => setTimeout(resolve, 1000));
+							elementTimeouts.set(localName, timeoutPromise);
+						}
 						await Promise.race([whenDefinedPromise, timeoutPromise]);
@@ -429,3 +446,5 @@ }
 		// Intended for framework usage only. Currently ItemNavigation updates tab indexes after the component has updated its state but before the template is rendered
-		this.dispatchEvent(new CustomEvent("_componentStateFinalized"));
+		if (this._onComponentStateFinalized) {
+			this._onComponentStateFinalized();
+		}
 
@@ -440,2 +459,6 @@ // resume normal invalidation handling
 
+		if (this.constructor._needsStaticArea()) {
+			this.staticAreaItem._updateFragment(this);
+		}
+
 		// Safari requires that children get the slot attribute only after the slot tags have been rendered in the shadow DOM
@@ -639,2 +662,16 @@ this._assignIndividualSlotsToChildren();
 	 */
+	static _needsStaticArea() {
+		return typeof this.staticAreaTemplate === "function";
+	}
+
+	/**
+	 * @public
+	 */
+	getStaticAreaItemDomRef() {
+		return this.staticAreaItem.getDomRef();
+	}
+
+	/**
+	 * @private
+	 */
 	static _getDefaultState() {
@@ -641,0 +678,0 @@ if (this._defaultState) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13124216

increased by5.39%

Number of package files

341

increased by1.19%

Lines of code

383209

increased by4.51%

Dependency changes

• + Added@ui5/webcomponents-utils@0.0.0-389bdbabc(transitive)

• - Removed@ui5/webcomponents-utils@0.0.0-2db62badf(transitive)

• Updated@ui5/webcomponents-utils@0.0.0-389bdbabc