@ui5/webcomponents-base 0.0.0-41ab6cd28 → 0.0.0-4237771ff

package/dist/ManagedStyles.js

@@ -1,70 +1,122 @@
 import createStyleInHead from "./util/createStyleInHead.js";
 import createLinkInHead from "./util/createLinkInHead.js";
 import { shouldUseLinks, getUrl } from "./CSP.js";
-import { getCurrentRuntimeIndex } from "./Runtimes.js";
+import { isSafari } from "./Device.js";
+import { getCurrentRuntimeIndex, compareRuntimes } from "./Runtimes.js";
 const getStyleId = (name, value) => {
     return value ? `${name}|${value}` : name;
 };
-const createStyle = (data, name, value = "") => {
-    let content = typeof data === "string" ? data : data.content;
-    if (content.includes("[_ui5host]")) {
-        content = content.replaceAll("[_ui5host]", `[_ui5rt${getCurrentRuntimeIndex()}]`);
+const shouldUpdate = (runtimeIndex) => {
+    if (runtimeIndex === undefined) {
+        return true;
     }
+    return compareRuntimes(getCurrentRuntimeIndex(), parseInt(runtimeIndex)) === 1; // 1 means the current is newer, 0 means the same, -1 means the resource's runtime is newer
+};
+const createStyle = (data, name, value = "", theme) => {
+    const content = typeof data === "string" ? data : data.content;
+    const currentRuntimeIndex = getCurrentRuntimeIndex();
     if (shouldUseLinks()) {
         const attributes = {};
         attributes[name] = value;
+        if (theme) {
+            attributes["data-ui5-runtime-index"] = currentRuntimeIndex;
+            attributes["data-ui5-theme"] = theme;
+        }
         const href = getUrl(data.packageName, data.fileName);
         createLinkInHead(href, attributes);
     }
-    else if (document.adoptedStyleSheets) {
+    else if (document.adoptedStyleSheets && !isSafari()) {
         const stylesheet = new CSSStyleSheet();
         stylesheet.replaceSync(content);
         stylesheet._ui5StyleId = getStyleId(name, value); // set an id so that we can find the style later
+        if (theme) {
+            stylesheet._ui5RuntimeIndex = currentRuntimeIndex;
+            stylesheet._ui5Theme = theme;
+        }
         document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
     }
     else {
         const attributes = {};
         attributes[name] = value;
+        if (theme) {
+            attributes["data-ui5-runtime-index"] = currentRuntimeIndex;
+            attributes["data-ui5-theme"] = theme;
+        }
         createStyleInHead(content, attributes);
     }
 };
-const updateStyle = (data, name, value = "") => {
-    let content = typeof data === "string" ? data : data.content;
-    if (content.includes("[_ui5host]")) {
-        content = content.replaceAll("[_ui5host]", `[_ui5rt${getCurrentRuntimeIndex()}]`);
-    }
+const updateStyle = (data, name, value = "", theme) => {
+    const content = typeof data === "string" ? data : data.content;
+    const currentRuntimeIndex = getCurrentRuntimeIndex();
     if (shouldUseLinks()) {
         const link = document.querySelector(`head>link[${name}="${value}"]`);
-        link.href = getUrl(data.packageName, data.fileName);
+        const href = getUrl(data.packageName, data.fileName);
+        if (!theme) {
+            link.href = href;
+        }
+        else {
+            const linkRuntimeIndex = link.getAttribute("data-ui5-runtime-index") || undefined;
+            const linkTheme = link.getAttribute("data-ui5-theme");
+            if (linkTheme !== theme || shouldUpdate(linkRuntimeIndex)) {
+                link.href = href;
+                link.setAttribute("data-ui5-runtime-index", String(currentRuntimeIndex));
+                link.setAttribute("data-ui5-theme", theme);
+            }
+        }
     }
-    else if (document.adoptedStyleSheets) {
+    else if (document.adoptedStyleSheets && !isSafari()) {
         const stylesheet = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
-        if (stylesheet) {
+        if (!stylesheet) {
+            return;
+        }
+        if (!theme) {
             stylesheet.replaceSync(content || "");
         }
+        else {
+            const stylesheetRuntimeIndex = stylesheet._ui5RuntimeIndex;
+            const stylesheetTheme = stylesheet._ui5Theme;
+            if (stylesheetTheme !== theme || shouldUpdate(stylesheetRuntimeIndex)) {
+                stylesheet.replaceSync(content || "");
+                stylesheet._ui5RuntimeIndex = String(currentRuntimeIndex);
+                stylesheet._ui5Theme = theme;
+            }
+        }
     }
     else {
         const style = document.querySelector(`head>style[${name}="${value}"]`);
-        if (style) {
+        if (!style) {
+            return;
+        }
+        if (!theme) {
             style.textContent = content || "";
         }
+        else {
+            const styleRuntimeIndex = style.getAttribute("data-ui5-runtime-index") || undefined;
+            const styleTheme = style.getAttribute("data-ui5-theme");
+            if (styleTheme !== theme || shouldUpdate(styleRuntimeIndex)) {
+                style.textContent = content || "";
+                style.setAttribute("data-ui5-runtime-index", String(currentRuntimeIndex));
+                style.setAttribute("data-ui5-theme", theme);
+            }
+        }
     }
 };
 const hasStyle = (name, value = "") => {
     if (shouldUseLinks()) {
         return !!document.querySelector(`head>link[${name}="${value}"]`);
     }
-    if (document.adoptedStyleSheets) {
-        return !!document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
+    const styleElement = document.querySelector(`head>style[${name}="${value}"]`);
+    if (document.adoptedStyleSheets && !isSafari()) {
+        return !!styleElement || !!document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
     }
-    return !!document.querySelector(`head>style[${name}="${value}"]`);
+    return !!styleElement;
 };
 const removeStyle = (name, value = "") => {
     if (shouldUseLinks()) {
         const linkElement = document.querySelector(`head>link[${name}="${value}"]`);
         linkElement?.parentElement?.removeChild(linkElement);
     }
-    else if (document.adoptedStyleSheets) {
+    else if (document.adoptedStyleSheets && !isSafari()) {
         document.adoptedStyleSheets = document.adoptedStyleSheets.filter(sh => sh._ui5StyleId !== getStyleId(name, value));
     }
     else {
@@ -72,13 +124,30 @@ const removeStyle = (name, value = "") => {
         styleElement?.parentElement?.removeChild(styleElement);
     }
 };
-const createOrUpdateStyle = (data, name, value = "") => {
+const createOrUpdateStyle = (data, name, value = "", theme) => {
     if (hasStyle(name, value)) {
-        updateStyle(data, name, value);
+        updateStyle(data, name, value, theme);
     }
     else {
-        createStyle(data, name, value);
+        createStyle(data, name, value, theme);
+    }
+};
+const mergeStyles = (style1, style2) => {
+    if (style1 === undefined) {
+        return style2;
+    }
+    if (style2 === undefined) {
+        return style1;
+    }
+    const style2Content = typeof style2 === "string" ? style2 : style2.content;
+    if (typeof style1 === "string") {
+        return `${style1} ${style2Content}`;
     }
+    return {
+        content: `${style1.content} ${style2Content}`,
+        packageName: style1.packageName,
+        fileName: style1.fileName,
+    };
 };
-export { createStyle, hasStyle, updateStyle, removeStyle, createOrUpdateStyle, };
+export { createStyle, hasStyle, updateStyle, removeStyle, createOrUpdateStyle, mergeStyles, };
 //# sourceMappingURL=ManagedStyles.js.map

package/dist/ManagedStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ManagedStyles.js","sourceRoot":"","sources":["../src/ManagedStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import createStyleInHead from \"./util/createStyleInHead.js\";\nimport createLinkInHead from \"./util/createLinkInHead.js\";\nimport { shouldUseLinks, getUrl } from \"./CSP.js\";\nimport { StyleData, StyleDataCSP } from \"./types.js\";\nimport { getCurrentRuntimeIndex } from \"./Runtimes.js\";\n\nconst getStyleId = (name: string, value: string) => {\n\treturn value ? `${name}|${value}` : name;\n};\n\nconst createStyle = (data: StyleData, name: string, value = \"\") => {\n\tlet content = typeof data === \"string\" ? data : data.content;\n\n\tif (content.includes(\"[_ui5host]\")) {\n\t\tcontent = content.replaceAll(\"[_ui5host]\", `[_ui5rt${getCurrentRuntimeIndex()}]`);\n\t}\n\n\tif (shouldUseLinks()) {\n\t\tconst attributes = {} as Record<string, any>;\n\t\tattributes[name] = value;\n\t\tconst href = getUrl((data as StyleDataCSP).packageName, (data as StyleDataCSP).fileName);\n\t\tcreateLinkInHead(href, attributes);\n\t} else if (document.adoptedStyleSheets) {\n\t\tconst stylesheet = new CSSStyleSheet();\n\t\tstylesheet.replaceSync(content);\n\t\t(stylesheet as Record<string, any>)._ui5StyleId = getStyleId(name, value); // set an id so that we can find the style later\n\t\tdocument.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];\n\t} else {\n\t\tconst attributes = {} as Record<string, any>;\n\t\tattributes[name] = value;\n\t\tcreateStyleInHead(content, attributes);\n\t}\n};\n\nconst updateStyle = (data: StyleData, name: string, value = \"\") => {\n\tlet content = typeof data === \"string\" ? data : data.content;\n\n\tif (content.includes(\"[_ui5host]\")) {\n\t\tcontent = content.replaceAll(\"[_ui5host]\", `[_ui5rt${getCurrentRuntimeIndex()}]`);\n\t}\n\n\tif (shouldUseLinks()) {\n\t\tconst link = document.querySelector(`head>link[${name}=\"${value}\"]`) as HTMLLinkElement;\n\t\tlink.href = getUrl((data as StyleDataCSP).packageName, (data as StyleDataCSP).fileName);\n\t} else if (document.adoptedStyleSheets) {\n\t\tconst stylesheet = document.adoptedStyleSheets.find(sh => (sh as Record<string, any>)._ui5StyleId === getStyleId(name, value));\n\t\tif (stylesheet) {\n\t\t\tstylesheet.replaceSync(content || \"\");\n\t\t}\n\t} else {\n\t\tconst style = document.querySelector(`head>style[${name}=\"${value}\"]`);\n\t\tif (style) {\n\t\t\tstyle.textContent = content || \"\";\n\t\t}\n\t}\n};\n\nconst hasStyle = (name: string, value = \"\") => {\n\tif (shouldUseLinks()) {\n\t\treturn !!document.querySelector(`head>link[${name}=\"${value}\"]`);\n\t}\n\n\tif (document.adoptedStyleSheets) {\n\t\treturn !!document.adoptedStyleSheets.find(sh => (sh as Record<string, any>)._ui5StyleId === getStyleId(name, value));\n\t}\n\n\treturn !!document.querySelector(`head>style[${name}=\"${value}\"]`);\n};\n\nconst removeStyle = (name: string, value = \"\") => {\n\tif (shouldUseLinks()) {\n\t\tconst linkElement = document.querySelector(`head>link[${name}=\"${value}\"]`);\n\t\tlinkElement?.parentElement?.removeChild(linkElement);\n\t} else if (document.adoptedStyleSheets) {\n\t\tdocument.adoptedStyleSheets = document.adoptedStyleSheets.filter(sh => (sh as Record<string, any>)._ui5StyleId !== getStyleId(name, value));\n\t} else {\n\t\tconst styleElement = document.querySelector(`head > style[${name}=\"${value}\"]`);\n\t\tstyleElement?.parentElement?.removeChild(styleElement);\n\t}\n};\n\nconst createOrUpdateStyle = (data: StyleData, name: string, value = \"\") => {\n\tif (hasStyle(name, value)) {\n\t\tupdateStyle(data, name, value);\n\t} else {\n\t\tcreateStyle(data, name, value);\n\t}\n};\n\nexport {\n\tcreateStyle,\n\thasStyle,\n\tupdateStyle,\n\tremoveStyle,\n\tcreateOrUpdateStyle,\n};\n\nexport type {\n\tStyleData,\n\tStyleDataCSP,\n};\n"]}
+{"version":3,"file":"ManagedStyles.js","sourceRoot":"","sources":["../src/ManagedStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import createStyleInHead from \"./util/createStyleInHead.js\";\nimport createLinkInHead from \"./util/createLinkInHead.js\";\nimport { shouldUseLinks, getUrl } from \"./CSP.js\";\nimport { StyleData, StyleDataCSP } from \"./types.js\";\nimport { isSafari } from \"./Device.js\";\nimport { getCurrentRuntimeIndex, compareRuntimes } from \"./Runtimes.js\";\n\nconst getStyleId = (name: string, value: string) => {\n\treturn value ? `${name}|${value}` : name;\n};\n\nconst shouldUpdate = (runtimeIndex: string | undefined) => {\n\tif (runtimeIndex === undefined) {\n\t\treturn true;\n\t}\n\treturn compareRuntimes(getCurrentRuntimeIndex(), parseInt(runtimeIndex)) === 1; // 1 means the current is newer, 0 means the same, -1 means the resource's runtime is newer\n};\n\nconst createStyle = (data: StyleData, name: string, value = \"\", theme?: string) => {\n\tconst content = typeof data === \"string\" ? data : data.content;\n\tconst currentRuntimeIndex = getCurrentRuntimeIndex();\n\n\tif (shouldUseLinks()) {\n\t\tconst attributes = {} as Record<string, any>;\n\t\tattributes[name] = value;\n\t\tif (theme) {\n\t\t\tattributes[\"data-ui5-runtime-index\"] = currentRuntimeIndex;\n\t\t\tattributes[\"data-ui5-theme\"] = theme;\n\t\t}\n\t\tconst href = getUrl((data as StyleDataCSP).packageName, (data as StyleDataCSP).fileName);\n\t\tcreateLinkInHead(href, attributes);\n\t} else if (document.adoptedStyleSheets && !isSafari()) {\n\t\tconst stylesheet = new CSSStyleSheet();\n\t\tstylesheet.replaceSync(content);\n\t\t(stylesheet as Record<string, any>)._ui5StyleId = getStyleId(name, value); // set an id so that we can find the style later\n\t\tif (theme) {\n\t\t\t(stylesheet as Record<string, any>)._ui5RuntimeIndex = currentRuntimeIndex;\n\t\t\t(stylesheet as Record<string, any>)._ui5Theme = theme;\n\t\t}\n\t\tdocument.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];\n\t} else {\n\t\tconst attributes = {} as Record<string, any>;\n\t\tattributes[name] = value;\n\t\tif (theme) {\n\t\t\tattributes[\"data-ui5-runtime-index\"] = currentRuntimeIndex;\n\t\t\tattributes[\"data-ui5-theme\"] = theme;\n\t\t}\n\t\tcreateStyleInHead(content, attributes);\n\t}\n};\n\nconst updateStyle = (data: StyleData, name: string, value = \"\", theme?: string) => {\n\tconst content = typeof data === \"string\" ? data : data.content;\n\tconst currentRuntimeIndex = getCurrentRuntimeIndex();\n\n\tif (shouldUseLinks()) {\n\t\tconst link = document.querySelector(`head>link[${name}=\"${value}\"]`) as HTMLLinkElement;\n\t\tconst href = getUrl((data as StyleDataCSP).packageName, (data as StyleDataCSP).fileName);\n\n\t\tif (!theme) {\n\t\t\tlink.href = href;\n\t\t} else {\n\t\t\tconst linkRuntimeIndex = link.getAttribute(\"data-ui5-runtime-index\") || undefined;\n\t\t\tconst linkTheme = link.getAttribute(\"data-ui5-theme\");\n\t\t\tif (linkTheme !== theme || shouldUpdate(linkRuntimeIndex)) {\n\t\t\t\tlink.href = href;\n\t\t\t\tlink.setAttribute(\"data-ui5-runtime-index\", String(currentRuntimeIndex));\n\t\t\t\tlink.setAttribute(\"data-ui5-theme\", theme);\n\t\t\t}\n\t\t}\n\t} else if (document.adoptedStyleSheets && !isSafari()) {\n\t\tconst stylesheet = document.adoptedStyleSheets.find(sh => (sh as Record<string, any>)._ui5StyleId === getStyleId(name, value));\n\t\tif (!stylesheet) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!theme) {\n\t\t\tstylesheet.replaceSync(content || \"\");\n\t\t} else {\n\t\t\tconst stylesheetRuntimeIndex: string | undefined = (stylesheet as Record<string, any>)._ui5RuntimeIndex;\n\t\t\tconst stylesheetTheme: string | undefined = (stylesheet as Record<string, any>)._ui5Theme;\n\t\t\tif (stylesheetTheme !== theme || shouldUpdate(stylesheetRuntimeIndex)) {\n\t\t\t\tstylesheet.replaceSync(content || \"\");\n\t\t\t\t(stylesheet as Record<string, any>)._ui5RuntimeIndex = String(currentRuntimeIndex);\n\t\t\t\t(stylesheet as Record<string, any>)._ui5Theme = theme;\n\t\t\t}\n\t\t}\n\t} else {\n\t\tconst style = document.querySelector(`head>style[${name}=\"${value}\"]`);\n\t\tif (!style) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!theme) {\n\t\t\tstyle.textContent = content || \"\";\n\t\t} else {\n\t\t\tconst styleRuntimeIndex = style.getAttribute(\"data-ui5-runtime-index\") || undefined;\n\t\t\tconst styleTheme = style.getAttribute(\"data-ui5-theme\");\n\t\t\tif (styleTheme !== theme || shouldUpdate(styleRuntimeIndex)) {\n\t\t\t\tstyle.textContent = content || \"\";\n\t\t\t\tstyle.setAttribute(\"data-ui5-runtime-index\", String(currentRuntimeIndex));\n\t\t\t\tstyle.setAttribute(\"data-ui5-theme\", theme);\n\t\t\t}\n\t\t}\n\t}\n};\n\nconst hasStyle = (name: string, value = \"\"): boolean => {\n\tif (shouldUseLinks()) {\n\t\treturn !!document.querySelector(`head>link[${name}=\"${value}\"]`);\n\t}\n\n\tconst styleElement = document.querySelector(`head>style[${name}=\"${value}\"]`);\n\n\tif (document.adoptedStyleSheets && !isSafari()) {\n\t\treturn !!styleElement || !!document.adoptedStyleSheets.find(sh => (sh as Record<string, any>)._ui5StyleId === getStyleId(name, value));\n\t}\n\n\treturn !!styleElement;\n};\n\nconst removeStyle = (name: string, value = \"\") => {\n\tif (shouldUseLinks()) {\n\t\tconst linkElement = document.querySelector(`head>link[${name}=\"${value}\"]`);\n\t\tlinkElement?.parentElement?.removeChild(linkElement);\n\t} else if (document.adoptedStyleSheets && !isSafari()) {\n\t\tdocument.adoptedStyleSheets = document.adoptedStyleSheets.filter(sh => (sh as Record<string, any>)._ui5StyleId !== getStyleId(name, value));\n\t} else {\n\t\tconst styleElement = document.querySelector(`head > style[${name}=\"${value}\"]`);\n\t\tstyleElement?.parentElement?.removeChild(styleElement);\n\t}\n};\n\nconst createOrUpdateStyle = (data: StyleData, name: string, value = \"\", theme?: string) => {\n\tif (hasStyle(name, value)) {\n\t\tupdateStyle(data, name, value, theme);\n\t} else {\n\t\tcreateStyle(data, name, value, theme);\n\t}\n};\n\nconst mergeStyles = (style1?: StyleData, style2?: StyleData) => {\n\tif (style1 === undefined) {\n\t\treturn style2;\n\t}\n\tif (style2 === undefined) {\n\t\treturn style1;\n\t}\n\tconst style2Content = typeof style2 === \"string\" ? style2 : style2.content;\n\tif (typeof style1 === \"string\") {\n\t\treturn `${style1} ${style2Content}`;\n\t}\n\treturn {\n\t\tcontent: `${style1.content} ${style2Content}`,\n\t\tpackageName: style1.packageName,\n\t\tfileName: style1.fileName,\n\t};\n};\n\nexport {\n\tcreateStyle,\n\thasStyle,\n\tupdateStyle,\n\tremoveStyle,\n\tcreateOrUpdateStyle,\n\tmergeStyles,\n};\n\nexport type {\n\tStyleData,\n\tStyleDataCSP,\n};\n"]}

package/dist/StaticAreaItem.d.ts

@@ -18,6 +18,7 @@ declare class StaticAreaItem extends HTMLElement {
      * Updates the shadow root of the static area item with the latest state, if rendered
      */
     update(): void;
+    updateAdditionalProperties(): void;
     /**
      * Sets the correct content density based on the owner element's state
      * @private

package/dist/StaticAreaItem.js

@@ -4,7 +4,6 @@ import { renderFinished } from "./Render.js";
 import getEffectiveContentDensity from "./util/getEffectiveContentDensity.js";
 import { getEffectiveScopingSuffixForTag } from "./CustomElementsScopeUtils.js";
 import getEffectiveDir from "./locale/getEffectiveDir.js";
-import { getCurrentRuntimeIndex } from "./Runtimes.js";
 const pureTagName = "ui5-static-area-item";
 const popupIntegrationAttr = "data-sap-ui-integration-popup-content";
 /**
@@ -34,12 +33,15 @@ class StaticAreaItem extends HTMLElement {
      */
     update() {
         if (this._rendered) {
-            this._updateAdditionalAttrs();
-            this._updateContentDensity();
-            this._updateDirection();
+            this.updateAdditionalProperties();
             updateShadowRoot(this.ownerElement, true);
         }
     }
+    updateAdditionalProperties() {
+        this._updateAdditionalAttrs();
+        this._updateContentDensity();
+        this._updateDirection();
+    }
     /**
      * Sets the correct content density based on the owner element's state
      * @private
@@ -66,8 +68,6 @@ class StaticAreaItem extends HTMLElement {
         }
     }
     _updateAdditionalAttrs() {
-        this.setAttribute(`_ui5rt${getCurrentRuntimeIndex()}`, "");
-        this.setAttribute("_ui5host", "");
         this.setAttribute(pureTagName, "");
         this.setAttribute(popupIntegrationAttr, "");
     }
@@ -76,7 +76,7 @@ class StaticAreaItem extends HTMLElement {
      * Returns reference to the DOM element where the current fragment is added.
      */
     async getDomRef() {
-        this._updateContentDensity();
+        this.updateAdditionalProperties();
         if (!this._rendered) {
             this._rendered = true;
             updateShadowRoot(this.ownerElement, true);

package/dist/StaticAreaItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"StaticAreaItem.js","sourceRoot":"","sources":["../src/StaticAreaItem.ts"],"names":[],"mappings":"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","sourcesContent":["import \"./StaticArea.js\";\nimport updateShadowRoot from \"./updateShadowRoot.js\";\nimport { renderFinished } from \"./Render.js\";\nimport getEffectiveContentDensity from \"./util/getEffectiveContentDensity.js\";\nimport { getEffectiveScopingSuffixForTag } from \"./CustomElementsScopeUtils.js\";\nimport getEffectiveDir from \"./locale/getEffectiveDir.js\";\nimport type UI5Element from \"./UI5Element.js\";\nimport { getCurrentRuntimeIndex } from \"./Runtimes.js\";\n\nconst pureTagName = \"ui5-static-area-item\";\nconst popupIntegrationAttr = \"data-sap-ui-integration-popup-content\";\n\n/**\n *\n * @class\n * @author SAP SE\n * @private\n */\nclass StaticAreaItem extends HTMLElement {\n\t_rendered: boolean;\n\townerElement?: UI5Element;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._rendered = false;\n\t\tthis.attachShadow({ mode: \"open\" });\n\t}\n\n\t/**\n\t * @param {UI5Element} ownerElement the UI5Element instance that owns this static area item\n\t */\n\tsetOwnerElement(ownerElement: UI5Element) {\n\t\tthis.ownerElement = ownerElement;\n\t\tthis.classList.add(this.ownerElement._id); // used for getting the popover in the tests\n\t\tif (this.ownerElement.hasAttribute(\"data-ui5-static-stable\")) {\n\t\t\tthis.setAttribute(\"data-ui5-stable\", this.ownerElement.getAttribute(\"data-ui5-static-stable\")!); // stable selector\n\t\t}\n\t}\n\n\t/**\n\t * Updates the shadow root of the static area item with the latest state, if rendered\n\t */\n\tupdate() {\n\t\tif (this._rendered) {\n\t\t\tthis._updateAdditionalAttrs();\n\t\t\tthis._updateContentDensity();\n\t\t\tthis._updateDirection();\n\t\t\tupdateShadowRoot(this.ownerElement!, true);\n\t\t}\n\t}\n\n\t/**\n\t * Sets the correct content density based on the owner element's state\n\t * @private\n\t */\n\t_updateContentDensity() {\n\t\tif (getEffectiveContentDensity(this.ownerElement!) === \"compact\") {\n\t\t\tthis.classList.add(\"sapUiSizeCompact\");\n\t\t\tthis.classList.add(\"ui5-content-density-compact\");\n\t\t} else {\n\t\t\tthis.classList.remove(\"sapUiSizeCompact\");\n\t\t\tthis.classList.remove(\"ui5-content-density-compact\");\n\t\t}\n\t}\n\n\t_updateDirection() {\n\t\tif (this.ownerElement) {\n\t\t\tconst dir = getEffectiveDir(this.ownerElement);\n\t\t\tif (dir) {\n\t\t\t\tthis.setAttribute(\"dir\", dir);\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute(\"dir\");\n\t\t\t}\n\t\t}\n\t}\n\n\t_updateAdditionalAttrs() {\n\t\tthis.setAttribute(`_ui5rt${getCurrentRuntimeIndex()}`, \"\");\n\t\tthis.setAttribute(\"_ui5host\", \"\");\n\t\tthis.setAttribute(pureTagName, \"\");\n\t\tthis.setAttribute(popupIntegrationAttr, \"\");\n\t}\n\n\t/**\n\t * @protected\n\t * Returns reference to the DOM element where the current fragment is added.\n\t */\n\tasync getDomRef() {\n\t\tthis._updateContentDensity();\n\t\tif (!this._rendered) {\n\t\t\tthis._rendered = true;\n\t\t\tupdateShadowRoot(this.ownerElement!, true);\n\t\t}\n\t\tawait renderFinished(); // Wait for the content of the ui5-static-area-item to be rendered\n\t\treturn this.shadowRoot;\n\t}\n\n\tstatic getTag() {\n\t\tconst suffix = getEffectiveScopingSuffixForTag(pureTagName);\n\t\tif (!suffix) {\n\t\t\treturn pureTagName;\n\t\t}\n\n\t\treturn `${pureTagName}-${suffix}`;\n\t}\n\n\tstatic createInstance() {\n\t\tif (!customElements.get(StaticAreaItem.getTag())) {\n\t\t\tcustomElements.define(StaticAreaItem.getTag(), StaticAreaItem);\n\t\t}\n\n\t\treturn document.createElement(this.getTag()) as StaticAreaItem;\n\t}\n}\n\nexport default StaticAreaItem;\n"]}
+{"version":3,"file":"StaticAreaItem.js","sourceRoot":"","sources":["../src/StaticAreaItem.ts"],"names":[],"mappings":"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","sourcesContent":["import \"./StaticArea.js\";\nimport updateShadowRoot from \"./updateShadowRoot.js\";\nimport { renderFinished } from \"./Render.js\";\nimport getEffectiveContentDensity from \"./util/getEffectiveContentDensity.js\";\nimport { getEffectiveScopingSuffixForTag } from \"./CustomElementsScopeUtils.js\";\nimport getEffectiveDir from \"./locale/getEffectiveDir.js\";\nimport type UI5Element from \"./UI5Element.js\";\n\nconst pureTagName = \"ui5-static-area-item\";\nconst popupIntegrationAttr = \"data-sap-ui-integration-popup-content\";\n\n/**\n *\n * @class\n * @author SAP SE\n * @private\n */\nclass StaticAreaItem extends HTMLElement {\n\t_rendered: boolean;\n\townerElement?: UI5Element;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._rendered = false;\n\t\tthis.attachShadow({ mode: \"open\" });\n\t}\n\n\t/**\n\t * @param {UI5Element} ownerElement the UI5Element instance that owns this static area item\n\t */\n\tsetOwnerElement(ownerElement: UI5Element) {\n\t\tthis.ownerElement = ownerElement;\n\t\tthis.classList.add(this.ownerElement._id); // used for getting the popover in the tests\n\t\tif (this.ownerElement.hasAttribute(\"data-ui5-static-stable\")) {\n\t\t\tthis.setAttribute(\"data-ui5-stable\", this.ownerElement.getAttribute(\"data-ui5-static-stable\")!); // stable selector\n\t\t}\n\t}\n\n\t/**\n\t * Updates the shadow root of the static area item with the latest state, if rendered\n\t */\n\tupdate() {\n\t\tif (this._rendered) {\n\t\t\tthis.updateAdditionalProperties();\n\t\t\tupdateShadowRoot(this.ownerElement!, true);\n\t\t}\n\t}\n\n\tupdateAdditionalProperties() {\n\t\tthis._updateAdditionalAttrs();\n\t\tthis._updateContentDensity();\n\t\tthis._updateDirection();\n\t}\n\n\t/**\n\t * Sets the correct content density based on the owner element's state\n\t * @private\n\t */\n\t_updateContentDensity() {\n\t\tif (getEffectiveContentDensity(this.ownerElement!) === \"compact\") {\n\t\t\tthis.classList.add(\"sapUiSizeCompact\");\n\t\t\tthis.classList.add(\"ui5-content-density-compact\");\n\t\t} else {\n\t\t\tthis.classList.remove(\"sapUiSizeCompact\");\n\t\t\tthis.classList.remove(\"ui5-content-density-compact\");\n\t\t}\n\t}\n\n\t_updateDirection() {\n\t\tif (this.ownerElement) {\n\t\t\tconst dir = getEffectiveDir(this.ownerElement);\n\t\t\tif (dir) {\n\t\t\t\tthis.setAttribute(\"dir\", dir);\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute(\"dir\");\n\t\t\t}\n\t\t}\n\t}\n\n\t_updateAdditionalAttrs() {\n\t\tthis.setAttribute(pureTagName, \"\");\n\t\tthis.setAttribute(popupIntegrationAttr, \"\");\n\t}\n\n\t/**\n\t * @protected\n\t * Returns reference to the DOM element where the current fragment is added.\n\t */\n\tasync getDomRef() {\n\t\tthis.updateAdditionalProperties();\n\t\tif (!this._rendered) {\n\t\t\tthis._rendered = true;\n\t\t\tupdateShadowRoot(this.ownerElement!, true);\n\t\t}\n\t\tawait renderFinished(); // Wait for the content of the ui5-static-area-item to be rendered\n\t\treturn this.shadowRoot;\n\t}\n\n\tstatic getTag() {\n\t\tconst suffix = getEffectiveScopingSuffixForTag(pureTagName);\n\t\tif (!suffix) {\n\t\t\treturn pureTagName;\n\t\t}\n\n\t\treturn `${pureTagName}-${suffix}`;\n\t}\n\n\tstatic createInstance() {\n\t\tif (!customElements.get(StaticAreaItem.getTag())) {\n\t\t\tcustomElements.define(StaticAreaItem.getTag(), StaticAreaItem);\n\t\t}\n\n\t\treturn document.createElement(this.getTag()) as StaticAreaItem;\n\t}\n}\n\nexport default StaticAreaItem;\n"]}

package/dist/UI5Element.d.ts

@@ -39,7 +39,8 @@ declare abstract class UI5Element extends HTMLElement {
     __id?: string;
     _suppressInvalidation: boolean;
     _changedState: Array<ChangeInfo>;
-    _eventProvider: EventProvider<InvalidationInfo, void>;
+    _invalidationEventProvider: EventProvider<InvalidationInfo, void>;
+    _componentStateFinalizedEventProvider: EventProvider<void, void>;
     _inDOM: boolean;
     _fullyConnected: boolean;
     _childChangeListeners: Map<string, ChildChangeListener>;
@@ -49,7 +50,6 @@ declare abstract class UI5Element extends HTMLElement {
     };
     _doNotSyncAttributes: Set<string>;
     _state: State;
-    _onComponentStateFinalized?: () => void;
     _getRealDomRef?: () => HTMLElement;
     staticAreaItem?: StaticAreaItem;
     static template?: TemplateFunction;
@@ -278,6 +278,20 @@ declare abstract class UI5Element extends HTMLElement {
      * @public
      */
     getSlottedNodes<T = Node>(slotName: string): T[];
+    /**
+     * Attach a callback that will be executed whenever the component's state is finalized
+     *
+     * @param {} callback
+     * @public
+     */
+    attachComponentStateFinalized(callback: () => void): void;
+    /**
+     * Detach the callback that is executed whenever the component's state is finalized
+     *
+     * @param {} callback
+     * @public
+     */
+    detachComponentStateFinalized(callback: () => void): void;
     /**
      * Determines whether the component should be rendered in RTL mode or not.
      * Returns: "rtl", "ltr" or undefined

package/dist/UI5Element.js

@@ -18,7 +18,6 @@ import arraysAreEqual from "./util/arraysAreEqual.js";
 import { markAsRtlAware } from "./locale/RTLAwareRegistry.js";
 import preloadLinks from "./theming/preloadLinks.js";
 import executeTemplate from "./renderer/executeTemplate.js";
-import { getCurrentRuntimeIndex } from "./Runtimes.js";
 let autoId = 0;
 const elementTimeouts = new Map();
 const uniqueDependenciesCache = new Map();
@@ -37,7 +36,7 @@ function _invalidate(changeInfo) {
     this.onInvalidation(changeInfo);
     this._changedState.push(changeInfo);
     renderDeferred(this);
-    this._eventProvider.fireEvent("invalidate", { ...changeInfo, target: this });
+    this._invalidationEventProvider.fireEvent("invalidate", { ...changeInfo, target: this });
 }
 /**
  * Base class for all UI5 Web Components
@@ -59,7 +58,8 @@ class UI5Element extends HTMLElement {
         this._fullyConnected = false; // A flag telling whether the UI5Element's onEnterDOM hook was called (since it's possible to have the element removed from DOM before that)
         this._childChangeListeners = new Map(); // used to store lazy listeners per slot for the child change event of every child inside that slot
         this._slotChangeListeners = new Map(); // used to store lazy listeners per slot for the slotchange event of all slot children inside that slot
-        this._eventProvider = new EventProvider(); // used by parent components for listening to changes to child components
+        this._invalidationEventProvider = new EventProvider(); // used by parent components for listening to changes to child components
+        this._componentStateFinalizedEventProvider = new EventProvider(); // used by friend classes for synchronization
         let deferredResolve;
         this._domRefReadyPromise = new Promise(resolve => {
             deferredResolve = resolve;
@@ -98,8 +98,6 @@ class UI5Element extends HTMLElement {
      */
     async connectedCallback() {
         const ctor = this.constructor;
-        this.setAttribute(`_ui5rt${getCurrentRuntimeIndex()}`, "");
-        this.setAttribute("_ui5host", "");
         this.setAttribute(ctor.getMetadata().getPureTag(), "");
         if (ctor.getMetadata().supportsF6FastNavigation()) {
             this.setAttribute("data-sap-ui-fastnavgroup", "true");
@@ -164,14 +162,16 @@ class UI5Element extends HTMLElement {
      */
     _startObservingDOMChildren() {
         const ctor = this.constructor;
-        const shouldObserveChildren = ctor.getMetadata().hasSlots();
+        const metadata = ctor.getMetadata();
+        const shouldObserveChildren = metadata.hasSlots();
         if (!shouldObserveChildren) {
             return;
         }
-        const canSlotText = ctor.getMetadata().canSlotText();
+        const canSlotText = metadata.canSlotText();
+        const hasClonedSlot = Object.keys(metadata.getSlots()).some(slotName => metadata.getSlots()[slotName].cloned);
         const mutationObserverOptions = {
             childList: true,
-            subtree: canSlotText,
+            subtree: canSlotText || hasClonedSlot,
             characterData: canSlotText,
         };
         observeDOMNode(this, this._processChildren.bind(this), mutationObserverOptions);
@@ -323,7 +323,7 @@ class UI5Element extends HTMLElement {
      * @public
      */
     attachInvalidate(callback) {
-        this._eventProvider.attachEvent("invalidate", callback);
+        this._invalidationEventProvider.attachEvent("invalidate", callback);
     }
     /**
      * Detach the callback that is executed whenever the component is invalidated
@@ -332,7 +332,7 @@ class UI5Element extends HTMLElement {
      * @public
      */
     detachInvalidate(callback) {
-        this._eventProvider.detachEvent("invalidate", callback);
+        this._invalidationEventProvider.detachEvent("invalidate", callback);
     }
     /**
      * Callback that is executed whenever a monitored child changes its state
@@ -537,9 +537,7 @@ class UI5Element extends HTMLElement {
         this._suppressInvalidation = true;
         this.onBeforeRendering();
         // Intended for framework usage only. Currently ItemNavigation updates tab indexes after the component has updated its state but before the template is rendered
-        if (this._onComponentStateFinalized) {
-            this._onComponentStateFinalized();
-        }
+        this._componentStateFinalizedEventProvider.fireEvent("componentStateFinalized");
         // resume normal invalidation handling
         this._suppressInvalidation = false;
         // Update the shadow root with the render result
@@ -662,7 +660,7 @@ class UI5Element extends HTMLElement {
         const eventResult = this._fireEvent(name, data, cancelable, bubbles);
         const camelCaseEventName = kebabToCamelCase(name);
         if (camelCaseEventName !== name) {
-            return eventResult && this._fireEvent(camelCaseEventName, data, cancelable);
+            return eventResult && this._fireEvent(camelCaseEventName, data, cancelable, bubbles);
         }
         return eventResult;
     }
@@ -697,6 +695,24 @@ class UI5Element extends HTMLElement {
     getSlottedNodes(slotName) {
         return getSlottedNodesList(this[slotName]);
     }
+    /**
+     * Attach a callback that will be executed whenever the component's state is finalized
+     *
+     * @param {} callback
+     * @public
+     */
+    attachComponentStateFinalized(callback) {
+        this._componentStateFinalizedEventProvider.attachEvent("componentStateFinalized", callback);
+    }
+    /**
+     * Detach the callback that is executed whenever the component's state is finalized
+     *
+     * @param {} callback
+     * @public
+     */
+    detachComponentStateFinalized(callback) {
+        this._componentStateFinalizedEventProvider.detachEvent("componentStateFinalized", callback);
+    }
     /**
      * Determines whether the component should be rendered in RTL mode or not.
      * Returns: "rtl", "ltr" or undefined
@@ -918,7 +934,7 @@ class UI5Element extends HTMLElement {
         ]);
         const tag = this.getMetadata().getTag();
         const definedLocally = isTagRegistered(tag);
-        const definedGlobally = customElements.get(tag);
+        const definedGlobally = window.customElements.get(tag);
         if (definedGlobally && !definedLocally) {
             recordTagRegistrationFailure(tag);
         }