@ui5/webcomponents-base 0.0.0-e55c2cec6 → 0.0.0-e5b03d3e8

package/README.md

@@ -1,6 +1,4 @@
-![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
-
-# UI5 Web Components - Base
+# ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_water.png)UI5 Web Components - Base
 
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 
@@ -19,9 +17,6 @@ Contains the base files for all Web Components, most notably `@ui5/webcomponents
  Components    | `import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js"`| Applies direction ("ltr"/"rtl") - re-renders all RTL-aware components     |
  Components    | `import { setCustomElementsScopingSuffix } from "@ui5/webcomponents-base/dist/CustomElementsScope.js"`| Adds suffix to the tag names of all components          |
  Components    | `@ui5/webcomponents-base/dist/util/InvisibleMessage.js`   | Provides a way to expose dynamic content changes that can be announced by screen readers   |
- CSP compliance| `import { setPackageCSSRoot } from "@ui5/webcomponents-base/dist/CSP.js"`| Sets directory path where the CSS resources for given package will be served from    |
- CSP compliance| `import { setUseLinks } from "@ui5/webcomponents-base/dist/CSP.js"`      | Enables or disables the usage of `<link>` tags instead of `<style>` tags             |
- CSP compliance| `import { setPreloadLinks } from "@ui5/webcomponents-base/dist/CSP.js"`  | Enables or disables the preloading of `<link>` tags                                  |
 
 ### `applyDirection.js`
 - `applyDirection`
@@ -37,10 +32,9 @@ Contains the base files for all Web Components, most notably `@ui5/webcomponents
  - `setCustomElementsScopingRules`
  - `getCustomElementsScopingRules`
 
-###  `CSP.js`
- - `setPackageCSSRoot` 
- - `setUseLinks`
- - `setPreloadLinks`
+### `IgnoreCustomElements.js`
+
+ - `ignoreCustomElements`
 
 ### `i18nBundle.js`
 
@@ -58,10 +52,10 @@ Contains the base files for all Web Components, most notably `@ui5/webcomponents
 ## Resources
 - [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
 - [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
-- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
+- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/play/)
 
 ## Support
-We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
+We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).
 
 ## Contribute
 Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/docs/6-contributing/02-conventions-and-guidelines.md).

package/cypress/specs/Accessor.cy.tsx

@@ -0,0 +1,79 @@
+import Accessor from "../../test/test-elements/Accessor.js";
+
+describe("Framework boot", () => {
+	it("Setting property updates attribute, state and DOM", () => {
+		cy.mount(<Accessor></Accessor>);
+
+		cy.get("[ui5-test-accessor]")
+			.as("testAccessor")
+			.invoke("prop", "myProp", true);
+
+		cy.get("@testAccessor")
+			.should("have.attr", "my-prop");
+
+		cy.get("@testAccessor")
+			.shadow()
+			.find("div")
+			.should("have.text", "true");
+
+		cy.get("@testAccessor")
+			.should("have.prop", "storage", true);
+
+		cy.get("[ui5-test-accessor]")
+			.as("testAccessor")
+			.invoke("prop", "myProp", false);
+
+		cy.get("@testAccessor")
+			.should("not.have.attr", "my-prop");
+
+		cy.get("@testAccessor")
+			.shadow()
+			.find("div")
+			.should("have.text", "false");
+
+		cy.get("@testAccessor")
+			.should("have.prop", "storage", false);
+	});
+
+	it("Setting attribute updates property, state and DOM", () => {
+		cy.mount(<Accessor></Accessor>);
+
+		cy.get("[ui5-test-accessor]")
+			.as("testAccessor")
+			.invoke("attr", "my-prop", "");
+
+		cy.get("@testAccessor")
+			.should("have.attr", "my-prop");
+
+		cy.get("@testAccessor")
+			.shadow()
+			.find("div")
+			.should("have.text", "true");
+
+		cy.get("@testAccessor")
+			.should("have.prop", "storage", true);
+
+		cy.get("[ui5-test-accessor]")
+			.as("testAccessor")
+			.invoke("removeAttr", "my-prop");
+
+		cy.get("@testAccessor")
+			.should("not.have.attr", "my-prop");
+
+		cy.get("@testAccessor")
+			.shadow()
+			.find("div")
+			.should("have.text", "false");
+
+		cy.get("@testAccessor")
+			.should("have.prop", "storage", false);
+	});
+
+	it("should stop searching for accessors when HTMLElement is reached", () => {
+		cy.mount(<Accessor></Accessor>);
+
+		cy.get("[ui5-test-accessor]")
+			.invoke("prop", "title")
+			.should("be.undefined");
+	});
+});

package/cypress/specs/Boot.cy.tsx

@@ -0,0 +1,19 @@
+import { registerThemePropertiesLoader } from "../../src/AssetRegistry.js";
+import { boot } from "../../src/Boot.js";
+import { hasStyle } from "../../src/ManagedStyles.js";
+
+describe("Framework boot", () => {
+	it("Tests theme loading, when registered after 'attachBoot' and 'boot'", () => {
+		cy.wrap({ boot })
+			.invoke("boot");
+
+		cy.wrap({ registerThemePropertiesLoader })
+			.invoke("registerThemePropertiesLoader", "@ui5/webcomponents-theming", "sap_horizon", () => {
+				return Promise.resolve(`:root{ --customCol: #fff; --customBg: #000; }`);
+			});
+
+		cy.wrap({ hasStyle })
+			.invoke("hasStyle", "data-ui5-theme-properties", "@ui5/webcomponents-theming")
+			.should("be.true");
+	});
+});

package/cypress/specs/ConfigurationChange.cy.tsx

@@ -0,0 +1,41 @@
+import "../../test/test-elements/Accessor.js";
+import { setTheme, getTheme } from "../../src/config/Theme.js";
+import { setThemeRoot, getThemeRoot } from "../../src/config/ThemeRoot.js";
+import { setNoConflict, getNoConflict } from "../../src/config/NoConflict.js";
+
+describe("Some configuration options can be changed at runtime", () => {
+	it("Tests that theme can be changed", () => {
+		const newTheme = "sap_horizon_hcb";
+
+		cy.wrap({ setTheme })
+			.invoke("setTheme", newTheme);
+
+		cy.wrap({ getTheme })
+			.invoke("getTheme")
+			.should("equal", newTheme);
+	});
+
+	it("Tests that noConflict can be changed", () => {
+		const noConflictObject = { events: ["selection-change"] };
+
+		cy.wrap({ setNoConflict })
+			.invoke("setNoConflict", noConflictObject);
+
+		cy.wrap({ getNoConflict })
+			.invoke("getNoConflict")
+			.should("deep.equal", noConflictObject)
+			.its("events")
+			.should("deep.equal", noConflictObject.events);
+	});
+
+	it("Tests that theme root is applied", () => {
+		const newThemeRoot = "https://example.com/";
+
+		cy.wrap({ setThemeRoot })
+			.invoke("setThemeRoot", newThemeRoot);
+
+		cy.wrap({ getThemeRoot })
+			.invoke("getThemeRoot")
+			.should("deep.equal", newThemeRoot);
+	});
+});

package/cypress/specs/ConfigurationScript.cy.tsx

@@ -0,0 +1,133 @@
+import { getAnimationMode } from "../../src/config/AnimationMode.js";
+import { getCalendarType } from "../../src/config/CalendarType.js";
+import { getDefaultFontLoading } from "../../src/config/Fonts.js";
+import TestGeneric from "../../test/test-elements/Generic.js";
+import { getFirstDayOfWeek, getLegacyDateCalendarCustomizing } from "../../src/config/FormatSettings.js";
+import { getLanguage } from "../../src/config/Language.js";
+import { getNoConflict } from "../../src/config/NoConflict.js";
+import { getTheme } from "../../src/config/Theme.js";
+import { getEnableDefaultTooltips } from "../../src/config/Tooltips.js";
+import { resetConfiguration } from "../../src/InitialConfiguration.js";
+
+describe("Configuration script", () => {
+	const configurationObject = {
+		"theme": "sap_horizon_hcb",
+		"animationMode": "basic",
+		"rtl": true,
+		"language": "ja",
+		"calendarType": "Japanese",
+		"formatSettings": {
+			"firstDayOfWeek": 0,
+			"legacyDateCalendarCustomizing": [
+				{
+					"dateFormat": "A",
+					"islamicMonthStart": "14351201",
+					"gregDate": "20140925",
+				},
+				{
+					"dateFormat": "A",
+					"islamicMonthStart": "14360101",
+					"gregDate": "20141024",
+				},
+				{
+					"dateFormat": "A",
+					"islamicMonthStart": "14360201",
+					"gregDate": "20141123",
+				},
+			],
+		},
+		"noConflict": {
+			"events": ["selection-change", "header-click"],
+		},
+		"defaultFontLoading": false,
+		"enableDefaultTooltips": false,
+	};
+
+	before(() => {
+		cy.window()
+			.then($el => {
+				const scriptElement = document.createElement("script");
+				scriptElement.type = "application/json";
+				scriptElement.setAttribute("data-ui5-config", "true");
+				scriptElement.innerHTML = JSON.stringify(configurationObject);
+				return $el.document.head.append(scriptElement);
+			})
+
+
+		cy.wrap({ resetConfiguration })
+			.invoke("resetConfiguration", true);
+
+		cy.mount(<TestGeneric />);
+		cy.get("script[data-ui5-config]")
+			.should("exist")
+			.then($el => {
+				return $el.get(0)?.innerHTML;
+			})
+			.should("equal", JSON.stringify(configurationObject));
+	});
+
+	after(() => {
+		cy.window()
+			.then($el => {
+				const scriptElement = $el.document.head.querySelector("script[data-ui5-config]");
+
+				scriptElement?.remove();
+			})
+	})
+
+	it("getLanguage", () => {
+		cy.wrap({ getLanguage })
+			.invoke("getLanguage")
+			.should("equal", configurationObject.language);
+	});
+
+	it("getCalendarType", () => {
+		cy.wrap({ getCalendarType })
+			.invoke("getCalendarType")
+			.should("equal", configurationObject.calendarType);
+	});
+
+	it("getFirstDayOfWeek", () => {
+		cy.wrap({ getFirstDayOfWeek })
+			.invoke("getFirstDayOfWeek")
+			.should("equal", configurationObject.formatSettings.firstDayOfWeek);
+	});
+
+	it("getLegacyDateCalendarCustomizing", () => {
+		cy.wrap({ getLegacyDateCalendarCustomizing })
+			.invoke("getLegacyDateCalendarCustomizing")
+			.should("deep.equal", configurationObject.formatSettings.legacyDateCalendarCustomizing);
+	});
+
+	it("getAnimationMode", () => {
+		cy.wrap({ getAnimationMode })
+			.invoke("getAnimationMode")
+			.should("equal", configurationObject.animationMode);
+	});
+
+	it("getEnableDefaultTooltips", () => {
+		cy.wrap({ getTheme })
+			.invoke("getTheme")
+			.should("equal", configurationObject.theme);
+	});
+
+	it("getNoConflict", () => {
+		cy.wrap({ getNoConflict })
+			.invoke("getNoConflict")
+			.should("deep.equal", configurationObject.noConflict)
+			.its("events")
+			.should("deep.equal", configurationObject.noConflict.events);
+	});
+
+	it("getDefaultFontLoading", () => {
+		cy.wrap({ getDefaultFontLoading })
+			.invoke("getDefaultFontLoading")
+			.should("equal", false);
+	});
+
+	it("getEnableDefaultTooltips", () => {
+		cy.wrap({ getEnableDefaultTooltips })
+			.invoke("getEnableDefaultTooltips")
+			.should("equal", false);
+	});
+});

package/cypress/specs/ConfigurationURL.cy.tsx

@@ -0,0 +1,201 @@
+import { internals } from "../../src/Location.js";
+import TestGeneric from "../../test/test-elements/Generic.js";
+import { resetConfiguration } from "../../src/InitialConfiguration.js";
+import { getLanguage } from "../../src/config/Language.js";
+import { getCalendarType } from "../../src/config/CalendarType.js";
+import { getTheme } from "../../src/config/Theme.js";
+import { getAnimationMode } from "../../src/config/AnimationMode.js";
+import AnimationMode from "../../src/types/AnimationMode.js";
+import { getThemeRoot } from "../../src/config/ThemeRoot.js";
+
+describe("Some settings can be set via SAP UI URL params", () => {
+	before(() => {
+		const searchParams = "sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_horizon_hcb&sap-ui-animationMode=basic";
+
+		cy.stub(internals, "search", () => {
+			return searchParams;
+		});
+
+		cy.then(() => {
+			return resetConfiguration(true);
+		});
+
+		cy.wrap(internals)
+			.invoke("search")
+			.should("be.equal", searchParams);
+
+		cy.mount(<TestGeneric />);
+	});
+
+	it("Tests that language is applied", () => {
+		cy.wrap({ getLanguage })
+			.invoke("getLanguage")
+			.should("equal", "ja");
+	});
+
+	it("Tests that calendarType is applied", () => {
+		cy.wrap({ getCalendarType })
+			.invoke("getCalendarType")
+			.should("equal", "Japanese");
+	});
+
+	it("Tests that theme is applied", () => {
+		cy.wrap({ getTheme })
+			.invoke("getTheme")
+			.should("equal", "sap_horizon_hcb");
+	});
+
+	it("Tests that animationMode is applied", () => {
+		cy.wrap({ getAnimationMode })
+			.invoke("getAnimationMode")
+			.should("equal", AnimationMode.Basic);
+	});
+});
+
+describe("Different themeRoot configurations", () => {
+	it("Allowed theme root", () => {
+		const searchParams = "sap-ui-theme=sap_horizon_hcb@https://example.com";
+
+		// All allowed theme roots need to be described inside the meta tag.
+		cy.window()
+			.then($el => {
+				const metaTag = document.createElement("meta");
+				metaTag.name = "sap-allowedThemeOrigins";
+				metaTag.content = "https://example.com";
+
+				$el.document.head.append(metaTag);
+			})
+
+		cy.stub(internals, "search", () => {
+			return searchParams;
+		});
+
+		cy.wrap({ resetConfiguration })
+			.invoke("resetConfiguration", true);
+
+		cy.wrap(internals)
+			.invoke("search")
+			.should("be.equal", searchParams);
+
+		cy.mount(<TestGeneric />);
+
+		cy.wrap({ getThemeRoot })
+			.invoke("getThemeRoot")
+			.should("equal", "https://example.com/UI5/");
+
+		// All allowed theme roots need to be described inside the meta tag.
+		cy.window()
+			.then($el => {
+				const metaTag = $el.document.head.querySelector("[name='sap-allowedThemeOrigins']");
+
+				metaTag?.remove();
+			})
+	});
+
+	it("Unallowed theme root", () => {
+		const searchParams = "sap-ui-theme=sap_horizon_hcb@https://another-example.com";
+
+		cy.stub(internals, "search", () => {
+			return searchParams;
+		});
+
+		cy.wrap({ resetConfiguration })
+			.invoke("resetConfiguration", true);
+
+		cy.wrap(internals)
+			.invoke("search")
+			.should("be.equal", searchParams);
+
+		cy.mount(<TestGeneric />);
+
+		cy.wrap({ getThemeRoot })
+			.invoke("getThemeRoot")
+			.should("equal", `${window.location.origin}/UI5/`);
+	});
+
+	it("Relative theme root", () => {
+		const searchParams = "sap-ui-theme=sap_horizon_hcb@./test";
+
+		cy.stub(internals, "search", () => {
+			return searchParams;
+		});
+
+		cy.wrap({ resetConfiguration })
+			.invoke("resetConfiguration", true);
+
+		cy.wrap(internals)
+			.invoke("search")
+			.should("be.equal", searchParams);
+
+		cy.mount(<TestGeneric />);
+
+		cy.wrap({ getThemeRoot })
+			.invoke("getThemeRoot")
+			.then(themeRoot => {
+				return themeRoot?.endsWith("/test/UI5/");
+			})
+			.should("be.true");
+	});
+});
+
+describe("Some settings can be set via SAP URL params", () => {
+	before(() => {
+		const searchParams = "sap-language=bg&sap-theme=sap_fiori_3_dark";
+
+		cy.stub(internals, "search", () => {
+			return searchParams;
+		});
+
+		cy.wrap({ resetConfiguration })
+			.invoke("resetConfiguration", true);
+
+		cy.wrap(internals)
+			.invoke("search")
+			.should("be.equal", searchParams);
+
+		cy.mount(<TestGeneric />);
+	});
+
+	it("Tests that language is applied via sap-ui-language", () => {
+		cy.wrap({ getLanguage })
+			.invoke("getLanguage")
+			.should("equal", "bg");
+	});
+
+	it("Tests that theme is applied via sap-ui-theme", () => {
+		cy.wrap({ getTheme })
+			.invoke("getTheme")
+			.should("equal", "sap_fiori_3_dark");
+	});
+});
+
+describe("Some settings can be set via SAP UI URL params", () => {
+	before(() => {
+		const searchParams = "sap-language=bg&sap-ui-language=de&sap-theme=sap_fiori_3_dark&sap-theme=sap_fiori_3_hcb";
+
+		cy.stub(internals, "search", () => {
+			return searchParams;
+		});
+
+		cy.wrap({ resetConfiguration })
+			.invoke("resetConfiguration", true);
+
+		cy.wrap(internals)
+			.invoke("search")
+			.should("be.equal", searchParams);
+
+		cy.mount(<TestGeneric />);
+	});
+
+	it("Tests that language is applied via sap-ui-language", () => {
+		cy.wrap({ getLanguage })
+			.invoke("getLanguage")
+			.should("equal", "de");
+	});
+
+	it("Tests that theme is applied via sap-ui-theme", () => {
+		cy.wrap({ getTheme })
+			.invoke("getTheme")
+			.should("equal", "sap_fiori_3_hcb");
+	});
+});

package/cypress/specs/CustomMount.cy.tsx

@@ -0,0 +1,9 @@
+describe("Custom mount", () => {
+	it("mount", () => {
+		cy.mount(<button>Test</button>);
+
+		cy.get("button")
+			.should("exist")
+			.and("have.text", "Test");
+	});
+});

package/cypress/specs/CustomTheme.cy.tsx

@@ -0,0 +1,36 @@
+import { registerThemePropertiesLoader } from "../../src/AssetRegistry.js";
+import { setTheme } from "../../src/config/Theme.js";
+import { getCurrentRuntimeIndex } from "../../src/Runtimes.js";
+import TestGeneric from "../../test/test-elements/Generic.js";
+
+describe("Custom themes can be registered", () => {
+	it("Tests that theme parameters are changed on theme change", () => {
+		const newTheme = "my_custom_theme";
+		const var1 = "--var1: #555555";
+		const currentRuntime = 0;
+		const dataPropAttr = `data-ui5-component-properties-${currentRuntime}`;
+
+		cy.mount(<TestGeneric />);
+
+		cy.wrap({ getCurrentRuntimeIndex })
+			.invoke("getCurrentRuntimeIndex")
+			.should("equal", currentRuntime);
+
+		cy.wrap({ registerThemePropertiesLoader })
+			.invoke("registerThemePropertiesLoader", "@ui5/webcomponents-base-test", newTheme, () => Promise.resolve(`:root{ ${var1}; }`));
+
+		cy.wrap({ setTheme })
+			.invoke("setTheme", newTheme);
+
+		cy.document()
+			.its("adoptedStyleSheets")
+			.then(adoptedStyleSheets => {
+				// eslint-disable-next-line
+				return adoptedStyleSheets.find(sh => (sh as Record<string, any>)._ui5StyleId === `${dataPropAttr}|@ui5/webcomponents-base-test`);
+			})
+			.its("cssRules")
+			.its(0)
+			.its("cssText")
+			.should("include", var1);
+	});
+});

package/cypress/specs/EventProvider.cy.tsx

@@ -0,0 +1,59 @@
+import EventProvider from "../../src/EventProvider.js";
+
+describe("Event provider attaches and detaches listeners properly", () => {
+	it("Tests that listeners can be removed (1 listener)", () => {
+		let timesCalled = 0;
+
+		cy.then(() => {
+			const ep = new EventProvider();
+			const callback = () => {
+				timesCalled++;
+			};
+
+			// Setup
+			ep.attachEvent("test", callback);
+
+			// Act
+			ep.fireEvent("test", undefined); // should execute the callback and increase the counter
+
+			// Setup
+			ep.detachEvent("test", callback);
+
+			// Act
+			ep.fireEvent("test", undefined); // should not execute the callback and increase the counter
+		})
+			.then(() => {
+				return timesCalled;
+			})
+			.should("equal", 1);
+	});
+
+	it("Tests that listeners can be removed (more than 1 listener)", () => {
+		let timesCalled = 0;
+
+		cy.then(() => {
+			const ep = new 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", undefined); // should execute the callback and increase the counter
+
+			// Setup
+			ep.detachEvent("test", callback);
+
+			// Act
+			ep.fireEvent("test", undefined); // should not execute the callback and increase the counter
+		})
+			.then(() => {
+				return timesCalled;
+			})
+			.should("equal", 1);
+	});
+});

package/cypress/specs/Events.cy.tsx

@@ -0,0 +1,28 @@
+import EventsConsumer from "../../test/test-elements/Events.js";
+import type { Events } from "../../test/test-elements/Events.js";
+
+describe("Event provider attaches and detaches listeners properly", () => {
+	it("Tests that attaching camelCase and kebab-case events in templates works", () => {
+		cy.mount(<EventsConsumer></EventsConsumer>);
+		cy.get<EventsConsumer>("[ui5-test-events-consumer]")
+			.as("eventsConsumer");
+
+		cy.get("@eventsConsumer")
+			.shadow()
+			.find("[ui5-test-events]")
+			.then(elements => {
+				(elements[0] as Events).fireKebaCaseEvent();
+			});
+		cy.get("@eventsConsumer")
+			.should("have.prop", "kebabCaseFired", true);
+
+		cy.get("@eventsConsumer")
+			.shadow()
+			.find("[ui5-test-events]")
+			.then(elements => {
+				(elements[0] as Events).fireCamelCaseEvent();
+			});
+		cy.get("@eventsConsumer")
+			.should("have.prop", "camelCaseFired", true);
+	});
+});

package/cypress/specs/SystemDOMElements.cy.tsx

@@ -0,0 +1,8 @@
+import "../../test/test-elements/Accessor.js";
+
+describe("Shared Resources", () => {
+	it("Tests the presense of the shared resources 'meta' element", () => {
+		cy.get(`meta[name="ui5-shared-resources"]`)
+			.should("exist");
+	});
+});