@ui5/webcomponents-base - npm Package Compare versions

Comparing version 0.0.0-d0bcf47c7 to 0.0.0-e463d2345

bundle.es5.js

@@ -11,3 +11,2 @@ // ES5 bundle targets IE11 only
 import { getNoConflict, setNoConflict } from "./dist/config/NoConflict.js";
-import { getCompactSize, setCompactSize } from "./dist/config/CompactSize.js";
 import { getRTL } from "./dist/config/RTL.js";
@@ -23,4 +22,2 @@ import { getFirstDayOfWeek } from "./dist/config/FormatSettings.js";
 	setNoConflict,
-	getCompactSize,
-	setCompactSize,
 	getCalendarType,
@@ -27,0 +24,0 @@ getRTL,

bundle.esm.js

@@ -16,3 +16,2 @@ import { registerThemeProperties } from "./dist/AssetRegistry.js";
 import "./dist/test-resources/elements/Child.js";
-import "./dist/test-resources/elements/DensityAware.js";
 import "./dist/test-resources/elements/GenericExt.js";
@@ -38,3 +37,2 @@
 import { getNoConflict, setNoConflict } from "./dist/config/NoConflict.js";
-import { getCompactSize, setCompactSize } from "./dist/config/CompactSize.js";
 import { getRTL } from "./dist/config/RTL.js";
@@ -51,4 +49,2 @@ import { getFirstDayOfWeek } from "./dist/config/FormatSettings.js";
 		setNoConflict,
-		getCompactSize,
-		setCompactSize,
 		getCalendarType,
@@ -55,0 +51,0 @@ getRTL,

dist/boot.js

 import whenDOMReady from "./util/whenDOMReady.js";
-import EventEnrichment from "./events/EventEnrichment.js";
 import insertFontFace from "./FontFace.js";
@@ -8,4 +7,2 @@ import { getTheme } from "./config/Theme.js";
 
-EventEnrichment.run();
-
 let bootPromise;
@@ -12,0 +9,0 @@

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

@@ -22,3 +22,2 @@ import {
 		this.rowSize = options.rowSize || 1;
-		this.cyclic = options.cyclic || false;
 		this.behavior = options.behavior || ItemNavigationBehavior.Static;
@@ -33,5 +32,5 @@
 		this.rootWebComponent.addEventListener("keydown", this.onkeydown.bind(this));
-		this.rootWebComponent.addEventListener("_componentStateFinalized", () => {
+		this.rootWebComponent._onComponentStateFinalized = () => {
 			this._init();
-		});
+		};
 	}
@@ -38,0 +37,0 @@

dist/InitialConfiguration.js

@@ -8,3 +8,2 @@ let initialized = false;
 	language: null,
-	compactSize: false,
 	calendarType: null,
@@ -36,7 +35,2 @@ noConflict: false, // no URL
 
-const getCompactSize = () => {
-	initConfiguration();
-	return initialConfig.compactSize;
-};
-
 const getNoConflict = () => {
@@ -124,3 +118,2 @@ initConfiguration();
 	getLanguage,
-	getCompactSize,
 	getNoConflict,
@@ -127,0 +120,0 @@ getCalendarType,

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/test-resources/specs/ConfigurationChange.spec.js

@@ -6,11 +6,2 @@ const assert = require("chai").assert;
 
-	it("Tests that compactSize can be changed", () => {
-		const res = browser.execute( () => {
-			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			config.setCompactSize(true);
-			return config.getCompactSize();
-		});
-		assert.strictEqual(res, true, "compactSize changed to true");
-	});
-
 	it("Tests that theme can be changed", () => {
@@ -17,0 +8,0 @@ const newTheme = 'sap_belize_hcb';

dist/test-resources/specs/ConfigurationScript.spec.js

@@ -14,10 +14,2 @@ const assert = require("chai").assert;
 
-	it("Tests that compactSize is applied", () => {
-		const res = browser.execute( () => {
-			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getCompactSize();
-		});
-		assert.strictEqual(res, true, "compactSize is true");
-	});
-
 	it("Tests that language is applied", () => {
@@ -24,0 +16,0 @@ const res = browser.execute( () => {

dist/test-resources/specs/ConfigurationURL.spec.js

 const assert = require("chai").assert;
 
 describe("Some settings can be set via URL params", () => {
-	browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-ui-rtl=true&sap-ui-compactSize=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_belize_hcb&sap-ui-animationMode=basic");
+	browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_belize_hcb&sap-ui-animationMode=basic");
 
@@ -14,10 +14,2 @@ it("Tests that RTL is applied", () => {
 
-	it("Tests that compactSize is applied", () => {
-		const res = browser.execute( () => {
-			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getCompactSize();
-		});
-		assert.strictEqual(res, true, "compactSize is true");
-	});
-
 	it("Tests that language is applied", () => {
@@ -24,0 +16,0 @@ const res = browser.execute( () => {

dist/UI5Element.js

 import merge from "@ui5/webcomponents-utils/dist/sap/base/util/merge.js";
-
 import boot from "./boot.js";
 import { skipOriginalEvent } from "./config/NoConflict.js";
-import { getCompactSize } from "./config/CompactSize.js";
 import DOMObserver from "./compatibility/DOMObserver.js";
 import UI5ElementMetadata from "./UI5ElementMetadata.js";
+import StaticAreaItem from "./StaticAreaItem.js";
 import Integer from "./types/Integer.js";
@@ -12,3 +11,2 @@ import RenderScheduler from "./RenderScheduler.js";
 import { getEffectiveStyle } from "./Theming.js";
-import { attachContentDensityChange } from "./ContentDensity.js";
 import { kebabToCamelCase, camelToKebabCase } from "./util/StringHelper.js";
@@ -26,2 +24,4 @@ import isValidPropertyName from "./util/isValidPropertyName.js";
 
+const elementTimeouts = new Map();
+
 /**
@@ -43,6 +43,4 @@ * Base class for all UI5 Web Components
 		this._upgradeAllProperties();
-		this._initializeShadowRoot();
+		this._initializeContainers();
 
-		attachContentDensityChange(this._onContentDensityChanged.bind(this));
-
 		let deferredResolve;
@@ -60,24 +58,2 @@ this._domRefReadyPromise = new Promise(resolve => {
 	 */
-	_onContentDensityChanged() {
-		this._syncContentDensity();
-		if (this.constructor.getMetadata().getInvalidateOnContentDensityChange()) {
-			this._invalidate();
-		}
-	}
-
-	/**
-	 * @private
-	 */
-	_syncContentDensity() {
-		const isCompact = getCompactSize();
-		if (isCompact) {
-			this.setAttribute("data-ui5-compact-size", "");
-		} else {
-			this.removeAttribute("data-ui5-compact-size");
-		}
-	}
-
-	/**
-	 * @private
-	 */
 	_generateId() {
@@ -90,18 +66,22 @@ this._id = this.constructor._nextID();
 	 */
-	_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);
 		}
@@ -115,16 +95,18 @@ }
 	async connectedCallback() {
-		this._syncContentDensity();
+		// Render the Shadow DOM
+		if (this.constructor._needsShadowDOM()) {
+			// always register the observer before yielding control to the main thread (await)
+			this._startObservingDOMChildren();
 
-		if (!this.constructor._needsShadowDOM()) {
-			return;
+			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);
 		}
@@ -138,9 +120,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();
 		}
@@ -226,3 +210,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]);
@@ -459,3 +447,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();
+		}
 
@@ -470,2 +460,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
@@ -669,2 +663,16 @@ this._assignIndividualSlotsToChildren();
 	 */
+	static _needsStaticArea() {
+		return typeof this.staticAreaTemplate === "function";
+	}
+
+	/**
+	 * @public
+	 */
+	getStaticAreaItemDomRef() {
+		return this.staticAreaItem.getDomRef();
+	}
+
+	/**
+	 * @private
+	 */
 	static _getDefaultState() {
@@ -671,0 +679,0 @@ if (this._defaultState) {

dist/UI5ElementMetadata.js

@@ -103,10 +103,2 @@ import DataType from "./types/DataType.js";
 	}
-
-	/**
-	 * Determines whether this UI5 Element invalidates automatically when content density changes
-	 * @public
-	 */
-	getInvalidateOnContentDensityChange() {
-		return !!this.metadata.invalidateOnContentDensityChange;
-	}
 }
@@ -113,0 +105,0 @@

package.json

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

src/boot.js

 import whenDOMReady from "./util/whenDOMReady.js";
-import EventEnrichment from "./events/EventEnrichment.js";
 import insertFontFace from "./FontFace.js";
@@ -8,4 +7,2 @@ import { getTheme } from "./config/Theme.js";
 
-EventEnrichment.run();
-
 let bootPromise;
@@ -12,0 +9,0 @@

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

@@ -22,3 +22,2 @@ import {
 		this.rowSize = options.rowSize || 1;
-		this.cyclic = options.cyclic || false;
 		this.behavior = options.behavior || ItemNavigationBehavior.Static;
@@ -33,5 +32,5 @@
 		this.rootWebComponent.addEventListener("keydown", this.onkeydown.bind(this));
-		this.rootWebComponent.addEventListener("_componentStateFinalized", () => {
+		this.rootWebComponent._onComponentStateFinalized = () => {
 			this._init();
-		});
+		};
 	}
@@ -38,0 +37,0 @@

src/InitialConfiguration.js

@@ -8,3 +8,2 @@ let initialized = false;
 	language: null,
-	compactSize: false,
 	calendarType: null,
@@ -36,7 +35,2 @@ noConflict: false, // no URL
 
-const getCompactSize = () => {
-	initConfiguration();
-	return initialConfig.compactSize;
-};
-
 const getNoConflict = () => {
@@ -124,3 +118,2 @@ initConfiguration();
 	getLanguage,
-	getCompactSize,
 	getNoConflict,
@@ -127,0 +120,0 @@ getCalendarType,

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

 import merge from "@ui5/webcomponents-utils/dist/sap/base/util/merge.js";
-
 import boot from "./boot.js";
 import { skipOriginalEvent } from "./config/NoConflict.js";
-import { getCompactSize } from "./config/CompactSize.js";
 import DOMObserver from "./compatibility/DOMObserver.js";
 import UI5ElementMetadata from "./UI5ElementMetadata.js";
+import StaticAreaItem from "./StaticAreaItem.js";
 import Integer from "./types/Integer.js";
@@ -12,3 +11,2 @@ import RenderScheduler from "./RenderScheduler.js";
 import { getEffectiveStyle } from "./Theming.js";
-import { attachContentDensityChange } from "./ContentDensity.js";
 import { kebabToCamelCase, camelToKebabCase } from "./util/StringHelper.js";
@@ -26,2 +24,4 @@ import isValidPropertyName from "./util/isValidPropertyName.js";
 
+const elementTimeouts = new Map();
+
 /**
@@ -43,6 +43,4 @@ * Base class for all UI5 Web Components
 		this._upgradeAllProperties();
-		this._initializeShadowRoot();
+		this._initializeContainers();
 
-		attachContentDensityChange(this._onContentDensityChanged.bind(this));
-
 		let deferredResolve;
@@ -60,24 +58,2 @@ this._domRefReadyPromise = new Promise(resolve => {
 	 */
-	_onContentDensityChanged() {
-		this._syncContentDensity();
-		if (this.constructor.getMetadata().getInvalidateOnContentDensityChange()) {
-			this._invalidate();
-		}
-	}
-
-	/**
-	 * @private
-	 */
-	_syncContentDensity() {
-		const isCompact = getCompactSize();
-		if (isCompact) {
-			this.setAttribute("data-ui5-compact-size", "");
-		} else {
-			this.removeAttribute("data-ui5-compact-size");
-		}
-	}
-
-	/**
-	 * @private
-	 */
 	_generateId() {
@@ -90,18 +66,22 @@ this._id = this.constructor._nextID();
 	 */
-	_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);
 		}
@@ -115,16 +95,18 @@ }
 	async connectedCallback() {
-		this._syncContentDensity();
+		// Render the Shadow DOM
+		if (this.constructor._needsShadowDOM()) {
+			// always register the observer before yielding control to the main thread (await)
+			this._startObservingDOMChildren();
 
-		if (!this.constructor._needsShadowDOM()) {
-			return;
+			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);
 		}
@@ -138,9 +120,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();
 		}
@@ -226,3 +210,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]);
@@ -459,3 +447,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();
+		}
 
@@ -470,2 +460,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
@@ -669,2 +663,16 @@ this._assignIndividualSlotsToChildren();
 	 */
+	static _needsStaticArea() {
+		return typeof this.staticAreaTemplate === "function";
+	}
+
+	/**
+	 * @public
+	 */
+	getStaticAreaItemDomRef() {
+		return this.staticAreaItem.getDomRef();
+	}
+
+	/**
+	 * @private
+	 */
 	static _getDefaultState() {
@@ -671,0 +679,0 @@ if (this._defaultState) {

src/UI5ElementMetadata.js

@@ -103,10 +103,2 @@ import DataType from "./types/DataType.js";
 	}
-
-	/**
-	 * Determines whether this UI5 Element invalidates automatically when content density changes
-	 * @public
-	 */
-	getInvalidateOnContentDensityChange() {
-		return !!this.metadata.invalidateOnContentDensityChange;
-	}
 }
@@ -113,0 +105,0 @@

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

13123021

increased by3.5%

Lines of code

383143

increased by1.74%

Worsened metrics

Number of package files

341

decreased by-2.85%

Dependency changes

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

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

• Updated@ui5/webcomponents-utils@0.0.0-e463d2345