@ui5/webcomponents-base 0.0.0-e463d2345 → 0.0.0-e55c2cec6

package/src/i18nBundle.ts

@@ -0,0 +1,108 @@
+import { registerI18nLoader, fetchI18nBundle, getI18nBundleData } from "./asset-registries/i18n.js";
+import formatMessage from "./util/formatMessage.js";
+
+const I18nBundleInstances = new Map<string, I18nBundle>();
+
+let customGetI18nBundle: I18nBundleGetter;
+
+type I18nText = {
+	key: string,
+	defaultText: string,
+};
+
+type I18nBundleGetter = (packageName: string) => Promise<I18nBundle>;
+
+/**
+ * @class
+ * @public
+ */
+class I18nBundle {
+	packageName: string;
+
+	constructor(packageName: string) {
+		this.packageName = packageName;
+	}
+
+	/**
+	 * Returns a text in the currently loaded language
+	 *
+	 * @public
+	 * @param {Object|String} textObj key/defaultText pair or just the key
+	 * @param params Values for the placeholders
+	 * @returns {string}
+	 */
+	getText(textObj: I18nText, ...params: Array<number | string>): string {
+		if (typeof textObj === "string") {
+			textObj = { key: textObj, defaultText: textObj };
+		}
+
+		if (!textObj || !textObj.key) {
+			return "";
+		}
+
+		const bundle = getI18nBundleData(this.packageName);
+		if (bundle && !bundle[textObj.key]) {
+			console.warn(`Key ${textObj.key} not found in the i18n bundle, the default text will be used`); // eslint-disable-line
+		}
+		const messageText = bundle && bundle[textObj.key] ? bundle[textObj.key] : (textObj.defaultText || textObj.key);
+
+		return formatMessage(messageText, params);
+	}
+}
+
+/**
+ * Returns the I18nBundle instance for the given package synchronously.
+ *
+ * @public
+ * @param packageName
+ * @returns { I18nBundle }
+ */
+const getI18nBundleSync = (packageName: string): I18nBundle => {
+	if (I18nBundleInstances.has(packageName)) {
+		return I18nBundleInstances.get(packageName)!;
+	}
+
+	const i18nBundle = new I18nBundle(packageName);
+	I18nBundleInstances.set(packageName, i18nBundle);
+	return i18nBundle;
+};
+
+/**
+ * Fetches and returns the I18nBundle instance for the given package.
+ *
+ * @public
+ * @param packageName
+ * @returns { Promise<I18nBundle> }
+ */
+const getI18nBundle = async (packageName: string): Promise<I18nBundle> => {
+	if (customGetI18nBundle) {
+		return customGetI18nBundle(packageName);
+	}
+
+	await fetchI18nBundle(packageName);
+	return getI18nBundleSync(packageName);
+};
+
+/**
+ * Allows developers to provide a custom getI18nBundle implementation
+ * If this function is called, the custom implementation will be used for all components and will completely
+ * replace the default implementation.
+ *
+ * @public
+ * @param customGet the function to use instead of the standard getI18nBundle implementation
+ */
+const registerCustomI18nBundleGetter = (customGet: I18nBundleGetter) => {
+	customGetI18nBundle = customGet;
+};
+
+export default I18nBundle;
+
+export {
+	registerI18nLoader,
+	getI18nBundle,
+	registerCustomI18nBundleGetter,
+};
+
+export type {
+	I18nText,
+};

package/{dist/Locale.js → src/locale/Locale.ts}

@@ -1,17 +1,25 @@
-import getDesigntimePropertyAsArray from "./util/getDesigntimePropertyAsArray.js";
+import { DEFAULT_LANGUAGE } from "../generated/AssetParameters.js";
 
 const rLocale = /^((?:[A-Z]{2,3}(?:-[A-Z]{3}){0,3})|[A-Z]{4}|[A-Z]{5,8})(?:-([A-Z]{4}))?(?:-([A-Z]{2}|[0-9]{3}))?((?:-[0-9A-Z]{5,8}|-[0-9][0-9A-Z]{3})*)((?:-[0-9A-WYZ](?:-[0-9A-Z]{2,8})+)*)(?:-(X(?:-[0-9A-Z]{1,8})+))?$/i;
 
 class Locale {
-	constructor(sLocaleId) {
+	sLocaleId: string;
+	sLanguage: string;
+	sScript: string;
+	sRegion: string;
+	sVariant: string | null;
+	sExtension: string | null;
+	sPrivateUse: string | null;
+
+	constructor(sLocaleId: string) {
 		const aResult = rLocale.exec(sLocaleId.replace(/_/g, "-"));
 		if (aResult === null) {
 			throw new Error(`The given language ${sLocaleId} does not adhere to BCP-47.`);
 		}
 		this.sLocaleId = sLocaleId;
-		this.sLanguage = aResult[1] || null;
-		this.sScript = aResult[2] || null;
-		this.sRegion = aResult[3] || null;
+		this.sLanguage = aResult[1] || DEFAULT_LANGUAGE;
+		this.sScript = aResult[2] || "";
+		this.sRegion = aResult[3] || "";
 		this.sVariant = (aResult[4] && aResult[4].slice(1)) || null;
 		this.sExtension = (aResult[5] && aResult[5].slice(1)) || null;
 		this.sPrivateUse = aResult[6] || null;
@@ -64,7 +72,7 @@ class Locale {
 		return this.sPrivateUse ? this.sPrivateUse.slice(2).split("-") : [];
 	}
 
-	hasPrivateUseSubtag(sSubtag) {
+	hasPrivateUseSubtag(sSubtag: string) {
 		return this.getPrivateUseSubtags().indexOf(sSubtag) >= 0;
 	}
 
@@ -88,14 +96,6 @@ class Locale {
 		}
 		return r.join("-");
 	}
-
-	static get _cldrLocales() {
-		return getDesigntimePropertyAsArray("$cldr-locales:ar,ar_EG,ar_SA,bg,br,ca,cs,da,de,de_AT,de_CH,el,el_CY,en,en_AU,en_GB,en_HK,en_IE,en_IN,en_NZ,en_PG,en_SG,en_ZA,es,es_AR,es_BO,es_CL,es_CO,es_MX,es_PE,es_UY,es_VE,et,fa,fi,fr,fr_BE,fr_CA,fr_CH,fr_LU,he,hi,hr,hu,id,it,it_CH,ja,kk,ko,lt,lv,ms,nb,nl,nl_BE,nn,pl,pt,pt_PT,ro,ru,ru_UA,sk,sl,sr,sv,th,tr,uk,vi,zh_CN,zh_HK,zh_SG,zh_TW$");
-	}
-
-	static get _coreI18nLocales() {
-		return getDesigntimePropertyAsArray("$core-i18n-locales:,ar,bg,ca,cs,da,de,el,en,es,et,fi,fr,hi,hr,hu,it,iw,ja,ko,lt,lv,nl,no,pl,pt,ro,ru,sh,sk,sl,sv,th,tr,uk,vi,zh_CN,zh_TW$");
-	}
 }
 
 export default Locale;

package/src/locale/RTLAwareRegistry.ts

@@ -0,0 +1,16 @@
+import type UI5Element from "../UI5Element";
+
+const rtlAwareSet = new Set<typeof UI5Element>();
+
+const markAsRtlAware = (klass: typeof UI5Element) => {
+	rtlAwareSet.add(klass);
+};
+
+const isRtlAware = (klass: typeof UI5Element) => {
+	return rtlAwareSet.has(klass);
+};
+
+export {
+	markAsRtlAware,
+	isRtlAware,
+};

package/src/locale/applyDirection.ts

@@ -0,0 +1,18 @@
+import { reRenderAllUI5Elements } from "../Render.js";
+import { fireDirectionChange } from "./directionChange.js";
+
+/**
+ * Re-renders all RTL-aware UI5 Elements.
+ *
+ * <b>Note:</b> Call this method whenever you change the "dir" property anywhere in your HTML page.
+ * <b>Example:</b> <code>document.body.dir = "rtl"; applyDirection();</code>
+ * @public
+ * @returns {Promise<void>}
+ */
+const applyDirection = async (): Promise<void> => {
+	const listenersResults = fireDirectionChange();
+	await Promise.all(listenersResults);
+	await reRenderAllUI5Elements({ rtlAware: true });
+};
+
+export default applyDirection;

package/src/locale/directionChange.ts

@@ -0,0 +1,34 @@
+import EventProvider from "../EventProvider.js";
+
+type DirectionChangeCallback = () => void;
+
+const eventProvider = new EventProvider<undefined, void>();
+const DIR_CHANGE = "directionChange";
+
+/**
+ * Attach a callback that will be executed whenever the application calls the "applyDirection" function
+ * @public
+ * @param listener
+ */
+const attachDirectionChange = (listener: DirectionChangeCallback) => {
+	eventProvider.attachEvent(DIR_CHANGE, listener);
+};
+
+/**
+ * Detach a callback that was passed with "attachDirectionChange"
+ * @public
+ * @param listener
+ */
+const detachDirectionChange = (listener: DirectionChangeCallback) => {
+	eventProvider.detachEvent(DIR_CHANGE, listener);
+};
+
+const fireDirectionChange = () => {
+	return eventProvider.fireEvent(DIR_CHANGE, undefined);
+};
+
+export {
+	attachDirectionChange,
+	detachDirectionChange,
+	fireDirectionChange,
+};

package/src/locale/getEffectiveDir.ts

@@ -0,0 +1,28 @@
+import { getRTL } from "../config/RTL.js";
+
+const GLOBAL_DIR_CSS_VAR = "--_ui5_dir";
+
+const getEffectiveDir = (element: HTMLElement) => {
+	const doc = window.document;
+	const dirValues = ["ltr", "rtl"]; // exclude "auto" and "" from all calculations
+	const locallyAppliedDir = getComputedStyle(element).getPropertyValue(GLOBAL_DIR_CSS_VAR);
+
+	// In that order, inspect the CSS Var (for modern browsers), the element itself, html and body (for IE fallback)
+	if (dirValues.includes(locallyAppliedDir)) {
+		return locallyAppliedDir;
+	}
+	if (dirValues.includes(element.dir)) {
+		return element.dir;
+	}
+	if (dirValues.includes(doc.documentElement.dir)) {
+		return doc.documentElement.dir;
+	}
+	if (dirValues.includes(doc.body.dir)) {
+		return doc.body.dir;
+	}
+
+	// Finally, check the configuration for explicitly set RTL or language-implied RTL
+	return getRTL() ? "rtl" : undefined;
+};
+
+export default getEffectiveDir;

package/src/locale/getLocale.ts

@@ -0,0 +1,46 @@
+import detectNavigatorLanguage from "../util/detectNavigatorLanguage.js";
+import { getLanguage as getConfigLanguage } from "../config/Language.js";
+import Locale from "./Locale.js";
+import { DEFAULT_LOCALE } from "../generated/AssetParameters.js";
+
+const cache = new Map<string, Locale>();
+
+const getLocaleInstance = (lang: string) => {
+	if (!cache.has(lang)) {
+		cache.set(lang, new Locale(lang));
+	}
+
+	return cache.get(lang)!;
+};
+
+const convertToLocaleOrNull = (lang: string) => {
+	try {
+		if (lang && typeof lang === "string") {
+			return getLocaleInstance(lang);
+		}
+	} catch (e) {
+		// ignore
+	}
+
+	return new Locale(DEFAULT_LOCALE);
+};
+
+/**
+ * Returns the locale based on the parameter or configured language Configuration#getLanguage
+ * If no language has been configured - a new locale based on browser language is returned
+ */
+const getLocale = (lang?: string): Locale => {
+	if (lang) {
+		return convertToLocaleOrNull(lang);
+	}
+
+	const configLanguage = getConfigLanguage();
+
+	if (configLanguage) {
+		return getLocaleInstance(configLanguage);
+	}
+
+	return convertToLocaleOrNull(detectNavigatorLanguage());
+};
+
+export default getLocale;

package/src/locale/languageChange.ts

@@ -0,0 +1,24 @@
+import EventProvider from "../EventProvider.js";
+
+type LanguageChangeCallback = (lang: string) => Promise<void | Array<void>>;
+
+const eventProvider = new EventProvider<string, Promise<void | Array<void>>>();
+const LANG_CHANGE = "languageChange";
+
+const attachLanguageChange = (listener: LanguageChangeCallback) => {
+	eventProvider.attachEvent(LANG_CHANGE, listener);
+};
+
+const detachLanguageChange = (listener: LanguageChangeCallback) => {
+	eventProvider.detachEvent(LANG_CHANGE, listener);
+};
+
+const fireLanguageChange = (lang: string) => {
+	return eventProvider.fireEventAsync(LANG_CHANGE, lang);
+};
+
+export {
+	attachLanguageChange,
+	detachLanguageChange,
+	fireLanguageChange,
+};

package/src/locale/nextFallbackLocale.ts

@@ -0,0 +1,28 @@
+import { DEFAULT_LOCALE } from "../generated/AssetParameters.js";
+
+/**
+ * Calculates the next fallback locale for the given locale.
+ *
+ * @param {string} locale Locale string in Java format (underscores) or null
+ * @returns {string} Next fallback Locale or "en" if no fallbacks found.
+ */
+const nextFallbackLocale = (locale: string) => {
+	if (!locale) {
+		return DEFAULT_LOCALE;
+	}
+
+	if (locale === "zh_HK") {
+		return "zh_TW";
+	}
+
+	// if there are multiple segments (separated by underscores), remove the last one
+	const p = locale.lastIndexOf("_");
+	if (p >= 0) {
+		return locale.slice(0, p);
+	}
+
+	// for any language but the default, fallback to the default first before falling back to the 'raw' language (empty string)
+	return locale !== DEFAULT_LOCALE ? DEFAULT_LOCALE : "";
+};
+
+export default nextFallbackLocale;

package/{dist/util/normalizeLocale.js → src/locale/normalizeLocale.ts}

@@ -1,3 +1,5 @@
+import { DEFAULT_LOCALE } from "../generated/AssetParameters.js";
+
 const localeRegEX = /^((?:[A-Z]{2,3}(?:-[A-Z]{3}){0,3})|[A-Z]{4}|[A-Z]{5,8})(?:-([A-Z]{4}))?(?:-([A-Z]{2}|[0-9]{3}))?((?:-[0-9A-Z]{5,8}|-[0-9][0-9A-Z]{3})*)((?:-[0-9A-WYZ](?:-[0-9A-Z]{2,8})+)*)(?:-(X(?:-[0-9A-Z]{1,8})+))?$/i;
 const SAPSupportabilityLocales = /(?:^|-)(saptrc|sappsd)(?:-|$)/i;
 
@@ -5,18 +7,22 @@ const SAPSupportabilityLocales = /(?:^|-)(saptrc|sappsd)(?:-|$)/i;
 const M_ISO639_NEW_TO_OLD = {
 	"he": "iw",
 	"yi": "ji",
-	"id": "in",
+	"nb": "no",
 	"sr": "sh",
 };
 
 /**
  * Normalizes the given locale in BCP-47 syntax.
  * @param {string} locale locale to normalize
- * @returns {string} Normalized locale or undefined if the locale can't be normalized
+ * @returns {string} Normalized locale, "undefined" if the locale can't be normalized or the default locale, if no locale provided.
  */
-const normalizeLocale = locale => {
+const normalizeLocale = (locale: string) => {
 	let m;
 
+	if (!locale) {
+		return DEFAULT_LOCALE;
+	}
+
 	if (typeof locale === "string" && (m = localeRegEX.exec(locale.replace(/_/g, "-")))) {/* eslint-disable-line */
 		let language = m[1].toLowerCase();
 		let region = m[3] ? m[3].toUpperCase() : undefined;
@@ -24,7 +30,7 @@ const normalizeLocale = locale => {
 		const variants = m[4] ? m[4].slice(1) : undefined;
 		const isPrivate = m[6];
 
-		language = M_ISO639_NEW_TO_OLD[language] || language;
+		language = M_ISO639_NEW_TO_OLD[language as keyof typeof M_ISO639_NEW_TO_OLD] || language;
 
 		// recognize and convert special SAP supportability locales (overwrites m[]!)
 		if ((isPrivate && (m = SAPSupportabilityLocales.exec(isPrivate))) /* eslint-disable-line */ ||
@@ -43,35 +49,8 @@ const normalizeLocale = locale => {
 
 		return language + (region ? "_" + region + (variants ? "_" + variants.replace("-", "_") : "") : ""); /* eslint-disable-line */
 	}
-};
-
-
-/**
- * Calculates the next fallback locale for the given locale.
- *
- * @param {string} locale Locale string in Java format (underscores) or null
- * @returns {string|null} Next fallback Locale or null if there is no more fallback
- */
-const nextFallbackLocale = locale => {
-	if (!locale) {
-		return null;
-	}
-
-	if (locale === "zh_HK") {
-		return "zh_TW";
-	}
-
-	// if there are multiple segments (separated by underscores), remove the last one
-	const p = locale.lastIndexOf("_");
-	if (p >= 0) {
-		return locale.slice(0, p);
-	}
 
-	// for any language but 'en', fallback to 'en' first before falling back to the 'raw' language (empty string)
-	return locale !== "en" ? "en" : "";
+	return DEFAULT_LOCALE;
 };
 
-export {
-	normalizeLocale,
-	nextFallbackLocale,
-};
+export default normalizeLocale;

package/src/renderer/LitRenderer.ts

@@ -0,0 +1,60 @@
+import {
+	render,
+	html,
+	svg,
+	TemplateResult,
+	RenderOptions,
+} from "lit-html";
+
+import { getFeature } from "../FeaturesRegistry.js";
+import type { LitStatic } from "../CustomElementsScope.js";
+import type OpenUI5Enablement from "../features/OpenUI5Enablement.js";
+import type UI5Element from "../UI5Element.js";
+import { TemplateFunctionResult } from "./executeTemplate.js";
+
+const effectiveHtml = (strings: TemplateStringsArray, ...values: Array<unknown>) => {
+	const litStatic = getFeature<typeof LitStatic>("LitStatic");
+	const fn = litStatic ? litStatic.html : html;
+	return fn(strings, ...values);
+};
+
+const effectiveSvg = (strings: TemplateStringsArray, ...values: Array<unknown>) => {
+	const litStatic = getFeature<typeof LitStatic>("LitStatic");
+	const fn = litStatic ? litStatic.svg : svg;
+	return fn(strings, ...values);
+};
+
+const litRender = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | Array<string> | undefined, forStaticArea: boolean, options: RenderOptions) => {
+	const openUI5Enablement = getFeature<typeof OpenUI5Enablement>("OpenUI5Enablement");
+	if (openUI5Enablement && !forStaticArea) {
+		templateResult = openUI5Enablement.wrapTemplateResultInBusyMarkup(effectiveHtml, options.host as UI5Element, templateResult as TemplateResult);
+	}
+
+	if (typeof styleStrOrHrefsArr === "string") {
+		templateResult = effectiveHtml`<style>${styleStrOrHrefsArr}</style>${templateResult}`;
+	} else if (Array.isArray(styleStrOrHrefsArr) && styleStrOrHrefsArr.length) {
+		templateResult = effectiveHtml`${styleStrOrHrefsArr.map(href => effectiveHtml`<link type="text/css" rel="stylesheet" href="${href}">`)}${templateResult}`;
+	}
+	render(templateResult as TemplateResult, container, options);
+};
+
+const scopeTag = (tag: string, tags: Array<string>, suffix: string) => {
+	const litStatic = getFeature<typeof LitStatic>("LitStatic");
+	if (litStatic) {
+		return litStatic.unsafeStatic((tags || []).includes(tag) ? `${tag}-${suffix}` : tag);
+	}
+};
+
+export {
+	effectiveHtml as html,
+	effectiveSvg as svg,
+};
+export { scopeTag };
+export { repeat } from "lit-html/directives/repeat.js";
+export { classMap } from "lit-html/directives/class-map.js";
+// @ts-ignore style-map is a JS file
+export { styleMap } from "./directives/style-map.js";
+export { ifDefined } from "lit-html/directives/if-defined.js";
+export { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+
+export default litRender;

package/src/renderer/directives/style-map.js

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * This is the original style-map.js directive from lit-html 2 with the only difference that "render" is not called even for the first rendering (update is used instead)
+ */
+
+import { noChange } from 'lit-html';
+import { directive, Directive, PartType, } from 'lit-html/directive.js';
+class StyleMapDirective extends Directive {
+	constructor(partInfo) {
+		var _a;
+		super(partInfo);
+		if (partInfo.type !== PartType.ATTRIBUTE ||
+			partInfo.name !== 'style' ||
+			((_a = partInfo.strings) === null || _a === void 0 ? void 0 : _a.length) > 2) {
+			throw new Error('The `styleMap` directive must be used in the `style` attribute ' +
+				'and must be the only part in the attribute.');
+		}
+	}
+	render(styleInfo) {
+		return "";
+	}
+	update(part, [styleInfo]) {
+		const { style } = part.element;
+		if (this._previousStyleProperties === undefined) {
+			this._previousStyleProperties = new Set();
+			for (const name in styleInfo) {
+				this._previousStyleProperties.add(name);
+			}
+			// return this.render(styleInfo);
+		}
+		// Remove old properties that no longer exist in styleInfo
+		// We use forEach() instead of for-of so that re don't require down-level
+		// iteration.
+		this._previousStyleProperties.forEach((name) => {
+			// If the name isn't in styleInfo or it's null/undefined
+			if (styleInfo[name] == null) {
+				this._previousStyleProperties.delete(name);
+				if (name.includes('-')) {
+					style.removeProperty(name);
+				}
+				else {
+					// Note reset using empty string (vs null) as IE11 does not always
+					// reset via null (https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles)
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					style[name] = '';
+				}
+			}
+		});
+		// Add or update properties
+		for (const name in styleInfo) {
+			const value = styleInfo[name];
+			if (value != null) {
+				this._previousStyleProperties.add(name);
+				if (name.includes('-')) {
+					style.setProperty(name, value);
+				}
+				else {
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					style[name] = value;
+				}
+			}
+		}
+		return noChange;
+	}
+}
+
+export const styleMap = directive(StyleMapDirective);

package/src/renderer/executeTemplate.ts

@@ -0,0 +1,40 @@
+import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../CustomElementsScopeUtils.js";
+import type UI5Element from "../UI5Element.js";
+
+type TemplateFunctionResult = object;
+type TemplateFunction = (component: UI5Element, tagsToScope: Array<string>, scope: string | undefined) => TemplateFunctionResult;
+
+/**
+ * Runs a component's template with the component's current state, while also scoping HTML
+ *
+ * @param template - the template to execute
+ * @param component - the component
+ * @public
+ */
+const executeTemplate = (template: TemplateFunction, component: UI5Element): TemplateFunctionResult => {
+	const tagsToScope = getTagsToScope(component);
+	const scope = getCustomElementsScopingSuffix();
+	return template(component, tagsToScope, scope);
+};
+
+/**
+ * Returns all tags, used inside component's template subject to scoping.
+ * @param component - the component
+ * @returns {Array[]}
+ * @private
+ */
+const getTagsToScope = (component: UI5Element) => {
+	const ctor = component.constructor as typeof UI5Element;
+
+	const componentTag = ctor.getMetadata().getPureTag();
+	const tagsToScope = ctor.getUniqueDependencies().map((dep: typeof UI5Element) => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
+
+	if (shouldScopeCustomElement(componentTag)) {
+		tagsToScope.push(componentTag);
+	}
+
+	return tagsToScope;
+};
+
+export default executeTemplate;
+export type { TemplateFunction, TemplateFunctionResult };

package/src/theming/CustomStyle.ts

@@ -0,0 +1,62 @@
+import { reRenderAllUI5Elements } from "../Render.js";
+import getSharedResource from "../getSharedResource.js";
+import EventProvider from "../EventProvider.js";
+
+type CustomCSSChangeCallback = (tag: string) => void;
+
+const eventProvider = getSharedResource("CustomStyle.eventProvider", new EventProvider<string, void>());
+const CUSTOM_CSS_CHANGE = "CustomCSSChange";
+
+const attachCustomCSSChange = (listener: CustomCSSChangeCallback) => {
+	eventProvider.attachEvent(CUSTOM_CSS_CHANGE, listener);
+};
+
+const detachCustomCSSChange = (listener: CustomCSSChangeCallback) => {
+	eventProvider.detachEvent(CUSTOM_CSS_CHANGE, listener);
+};
+
+const fireCustomCSSChange = (tag: string) => {
+	return eventProvider.fireEvent(CUSTOM_CSS_CHANGE, tag);
+};
+
+const customCSSFor = getSharedResource<Record<string, Array<string>>>("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: boolean;
+attachCustomCSSChange((tag: string) => {
+	if (!skipRerender) {
+		reRenderAllUI5Elements({ tag });
+	}
+});
+
+const addCustomCSS = (tag: string, css: string) => {
+	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: string) => {
+	return customCSSFor[tag] ? customCSSFor[tag].join("") : "";
+};
+
+export {
+	addCustomCSS,
+	getCustomCSS,
+	attachCustomCSSChange,
+	detachCustomCSSChange,
+};