@ui5/webcomponents-base 2.1.1 → 2.2.0-rc.1

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.2.0-rc.0...v2.2.0-rc.1) (2024-08-15)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
+# [2.2.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.1.1...v2.2.0-rc.0) (2024-08-08)
+
+
+### Bug Fixes
+
+* **core:** invalidation no longer leaves component broken after error in onBeforeRendering ([#9635](https://github.com/SAP/ui5-webcomponents/issues/9635)) ([136bd5a](https://github.com/SAP/ui5-webcomponents/commit/136bd5acef5dcf25bb3ec9f46b66e33aa819f49a))
+* stop attribute change calling property setter when coming from a setter ([#9592](https://github.com/SAP/ui5-webcomponents/issues/9592)) ([95e61dd](https://github.com/SAP/ui5-webcomponents/commit/95e61ddc097658c49509889c8454901a8a8ef0b4))
+
+
+### Features
+
+* add `enableDefaultTooltips ` config option ([#9559](https://github.com/SAP/ui5-webcomponents/issues/9559)) ([a672788](https://github.com/SAP/ui5-webcomponents/commit/a6727880e9fc648a8999643a2d2dac4eaff5c58c)), closes [#9494](https://github.com/SAP/ui5-webcomponents/issues/9494)
+* **framework:** add `[@query](https://github.com/query)(All)` decorators ([#9567](https://github.com/SAP/ui5-webcomponents/issues/9567)) ([242024c](https://github.com/SAP/ui5-webcomponents/commit/242024c38a0703809840cd0c9ef9e38a4b2613c8)), closes [#6743](https://github.com/SAP/ui5-webcomponents/issues/6743)
+
+
+
+
+
 ## [2.1.1](https://github.com/SAP/ui5-webcomponents/compare/v2.1.0...v2.1.1) (2024-08-02)
 
 **Note:** Version bump only for package @ui5/webcomponents-base

package/cypress/specs/Accessor.cy.ts

@@ -0,0 +1,83 @@
+import "../../test/test-elements/Accessor.js";
+
+describe("Framework boot", () => {
+	it("Setting property updates attribute, state and DOM", () => {
+		cy.mount(`<ui5-test-accessor></ui5-test-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")
+			.invoke("prop", "storage")
+			.should("be.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")
+			.invoke("prop", "storage")
+			.should("be.false");
+	});
+
+	it("Setting attribute updates property, state and DOM", () => {
+		cy.mount(`<ui5-test-accessor></ui5-test-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")
+			.invoke("prop", "storage")
+			.should("be.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")
+			.invoke("prop", "storage")
+			.should("be.false");
+	});
+
+	it("should stop searching for accessors when HTMLElement is reached", () => {
+		cy.mount(`<ui5-test-accessor></ui5-test-accessor>`);
+
+		cy.get("[ui5-test-accessor]")
+			.invoke("prop", "title")
+			.should("be.undefined");
+	});
+});

package/cypress/specs/Boot.cy.ts

@@ -0,0 +1,23 @@
+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({
+					content: `:root{ --customCol: #fff; --customBg: #000; }`,
+					packageName: "",
+					fileName: "",
+				});
+			});
+
+		cy.wrap({ hasStyle })
+			.invoke("hasStyle", "data-ui5-theme-properties", "@ui5/webcomponents-theming")
+			.should("be.true");
+	});
+});

package/cypress/specs/ConfigurationChange.cy.ts

@@ -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.ts

@@ -0,0 +1,116 @@
+import { getAnimationMode } from "../../src/config/AnimationMode.js";
+import { getCalendarType } from "../../src/config/CalendarType.js";
+import { getDefaultFontLoading } from "../../src/config/Fonts.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.mount(`<ui5-test-generic></ui5-test-generic>`, {
+			ui5Configuration: configurationObject,
+		});
+
+		cy.wrap({ resetConfiguration })
+			.invoke("resetConfiguration", true);
+
+		cy.get("script[data-ui5-config]")
+			.should("exist")
+			.then($el => {
+				return $el.get(0).innerHTML;
+			})
+			.should("equal", JSON.stringify(configurationObject));
+	});
+
+	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.ts

@@ -0,0 +1,182 @@
+import { internals } from "../../src/Location.js";
+import "../../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 { 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(`<ui5-test-generic></ui5-test-generic>`);
+	});
+
+	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", "basic");
+	});
+});
+
+describe("Different themeRoot configurations", () => {
+	it("Allowed theme root", () => {
+		const searchParams = "sap-ui-theme=sap_horizon_hcb@https://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(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.wrap({ getThemeRoot })
+			.invoke("getThemeRoot")
+			.should("equal", "https://example.com/UI5/");
+	});
+
+	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(`<ui5-test-generic></ui5-test-generic>`);
+
+		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(`<ui5-test-generic></ui5-test-generic>`);
+
+		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(`<ui5-test-generic></ui5-test-generic>`);
+	});
+
+	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(`<ui5-test-generic></ui5-test-generic>`);
+	});
+
+	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.ts

@@ -0,0 +1,34 @@
+import { getAnimationMode } from "../../src/config/AnimationMode.js";
+
+describe("Custom mount", () => {
+	it("mount", () => {
+		cy.mount(`<button>Test</button>`);
+
+		cy.get("button")
+			.should("exist")
+			.and("have.text", "Test");
+	});
+
+	it("mount with configuration", () => {
+		const configurationObject = { "animationMode": "basic" };
+
+		cy.mount(`<button>Test with configuration</button>`, {
+			ui5Configuration: configurationObject,
+		});
+
+		cy.get("button")
+			.should("exist")
+			.and("have.text", "Test with configuration");
+
+		cy.get("script[data-ui5-config]")
+			.should("exist")
+			.then($el => {
+				return $el.get(0).innerHTML;
+			})
+			.should("equal", JSON.stringify(configurationObject));
+
+		cy.wrap({ getAnimationMode })
+			.invoke("getAnimationMode")
+			.should("equal", configurationObject.animationMode);
+	});
+});

package/cypress/specs/CustomTheme.cy.ts

@@ -0,0 +1,36 @@
+import { registerThemePropertiesLoader } from "../../src/AssetRegistry.js";
+import { setTheme } from "../../src/config/Theme.js";
+import { getCurrentRuntimeIndex } from "../../src/Runtimes.js";
+import "../../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(`<ui5-test-generic></ui5-test-generic>`);
+
+		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.ts

@@ -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/SystemDOMElements.cy.ts

@@ -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");
+	});
+});