@ui5/webcomponents-base 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

package/dist/ManagedStyles.js

@@ -1,3 +1,7 @@
+import createStyleInHead from "./util/createStyleInHead.js";
+import createLinkInHead from "./util/createLinkInHead.js";
+import { shouldUseLinks, getUrl } from "./CSP.js";
+import { isSafari } from "./Device.js";
 import { getCurrentRuntimeIndex, compareRuntimes } from "./Runtimes.js";
 const isSSR = typeof document === "undefined";
 const getStyleId = (name, value) => {
@@ -12,32 +16,89 @@ const shouldUpdate = (runtimeIndex) => {
 const createStyle = (data, name, value = "", theme) => {
     const content = typeof data === "string" ? data : data.content;
     const currentRuntimeIndex = getCurrentRuntimeIndex();
-    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];
+    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 && !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 = "", theme) => {
     const content = typeof data === "string" ? data : data.content;
     const currentRuntimeIndex = getCurrentRuntimeIndex();
-    const stylesheet = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
-    if (!stylesheet) {
-        return;
+    if (shouldUseLinks()) {
+        const link = document.querySelector(`head>link[${name}="${value}"]`);
+        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);
+            }
+        }
     }
-    if (!theme) {
-        stylesheet.replaceSync(content || "");
+    else if (document.adoptedStyleSheets && !isSafari()) {
+        const stylesheet = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
+        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 stylesheetRuntimeIndex = stylesheet._ui5RuntimeIndex;
-        const stylesheetTheme = stylesheet._ui5Theme;
-        if (stylesheetTheme !== theme || shouldUpdate(stylesheetRuntimeIndex)) {
-            stylesheet.replaceSync(content || "");
-            stylesheet._ui5RuntimeIndex = String(currentRuntimeIndex);
-            stylesheet._ui5Theme = theme;
+        const style = document.querySelector(`head>style[${name}="${value}"]`);
+        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);
+            }
         }
     }
 };
@@ -45,10 +106,27 @@ const hasStyle = (name, value = "") => {
     if (isSSR) {
         return true;
     }
-    return !!document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
+    if (shouldUseLinks()) {
+        return !!document.querySelector(`head>link[${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 !!styleElement;
 };
 const removeStyle = (name, value = "") => {
-    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(sh => sh._ui5StyleId !== getStyleId(name, value));
+    if (shouldUseLinks()) {
+        const linkElement = document.querySelector(`head>link[${name}="${value}"]`);
+        linkElement?.parentElement?.removeChild(linkElement);
+    }
+    else if (document.adoptedStyleSheets && !isSafari()) {
+        document.adoptedStyleSheets = document.adoptedStyleSheets.filter(sh => sh._ui5StyleId !== getStyleId(name, value));
+    }
+    else {
+        const styleElement = document.querySelector(`head > style[${name}="${value}"]`);
+        styleElement?.parentElement?.removeChild(styleElement);
+    }
 };
 const createOrUpdateStyle = (data, name, value = "", theme) => {
     if (hasStyle(name, value)) {

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 { StyleData, StyleDataCSP } from \"./types.js\";\nimport { getCurrentRuntimeIndex, compareRuntimes } from \"./Runtimes.js\";\n\nconst isSSR = typeof document === \"undefined\";\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\tconst stylesheet = new CSSStyleSheet();\n\tstylesheet.replaceSync(content);\n\t(stylesheet as Record<string, any>)._ui5StyleId = getStyleId(name, value); // set an id so that we can find the style later\n\tif (theme) {\n\t\t(stylesheet as Record<string, any>)._ui5RuntimeIndex = currentRuntimeIndex;\n\t\t(stylesheet as Record<string, any>)._ui5Theme = theme;\n\t}\n\tdocument.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];\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\tconst stylesheet = document.adoptedStyleSheets.find(sh => (sh as Record<string, any>)._ui5StyleId === getStyleId(name, value));\n\tif (!stylesheet) {\n\t\treturn;\n\t}\n\n\tif (!theme) {\n\t\tstylesheet.replaceSync(content || \"\");\n\t} else {\n\t\tconst stylesheetRuntimeIndex: string | undefined = (stylesheet as Record<string, any>)._ui5RuntimeIndex;\n\t\tconst stylesheetTheme: string | undefined = (stylesheet as Record<string, any>)._ui5Theme;\n\t\tif (stylesheetTheme !== theme || shouldUpdate(stylesheetRuntimeIndex)) {\n\t\t\tstylesheet.replaceSync(content || \"\");\n\t\t\t(stylesheet as Record<string, any>)._ui5RuntimeIndex = String(currentRuntimeIndex);\n\t\t\t(stylesheet as Record<string, any>)._ui5Theme = theme;\n\t\t}\n\t}\n};\n\nconst hasStyle = (name: string, value = \"\"): boolean => {\n\tif (isSSR) {\n\t\treturn true;\n\t}\n\n\treturn !!document.adoptedStyleSheets.find(sh => (sh as Record<string, any>)._ui5StyleId === getStyleId(name, value));\n};\n\nconst removeStyle = (name: string, value = \"\") => {\n\tdocument.adoptedStyleSheets = document.adoptedStyleSheets.filter(sh => (sh as Record<string, any>)._ui5StyleId !== getStyleId(name, value));\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"]}
+{"version":3,"file":"ManagedStyles.js","sourceRoot":"","sources":["../src/ManagedStyles.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,6BAA6B,CAAC;AAC5D,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAExE,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,WAAW,CAAC;AAE9C,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE;IAClD,OAAO,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1C,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,YAAgC,EAAE,EAAE;IACzD,IAAI,YAAY,KAAK,SAAS,EAAE;QAC/B,OAAO,IAAI,CAAC;KACZ;IACD,OAAO,eAAe,CAAC,sBAAsB,EAAE,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,2FAA2F;AAC5K,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,IAAe,EAAE,IAAY,EAAE,KAAK,GAAG,EAAE,EAAE,KAAc,EAAE,EAAE;IACjF,MAAM,OAAO,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/D,MAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;IAErD,IAAI,cAAc,EAAE,EAAE;QACrB,MAAM,UAAU,GAAG,EAAyB,CAAC;QAC7C,UAAU,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;QACzB,IAAI,KAAK,EAAE;YACV,UAAU,CAAC,wBAAwB,CAAC,GAAG,mBAAmB,CAAC;YAC3D,UAAU,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC;SACrC;QACD,MAAM,IAAI,GAAG,MAAM,CAAE,IAAqB,CAAC,WAAW,EAAG,IAAqB,CAAC,QAAQ,CAAC,CAAC;QACzF,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;KACnC;SAAM,IAAI,QAAQ,CAAC,kBAAkB,IAAI,CAAC,QAAQ,EAAE,EAAE;QACtD,MAAM,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;QACvC,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC/B,UAAkC,CAAC,WAAW,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,gDAAgD;QAC3H,IAAI,KAAK,EAAE;YACT,UAAkC,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;YAC1E,UAAkC,CAAC,SAAS,GAAG,KAAK,CAAC;SACtD;QACD,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;KAC3E;SAAM;QACN,MAAM,UAAU,GAAG,EAAyB,CAAC;QAC7C,UAAU,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;QACzB,IAAI,KAAK,EAAE;YACV,UAAU,CAAC,wBAAwB,CAAC,GAAG,mBAAmB,CAAC;YAC3D,UAAU,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC;SACrC;QACD,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;KACvC;AACF,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,IAAe,EAAE,IAAY,EAAE,KAAK,GAAG,EAAE,EAAE,KAAc,EAAE,EAAE;IACjF,MAAM,OAAO,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/D,MAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;IAErD,IAAI,cAAc,EAAE,EAAE;QACrB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,IAAI,KAAK,KAAK,IAAI,CAAoB,CAAC;QACxF,MAAM,IAAI,GAAG,MAAM,CAAE,IAAqB,CAAC,WAAW,EAAG,IAAqB,CAAC,QAAQ,CAAC,CAAC;QAEzF,IAAI,CAAC,KAAK,EAAE;YACX,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SACjB;aAAM;YACN,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,wBAAwB,CAAC,IAAI,SAAS,CAAC;YAClF,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;YACtD,IAAI,SAAS,KAAK,KAAK,IAAI,YAAY,CAAC,gBAAgB,CAAC,EAAE;gBAC1D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,YAAY,CAAC,wBAAwB,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;gBACzE,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;aAC3C;SACD;KACD;SAAM,IAAI,QAAQ,CAAC,kBAAkB,IAAI,CAAC,QAAQ,EAAE,EAAE;QACtD,MAAM,UAAU,GAAG,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAE,EAA0B,CAAC,WAAW,KAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;QAC/H,IAAI,CAAC,UAAU,EAAE;YAChB,OAAO;SACP;QAED,IAAI,CAAC,KAAK,EAAE;YACX,UAAU,CAAC,WAAW,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;SACtC;aAAM;YACN,MAAM,sBAAsB,GAAwB,UAAkC,CAAC,gBAAgB,CAAC;YACxG,MAAM,eAAe,GAAwB,UAAkC,CAAC,SAAS,CAAC;YAC1F,IAAI,eAAe,KAAK,KAAK,IAAI,YAAY,CAAC,sBAAsB,CAAC,EAAE;gBACtE,UAAU,CAAC,WAAW,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;gBACrC,UAAkC,CAAC,gBAAgB,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC;gBAClF,UAAkC,CAAC,SAAS,GAAG,KAAK,CAAC;aACtD;SACD;KACD;SAAM;QACN,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,EAAE;YACX,OAAO;SACP;QAED,IAAI,CAAC,KAAK,EAAE;YACX,KAAK,CAAC,WAAW,GAAG,OAAO,IAAI,EAAE,CAAC;SAClC;aAAM;YACN,MAAM,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAAC,wBAAwB,CAAC,IAAI,SAAS,CAAC;YACpF,MAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;YACxD,IAAI,UAAU,KAAK,KAAK,IAAI,YAAY,CAAC,iBAAiB,CAAC,EAAE;gBAC5D,KAAK,CAAC,WAAW,GAAG,OAAO,IAAI,EAAE,CAAC;gBAClC,KAAK,CAAC,YAAY,CAAC,wBAAwB,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;gBAC1E,KAAK,CAAC,YAAY,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;aAC5C;SACD;KACD;AACF,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAE,KAAK,GAAG,EAAE,EAAW,EAAE;IACtD,IAAI,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACZ;IACD,IAAI,cAAc,EAAE,EAAE;QACrB,OAAO,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC;KACjE;IAED,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC;IAE9E,IAAI,QAAQ,CAAC,kBAAkB,IAAI,CAAC,QAAQ,EAAE,EAAE;QAC/C,OAAO,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAE,EAA0B,CAAC,WAAW,KAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;KACvI;IAED,OAAO,CAAC,CAAC,YAAY,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE;IAChD,IAAI,cAAc,EAAE,EAAE;QACrB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC;QAC5E,WAAW,EAAE,aAAa,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;KACrD;SAAM,IAAI,QAAQ,CAAC,kBAAkB,IAAI,CAAC,QAAQ,EAAE,EAAE;QACtD,QAAQ,CAAC,kBAAkB,GAAG,QAAQ,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAE,EAA0B,CAAC,WAAW,KAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;KAC5I;SAAM;QACN,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC;QAChF,YAAY,EAAE,aAAa,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;KACvD;AACF,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,IAAe,EAAE,IAAY,EAAE,KAAK,GAAG,EAAE,EAAE,KAAc,EAAE,EAAE;IACzF,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;QAC1B,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;KACtC;SAAM;QACN,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;KACtC;AACF,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAkB,EAAE,MAAkB,EAAE,EAAE;IAC9D,IAAI,MAAM,KAAK,SAAS,EAAE;QACzB,OAAO,MAAM,CAAC;KACd;IACD,IAAI,MAAM,KAAK,SAAS,EAAE;QACzB,OAAO,MAAM,CAAC;KACd;IACD,MAAM,aAAa,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;IAC3E,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC/B,OAAO,GAAG,MAAM,IAAI,aAAa,EAAE,CAAC;KACpC;IACD,OAAO;QACN,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,aAAa,EAAE;QAC7C,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,QAAQ,EAAE,MAAM,CAAC,QAAQ;KACzB,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,EACN,WAAW,EACX,QAAQ,EACR,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,WAAW,GACX,CAAC","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 isSSR = typeof document === \"undefined\";\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 (isSSR) {\n\t\treturn true;\n\t}\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

@@ -0,0 +1,35 @@
+import "./StaticArea.js";
+import type UI5Element from "./UI5Element.js";
+/**
+ * @class
+ * @private
+ */
+declare class StaticAreaItem extends HTMLElement {
+    _rendered: boolean;
+    ownerElement?: UI5Element;
+    constructor();
+    /**
+     * @param ownerElement the UI5Element instance that owns this static area item
+     */
+    setOwnerElement(ownerElement: UI5Element): void;
+    /**
+     * 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
+     */
+    _updateContentDensity(): void;
+    _updateDirection(): void;
+    _updateAdditionalAttrs(): void;
+    /**
+     * Returns reference to the DOM element where the current fragment is added.
+     * @protected
+     */
+    getDomRef(): Promise<ShadowRoot | null>;
+    static getTag(): string;
+    static createInstance(): StaticAreaItem;
+}
+export default StaticAreaItem;

package/dist/StaticAreaItem.js

@@ -0,0 +1,100 @@
+import "./StaticArea.js";
+import updateShadowRoot from "./updateShadowRoot.js";
+import { renderFinished } from "./Render.js";
+import getEffectiveContentDensity from "./util/getEffectiveContentDensity.js";
+import { getEffectiveScopingSuffixForTag } from "./CustomElementsScopeUtils.js";
+import getEffectiveDir from "./locale/getEffectiveDir.js";
+const pureTagName = "ui5-static-area-item";
+const popupIntegrationAttr = "data-sap-ui-integration-popup-content";
+/**
+ * @class
+ * @private
+ */
+class StaticAreaItem extends HTMLElement {
+    constructor() {
+        super();
+        this._rendered = false;
+        this.attachShadow({ mode: "open" });
+    }
+    /**
+     * @param ownerElement the UI5Element instance that owns this static area item
+     */
+    setOwnerElement(ownerElement) {
+        this.ownerElement = ownerElement;
+        this.classList.add(this.ownerElement._id); // used for getting the popover in the tests
+        if (this.ownerElement.hasAttribute("data-ui5-static-stable")) {
+            this.setAttribute("data-ui5-stable", this.ownerElement.getAttribute("data-ui5-static-stable")); // stable selector
+        }
+    }
+    /**
+     * Updates the shadow root of the static area item with the latest state, if rendered
+     */
+    update() {
+        if (this._rendered) {
+            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
+     */
+    _updateContentDensity() {
+        if (getEffectiveContentDensity(this.ownerElement) === "compact") {
+            this.classList.add("sapUiSizeCompact");
+            this.classList.add("ui5-content-density-compact");
+        }
+        else {
+            this.classList.remove("sapUiSizeCompact");
+            this.classList.remove("ui5-content-density-compact");
+        }
+    }
+    _updateDirection() {
+        if (this.ownerElement) {
+            const dir = getEffectiveDir(this.ownerElement);
+            if (dir === "rtl") {
+                this.setAttribute("dir", dir);
+            }
+            else {
+                this.removeAttribute("dir");
+            }
+        }
+    }
+    _updateAdditionalAttrs() {
+        this.setAttribute(pureTagName, "");
+        this.setAttribute(popupIntegrationAttr, "");
+    }
+    /**
+     * Returns reference to the DOM element where the current fragment is added.
+     * @protected
+     */
+    async getDomRef() {
+        this.updateAdditionalProperties();
+        if (!this._rendered) {
+            this._rendered = true;
+            updateShadowRoot(this.ownerElement, true);
+        }
+        await renderFinished(); // Wait for the content of the ui5-static-area-item to be rendered
+        return this.shadowRoot;
+    }
+    static getTag() {
+        const suffix = getEffectiveScopingSuffixForTag(pureTagName);
+        if (!suffix) {
+            return pureTagName;
+        }
+        return `${pureTagName}-${suffix}`;
+    }
+    static createInstance() {
+        if (!customElements.get(StaticAreaItem.getTag())) {
+            customElements.define(StaticAreaItem.getTag(), StaticAreaItem);
+        }
+        return document.createElement(this.getTag());
+    }
+}
+export default StaticAreaItem;
+//# sourceMappingURL=StaticAreaItem.js.map

package/dist/StaticAreaItem.js.map

@@ -0,0 +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\";\n\nconst pureTagName = \"ui5-static-area-item\";\nconst popupIntegrationAttr = \"data-sap-ui-integration-popup-content\";\n\n/**\n * @class\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 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 === \"rtl\") {\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 * Returns reference to the DOM element where the current fragment is added.\n\t * @protected\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

@@ -1,9 +1,10 @@
 import "@ui5/webcomponents-base/dist/ssr-dom.js";
 import UI5ElementMetadata, { Slot, SlotValue, State, PropertyValue, Metadata } from "./UI5ElementMetadata.js";
 import EventProvider from "./EventProvider.js";
+import StaticAreaItem from "./StaticAreaItem.js";
 import type { TemplateFunction, TemplateFunctionResult } from "./renderer/executeTemplate.js";
 import type { AccessibilityInfo, PromiseResolve, ComponentStylesData, ClassMap } from "./types.js";
-type Renderer = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, options: RendererOptions) => void;
+type Renderer = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | Array<string> | undefined, forStaticArea: boolean, options: RendererOptions) => void;
 type RendererOptions = {
     /**
      * An object to use as the `this` value for event listeners. It's often
@@ -47,11 +48,16 @@ declare abstract class UI5Element extends HTMLElement {
     };
     _doNotSyncAttributes: Set<string>;
     _state: State;
-    _internals?: ElementInternals;
     _getRealDomRef?: () => HTMLElement;
+    staticAreaItem?: StaticAreaItem;
     static template?: TemplateFunction;
+    static staticAreaTemplate?: TemplateFunction;
     static _metadata: UI5ElementMetadata;
-    static renderer: Renderer;
+    /**
+     * @deprecated
+     */
+    static render: Renderer;
+    static renderer?: Renderer;
     constructor();
     /**
      * Returns a unique ID for this UI5 Element
@@ -61,6 +67,7 @@ declare abstract class UI5Element extends HTMLElement {
      */
     get _id(): string;
     render(): object;
+    renderStatic(): object;
     /**
      * Do not call this method from derivatives of UI5Element, use "onEnterDOM" only
      * @private
@@ -140,8 +147,6 @@ declare abstract class UI5Element extends HTMLElement {
      * @private
      */
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    formAssociatedCallback(): void;
-    static get formAssociated(): boolean;
     /**
      * @private
      */
@@ -198,9 +203,9 @@ declare abstract class UI5Element extends HTMLElement {
      *   1) children: immediate children (HTML elements or text nodes) were added, removed or reordered in the slot
      *   2) textcontent: text nodes in the slot changed value (or nested text nodes were added or changed value). Can only trigger for slots of "type: Node"
      *   3) slotchange: a slot element, slotted inside that slot had its "slotchange" event listener called. This practically means that transitively slotted children changed.
-     *	  Can only trigger if the child of a slot is a slot element itself.
+     *      Can only trigger if the child of a slot is a slot element itself.
      *   4) childchange: indicates that a UI5Element child in that slot was invalidated and in turn invalidated the component.
-     *	  Can only trigger for slots with "invalidateOnChildChange" metadata descriptor
+     *      Can only trigger for slots with "invalidateOnChildChange" metadata descriptor
      *
      *  - newValue: the new value of the property (for type="property" only)
      *
@@ -312,6 +317,14 @@ declare abstract class UI5Element extends HTMLElement {
      * @private
      */
     static _needsShadowDOM(): boolean;
+    /**
+     * @private
+     */
+    static _needsStaticArea(): boolean;
+    /**
+     * @public
+     */
+    getStaticAreaItemDomRef(): Promise<ShadowRoot | null>;
     /**
      * @private
      */
@@ -326,6 +339,11 @@ declare abstract class UI5Element extends HTMLElement {
      * @protected
      */
     static styles: ComponentStylesData;
+    /**
+     * Returns the Static Area CSS for this UI5 Web Component Class
+     * @protected
+     */
+    static get staticAreaStyles(): ComponentStylesData;
     /**
      * Returns an array with the dependencies for this UI5 Web Component, which could be:
      *  - composed components (used in its shadow root or static area item)
@@ -334,6 +352,7 @@ declare abstract class UI5Element extends HTMLElement {
      * @protected
      */
     static get dependencies(): Array<typeof UI5Element>;
+    static cacheUniqueDependencies(this: typeof UI5Element): void;
     /**
      * Returns a list of the unique dependencies for this UI5 Web Component
      *
@@ -361,15 +380,11 @@ declare abstract class UI5Element extends HTMLElement {
      * @public
      */
     static getMetadata(): UI5ElementMetadata;
-    get validity(): ValidityState | undefined;
-    get validationMessage(): string | undefined;
-    checkValidity(): boolean | undefined;
-    reportValidity(): boolean | undefined;
 }
 /**
  * Always use duck-typing to cover all runtimes on the page.
  */
 declare const instanceOfUI5Element: (object: any) => object is UI5Element;
 export default UI5Element;
-export { instanceOfUI5Element, };
+export { instanceOfUI5Element };
 export type { ChangeInfo, Renderer, RendererOptions, };