@ui5/webcomponents-base 0.0.0-4180fe799 → 0.0.0-41ab6cd28

package/dist/config/ThemeRoot.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Returns the current theme root.
+ *
+ * @public
+ * @since 1.14.0
+ * @returns { string } the current theme root
+ */
+declare const getThemeRoot: () => string | undefined;
+/**
+ * Sets theme root for the current theme.
+ * When set, the framework will validate the theme root and fetch the theme styles (CSS variables) from this location.
+ *
+ * <b>Note:</b> The feature is specific to custom themes, created with the `UI Theme Designer`.
+ * The provided theme root is used only as a base to construct the actual location of the theme styles: `{themeRoot}/.../css_variables.css`.
+ *
+ * <br/>
+ *
+ * <b>Note:</b> Certain security restrictions will apply before fetching the theme assets.
+ * Absolute URLs to a different origin than the current page will result in using the current page as an origin.
+ * To allow specific origins, use &lt;meta name="sap-allowedThemeOrigins" content="https://my-example-host.com/"&gt; tag inside the &lt;head&gt; of the page.
+ *
+ * @public
+ * @since 1.14.0
+ * @param { string } themeRoot the new theme root
+ * @returns { Promise<void> }
+ */
+declare const setThemeRoot: (themeRoot: string) => Promise<void> | undefined;
+declare const attachCustomThemeStylesToHead: (theme: string) => Promise<void>;
+export { getThemeRoot, setThemeRoot, attachCustomThemeStylesToHead, };

package/dist/config/ThemeRoot.js

@@ -0,0 +1,59 @@
+import createLinkInHead from "../util/createLinkInHead.js";
+import validateThemeRoot from "../validateThemeRoot.js";
+import { getThemeRoot as getConfiguredThemeRoot } from "../InitialConfiguration.js";
+import { getTheme } from "./Theme.js";
+let currThemeRoot;
+/**
+ * Returns the current theme root.
+ *
+ * @public
+ * @since 1.14.0
+ * @returns { string } the current theme root
+ */
+const getThemeRoot = () => {
+    if (currThemeRoot === undefined) {
+        currThemeRoot = getConfiguredThemeRoot();
+    }
+    return currThemeRoot;
+};
+/**
+ * Sets theme root for the current theme.
+ * When set, the framework will validate the theme root and fetch the theme styles (CSS variables) from this location.
+ *
+ * <b>Note:</b> The feature is specific to custom themes, created with the `UI Theme Designer`.
+ * The provided theme root is used only as a base to construct the actual location of the theme styles: `{themeRoot}/.../css_variables.css`.
+ *
+ * <br/>
+ *
+ * <b>Note:</b> Certain security restrictions will apply before fetching the theme assets.
+ * Absolute URLs to a different origin than the current page will result in using the current page as an origin.
+ * To allow specific origins, use &lt;meta name="sap-allowedThemeOrigins" content="https://my-example-host.com/"&gt; tag inside the &lt;head&gt; of the page.
+ *
+ * @public
+ * @since 1.14.0
+ * @param { string } themeRoot the new theme root
+ * @returns { Promise<void> }
+ */
+const setThemeRoot = (themeRoot) => {
+    if (currThemeRoot === themeRoot) {
+        return;
+    }
+    currThemeRoot = themeRoot;
+    if (!validateThemeRoot(themeRoot)) {
+        console.warn(`The ${themeRoot} is not valid. Check the allowed origins as suggested in the "setThemeRoot" description.`); // eslint-disable-line
+        return;
+    }
+    return attachCustomThemeStylesToHead(getTheme());
+};
+const formatThemeLink = (theme) => {
+    return `${getThemeRoot()}Base/baseLib/${theme}/css_variables.css`; // theme root is always set at this point.
+};
+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=ThemeRoot.js.map

package/dist/config/ThemeRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeRoot.js","sourceRoot":"","sources":["../../src/config/ThemeRoot.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;AACpF,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,IAAI,aAAiC,CAAC;AAEtC;;;;;;GAMG;AACH,MAAM,YAAY,GAAG,GAAuB,EAAE;IAC7C,IAAI,aAAa,KAAK,SAAS,EAAE;QAChC,aAAa,GAAG,sBAAsB,EAAE,CAAC;KACzC;IAED,OAAO,aAAa,CAAC;AACtB,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,YAAY,GAAG,CAAC,SAAiB,EAA6B,EAAE;IACrE,IAAI,aAAa,KAAK,SAAS,EAAE;QAChC,OAAO;KACP;IAED,aAAa,GAAG,SAAS,CAAC;IAE1B,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAE;QAClC,OAAO,CAAC,IAAI,CAAC,OAAO,SAAS,0FAA0F,CAAC,CAAC,CAAC,sBAAsB;QAChJ,OAAO;KACP;IAED,OAAO,6BAA6B,CAAC,QAAQ,EAAE,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE;IACzC,OAAO,GAAG,YAAY,EAAG,gBAAgB,KAAK,oBAAoB,CAAC,CAAC,0CAA0C;AAC/G,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,KAAK,EAAE,KAAa,EAAiB,EAAE;IAC5E,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\";\nimport { getTheme } from \"./Theme.js\";\n\nlet currThemeRoot: string | undefined;\n\n/**\n * Returns the current theme root.\n *\n * @public\n * @since 1.14.0\n * @returns { string } the current theme root\n */\nconst getThemeRoot = (): string | undefined => {\n\tif (currThemeRoot === undefined) {\n\t\tcurrThemeRoot = getConfiguredThemeRoot();\n\t}\n\n\treturn currThemeRoot;\n};\n\n/**\n * Sets theme root for the current theme.\n * When set, the framework will validate the theme root and fetch the theme styles (CSS variables) from this location.\n *\n * <b>Note:</b> The feature is specific to custom themes, created with the `UI Theme Designer`.\n * The provided theme root is used only as a base to construct the actual location of the theme styles: `{themeRoot}/.../css_variables.css`.\n *\n * <br/>\n *\n * <b>Note:</b> Certain security restrictions will apply before fetching the theme assets.\n * Absolute URLs to a different origin than the current page will result in using the current page as an origin.\n * To allow specific origins, use &lt;meta name=\"sap-allowedThemeOrigins\" content=\"https://my-example-host.com/\"&gt; tag inside the &lt;head&gt; of the page.\n *\n * @public\n * @since 1.14.0\n * @param { string } themeRoot the new theme root\n * @returns { Promise<void> }\n */\nconst setThemeRoot = (themeRoot: string): Promise<void> | undefined => {\n\tif (currThemeRoot === themeRoot) {\n\t\treturn;\n\t}\n\n\tcurrThemeRoot = themeRoot;\n\n\tif (!validateThemeRoot(themeRoot)) {\n\t\tconsole.warn(`The ${themeRoot} is not valid. Check the allowed origins as suggested in the \"setThemeRoot\" description.`); // eslint-disable-line\n\t\treturn;\n\t}\n\n\treturn attachCustomThemeStylesToHead(getTheme());\n};\n\nconst formatThemeLink = (theme: string) => {\n\treturn `${getThemeRoot()!}Base/baseLib/${theme}/css_variables.css`; // theme root is always set at this point.\n};\n\nconst attachCustomThemeStylesToHead = async (theme: string): Promise<void> => {\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/config/Timezone.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Returns the configured IANA timezone ID.
+ *
+ * @private
+ * @returns {string}
+ */
+declare const getTimezone: () => string | undefined;
+/**
+ * Sets the IANA timezone ID.
+ * <b>For example:</b> "America/New_York", "Europe/London", "Australia/Sydney", "Asia/Bishkek", etc.
+ *>
+ * @param {string} timezone
+ * @private
+ * @returns { Promise<void> }
+ */
+declare const setTimezone: (timezone: string) => void;
+export { getTimezone, setTimezone, };

package/dist/config/Timezone.js

@@ -0,0 +1,30 @@
+import { getTimezone as getConfiguredTimezone } from "../InitialConfiguration.js";
+let currTimezone;
+/**
+ * Returns the configured IANA timezone ID.
+ *
+ * @private
+ * @returns {string}
+ */
+const getTimezone = () => {
+    if (currTimezone === undefined) {
+        currTimezone = getConfiguredTimezone();
+    }
+    return currTimezone;
+};
+/**
+ * Sets the IANA timezone ID.
+ * <b>For example:</b> "America/New_York", "Europe/London", "Australia/Sydney", "Asia/Bishkek", etc.
+ *>
+ * @param {string} timezone
+ * @private
+ * @returns { Promise<void> }
+ */
+const setTimezone = (timezone) => {
+    if (currTimezone === timezone) {
+        return;
+    }
+    currTimezone = timezone;
+};
+export { getTimezone, setTimezone, };
+//# sourceMappingURL=Timezone.js.map

package/dist/config/Timezone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timezone.js","sourceRoot":"","sources":["../../src/config/Timezone.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAElF,IAAI,YAAgC,CAAC;AAErC;;;;;GAKG;AACH,MAAM,WAAW,GAAG,GAAuB,EAAE;IAC5C,IAAI,YAAY,KAAK,SAAS,EAAE;QAC/B,YAAY,GAAG,qBAAqB,EAAE,CAAC;KACvC;IACD,OAAO,YAAY,CAAC;AACrB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,GAAG,CAAC,QAAgB,EAAE,EAAE;IACxC,IAAI,YAAY,KAAK,QAAQ,EAAE;QAC9B,OAAO;KACP;IAED,YAAY,GAAG,QAAQ,CAAC;AACzB,CAAC,CAAC;AAEF,OAAO,EACN,WAAW,EACX,WAAW,GACX,CAAC","sourcesContent":["import { getTimezone as getConfiguredTimezone } from \"../InitialConfiguration.js\";\n\nlet currTimezone: string | undefined;\n\n/**\n * Returns the configured IANA timezone ID.\n *\n * @private\n * @returns {string}\n */\nconst getTimezone = (): string | undefined => {\n\tif (currTimezone === undefined) {\n\t\tcurrTimezone = getConfiguredTimezone();\n\t}\n\treturn currTimezone;\n};\n\n/**\n * Sets the IANA timezone ID.\n * <b>For example:</b> \"America/New_York\", \"Europe/London\", \"Australia/Sydney\", \"Asia/Bishkek\", etc.\n *>\n * @param {string} timezone\n * @private\n * @returns { Promise<void> }\n */\nconst setTimezone = (timezone: string) => {\n\tif (currTimezone === timezone) {\n\t\treturn;\n\t}\n\n\tcurrTimezone = timezone;\n};\n\nexport {\n\tgetTimezone,\n\tsetTimezone,\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

@@ -3,8 +3,7 @@
     font-style: normal;
     font-weight: 400;
     src: local("72"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2");
 }
 
 @font-face {
@@ -12,8 +11,7 @@
     font-style: normal;
     font-weight: 400;
     src: local('72-full'),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2");
 
 }
 
@@ -22,8 +20,7 @@
     font-style: normal;
     font-weight: 700;
     src: local('72-Bold'),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2");
 }
 
 @font-face {
@@ -31,8 +28,33 @@
     font-style: normal;
     font-weight: 700;
     src: local('72-Bold-full'),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
+    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 {
@@ -40,6 +62,5 @@
     font-style: bold;
     font-weight: 900;
     src: local('72Black'),
-    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2"),
-    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff?ui5-webcomponents) format("woff");
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2");
 }

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,37 @@
+/**
+ * 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, themeAware, fastNavigation, } = tagNameOrComponentSettings;
+        target.metadata.tag = tag;
+        if (languageAware) {
+            target.metadata.languageAware = languageAware;
+        }
+        if (themeAware) {
+            target.metadata.themeAware = themeAware;
+        }
+        if (fastNavigation) {
+            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,EACb,UAAU,EACV,cAAc,GACb,GAAG,0BAA0B,CAAC;QAEhC,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;QAC1B,IAAI,aAAa,EAAE;YAClB,MAAM,CAAC,QAAQ,CAAC,aAAa,GAAG,aAAa,CAAC;SAC9C;QACD,IAAI,UAAU,EAAE;YACf,MAAM,CAAC,QAAQ,CAAC,UAAU,GAAG,UAAU,CAAC;SACxC;QACD,IAAI,cAAc,EAAE;YACnB,MAAM,CAAC,QAAQ,CAAC,cAAc,GAAG,cAAc,CAAC;SAChD;QAED,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,\n\t\t\tthemeAware,\n\t\t\tfastNavigation,\n\t\t } = tagNameOrComponentSettings;\n\n\t\ttarget.metadata.tag = tag;\n\t\tif (languageAware) {\n\t\t\ttarget.metadata.languageAware = languageAware;\n\t\t}\n\t\tif (themeAware) {\n\t\t\ttarget.metadata.themeAware = themeAware;\n\t\t}\n\t\tif (fastNavigation) {\n\t\t\ttarget.metadata.fastNavigation = fastNavigation;\n\t\t}\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 && slotData.default && slotMetadata.default) {
+            throw new Error("Only one slot can be the default slot.");
+        }
+        const key = slotData && 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,IAAI,QAAQ,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE;YACzD,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;SAC1D;QAED,MAAM,GAAG,GAAG,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAiB,CAAC;QACzE,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 && 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 && 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, };