@ui5/webcomponents-base 0.0.0-0a074c90e → 0.0.0-111ecd79a

package/dist/theming/CustomStyle.d.ts

@@ -0,0 +1,6 @@
+type CustomCSSChangeCallback = (tag: string) => void;
+declare const attachCustomCSSChange: (listener: CustomCSSChangeCallback) => void;
+declare const detachCustomCSSChange: (listener: CustomCSSChangeCallback) => void;
+declare const addCustomCSS: (tag: string, css: string) => Promise<void>;
+declare const getCustomCSS: (tag: string) => string;
+export { addCustomCSS, getCustomCSS, attachCustomCSSChange, detachCustomCSSChange, };

package/dist/theming/CustomStyle.js

@@ -1,40 +1,48 @@
 import { reRenderAllUI5Elements } from "../Render.js";
+import getSharedResource from "../getSharedResource.js";
 import EventProvider from "../EventProvider.js";
-
-const eventProvider = new EventProvider();
+const getEventProvider = () => getSharedResource("CustomStyle.eventProvider", new EventProvider());
 const CUSTOM_CSS_CHANGE = "CustomCSSChange";
-
-const attachCustomCSSChange = listener => {
-	eventProvider.attachEvent(CUSTOM_CSS_CHANGE, listener);
+const attachCustomCSSChange = (listener) => {
+    getEventProvider().attachEvent(CUSTOM_CSS_CHANGE, listener);
 };
-
-const detachCustomCSSChange = listener => {
-	eventProvider.detachEvent(CUSTOM_CSS_CHANGE, listener);
+const detachCustomCSSChange = (listener) => {
+    getEventProvider().detachEvent(CUSTOM_CSS_CHANGE, listener);
 };
-
-const fireCustomCSSChange = tag => {
-	return eventProvider.fireEvent(CUSTOM_CSS_CHANGE, tag);
+const fireCustomCSSChange = (tag) => {
+    return getEventProvider().fireEvent(CUSTOM_CSS_CHANGE, tag);
 };
-
-const customCSSFor = {};
-
+const getCustomCSSFor = () => getSharedResource("CustomStyle.customCSSFor", {});
+// Listen to the eventProvider, in case other copies of this CustomStyle module fire this
+// event, and this copy would therefore need to reRender the ui5 webcomponents; but
+// don't reRender if it was this copy that fired the event to begin with.
+let skipRerender;
+attachCustomCSSChange((tag) => {
+    if (!skipRerender) {
+        reRenderAllUI5Elements({ tag });
+    }
+});
 const addCustomCSS = (tag, css) => {
-	if (!customCSSFor[tag]) {
-		customCSSFor[tag] = [];
-	}
-	customCSSFor[tag].push(css);
-	fireCustomCSSChange(tag);
-
-	return reRenderAllUI5Elements({ tag });
+    const customCSSFor = getCustomCSSFor();
+    if (!customCSSFor[tag]) {
+        customCSSFor[tag] = [];
+    }
+    customCSSFor[tag].push(css);
+    skipRerender = true;
+    try {
+        // The event is fired and the attached event listeners are all called synchronously
+        // The skipRerender flag will be used to avoid calling reRenderAllUI5Elements twice when it is this copy
+        // of CustomStyle.js which is firing the `CustomCSSChange` event.
+        fireCustomCSSChange(tag);
+    }
+    finally {
+        skipRerender = false;
+    }
+    return reRenderAllUI5Elements({ tag });
 };
-
-const getCustomCSS = tag => {
-	return customCSSFor[tag] ? customCSSFor[tag].join("") : "";
-};
-
-export {
-	addCustomCSS,
-	getCustomCSS,
-	attachCustomCSSChange,
-	detachCustomCSSChange,
+const getCustomCSS = (tag) => {
+    const customCSSFor = getCustomCSSFor();
+    return customCSSFor[tag] ? customCSSFor[tag].join("") : "";
 };
+export { addCustomCSS, getCustomCSS, attachCustomCSSChange, detachCustomCSSChange, };
+//# sourceMappingURL=CustomStyle.js.map

package/dist/theming/CustomStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomStyle.js","sourceRoot":"","sources":["../../src/theming/CustomStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AACxD,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAIhD,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,iBAAiB,CAAC,2BAA2B,EAAE,IAAI,aAAa,EAAgB,CAAC,CAAC;AACjH,MAAM,iBAAiB,GAAG,iBAAiB,CAAC;AAE5C,MAAM,qBAAqB,GAAG,CAAC,QAAiC,EAAE,EAAE;IACnE,gBAAgB,EAAE,CAAC,WAAW,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,QAAiC,EAAE,EAAE;IACnE,gBAAgB,EAAE,CAAC,WAAW,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAE,EAAE;IAC3C,OAAO,gBAAgB,EAAE,CAAC,SAAS,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,iBAAiB,CAAgC,0BAA0B,EAAE,EAAE,CAAC,CAAC;AAE/G,yFAAyF;AACzF,mFAAmF;AACnF,yEAAyE;AACzE,IAAI,YAAqB,CAAC;AAC1B,qBAAqB,CAAC,CAAC,GAAW,EAAE,EAAE;IACrC,IAAI,CAAC,YAAY,EAAE;QAClB,sBAAsB,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;KAChC;AACF,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,GAAW,EAAE,EAAE;IACjD,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE;QACvB,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;KACvB;IACD,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,YAAY,GAAG,IAAI,CAAC;IACpB,IAAI;QACH,mFAAmF;QACnF,wGAAwG;QACxG,iEAAiE;QACjE,mBAAmB,CAAC,GAAG,CAAC,CAAC;KACzB;YAAS;QACT,YAAY,GAAG,KAAK,CAAC;KACrB;IAED,OAAO,sBAAsB,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;IACpC,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAC5D,CAAC,CAAC;AAEF,OAAO,EACN,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,qBAAqB,GACrB,CAAC"}

package/dist/theming/ThemeLoaded.d.ts

@@ -0,0 +1,5 @@
+type ThemeLoadedCallback = (theme: string) => void;
+declare const attachThemeLoaded: (listener: ThemeLoadedCallback) => void;
+declare const detachThemeLoaded: (listener: ThemeLoadedCallback) => void;
+declare const fireThemeLoaded: (theme: string) => void[];
+export { attachThemeLoaded, detachThemeLoaded, fireThemeLoaded, };

package/dist/theming/ThemeLoaded.js

@@ -1,22 +1,14 @@
 import EventProvider from "../EventProvider.js";
-
 const eventProvider = new EventProvider();
 const THEME_LOADED = "themeLoaded";
-
-const attachThemeLoaded = listener => {
-	eventProvider.attachEvent(THEME_LOADED, listener);
+const attachThemeLoaded = (listener) => {
+    eventProvider.attachEvent(THEME_LOADED, listener);
 };
-
-const detachThemeLoaded = listener => {
-	eventProvider.detachEvent(THEME_LOADED, listener);
+const detachThemeLoaded = (listener) => {
+    eventProvider.detachEvent(THEME_LOADED, listener);
 };
-
-const fireThemeLoaded = theme => {
-	return eventProvider.fireEvent(THEME_LOADED, theme);
-};
-
-export {
-	attachThemeLoaded,
-	detachThemeLoaded,
-	fireThemeLoaded,
+const fireThemeLoaded = (theme) => {
+    return eventProvider.fireEvent(THEME_LOADED, theme);
 };
+export { attachThemeLoaded, detachThemeLoaded, fireThemeLoaded, };
+//# sourceMappingURL=ThemeLoaded.js.map

package/dist/theming/ThemeLoaded.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeLoaded.js","sourceRoot":"","sources":["../../src/theming/ThemeLoaded.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAIhD,MAAM,aAAa,GAAG,IAAI,aAAa,EAAgB,CAAC;AACxD,MAAM,YAAY,GAAG,aAAa,CAAC;AAEnC,MAAM,iBAAiB,GAAG,CAAC,QAA6B,EAAE,EAAE;IAC3D,aAAa,CAAC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,QAA6B,EAAE,EAAE;IAC3D,aAAa,CAAC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE;IACzC,OAAO,aAAa,CAAC,SAAS,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;AACrD,CAAC,CAAC;AAEF,OAAO,EACN,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GACf,CAAC"}

package/dist/theming/applyTheme.d.ts

@@ -0,0 +1,2 @@
+declare const applyTheme: (theme: string) => Promise<void>;
+export default applyTheme;

package/dist/theming/applyTheme.js

@@ -1,78 +1,75 @@
 import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "../asset-registries/Themes.js";
-import createThemePropertiesStyleTag from "./createThemePropertiesStyleTag.js";
+import { removeStyle, createOrUpdateStyle } from "../ManagedStyles.js";
 import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
-
-const BASE_THEME_PACKAGE = "@ui5/webcomponents-theme-base";
-
+import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoots.js";
+import { DEFAULT_THEME } from "../generated/AssetParameters.js";
+const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming";
 const isThemeBaseRegistered = () => {
-	const registeredPackages = getRegisteredPackages();
-	return registeredPackages.has(BASE_THEME_PACKAGE);
+    const registeredPackages = getRegisteredPackages();
+    return registeredPackages.has(BASE_THEME_PACKAGE);
 };
-
-const loadThemeBase = async theme => {
-	if (!isThemeBaseRegistered()) {
-		return;
-	}
-
-	const cssText = await getThemeProperties(BASE_THEME_PACKAGE, theme);
-	createThemePropertiesStyleTag(cssText, BASE_THEME_PACKAGE);
+const loadThemeBase = async (theme) => {
+    if (!isThemeBaseRegistered()) {
+        return;
+    }
+    const cssData = await getThemeProperties(BASE_THEME_PACKAGE, theme);
+    if (cssData) {
+        createOrUpdateStyle(cssData, "data-ui5-theme-properties", BASE_THEME_PACKAGE);
+    }
 };
-
 const deleteThemeBase = () => {
-	const styleElement = document.head.querySelector(`style[data-ui5-theme-properties="${BASE_THEME_PACKAGE}"]`);
-	if (styleElement) {
-		styleElement.parentElement.removeChild(styleElement);
-	}
+    removeStyle("data-ui5-theme-properties", BASE_THEME_PACKAGE);
 };
-
-const loadComponentPackages = async theme => {
-	const registeredPackages = getRegisteredPackages();
-	registeredPackages.forEach(async packageName => {
-		if (packageName === BASE_THEME_PACKAGE) {
-			return;
-		}
-
-		const cssText = await getThemeProperties(packageName, theme);
-		createThemePropertiesStyleTag(cssText, packageName);
-	});
+const loadComponentPackages = async (theme) => {
+    const registeredPackages = getRegisteredPackages();
+    const packagesStylesPromises = [...registeredPackages].map(async (packageName) => {
+        if (packageName === BASE_THEME_PACKAGE) {
+            return;
+        }
+        const cssData = await getThemeProperties(packageName, theme);
+        if (cssData) {
+            createOrUpdateStyle(cssData, "data-ui5-theme-properties", packageName);
+        }
+    });
+    return Promise.all(packagesStylesPromises);
 };
-
-const detectExternalTheme = () => {
-	// If theme designer theme is detected, use this
-	const extTheme = getThemeDesignerTheme();
-	if (extTheme) {
-		return extTheme;
-	}
-
-	// If OpenUI5Support is enabled, try to find out if it loaded variables
-	const OpenUI5Support = getFeature("OpenUI5Support");
-	if (OpenUI5Support) {
-		const varsLoaded = OpenUI5Support.cssVariablesLoaded();
-		if (varsLoaded) {
-			return {
-				themeName: OpenUI5Support.getConfigurationSettingsObject().theme, // just themeName, baseThemeName is only relevant for custom themes
-			};
-		}
-	}
+const detectExternalTheme = async (theme) => {
+    // If theme designer theme is detected, use this
+    const extTheme = getThemeDesignerTheme();
+    if (extTheme) {
+        return extTheme;
+    }
+    // If OpenUI5Support is enabled, try to find out if it loaded variables
+    const openUI5Support = getFeature("OpenUI5Support");
+    if (openUI5Support) {
+        const varsLoaded = openUI5Support.cssVariablesLoaded();
+        if (varsLoaded) {
+            return {
+                themeName: openUI5Support.getConfigurationSettingsObject()?.theme,
+                baseThemeName: "", // baseThemeName is only relevant for custom themes
+            };
+        }
+    }
+    else if (getThemeRoot()) {
+        await attachCustomThemeStylesToHead(theme);
+        return getThemeDesignerTheme();
+    }
 };
-
-const applyTheme = async theme => {
-	const extTheme = detectExternalTheme();
-
-	// Only load theme_base properties if there is no externally loaded theme, or there is, but it is not being loaded
-	if (!extTheme || theme !== extTheme.themeName) {
-		await loadThemeBase(theme);
-	} else {
-		deleteThemeBase();
-	}
-
-	// Always load component packages properties. For non-registered themes, try with the base theme, if any
-	const packagesTheme = isThemeRegistered(theme) ? theme : extTheme && extTheme.baseThemeName;
-	await loadComponentPackages(packagesTheme);
-
-	fireThemeLoaded(theme);
+const applyTheme = async (theme) => {
+    const extTheme = await detectExternalTheme(theme);
+    // Only load theme_base properties if there is no externally loaded theme, or there is, but it is not being loaded
+    if (!extTheme || theme !== extTheme.themeName) {
+        await loadThemeBase(theme);
+    }
+    else {
+        deleteThemeBase();
+    }
+    // Always load component packages properties. For non-registered themes, try with the base theme, if any
+    const packagesTheme = isThemeRegistered(theme) ? theme : extTheme && extTheme.baseThemeName;
+    await loadComponentPackages(packagesTheme || DEFAULT_THEME);
+    fireThemeLoaded(theme);
 };
-
 export default applyTheme;
+//# sourceMappingURL=applyTheme.js.map

package/dist/theming/applyTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyTheme.js","sourceRoot":"","sources":["../../src/theming/applyTheme.ts"],"names":[],"mappings":"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"}

package/dist/theming/getConstructableStyle.d.ts

@@ -0,0 +1,9 @@
+import UI5Element from "../UI5Element.js";
+/**
+ * Returns (and caches) a constructable style sheet for a web component class
+ * Note: Chrome
+ * @param ElementClass
+ * @returns {*}
+ */
+declare const getConstructableStyle: (ElementClass: typeof UI5Element, forStaticArea?: boolean) => CSSStyleSheet[];
+export default getConstructableStyle;

package/dist/theming/getConstructableStyle.js

@@ -1,12 +1,9 @@
 import getEffectiveStyle from "./getEffectiveStyle.js";
 import { attachCustomCSSChange } from "./CustomStyle.js";
-
 const constructableStyleMap = new Map();
-
-attachCustomCSSChange(tag => {
-	constructableStyleMap.delete(`${tag}_normal`); // there is custom CSS only for the component itself, not for its static area part
+attachCustomCSSChange((tag) => {
+    constructableStyleMap.delete(`${tag}_normal`); // there is custom CSS only for the component itself, not for its static area part
 });
-
 /**
  * Returns (and caches) a constructable style sheet for a web component class
  * Note: Chrome
@@ -14,17 +11,15 @@ attachCustomCSSChange(tag => {
  * @returns {*}
  */
 const getConstructableStyle = (ElementClass, forStaticArea = false) => {
-	const tag = ElementClass.getMetadata().getTag();
-	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
-
-	if (!constructableStyleMap.has(key)) {
-		const styleContent = getEffectiveStyle(ElementClass, forStaticArea);
-		const style = new CSSStyleSheet();
-		style.replaceSync(styleContent);
-		constructableStyleMap.set(key, [style]);
-	}
-
-	return constructableStyleMap.get(key);
+    const tag = ElementClass.getMetadata().getTag();
+    const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+    if (!constructableStyleMap.has(key)) {
+        const styleContent = getEffectiveStyle(ElementClass, forStaticArea);
+        const style = new CSSStyleSheet();
+        style.replaceSync(styleContent);
+        constructableStyleMap.set(key, [style]);
+    }
+    return constructableStyleMap.get(key);
 };
-
 export default getConstructableStyle;
+//# sourceMappingURL=getConstructableStyle.js.map

package/dist/theming/getConstructableStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getConstructableStyle.js","sourceRoot":"","sources":["../../src/theming/getConstructableStyle.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,MAAM,qBAAqB,GAAG,IAAI,GAAG,EAAgC,CAAC;AAEtE,qBAAqB,CAAC,CAAC,GAAW,EAAE,EAAE;IACrC,qBAAqB,CAAC,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,kFAAkF;AAClI,CAAC,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,qBAAqB,GAAG,CAAC,YAA+B,EAAE,aAAa,GAAG,KAAK,EAAE,EAAE;IACxF,MAAM,GAAG,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC;IAChD,MAAM,GAAG,GAAG,GAAG,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;IAE5D,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;QACpC,MAAM,YAAY,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;QACpE,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;QAClC,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAChC,qBAAqB,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;KACxC;IAED,OAAO,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAE,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/theming/getEffectiveLinksHrefs.d.ts

@@ -0,0 +1,3 @@
+import type UI5Element from "../UI5Element.js";
+declare const getEffectiveLinksHrefs: (ElementClass: typeof UI5Element, forStaticArea?: boolean) => string[] | undefined;
+export default getEffectiveLinksHrefs;

package/dist/theming/getEffectiveLinksHrefs.js

@@ -0,0 +1,17 @@
+import { getUrl } from "../CSP.js";
+import { getFeature } from "../FeaturesRegistry.js";
+const MAX_DEPTH_INHERITED_CLASSES = 10; // TypeScript complains about Infinity and big numbers
+const getEffectiveLinksHrefs = (ElementClass, forStaticArea = false) => {
+    const stylesData = ElementClass[forStaticArea ? "staticAreaStyles" : "styles"];
+    if (!stylesData) {
+        return;
+    }
+    const stylesDataArray = Array.isArray(stylesData) ? stylesData : [stylesData];
+    const openUI5Enablement = getFeature("OpenUI5Enablement");
+    if (openUI5Enablement) {
+        stylesDataArray.push(openUI5Enablement.getBusyIndicatorStyles());
+    }
+    return stylesDataArray.flat(MAX_DEPTH_INHERITED_CLASSES).filter(data => !!data).map(data => getUrl(data.packageName, data.fileName));
+};
+export default getEffectiveLinksHrefs;
+//# sourceMappingURL=getEffectiveLinksHrefs.js.map

package/dist/theming/getEffectiveLinksHrefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getEffectiveLinksHrefs.js","sourceRoot":"","sources":["../../src/theming/getEffectiveLinksHrefs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKpD,MAAM,2BAA2B,GAAG,EAAE,CAAC,CAAC,sDAAsD;AAE9F,MAAM,sBAAsB,GAAG,CAAC,YAA+B,EAAE,aAAa,GAAG,KAAK,EAAE,EAAE;IACzF,MAAM,UAAU,GAAwB,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEpG,IAAI,CAAC,UAAU,EAAE;QAChB,OAAO;KACP;IAED,MAAM,eAAe,GAAwB,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAEnG,MAAM,iBAAiB,GAAG,UAAU,CAA2B,mBAAmB,CAAC,CAAC;IACpF,IAAI,iBAAiB,EAAE;QACtB,eAAe,CAAC,IAAI,CAAC,iBAAiB,CAAC,sBAAsB,EAAE,CAAC,CAAC;KACjE;IAED,OAAO,eAAe,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAE,IAAqB,CAAC,WAAW,EAAG,IAAqB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC1K,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/theming/getEffectiveStyle.d.ts

@@ -0,0 +1,3 @@
+import type UI5Element from "../UI5Element.js";
+declare const getEffectiveStyle: (ElementClass: typeof UI5Element, forStaticArea?: boolean) => string;
+export default getEffectiveStyle;

package/dist/theming/getEffectiveStyle.js

@@ -1,30 +1,32 @@
 import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
 import getStylesString from "./getStylesString.js";
-
+import { getFeature } from "../FeaturesRegistry.js";
 const effectiveStyleMap = new Map();
-
-attachCustomCSSChange(tag => {
-	effectiveStyleMap.delete(`${tag}_normal`); // there is custom CSS only for the component itself, not for its static area part
+attachCustomCSSChange((tag) => {
+    effectiveStyleMap.delete(`${tag}_normal`); // there is custom CSS only for the component itself, not for its static area part
 });
-
 const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
-	const tag = ElementClass.getMetadata().getTag();
-	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
-
-	if (!effectiveStyleMap.has(key)) {
-		let effectiveStyle;
-
-		if (forStaticArea) {
-			effectiveStyle = getStylesString(ElementClass.staticAreaStyles);
-		} else {
-			const customStyle = getCustomCSS(tag) || "";
-			const builtInStyles = getStylesString(ElementClass.styles);
-			effectiveStyle = `${builtInStyles} ${customStyle}`;
-		}
-		effectiveStyleMap.set(key, effectiveStyle);
-	}
-
-	return effectiveStyleMap.get(key);
+    const tag = ElementClass.getMetadata().getTag();
+    const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+    const openUI5Enablement = getFeature("OpenUI5Enablement");
+    if (!effectiveStyleMap.has(key)) {
+        let effectiveStyle;
+        let busyIndicatorStyles = "";
+        if (openUI5Enablement) {
+            busyIndicatorStyles = getStylesString(openUI5Enablement.getBusyIndicatorStyles());
+        }
+        if (forStaticArea) {
+            effectiveStyle = getStylesString(ElementClass.staticAreaStyles);
+        }
+        else {
+            const customStyle = getCustomCSS(tag) || "";
+            const builtInStyles = getStylesString(ElementClass.styles);
+            effectiveStyle = `${builtInStyles} ${customStyle}`;
+        }
+        effectiveStyle = `${effectiveStyle} ${busyIndicatorStyles}`;
+        effectiveStyleMap.set(key, effectiveStyle);
+    }
+    return effectiveStyleMap.get(key); // The key is guaranteed to exist
 };
-
 export default getEffectiveStyle;
+//# sourceMappingURL=getEffectiveStyle.js.map

package/dist/theming/getEffectiveStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getEffectiveStyle.js","sourceRoot":"","sources":["../../src/theming/getEffectiveStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,eAAe,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAIpD,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAAkB,CAAC;AAEpD,qBAAqB,CAAC,CAAC,GAAW,EAAE,EAAE;IACrC,iBAAiB,CAAC,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,kFAAkF;AAC9H,CAAC,CAAC,CAAC;AAEH,MAAM,iBAAiB,GAAG,CAAC,YAA+B,EAAE,aAAa,GAAG,KAAK,EAAE,EAAE;IACpF,MAAM,GAAG,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC;IAChD,MAAM,GAAG,GAAG,GAAG,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;IAC5D,MAAM,iBAAiB,GAAG,UAAU,CAA2B,mBAAmB,CAAC,CAAC;IAEpF,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;QAChC,IAAI,cAAc,CAAC;QACnB,IAAI,mBAAmB,GAAG,EAAE,CAAC;QAE7B,IAAI,iBAAiB,EAAE;YACtB,mBAAmB,GAAG,eAAe,CAAC,iBAAiB,CAAC,sBAAsB,EAAE,CAAC,CAAC;SAClF;QAED,IAAI,aAAa,EAAE;YAClB,cAAc,GAAG,eAAe,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;SAChE;aAAM;YACN,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;YAC5C,MAAM,aAAa,GAAG,eAAe,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;YAC3D,cAAc,GAAG,GAAG,aAAa,IAAI,WAAW,EAAE,CAAC;SACnD;QAED,cAAc,GAAG,GAAG,cAAc,IAAI,mBAAmB,EAAE,CAAC;QAC5D,iBAAiB,CAAC,GAAG,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC;KAC3C;IAED,OAAO,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAE,CAAC,CAAC,iCAAiC;AACtE,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/theming/getStylesString.d.ts

@@ -0,0 +1,3 @@
+import { ComponentStylesData } from "../types.js";
+declare const getStylesString: (styles: ComponentStylesData) => string;
+export default getStylesString;

package/dist/theming/getStylesString.js

@@ -1,13 +1,11 @@
-const getStylesString = styles => {
-	if (Array.isArray(styles)) {
-		return flatten(styles.filter(style => !!style)).join(" ");
-	}
-
-	return styles;
+const MAX_DEPTH_INHERITED_CLASSES = 10; // TypeScript complains about Infinity and big numbers
+const getStylesString = (styles) => {
+    if (Array.isArray(styles)) {
+        return styles.filter(style => !!style).flat(MAX_DEPTH_INHERITED_CLASSES).map((style) => {
+            return typeof style === "string" ? style : style.content;
+        }).join(" ");
+    }
+    return typeof styles === "string" ? styles : styles.content;
 };
-
-const flatten = arr => {
-	return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
-};
-
 export default getStylesString;
+//# sourceMappingURL=getStylesString.js.map

package/dist/theming/getStylesString.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getStylesString.js","sourceRoot":"","sources":["../../src/theming/getStylesString.ts"],"names":[],"mappings":"AAEA,MAAM,2BAA2B,GAAG,EAAE,CAAC,CAAC,sDAAsD;AAE9F,MAAM,eAAe,GAAG,CAAC,MAA2B,EAAE,EAAE;IACvD,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QAC1B,OAAQ,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,2BAA2B,CAAsB,CAAC,GAAG,CAAC,CAAC,KAAgB,EAAE,EAAE;YACvH,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;QAC1D,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACb;IAED,OAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;AAC7D,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/theming/getThemeDesignerTheme.d.ts

@@ -0,0 +1,7 @@
+type ThemeDescriptor = {
+    themeName: string;
+    baseThemeName?: string;
+};
+declare const getThemeDesignerTheme: () => ThemeDescriptor | undefined;
+export default getThemeDesignerTheme;
+export type { ThemeDescriptor };

package/dist/theming/getThemeDesignerTheme.js

@@ -1,67 +1,80 @@
+const warnings = new Set();
 const getThemeMetadata = () => {
-	// Check if the class was already applied, most commonly to the link/style tag with the CSS Variables
-	let el = document.querySelector(".sapThemeMetaData-Base-baseLib");
-	if (el) {
-		return getComputedStyle(el).backgroundImage;
-	}
-
-	el = document.createElement("span");
-	el.style.display = "none";
-	el.classList.add("sapThemeMetaData-Base-baseLib");
-	document.body.appendChild(el);
-	const metadata = getComputedStyle(el).backgroundImage;
-	document.body.removeChild(el);
-
-	return metadata;
+    // Check if the class was already applied, most commonly to the link/style tag with the CSS Variables
+    let el = document.querySelector(".sapThemeMetaData-Base-baseLib") || document.querySelector(".sapThemeMetaData-UI5-sap-ui-core");
+    if (el) {
+        return getComputedStyle(el).backgroundImage;
+    }
+    el = document.createElement("span");
+    el.style.display = "none";
+    // Try with sapThemeMetaData-Base-baseLib first
+    el.classList.add("sapThemeMetaData-Base-baseLib");
+    document.body.appendChild(el);
+    let metadata = getComputedStyle(el).backgroundImage;
+    // Try with sapThemeMetaData-UI5-sap-ui-core only if the previous selector was not found
+    if (metadata === "none") {
+        el.classList.add("sapThemeMetaData-UI5-sap-ui-core");
+        metadata = getComputedStyle(el).backgroundImage;
+    }
+    document.body.removeChild(el);
+    return metadata;
 };
-
-const parseThemeMetadata = metadataString => {
-	const params = /\(["']?data:text\/plain;utf-8,(.*?)['"]?\)$/i.exec(metadataString);
-	if (params && params.length >= 2) {
-		let paramsString = params[1];
-		paramsString = paramsString.replace(/\\"/g, `"`);
-		if (paramsString.charAt(0) !== "{" && paramsString.charAt(paramsString.length - 1) !== "}") {
-			try {
-				paramsString = decodeURIComponent(paramsString);
-			} catch (ex) {
-				console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
-				return;
-			}
-		}
-		try {
-			return JSON.parse(paramsString);
-		} catch (ex) {
-			console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
-		}
-	}
+const parseThemeMetadata = (metadataString) => {
+    const params = /\(["']?data:text\/plain;utf-8,(.*?)['"]?\)$/i.exec(metadataString);
+    if (params && params.length >= 2) {
+        let paramsString = params[1];
+        paramsString = paramsString.replace(/\\"/g, `"`);
+        if (paramsString.charAt(0) !== "{" && paramsString.charAt(paramsString.length - 1) !== "}") {
+            try {
+                paramsString = decodeURIComponent(paramsString);
+            }
+            catch (ex) {
+                if (!warnings.has("decode")) {
+                    console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
+                    warnings.add("decode");
+                }
+                return;
+            }
+        }
+        try {
+            return JSON.parse(paramsString);
+        }
+        catch (ex) {
+            if (!warnings.has("parse")) {
+                console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
+                warnings.add("parse");
+            }
+        }
+    }
 };
-
-const processThemeMetadata = metadata => {
-	let themeName;
-	let baseThemeName;
-
-	try {
-		themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)[1];
-		baseThemeName = metadata.Extends[0];
-	} catch (ex) {
-		console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
-		return;
-	}
-
-	return {
-		themeName,
-		baseThemeName,
-	};
+const processThemeMetadata = (metadata) => {
+    let themeName;
+    let baseThemeName;
+    try {
+        themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)[1];
+        baseThemeName = metadata.Extends[0];
+    }
+    catch (ex) {
+        if (!warnings.has("object")) {
+            console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
+            warnings.add("object");
+        }
+        return;
+    }
+    return {
+        themeName,
+        baseThemeName,
+    };
 };
-
 const getThemeDesignerTheme = () => {
-	const metadataString = getThemeMetadata();
-	if (!metadataString || metadataString === "none") {
-		return;
-	}
-
-	const metadata = parseThemeMetadata(metadataString);
-	return processThemeMetadata(metadata);
+    const metadataString = getThemeMetadata();
+    if (!metadataString || metadataString === "none") {
+        return;
+    }
+    const metadata = parseThemeMetadata(metadataString);
+    if (metadata) {
+        return processThemeMetadata(metadata);
+    }
 };
-
 export default getThemeDesignerTheme;
+//# sourceMappingURL=getThemeDesignerTheme.js.map