@ui5/webcomponents-base 0.0.0-ca2fa23d3 → 0.0.0-cad512aa3

package/dist/config/Theme.js

@@ -1,24 +1,63 @@
 import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
-import { _applyTheme } from "../Theming.js";
-
-let theme = getConfiguredTheme();
-
+import { reRenderAllUI5Elements } from "../Render.js";
+import applyTheme from "../theming/applyTheme.js";
+import { DEFAULT_THEME } from "../generated/AssetParameters.js";
+let curTheme;
+/**
+ * Returns the current theme.
+ * @public
+ * @returns {string} the current theme name
+ */
 const getTheme = () => {
-	return theme;
+    if (curTheme === undefined) {
+        curTheme = getConfiguredTheme();
+    }
+    return curTheme;
 };
-
-const setTheme = async newTheme => {
-	if (theme === newTheme) {
-		return;
-	}
-
-	theme = newTheme;
-
-	// Update CSS Custom Properties
-	await _applyTheme(theme);
+/**
+ * Applies a new theme after fetching its assets from the network.
+ * @public
+ * @param {string} theme the name of the new theme
+ * @returns {Promise<void>} a promise that is resolved when the new theme assets have been fetched and applied to the DOM
+ */
+const setTheme = async (theme) => {
+    if (curTheme === theme) {
+        return;
+    }
+    curTheme = theme;
+    // Update CSS Custom Properties
+    await applyTheme(curTheme);
+    await reRenderAllUI5Elements({ themeAware: true });
 };
-
-export {
-	getTheme,
-	setTheme,
+/**
+ * Returns the default theme.
+ *
+ * Note: Default theme might be different than the configurated one.
+ *
+ * @public
+ * @returns {string}
+ */
+const getDefaultTheme = () => {
+    return DEFAULT_THEME;
 };
+/**
+ * Returns if the given theme name is the one currently applied.
+ * @private
+ * @param {string} theme
+ * @returns {boolean}
+ */
+const isTheme = (theme) => {
+    const currentTheme = getTheme();
+    return currentTheme === theme || currentTheme === `${theme}_exp`;
+};
+/**
+ * Returns if the current theme is part of given theme family.
+ * @private
+ * @param {string} theme the theme family
+ * @returns {boolean}
+ */
+const isThemeFamily = (theme) => {
+    return getTheme().startsWith(theme);
+};
+export { getTheme, setTheme, isTheme, isThemeFamily, getDefaultTheme, };
+//# sourceMappingURL=Theme.js.map

package/dist/config/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../src/config/Theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAEhE,IAAI,QAAgB,CAAC;AAErB;;;;GAIG;AACH,MAAM,QAAQ,GAAG,GAAW,EAAE;IAC7B,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC3B,QAAQ,GAAG,kBAAkB,EAAE,CAAC;KAChC;IAED,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,QAAQ,GAAG,KAAK,EAAE,KAAa,EAAiB,EAAE;IACvD,IAAI,QAAQ,KAAK,KAAK,EAAE;QACvB,OAAO;KACP;IAED,QAAQ,GAAG,KAAK,CAAC;IAEjB,+BAA+B;IAC/B,MAAM,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC3B,MAAM,sBAAsB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AACpD,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,eAAe,GAAG,GAAW,EAAE;IACpC,OAAO,aAAa,CAAC;AACtB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;IACjC,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC;IAChC,OAAO,YAAY,KAAK,KAAK,IAAI,YAAY,KAAK,GAAG,KAAK,MAAM,CAAC;AAClE,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE;IACvC,OAAO,QAAQ,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,OAAO,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,aAAa,EACb,eAAe,GACf,CAAC","sourcesContent":["import { getTheme as getConfiguredTheme } from \"../InitialConfiguration.js\";\nimport { reRenderAllUI5Elements } from \"../Render.js\";\nimport applyTheme from \"../theming/applyTheme.js\";\nimport { DEFAULT_THEME } from \"../generated/AssetParameters.js\";\n\nlet curTheme: string;\n\n/**\n * Returns the current theme.\n * @public\n * @returns {string} the current theme name\n */\nconst getTheme = (): string => {\n\tif (curTheme === undefined) {\n\t\tcurTheme = getConfiguredTheme();\n\t}\n\n\treturn curTheme;\n};\n\n/**\n * Applies a new theme after fetching its assets from the network.\n * @public\n * @param {string} theme the name of the new theme\n * @returns {Promise<void>} a promise that is resolved when the new theme assets have been fetched and applied to the DOM\n */\nconst setTheme = async (theme: string): Promise<void> => {\n\tif (curTheme === theme) {\n\t\treturn;\n\t}\n\n\tcurTheme = theme;\n\n\t// Update CSS Custom Properties\n\tawait applyTheme(curTheme);\n\tawait reRenderAllUI5Elements({ themeAware: true });\n};\n\n/**\n * Returns the default theme.\n *\n * Note: Default theme might be different than the configurated one.\n *\n * @public\n * @returns {string}\n */\nconst getDefaultTheme = (): string => {\n\treturn DEFAULT_THEME;\n};\n\n/**\n * Returns if the given theme name is the one currently applied.\n * @private\n * @param {string} theme\n * @returns {boolean}\n */\nconst isTheme = (theme: string) => {\n\tconst currentTheme = getTheme();\n\treturn currentTheme === theme || currentTheme === `${theme}_exp`;\n};\n\n/**\n * Returns if the current theme is part of given theme family.\n * @private\n * @param {string} theme the theme family\n * @returns {boolean}\n */\nconst isThemeFamily = (theme: string) => {\n\treturn getTheme().startsWith(theme);\n};\n\nexport {\n\tgetTheme,\n\tsetTheme,\n\tisTheme,\n\tisThemeFamily,\n\tgetDefaultTheme,\n};\n"]}

package/dist/config/ThemeRoots.d.ts

@@ -0,0 +1,4 @@
+declare const getThemeRoot: () => string | undefined;
+declare const setThemeRoot: (theme: string, newThemeRoot: string) => void;
+declare const attachCustomThemeStylesToHead: (theme: string) => Promise<void>;
+export { getThemeRoot, setThemeRoot, attachCustomThemeStylesToHead, };

package/dist/config/ThemeRoots.js

@@ -0,0 +1,28 @@
+import createLinkInHead from "../util/createLinkInHead.js";
+import validateThemeRoot from "../validateThemeRoot.js";
+import { getThemeRoot as getConfiguredThemeRoot } from "../InitialConfiguration.js";
+let themeRoot;
+const getThemeRoot = () => {
+    if (themeRoot === undefined) {
+        themeRoot = getConfiguredThemeRoot();
+    }
+    return themeRoot;
+};
+const setThemeRoot = (theme, newThemeRoot) => {
+    themeRoot = validateThemeRoot(newThemeRoot);
+    if (themeRoot) {
+        attachCustomThemeStylesToHead(theme);
+    }
+};
+const formatThemeLink = (theme) => {
+    return `${getThemeRoot()}Base/baseLib/${theme}/css_variables.css`; // theme root is always set.
+};
+const attachCustomThemeStylesToHead = async (theme) => {
+    const link = document.querySelector(`[sap-ui-webcomponents-theme="${theme}"]`);
+    if (link) {
+        document.head.removeChild(link);
+    }
+    await createLinkInHead(formatThemeLink(theme), { "sap-ui-webcomponents-theme": theme });
+};
+export { getThemeRoot, setThemeRoot, attachCustomThemeStylesToHead, };
+//# sourceMappingURL=ThemeRoots.js.map

package/dist/config/ThemeRoots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeRoots.js","sourceRoot":"","sources":["../../src/config/ThemeRoots.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAC3D,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,YAAY,IAAI,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEpF,IAAI,SAA6B,CAAC;AAElC,MAAM,YAAY,GAAG,GAAuB,EAAE;IAC7C,IAAI,SAAS,KAAK,SAAS,EAAE;QAC5B,SAAS,GAAG,sBAAsB,EAAE,CAAC;KACrC;IAED,OAAO,SAAS,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,YAAoB,EAAE,EAAE;IAC5D,SAAS,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAE5C,IAAI,SAAS,EAAE;QACd,6BAA6B,CAAC,KAAK,CAAC,CAAC;KACrC;AACF,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE;IACzC,OAAO,GAAG,YAAY,EAAG,gBAAgB,KAAK,oBAAoB,CAAC,CAAC,4BAA4B;AACjG,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,KAAK,EAAE,KAAa,EAAE,EAAE;IAC7D,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,gCAAgC,KAAK,IAAI,CAAC,CAAC;IAE/E,IAAI,IAAI,EAAE;QACT,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;KAChC;IAED,MAAM,gBAAgB,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,EAAE,4BAA4B,EAAE,KAAK,EAAE,CAAC,CAAC;AACzF,CAAC,CAAC;AAEF,OAAO,EACN,YAAY,EACZ,YAAY,EACZ,6BAA6B,GAC7B,CAAC","sourcesContent":["import createLinkInHead from \"../util/createLinkInHead.js\";\nimport validateThemeRoot from \"../validateThemeRoot.js\";\nimport { getThemeRoot as getConfiguredThemeRoot } from \"../InitialConfiguration.js\";\n\nlet themeRoot: string | undefined;\n\nconst getThemeRoot = (): string | undefined => {\n\tif (themeRoot === undefined) {\n\t\tthemeRoot = getConfiguredThemeRoot();\n\t}\n\n\treturn themeRoot;\n};\n\nconst setThemeRoot = (theme: string, newThemeRoot: string) => {\n\tthemeRoot = validateThemeRoot(newThemeRoot);\n\n\tif (themeRoot) {\n\t\tattachCustomThemeStylesToHead(theme);\n\t}\n};\n\nconst formatThemeLink = (theme: string) => {\n\treturn `${getThemeRoot()!}Base/baseLib/${theme}/css_variables.css`; // theme root is always set.\n};\n\nconst attachCustomThemeStylesToHead = async (theme: string) => {\n\tconst link = document.querySelector(`[sap-ui-webcomponents-theme=\"${theme}\"]`);\n\n\tif (link) {\n\t\tdocument.head.removeChild(link);\n\t}\n\n\tawait createLinkInHead(formatThemeLink(theme), { \"sap-ui-webcomponents-theme\": theme });\n};\n\nexport {\n\tgetThemeRoot,\n\tsetThemeRoot,\n\tattachCustomThemeStylesToHead,\n};\n"]}

package/dist/css/BusyIndicator.css

@@ -0,0 +1,80 @@
+.busy-indicator-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+.busy-indicator-overlay {
+    display: var(--ui5_web_components_busy_indicator_display);
+    position: absolute;
+    inset: 0;
+    background: var(--ui5_web_components_busy_indicator_background-color);
+    z-index: 99;
+}
+
+.busy-indicator-busy-area {
+    display: var(--ui5_web_components_busy_indicator_display);
+    position: absolute;
+    z-index: 99;
+    inset: 0;
+    justify-content: center;
+    align-items: center;
+    background-color: inherit;
+    flex-direction: column;
+    color: var(--_ui5_busy_indicator_color);
+}
+
+:host([__is-busy]) .busy-indicator-wrapper > :not(.busy-indicator-busy-area):not(.busy-indicator-overlay):not([busy-indicator-before-span]) {
+    --ui5_web_components_busy_indicator_display: none;
+}
+
+.busy-indicator-busy-area:focus {
+    outline: var(--_ui5_busy_indicator_focus_outline);
+    outline-offset: -.125rem;
+}
+
+.busy-indicator-circle {
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    background-color: currentColor;
+    border-radius: 50%;
+}
+
+.circle-animation-0 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+}
+
+.circle-animation-1 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+    animation-delay: 200ms;
+}
+
+.circle-animation-2 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+    animation-delay: 400ms;
+}
+
+.sapUiLocalBusy {
+	--ui5_web_components_busy_indicator_display: none;
+}
+
+.busy-indicator-wrapper [ui5-busy-indicator] {
+    display: none;
+}
+
+@keyframes grow {
+    0%, 50%, 100% {
+        -webkit-transform: scale(0.5);
+        -moz-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        transform: scale(0.5);
+    }
+
+    25% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+    }
+}

package/dist/css/FontFace.css

@@ -0,0 +1,66 @@
+@font-face {
+    font-family: "72";
+    font-style: normal;
+    font-weight: 400;
+    src: local("72"),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: "72full";
+    font-style: normal;
+    font-weight: 400;
+    src: local('72-full'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2");
+
+}
+
+@font-face {
+    font-family: "72";
+    font-style: normal;
+    font-weight: 700;
+    src: local('72-Bold'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: "72full";
+    font-style: normal;
+    font-weight: 700;
+    src: local('72-Bold-full'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: '72-Bold';
+    font-style: normal;
+    src: local('72-Bold'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: '72-Boldfull';
+    font-style: normal;
+    src: url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: '72-Light';
+    font-style: normal;
+    src: local('72-Light'),
+        url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: '72-Lightfull';
+    font-style: normal;
+    src: url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: "72Black";
+    font-style: bold;
+    font-weight: 900;
+    src: local('72Black'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2");
+}

package/dist/css/OverrideFontFace.css

@@ -0,0 +1,32 @@
+/**
+ * Some diacritics are supported by the 72 font:
+ *  * Grave
+ *  * Acute
+ *  * Circumflex
+ *  * Tilde
+ *
+ * However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
+ *  * Breve
+ *  * Horn
+ *  * Dot below
+ *  * Hook above
+ *
+ *
+ * Override for the characters that aren't covered by the '72' font to other system fonts
+ *
+ * U+0102-0103: A and a with Breve
+ * U+01A0-01A1: O and o with Horn
+ * U+01AF-01B0: U and u with Horn
+ * U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
+ *
+ */
+@font-face {
+    font-family: '72override';
+    unicode-range: U+0102-0103, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EB7, U+1EB8-1EC7, U+1EC8-1ECB, U+1ECC-1EE3, U+1EE4-1EF1, U+1EF4-1EF7;
+    src: local('Arial'), local('Helvetica'), local('sans-serif');
+}

package/dist/css/SystemCSSVars.css

@@ -0,0 +1,17 @@
+:root {
+    --_ui5_content_density:cozy;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+    --_ui5_content_density:compact;
+}
+
+[dir="rtl"] {
+    --_ui5_dir:rtl;
+}
+
+[dir="ltr"] {
+    --_ui5_dir:ltr;
+}

package/dist/decorators/customElement.d.ts

@@ -0,0 +1,23 @@
+import type UI5Element from "../UI5Element.js";
+import type { Renderer } from "../UI5Element.js";
+import type { TemplateFunction as Template } from "../renderer/executeTemplate.js";
+import type { ComponentStylesData as Styles } from "../types.js";
+/**
+ * Returns a custom element class decorator.
+ *
+ * @param { string | object } tagNameOrComponentSettings
+ * @returns { ClassDecorator }
+ */
+declare const customElement: (tagNameOrComponentSettings: string | {
+    tag?: string;
+    renderer?: Renderer;
+    styles?: Styles;
+    template?: Template;
+    dependencies?: Array<typeof UI5Element>;
+    staticAreaStyles?: Styles;
+    staticAreaTemplate?: Template;
+    languageAware?: boolean;
+    themeAware?: boolean;
+    fastNavigation?: boolean;
+}) => ClassDecorator;
+export default customElement;

package/dist/decorators/customElement.js

@@ -0,0 +1,31 @@
+/**
+ * Returns a custom element class decorator.
+ *
+ * @param { string | object } tagNameOrComponentSettings
+ * @returns { ClassDecorator }
+ */
+const customElement = (tagNameOrComponentSettings) => {
+    return (target) => {
+        if (!Object.prototype.hasOwnProperty.call(target, "metadata")) {
+            target.metadata = {};
+        }
+        if (typeof tagNameOrComponentSettings === "string") {
+            target.metadata.tag = tagNameOrComponentSettings;
+            return;
+        }
+        const { tag, languageAware = false, themeAware = false, fastNavigation = false, } = tagNameOrComponentSettings;
+        target.metadata.tag = tag;
+        target.metadata.languageAware = languageAware;
+        target.metadata.themeAware = themeAware;
+        target.metadata.fastNavigation = fastNavigation;
+        ["render", "renderer", "template", "staticAreaTemplate", "styles", "staticAreaStyles", "dependencies"].forEach((customElementEntity) => {
+            const _customElementEntity = customElementEntity === "render" ? "renderer" : customElementEntity;
+            const customElementEntityValue = tagNameOrComponentSettings[_customElementEntity];
+            customElementEntityValue && Object.defineProperty(target, customElementEntity, {
+                get: () => customElementEntityValue,
+            });
+        });
+    };
+};
+export default customElement;
+//# sourceMappingURL=customElement.js.map

package/dist/decorators/customElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sourceRoot":"","sources":["../../src/decorators/customElement.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CAAC,0BAWtB,EAAkB,EAAE;IACpB,OAAO,CAAC,MAAW,EAAE,EAAE;QACtB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE;YAC9D,MAAM,CAAC,QAAQ,GAAG,EAAE,CAAC;SACrB;QAED,IAAI,OAAO,0BAA0B,KAAK,QAAQ,EAAE;YACnD,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,0BAA0B,CAAC;YACjD,OAAO;SACP;QAED,MAAM,EACL,GAAG,EACH,aAAa,GAAG,KAAK,EACrB,UAAU,GAAG,KAAK,EAClB,cAAc,GAAG,KAAK,GACrB,GAAG,0BAA0B,CAAC;QAEhC,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;QAC1B,MAAM,CAAC,QAAQ,CAAC,aAAa,GAAG,aAAa,CAAC;QAC9C,MAAM,CAAC,QAAQ,CAAC,UAAU,GAAG,UAAU,CAAC;QACxC,MAAM,CAAC,QAAQ,CAAC,cAAc,GAAG,cAAc,CAAC;QAEhD,CAAC,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,oBAAoB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,mBAA2B,EAAE,EAAE;YAC9I,MAAM,oBAAoB,GAAG,mBAAmB,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC;YACjG,MAAM,wBAAwB,GAAG,0BAA0B,CAAC,oBAAwC,CAAC,CAAC;YAEtG,wBAAwB,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,mBAAmB,EAAE;gBAC9E,GAAG,EAAE,GAAG,EAAE,CAAC,wBAAwB;aACnC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import type UI5Element from \"../UI5Element.js\";\nimport type { Renderer } from \"../UI5Element.js\";\nimport type { TemplateFunction as Template } from \"../renderer/executeTemplate.js\";\nimport type { ComponentStylesData as Styles } from \"../types.js\";\n\n/**\n * Returns a custom element class decorator.\n *\n * @param { string | object } tagNameOrComponentSettings\n * @returns { ClassDecorator }\n */\nconst customElement = (tagNameOrComponentSettings: string | {\n\ttag?: string,\n\trenderer?: Renderer,\n\tstyles?: Styles,\n\ttemplate?: Template,\n\tdependencies?: Array<typeof UI5Element>,\n\tstaticAreaStyles?: Styles,\n\tstaticAreaTemplate?: Template,\n\tlanguageAware?: boolean,\n\tthemeAware?: boolean,\n\tfastNavigation?: boolean,\n}): ClassDecorator => {\n\treturn (target: any) => {\n\t\tif (!Object.prototype.hasOwnProperty.call(target, \"metadata\")) {\n\t\t\ttarget.metadata = {};\n\t\t}\n\n\t\tif (typeof tagNameOrComponentSettings === \"string\") {\n\t\t\ttarget.metadata.tag = tagNameOrComponentSettings;\n\t\t\treturn;\n\t\t}\n\n\t\tconst {\n\t\t\ttag,\n\t\t\tlanguageAware = false,\n\t\t\tthemeAware = false,\n\t\t\tfastNavigation = false,\n\t\t } = tagNameOrComponentSettings;\n\n\t\ttarget.metadata.tag = tag;\n\t\ttarget.metadata.languageAware = languageAware;\n\t\ttarget.metadata.themeAware = themeAware;\n\t\ttarget.metadata.fastNavigation = fastNavigation;\n\n\t\t[\"render\", \"renderer\", \"template\", \"staticAreaTemplate\", \"styles\", \"staticAreaStyles\", \"dependencies\"].forEach((customElementEntity: string) => {\n\t\t\tconst _customElementEntity = customElementEntity === \"render\" ? \"renderer\" : customElementEntity;\n\t\t\tconst customElementEntityValue = tagNameOrComponentSettings[_customElementEntity as keyof typeof tag];\n\n\t\t\tcustomElementEntityValue && Object.defineProperty(target, customElementEntity, {\n\t\t\t\tget: () => customElementEntityValue,\n\t\t\t});\n\t\t});\n\t};\n};\n\nexport default customElement;\n"]}

package/dist/decorators/event.d.ts

@@ -0,0 +1,10 @@
+import { EventData } from "../UI5ElementMetadata.js";
+/**
+ * Returns an event class decorator.
+ *
+ * @param { string } name the event name
+ * @param { EventData } data the event data
+ * @returns { ClassDecorator }
+ */
+declare const event: (name: string, data?: EventData) => ClassDecorator;
+export default event;

package/dist/decorators/event.js

@@ -0,0 +1,24 @@
+/**
+ * Returns an event class decorator.
+ *
+ * @param { string } name the event name
+ * @param { EventData } data the event data
+ * @returns { ClassDecorator }
+ */
+const event = (name, data = {}) => {
+    return (target) => {
+        if (!Object.prototype.hasOwnProperty.call(target, "metadata")) {
+            target.metadata = {};
+        }
+        const metadata = target.metadata;
+        if (!metadata.events) {
+            metadata.events = {};
+        }
+        const eventsMetadata = metadata.events;
+        if (!eventsMetadata[name]) {
+            eventsMetadata[name] = data;
+        }
+    };
+};
+export default event;
+//# sourceMappingURL=event.js.map

package/dist/decorators/event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event.js","sourceRoot":"","sources":["../../src/decorators/event.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,KAAK,GAAG,CAAC,IAAY,EAAE,OAAkB,EAAE,EAAkB,EAAE;IACpE,OAAO,CAAC,MAAW,EAAE,EAAE;QACtB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE;YAC9D,MAAM,CAAC,QAAQ,GAAG,EAAE,CAAC;SACrB;QAED,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACrB,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC;SACrB;QAED,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;YAC1B,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;SAC5B;IACF,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { EventData } from \"../UI5ElementMetadata.js\";\n\n/**\n * Returns an event class decorator.\n *\n * @param { string } name the event name\n * @param { EventData } data the event data\n * @returns { ClassDecorator }\n */\nconst event = (name: string, data: EventData = {}): ClassDecorator => {\n\treturn (target: any) => {\n\t\tif (!Object.prototype.hasOwnProperty.call(target, \"metadata\")) {\n\t\t\ttarget.metadata = {};\n\t\t}\n\n\t\tconst metadata = target.metadata;\n\t\tif (!metadata.events) {\n\t\t\tmetadata.events = {};\n\t\t}\n\n\t\tconst eventsMetadata = metadata.events;\n\t\tif (!eventsMetadata[name]) {\n\t\t\teventsMetadata[name] = data;\n\t\t}\n\t};\n};\n\nexport default event;\n"]}

package/dist/decorators/property.d.ts

@@ -0,0 +1,9 @@
+import { Property } from "../UI5ElementMetadata.js";
+/**
+ * Returns a property decorator.
+ *
+ * @param { Property } propData
+ * @returns { PropertyDecorator }
+ */
+declare const property: (propData?: Property) => PropertyDecorator;
+export default property;

package/dist/decorators/property.js

@@ -0,0 +1,24 @@
+/**
+ * Returns a property decorator.
+ *
+ * @param { Property } propData
+ * @returns { PropertyDecorator }
+ */
+const property = (propData) => {
+    return (target, propertyKey) => {
+        const ctor = target.constructor;
+        if (!Object.prototype.hasOwnProperty.call(ctor, "metadata")) {
+            ctor.metadata = {};
+        }
+        const metadata = ctor.metadata;
+        if (!metadata.properties) {
+            metadata.properties = {};
+        }
+        const propsMetadata = metadata.properties;
+        if (!propsMetadata[propertyKey]) {
+            propsMetadata[propertyKey] = propData || { type: String };
+        }
+    };
+};
+export default property;
+//# sourceMappingURL=property.js.map

package/dist/decorators/property.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property.js","sourceRoot":"","sources":["../../src/decorators/property.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,QAAQ,GAAG,CAAC,QAAmB,EAAqB,EAAE;IAC3D,OAAO,CAAC,MAAW,EAAE,WAA4B,EAAE,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,CAAC,WAAgC,CAAC;QAErD,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE;YAC5D,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACnB;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;YACzB,QAAQ,CAAC,UAAU,GAAG,EAAE,CAAC;SACzB;QAED,MAAM,aAAa,GAAG,QAAQ,CAAC,UAAU,CAAC;QAC1C,IAAI,CAAC,aAAa,CAAC,WAAqB,CAAC,EAAE;YAC1C,aAAa,CAAC,WAAqB,CAAC,GAAG,QAAQ,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;SACpE;IACF,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import type UI5Element from \"../UI5Element.js\";\nimport { Property } from \"../UI5ElementMetadata.js\";\n\n/**\n * Returns a property decorator.\n *\n * @param { Property } propData\n * @returns { PropertyDecorator }\n */\nconst property = (propData?: Property): PropertyDecorator => {\n\treturn (target: any, propertyKey: string | symbol) => {\n\t\tconst ctor = target.constructor as typeof UI5Element;\n\n\t\tif (!Object.prototype.hasOwnProperty.call(ctor, \"metadata\")) {\n\t\t\tctor.metadata = {};\n\t\t}\n\n\t\tconst metadata = ctor.metadata;\n\t\tif (!metadata.properties) {\n\t\t\tmetadata.properties = {};\n\t\t}\n\n\t\tconst propsMetadata = metadata.properties;\n\t\tif (!propsMetadata[propertyKey as string]) {\n\t\t\tpropsMetadata[propertyKey as string] = propData || { type: String };\n\t\t}\n\t};\n};\n\nexport default property;\n"]}

package/dist/decorators/slot.d.ts

@@ -0,0 +1,9 @@
+import { Slot } from "../UI5ElementMetadata.js";
+/**
+ * Returns a slot decorator.
+ *
+ * @param { Slot } slotData
+ * @returns { PropertyDecorator }
+ */
+declare const slot: (slotData?: Slot) => PropertyDecorator;
+export default slot;

package/dist/decorators/slot.js

@@ -0,0 +1,37 @@
+/**
+ * Returns a slot decorator.
+ *
+ * @param { Slot } slotData
+ * @returns { PropertyDecorator }
+ */
+const slot = (slotData) => {
+    return (target, slotKey) => {
+        const ctor = target.constructor;
+        if (!Object.prototype.hasOwnProperty.call(ctor, "metadata")) {
+            ctor.metadata = {};
+        }
+        const metadata = ctor.metadata;
+        if (!metadata.slots) {
+            metadata.slots = {};
+        }
+        const slotMetadata = metadata.slots;
+        if (slotData?.default && slotMetadata.default) {
+            throw new Error("Only one slot can be the default slot.");
+        }
+        const key = slotData?.default ? "default" : slotKey;
+        slotData = slotData || { type: HTMLElement };
+        if (!slotData.type) {
+            slotData.type = HTMLElement;
+        }
+        if (!slotMetadata[key]) {
+            slotMetadata[key] = slotData;
+        }
+        if (slotData.default) {
+            delete slotMetadata.default.default;
+            slotMetadata.default.propertyName = slotKey;
+        }
+        ctor.metadata.managedSlots = true;
+    };
+};
+export default slot;
+//# sourceMappingURL=slot.js.map

package/dist/decorators/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.js","sourceRoot":"","sources":["../../src/decorators/slot.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,IAAI,GAAG,CAAC,QAAe,EAAqB,EAAE;IACnD,OAAO,CAAC,MAAW,EAAE,OAAwB,EAAE,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,CAAC,WAAgC,CAAC;QAErD,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE;YAC5D,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACnB;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;YACpB,QAAQ,CAAC,KAAK,GAAG,EAAE,CAAC;SACpB;QAED,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC;QAEpC,IAAI,QAAQ,EAAE,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE;YAC9C,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;SAC1D;QAED,MAAM,GAAG,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAiB,CAAC;QAC9D,QAAQ,GAAG,QAAQ,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;QAE7C,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;YACnB,QAAQ,CAAC,IAAI,GAAG,WAAW,CAAC;SAC5B;QAED,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE;YACvB,YAAY,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC;SAC7B;QAED,IAAI,QAAQ,CAAC,OAAO,EAAE;YACrB,OAAO,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC;YACpC,YAAY,CAAC,OAAO,CAAC,YAAY,GAAG,OAAiB,CAAC;SACtD;QAED,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAC;IACnC,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import type UI5Element from \"../UI5Element.js\";\nimport { Slot } from \"../UI5ElementMetadata.js\";\n\n/**\n * Returns a slot decorator.\n *\n * @param { Slot } slotData\n * @returns { PropertyDecorator }\n */\nconst slot = (slotData?: Slot): PropertyDecorator => {\n\treturn (target: any, slotKey: string | symbol) => {\n\t\tconst ctor = target.constructor as typeof UI5Element;\n\n\t\tif (!Object.prototype.hasOwnProperty.call(ctor, \"metadata\")) {\n\t\t\tctor.metadata = {};\n\t\t}\n\n\t\tconst metadata = ctor.metadata;\n\t\tif (!metadata.slots) {\n\t\t\tmetadata.slots = {};\n\t\t}\n\n\t\tconst slotMetadata = metadata.slots;\n\n\t\tif (slotData?.default && slotMetadata.default) {\n\t\t\tthrow new Error(\"Only one slot can be the default slot.\");\n\t\t}\n\n\t\tconst key = slotData?.default ? \"default\" : slotKey as string;\n\t\tslotData = slotData || { type: HTMLElement };\n\n\t\tif (!slotData.type) {\n\t\t\tslotData.type = HTMLElement;\n\t\t}\n\n\t\tif (!slotMetadata[key]) {\n\t\t\tslotMetadata[key] = slotData;\n\t\t}\n\n\t\tif (slotData.default) {\n\t\t\tdelete slotMetadata.default.default;\n\t\t\tslotMetadata.default.propertyName = slotKey as string;\n\t\t}\n\n\t\tctor.metadata.managedSlots = true;\n\t};\n};\n\nexport default slot;\n"]}

package/dist/delegate/ItemNavigation.d.ts

@@ -0,0 +1,113 @@
+import NavigationMode from "../types/NavigationMode.js";
+import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
+import type UI5Element from "../UI5Element.js";
+interface ITabbable {
+    id: string;
+    _tabIndex: string;
+}
+type ItemNavigationOptions = {
+    currentIndex?: number;
+    navigationMode?: NavigationMode;
+    rowSize?: number;
+    skipItemsSize?: number;
+    behavior?: ItemNavigationBehavior;
+    getItemsCallback: () => Array<ITabbable>;
+    affectedPropertiesNames?: Array<string>;
+};
+/**
+ * The ItemNavigation class manages the calculations to determine the correct "tabindex" for a group of related items inside a root component.
+ * Important: ItemNavigation only does the calculations and does not change "tabindex" directly, this is a responsibility of the developer.
+ *
+ * The keys that trigger ItemNavigation are:
+ *  - Up/down
+ *  - Left/right
+ *  - Home/End
+ *
+ * Usage:
+ * 1) Use the "getItemsCallback" constructor property to pass a callback to ItemNavigation, which, whenever called, will return the list of items to navigate among.
+ *
+ * Each item passed to ItemNavigation via "getItemsCallback" must be:
+ *  - A) either a UI5Element with a "_tabIndex" property
+ *  - B) or an Object with "id" and "_tabIndex" properties which represents a part of the root component's shadow DOM.
+ *    The "id" must be a valid ID within the shadow root of the component ItemNavigation operates on.
+ *    This object must not be a DOM object because, as said, ItemNavigation will not set "tabindex" on it. It must be a representation of a DOM object only
+ *    and the developer has the responsibility to update the "tabindex" in the component's DOM.
+ *  - C) a combination of the above
+ *
+ * Whenever the user navigates with the keyboard, ItemNavigation will modify the "_tabIndex" properties of the items.
+ * It is the items' responsibilities to re-render themselves and apply the correct value of "tabindex" (i.e. to map the "_tabIndex" ItemNavigation set to them to the "tabindex" property).
+ * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their "_tabIndex" property.
+ * If the items are Objects with "id" and "_tabIndex" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.
+ * To do so, set the "affectedPropertiesNames" constructor property to point to one or more of the root component's properties that need refreshing when "_tabIndex" is changed deeply.
+ *
+ * 2) Call the "setCurrentItem" method of ItemNavigation whenever you want to change the current item.
+ * This is most commonly required if the user for example clicks on an item and thus selects it directly.
+ * Pass as the only argument to "setCurrentItem" the item that becomes current (must be one of the items, returned by "getItemsCallback").
+ *
+ * @class
+ * @public
+ */
+declare class ItemNavigation {
+    rootWebComponent: UI5Element;
+    _getItems: () => Array<ITabbable>;
+    _currentIndex: number;
+    _rowSize: number;
+    _behavior: ItemNavigationBehavior;
+    _navigationMode: NavigationMode;
+    _affectedPropertiesNames: Array<string>;
+    _skipItemsSize: number | null;
+    /**
+     *
+     * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among)
+     * @param {ItemNavigationOptions} options Object with configuration options:
+     *  - currentIndex: the index of the item that will be initially selected (from which navigation will begin)
+     *  - navigationMode (Auto|Horizontal|Vertical): whether the items are displayed horizontally (Horizontal), vertically (Vertical) or as a matrix (Auto) meaning the user can navigate in both directions (up/down and left/right)
+     *  - rowSize: tells how many items per row there are when the items are not rendered as a flat list but rather as a matrix. Relevant for navigationMode=Auto
+     * 	- skipItemsSize: tells how many items upon PAGE_UP and PAGE_DOWN should be skipped to applying the focus on the next item
+     *  - behavior (Static|Cycling): tells what to do when trying to navigate beyond the first and last items
+     *    Static means that nothing happens if the user tries to navigate beyond the first/last item.
+     *    Cycling means that when the user navigates beyond the last item they go to the first and vice versa.
+     *  - getItemsCallback: function that, when called, returns an array with all items the user can navigate among
+     *  - affectedPropertiesNames: a list of metadata properties on the root component which, upon user navigation, will be reassigned by address thus causing the root component to invalidate
+     */
+    constructor(rootWebComponent: UI5Element, options: ItemNavigationOptions);
+    /**
+     * Call this method to set a new "current" (selected) item in the item navigation
+     * Note: the item passed to this function must be one of the items, returned by the getItemsCallback function
+     *
+     * @public
+     * @param current the new selected item
+     */
+    setCurrentItem(current: ITabbable): void;
+    /**
+     * Call this method to dynamically change the row size
+     *
+     * @public
+     * @param newRowSize
+     */
+    setRowSize(newRowSize: number): void;
+    _init(): void;
+    _onkeydown(event: KeyboardEvent): void;
+    _handleUp(): void;
+    _handleDown(): void;
+    _handleLeft(): void;
+    _handleRight(): void;
+    _handleHome(): void;
+    _handleEnd(): void;
+    _handlePageUp(): void;
+    _handlePageDown(): void;
+    /**
+     * Handles PAGE_UP in a flat list-like structure, both vertically and horizontally.
+     */
+    _handlePageUpFlat(): void;
+    /**
+     * Handles PAGE_DOWN in a flat list-like structure, both vertically and horizontally.
+     */
+    _handlePageDownFlat(): void;
+    _applyTabIndex(): void;
+    _focusCurrentItem(): void;
+    _canNavigate(): boolean | undefined;
+    _getCurrentItem(): HTMLElement | undefined;
+}
+export default ItemNavigation;
+export { ITabbable, };