@ui5/webcomponents-base 0.0.0-c6155714e → 0.0.0-c638668a1

package/dist/test-resources/assets/Themes.js

@@ -1,11 +1,17 @@
-import { registerThemeProperties } from "../../asset-registries/Themes.js";
+import { registerThemePropertiesLoader } from "../../asset-registries/Themes.js";
 
 const fiori3 = `:root{ --var1: red; }`;
 const fiori3Dark = `:root{ --var1: green; }`;
 const belize = `:root{ --var1: blue; }`;
 const belizeHcb = `:root{ --var1: orange; }`;
+const belizeHcw = `:root{ --var1: orange; }`;
+const fiori3Hcb = `:root{ --var1: yellow; }`;
+const fiori3Hcw = `:root{ --var1: yellow; }`;
 
-registerThemeProperties("@ui5/webcomponents-base-test", "sap_fiori_3", fiori3);
-registerThemeProperties("@ui5/webcomponents-base-test", "sap_fiori_3_dark", fiori3Dark);
-registerThemeProperties("@ui5/webcomponents-base-test", "sap_belize", belize);
-registerThemeProperties("@ui5/webcomponents-base-test", "sap_belize_hcb", belizeHcb);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3", () => fiori3);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_dark", () => fiori3Dark);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize", () => belize);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize_hcb", () => belizeHcb);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize_hcw", () => belizeHcw);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_hcb", () => fiori3Hcb);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_hcw", () => fiori3Hcw);

package/dist/test-resources/elements/Generic.js

@@ -26,6 +26,7 @@ const metadata = {
 			defaultValue: "Hello",
 		}
 	},
+	managedSlots: true,
 	slots: {
 		default: {
 			type: Node,

package/dist/test-resources/elements/Parent.js

@@ -3,14 +3,19 @@ import litRender, { html } from "../../renderer/LitRenderer.js";
 
 const metadata = {
 	tag: "ui5-test-parent",
+	managedSlots: true,
 	slots: {
 		default: {
 			type: Node,
-			listenFor: ["prop1"],
+			invalidateOnChildChange: {
+				properties: ["prop1"]
+			},
 		},
 		items: {
 			type: HTMLElement,
-			listenFor: { include: ["*"], exclude: ["prop3"] }
+			invalidateOnChildChange: {
+				properties: true
+			},
 		}
 	}
 };

package/dist/test-resources/elements/WithStaticArea.js

@@ -0,0 +1,77 @@
+import UI5Element from "../../UI5Element.js";
+import litRender, { html } from "../../renderer/LitRenderer.js";
+
+const metadata = {
+	tag: "ui5-with-static-area",
+	properties: {
+		/**
+		 * Defines whether the static area item will be rendered
+		 */
+		staticContent: {
+			type: Boolean,
+		}
+	},
+	slots: {
+
+	}
+};
+
+class WithStaticArea extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return element => {
+			// access effectiveDir getter to mark control as RTL-aware (test changes dir attribute and expects rerender)
+			return html`
+				<div dir=${element.effectiveDir}>
+					WithStaticArea works!
+				</div>`;
+		};
+	}
+
+	static get staticAreaTemplate() {
+		return element => {
+			return html`
+				<div class="ui5-with-static-area-content">
+					Static area content.
+				</div>`;
+		};
+	}
+
+	static get styles() {
+		return `
+			:host {
+				display: inline-block;
+				border: 1px solid black;
+				color: red;
+			}`;
+	}
+
+	async addStaticArea() {
+		if (!this.staticContent) {
+			return;
+		}
+
+		// Require static area item
+		const staticArea = await this.getStaticAreaItemDomRef();
+		this.responsivePopover = staticArea.querySelector(".ui5-with-static-area-content");
+		return this.responsivePopover;
+	}
+
+	onBeforeRendering() {
+		this.addStaticArea();
+	}
+	onAfterRendering() {}
+	onEnterDOM() {}
+	onExitDOM() {}
+}
+
+WithStaticArea.define();
+
+export default WithStaticArea;

package/dist/test-resources/pages/AllTestElements.html

@@ -6,10 +6,7 @@
 
     <title>Base package default test page</title>
 
-    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
 	<script src="../../resources/bundle.esm.js" type="module"></script>
-    <script nomodule src="../../resources/bundle.es5.js"></script>
-
 </head>
 
 <body>
@@ -34,9 +31,12 @@
         <ui5-test-child id="child2" slot="items" prop1="old" prop2="old" prop3="old"></ui5-test-child>
     </ui5-test-parent>
 
-    <ui5-test-density-aware id="aware"></ui5-test-density-aware>
-
     <ui5-test-generic-ext id="genExt"></ui5-test-generic-ext>
 
+    <ui5-with-static-area id="no-static-area"></ui5-with-static-area>
+    <ui5-with-static-area id="with-static-area" static-content></ui5-with-static-area>
+    <div id="with-static-area-rtl-container" dir="rtl">
+        <ui5-with-static-area id="with-static-area-rtl" static-content></ui5-with-static-area>
+    </div>
 </body>
 </html>

package/dist/test-resources/pages/Configuration.html

@@ -6,9 +6,7 @@
 
     <title>Base package default test page</title>
 
-    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
 	<script src="../../resources/bundle.esm.js" type="module"></script>
-    <script nomodule src="../../resources/bundle.es5.js"></script>
 
 </head>
 

package/dist/test-resources/pages/ConfigurationScript.html

@@ -10,7 +10,6 @@
         {
             "animationMode": "basic",
             "rtl": true,
-            "compactSize": true,
             "language": "ja",
             "calendarType": "Japanese",
             "formatSettings": {
@@ -18,14 +17,12 @@
             },
             "theme": "sap_belize_hcb",
             "noConflict": {
-                "events": ["selectionChange", "headerClick"]
+                "events": ["selection-change", "header-click"]
             }
         }
     </script>
 
-    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
 	<script src="../../resources/bundle.esm.js" type="module"></script>
-    <script nomodule src="../../resources/bundle.es5.js"></script>
 
 </head>
 

package/dist/test-resources/pages/assets/messagebundle_de.properties

@@ -0,0 +1 @@
+PLEASE_WAIT=Bitte warten

package/dist/test-resources/pages/assets/messagebundle_en.properties

@@ -0,0 +1 @@
+PLEASE_WAIT=Please wait

package/dist/test-resources/pages/assets/messagebundle_es.properties

@@ -0,0 +1 @@
+PLEASE_WAIT=Espere

package/dist/test-resources/pages/assets/messagebundle_fr.properties

@@ -0,0 +1 @@
+PLEASE_WAIT=Patientez.

package/dist/test-resources/pages/i18n.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+
+	<title>i18n</title>
+
+	<script src="../../resources/bundle.esm.js" ></script>
+
+</head>
+
+<body>
+
+	<script>
+
+		const demo = async () => {
+			["de", "es", "fr", "en"].forEach(localeId => registerI18nLoader("myApp", localeId, () => `./assets/messagebundle_${localeId}.properties`));
+
+			const bundle = await getI18nBundle("myApp");
+
+			const pleaseWait = bundle.getText("PLEASE_WAIT");
+			console.log("Please wait in the current language is: ", pleaseWait);
+		};
+
+		demo();
+
+
+	</script>
+
+
+</body>
+</html>

package/dist/test-resources/specs/ConfigurationChange.spec.js

@@ -1,34 +1,27 @@
 const assert = require("chai").assert;
 
 describe("Some configuration options can be changed at runtime", () => {
-	browser.url("http://localhost:9191/test-resources/pages/Configuration.html");
-
-	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");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/Configuration.html");
 	});
 
-	it("Tests that theme can be changed", () => {
+	it("Tests that theme can be changed", async () => {
 		const newTheme = 'sap_belize_hcb';
 
-		const res = browser.executeAsync( async (newTheme, done) => {
+		const res = await browser.executeAsync( async (newTheme, done) => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
 			await config.setTheme(newTheme);
-			return done(config.getTheme());
+			done(config.getTheme());
 		}, newTheme);
 		assert.strictEqual(res, newTheme, "Theme changed to HCB");
 	});
 
-	it("Tests that noConflict can be changed", () => {
-		const res = browser.execute( () => {
+	it("Tests that noConflict can be changed", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			config.setNoConflict({events: ["selectionChange"]});
-			return config.getNoConflict();
+			config.setNoConflict({events: ["selection-change"]});
+			done(config.getNoConflict());
 		});
-		assert.strictEqual(res.events.includes("selectionChange"), true, "selectionChange was successfully registered as a no conflict event");
+		assert.include(res.events, "selection-change", "selection-change was successfully registered as a no conflict event");
 	});
 });

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

@@ -1,68 +1,62 @@
 const assert = require("chai").assert;
 
 describe("Configuration script has effect", () => {
-	browser.url("http://localhost:9191/test-resources/pages/ConfigurationScript.html");
-
-	it("Tests that RTL is applied", () => {
-		const res = browser.execute( () => {
-			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getRTL();
-		});
-		assert.strictEqual(res, true, "RTL is true");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/ConfigurationScript.html?do-not-change-configuration");
 	});
 
-	it("Tests that compactSize is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that RTL is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getCompactSize();
+			done(config.getRTL());
 		});
-		assert.strictEqual(res, true, "compactSize is true");
+		assert.strictEqual(res, true, "RTL is true");
 	});
 
-	it("Tests that language is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that language is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getLanguage();
+			done(config.getLanguage());
 		});
 		assert.strictEqual(res, 'ja', "language is japanese");
 	});
 
-	it("Tests that calendarType is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that calendarType is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getCalendarType();
+			done(config.getCalendarType());
 		});
 		assert.strictEqual(res, 'Japanese', "calendarType is japanese");
 	});
 
-	it("Tests that formatSettings are applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that formatSettings are applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getFirstDayOfWeek();
+			done(config.getFirstDayOfWeek());
 		});
 		assert.strictEqual(res, 0, "First day of week is applied");
 	});
 
-	it("Tests that theme is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that theme is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getTheme();
+			done(config.getTheme());
 		});
 		assert.strictEqual(res, 'sap_belize_hcb', "Thems is HCB");
 	});
 
-	it("Tests that noConflict is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that noConflict is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getNoConflict();
+			done(config.getNoConflict());
 		});
-		assert.strictEqual(res.events.includes("selectionChange"), true, "selectionChange was successfully registered as a no conflict event");
+		assert.include(res.events, "selection-change", "selectionChange was successfully registered as a no conflict event");
 	});
 
-	it("Tests that animationMode is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that animationMode is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getAnimationMode();
+			done(config.getAnimationMode());
 		});
 		assert.strictEqual(res, 'basic', "animationMode is basic");
 	});

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

@@ -1,53 +1,93 @@
 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");
-
-	it("Tests that RTL is applied", () => {
-		const res = browser.execute( () => {
-			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getRTL();
-		});
-		assert.strictEqual(res, true, "RTL is true");
+describe("Some settings can be set via SAP UI URL params", () => {
+	before(async () => {
+		await 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");
 	});
 
-	it("Tests that compactSize is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that RTL is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getCompactSize();
+			done(config.getRTL());
 		});
-		assert.strictEqual(res, true, "compactSize is true");
+		assert.strictEqual(res, true, "RTL is true");
 	});
 
-	it("Tests that language is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that language is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getLanguage();
+			done(config.getLanguage());
 		});
 		assert.strictEqual(res, 'ja', "language is japanese");
 	});
 
-	it("Tests that calendarType is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that calendarType is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getCalendarType();
+			done(config.getCalendarType());
 		});
 		assert.strictEqual(res, 'Japanese', "calendarType is japanese");
 	});
 
-	it("Tests that theme is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that theme is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getTheme();
+			done(config.getTheme());
 		});
 		assert.strictEqual(res, 'sap_belize_hcb', "Thems is HCB");
 	});
 
-	it("Tests that animationMode is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that animationMode is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getAnimationMode();
+			done(config.getAnimationMode());
 		});
 		assert.strictEqual(res, 'basic', "animationMode is basic");
 	});
 });
+
+
+describe("Some settings can be set via SAP URL params", () => {
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-language=bg&sap-theme=sap_fiori_3_dark");
+	});
+
+	it("Tests that language is applied", async () => {
+		const res = await browser.executeAsync(done => {
+			const config = window['sap-ui-webcomponents-bundle'].configuration;
+			done(config.getLanguage());
+		});
+		assert.strictEqual(res, 'bg', "language is bulgarian");
+	});
+
+	it("Tests that theme is applied", async () => {
+		const res = await browser.executeAsync(done => {
+			const config = window['sap-ui-webcomponents-bundle'].configuration;
+			done(config.getTheme());
+		});
+		assert.strictEqual(res, 'sap_fiori_3_dark', "Thems is Fiori Dark");
+	});
+});
+
+
+describe("SAP UI params take precedence over the SAP params", () => {
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-language=bg&sap-ui-language=de&sap-theme=sap_fiori_3_dark&sap-theme=sap_fiori_3_hcb");
+	});
+
+	it("Tests that language is applied via sap-ui-language", async () => {
+		const res = await browser.executeAsync(done => {
+			const config = window['sap-ui-webcomponents-bundle'].configuration;
+			done(config.getLanguage());
+		});
+		assert.strictEqual(res, 'de', "language is german");
+	});
+
+	it("Tests that theme is applied via sap-ui-theme", async () => {
+		const res = await browser.executeAsync(done => {
+			const config = window['sap-ui-webcomponents-bundle'].configuration;
+			done(config.getTheme());
+		});
+		assert.strictEqual(res, 'sap_fiori_3_hcb', "Thems is Fiori HCB");
+	});
+});

package/dist/test-resources/specs/CustomTheme.spec.js

@@ -1,22 +1,24 @@
 const assert = require("chai").assert;
 
 describe("Custom themes can be registered", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	});
 
-	it("Tests that theme parameters are changed on theme change", () => {
+	it("Tests that theme parameters are changed on theme change", async () => {
 		const newTheme = 'my_custom_theme';
 
-		const res = browser.executeAsync( async (newTheme, done) => {
+		const res = await browser.executeAsync( async (newTheme, done) => {
 			const var1 = "--var1: #555555";
 
-			window.registerThemeProperties("@ui5/webcomponents-base-test", newTheme, `:root{ ${var1}; }`);
+			window.registerThemePropertiesLoader("@ui5/webcomponents-base-test", newTheme, () => `:root{ ${var1}; }`);
 
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
 			await config.setTheme(newTheme);
 
-			const style = document.querySelector(`style[data-ui5-theme-properties="@ui5/webcomponents-base-test"]`);
-			const varsFound = style && style.textContent.includes(var1);
-			return done(varsFound);
+			const style = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === "data-ui5-theme-properties|@ui5/webcomponents-base-test").cssRules[0].cssText;
+			const varsFound = style && style.includes(var1);
+			done(varsFound);
 		}, newTheme);
 
 		assert.strictEqual(res, true, "Theme parameters changed");

package/dist/test-resources/specs/EventProvider.spec.js

@@ -0,0 +1,63 @@
+const assert = require("chai").assert;
+
+describe("Event provider attaches and detaches listeners properly", () => {
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	});
+
+	it("Tests that listeners can be removed (1 listener)", async () => {
+
+		const res = await browser.executeAsync(done => {
+			let timesCalled = 0;
+			const ep = new window["sap-ui-webcomponents-bundle"].EventProvider();
+			const callback = () => {
+				timesCalled++;
+			};
+
+			// Setup
+			ep.attachEvent("test", callback);
+
+			// Act
+			ep.fireEvent("test"); // should execute the callback and increase the counter
+
+			// Setup
+			ep.detachEvent("test", callback);
+
+			// Act
+			ep.fireEvent("test"); // should not execute the callback and increase the counter
+
+			done(timesCalled);
+		});
+
+		assert.strictEqual(res, 1, "The callback should be called exactly once");
+	});
+
+	it("Tests that listeners can be removed (more than 1 listener)", async () => {
+
+		const res = await browser.executeAsync(done => {
+			let timesCalled = 0;
+			const ep = new window["sap-ui-webcomponents-bundle"].EventProvider();
+			const callback = () => {
+				timesCalled++;
+			};
+			const somePreviousCallback = () => {};
+
+			// Setup
+			ep.attachEvent("test", somePreviousCallback); // Attach something so that after detachEvent the listeners array is not empty!
+			ep.attachEvent("test", callback);
+
+			// Act
+			ep.fireEvent("test"); // should execute the callback and increase the counter
+
+			// Setup
+			ep.detachEvent("test", callback);
+
+			// Act
+			ep.fireEvent("test"); // should not execute the callback and increase the counter
+
+			done(timesCalled);
+		});
+
+		assert.strictEqual(res, 1, "The callback should be called exactly once");
+	});
+});