@ui5/webcomponents-base 1.9.3 → 1.10.0

package/src/features/OpenUI5Support.ts

@@ -0,0 +1,148 @@
+import { registerFeature } from "../FeaturesRegistry.js";
+import { setTheme } from "../config/Theme.js";
+import { getCurrentZIndex } from "../util/PopupUtils.js";
+import { CLDRData } from "../asset-registries/LocaleData.js";
+
+type OpenUI5Popup = {
+	setInitialZIndex: (zIndex: number) => void,
+	getNextZIndex: () => number,
+};
+
+type OpenUI5Core = {
+	attachInit: (callback: () => void) => void,
+	attachThemeChanged: (callback: () => Promise<void>) => void,
+	getConfiguration: () => OpenUI5CoreConfiguration,
+};
+
+type OpenUI5CoreConfiguration = {
+	getAnimationMode: () => string,
+	getLanguage: () => string,
+	getTheme: () => string,
+	getThemeRoot: () => string,
+	getRTL: () => string,
+	getCalendarType: () => string,
+	getLocale: () => string,
+};
+
+type LocaleData = {
+	getInstance: (locale: string) => Locale,
+}
+
+type Locale = {
+	getFirstDayOfWeek: () => number,
+	_get: () => CLDRData,
+};
+
+const getCore = () => {
+	return window.sap?.ui?.getCore?.() as OpenUI5Core;
+};
+
+class OpenUI5Support {
+	static isLoaded() {
+		return !!getCore();
+	}
+
+	static init() {
+		const core = getCore();
+		if (!core) {
+			return Promise.resolve();
+		}
+
+		return new Promise<void>(resolve => {
+			core.attachInit(() => {
+				window.sap.ui.require(["sap/ui/core/LocaleData", "sap/ui/core/Popup"], (LocaleData: LocaleData, Popup: OpenUI5Popup) => {
+					Popup.setInitialZIndex(getCurrentZIndex());
+					resolve();
+				});
+			});
+		});
+	}
+
+	static getConfigurationSettingsObject() {
+		const core = getCore();
+		if (!core) {
+			return;
+		}
+
+		const config = core.getConfiguration();
+		const LocaleData = window.sap.ui.require("sap/ui/core/LocaleData");
+
+		return {
+			animationMode: config.getAnimationMode(),
+			language: config.getLanguage(),
+			theme: config.getTheme(),
+			themeRoot: config.getThemeRoot(),
+			rtl: config.getRTL(),
+			calendarType: config.getCalendarType(),
+			formatSettings: {
+				firstDayOfWeek: LocaleData ? LocaleData.getInstance(config.getLocale()).getFirstDayOfWeek() : undefined,
+			},
+		};
+	}
+
+	static getLocaleDataObject() {
+		const core = getCore();
+		if (!core) {
+			return;
+		}
+
+		const config = core.getConfiguration();
+		const LocaleData = window.sap.ui.require("sap/ui/core/LocaleData") as LocaleData;
+		return LocaleData.getInstance(config.getLocale())._get();
+	}
+
+	static _listenForThemeChange() {
+		const core = getCore();
+		const config = core.getConfiguration();
+		core.attachThemeChanged(async () => {
+			await setTheme(config.getTheme());
+		});
+	}
+
+	static attachListeners() {
+		const core = getCore();
+		if (!core) {
+			return;
+		}
+
+		OpenUI5Support._listenForThemeChange();
+	}
+
+	static cssVariablesLoaded() {
+		const core = getCore();
+		if (!core) {
+			return;
+		}
+
+		const link = [...document.head.children].find(el => el.id === "sap-ui-theme-sap.ui.core") as HTMLLinkElement; // more reliable than querySelector early
+		if (!link) {
+			return;
+		}
+
+		return !!link.href.match(/\/css(-|_)variables\.css/);
+	}
+
+	static getNextZIndex() {
+		const core = getCore();
+		if (!core) {
+			return;
+		}
+
+		const Popup = window.sap.ui.require("sap/ui/core/Popup") as OpenUI5Popup;
+		return Popup.getNextZIndex();
+	}
+
+	static setInitialZIndex() {
+		const core = getCore();
+		if (!core) {
+			return;
+		}
+
+		const Popup = window.sap.ui.require("sap/ui/core/Popup") as OpenUI5Popup;
+		Popup.setInitialZIndex(getCurrentZIndex());
+	}
+}
+
+registerFeature("OpenUI5Support", OpenUI5Support);
+
+export default OpenUI5Support;

package/src/{getSharedResource.js → getSharedResource.ts}

@@ -11,9 +11,9 @@ const getSharedResourcesInstance = () => getSingletonElementInstance("ui5-shared
  * @param initialValue Object or primitive that will be used as an initial value if the resource does not exist
  * @returns {*}
  */
-const getSharedResource = (namespace, initialValue) => {
+const getSharedResource = <T>(namespace: string, initialValue: T): T => {
 	const parts = namespace.split(".");
-	let current = getSharedResourcesInstance();
+	let current = getSharedResourcesInstance() as Record<string, any>;
 
 	for (let i = 0; i < parts.length; i++) {
 		const part = parts[i];
@@ -24,7 +24,7 @@ const getSharedResource = (namespace, initialValue) => {
 		current = current[part];
 	}
 
-	return current;
+	return current as T;
 };
 
 export default getSharedResource;

package/src/{i18nBundle.js → i18nBundle.ts}

@@ -1,16 +1,25 @@
 import { registerI18nLoader, fetchI18nBundle, getI18nBundleData } from "./asset-registries/i18n.js";
 import formatMessage from "./util/formatMessage.js";
 
-const I18nBundleInstances = new Map();
+const I18nBundleInstances = new Map<string, I18nBundle>();
 
-let customGetI18nBundle;
+let customGetI18nBundle: I18nBundleGetter;
+
+type I18nText = {
+	key: string,
+	defaultText: string,
+};
+
+type I18nBundleGetter = (packageName: string) => Promise<I18nBundle>;
 
 /**
  * @class
  * @public
  */
 class I18nBundle {
-	constructor(packageName) {
+	packageName: string;
+
+	constructor(packageName: string) {
 		this.packageName = packageName;
 	}
 
@@ -20,9 +29,9 @@ class I18nBundle {
 	 * @public
 	 * @param {Object|String} textObj key/defaultText pair or just the key
 	 * @param params Values for the placeholders
-	 * @returns {*}
+	 * @returns {string}
 	 */
-	getText(textObj, ...params) {
+	getText(textObj: I18nText, ...params: Array<number | string>): string {
 		if (typeof textObj === "string") {
 			textObj = { key: textObj, defaultText: textObj };
 		}
@@ -37,13 +46,20 @@ class I18nBundle {
 		}
 		const messageText = bundle && bundle[textObj.key] ? bundle[textObj.key] : (textObj.defaultText || textObj.key);
 
-		return params.length ? formatMessage(messageText, params) : messageText;
+		return formatMessage(messageText, params);
 	}
 }
 
-const getI18nBundleSync = packageName => {
+/**
+ * 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);
+		return I18nBundleInstances.get(packageName)!;
 	}
 
 	const i18nBundle = new I18nBundle(packageName);
@@ -52,25 +68,13 @@ const 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 => {
-	customGetI18nBundle = customGet;
-};
-
-/**
- * Fetches and returns the I18nBundle instance for the given package
+ * Fetches and returns the I18nBundle instance for the given package.
  *
  * @public
  * @param packageName
- * @returns {Promise<I18nBundle>}
+ * @returns { Promise<I18nBundle> }
  */
-const getI18nBundle = async packageName => {
+const getI18nBundle = async (packageName: string): Promise<I18nBundle> => {
 	if (customGetI18nBundle) {
 		return customGetI18nBundle(packageName);
 	}
@@ -79,8 +83,26 @@ const getI18nBundle = async 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/src/locale/{Locale.js → Locale.ts}

@@ -1,15 +1,25 @@
+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;
@@ -62,7 +72,7 @@ class Locale {
 		return this.sPrivateUse ? this.sPrivateUse.slice(2).split("-") : [];
 	}
 
-	hasPrivateUseSubtag(sSubtag) {
+	hasPrivateUseSubtag(sSubtag: string) {
 		return this.getPrivateUseSubtags().indexOf(sSubtag) >= 0;
 	}
 

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.js → applyDirection.ts}

@@ -3,12 +3,13 @@ import { fireDirectionChange } from "./directionChange.js";
 
 /**
  * Re-renders all RTL-aware UI5 Elements.
- * Call this method whenever you change the "dir" property anywhere in your HTML page
- * Example: document.body.dir = "rtl"; applyDirection();
  *
+ * <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 () => {
+const applyDirection = async (): Promise<void> => {
 	const listenersResults = fireDirectionChange();
 	await Promise.all(listenersResults);
 	await reRenderAllUI5Elements({ rtlAware: true });

package/src/locale/{directionChange.js → directionChange.ts}

@@ -1,6 +1,8 @@
 import EventProvider from "../EventProvider.js";
 
-const eventProvider = new EventProvider();
+type DirectionChangeCallback = () => void;
+
+const eventProvider = new EventProvider<undefined, void>();
 const DIR_CHANGE = "directionChange";
 
 /**
@@ -8,7 +10,7 @@ const DIR_CHANGE = "directionChange";
  * @public
  * @param listener
  */
-const attachDirectionChange = listener => {
+const attachDirectionChange = (listener: DirectionChangeCallback) => {
 	eventProvider.attachEvent(DIR_CHANGE, listener);
 };
 
@@ -17,12 +19,12 @@ const attachDirectionChange = listener => {
  * @public
  * @param listener
  */
-const detachDirectionChange = listener => {
+const detachDirectionChange = (listener: DirectionChangeCallback) => {
 	eventProvider.detachEvent(DIR_CHANGE, listener);
 };
 
 const fireDirectionChange = () => {
-	return eventProvider.fireEvent(DIR_CHANGE);
+	return eventProvider.fireEvent(DIR_CHANGE, undefined);
 };
 
 export {

package/src/locale/{getEffectiveDir.js → getEffectiveDir.ts}

@@ -2,7 +2,7 @@ import { getRTL } from "../config/RTL.js";
 
 const GLOBAL_DIR_CSS_VAR = "--_ui5_dir";
 
-const getEffectiveDir = element => {
+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);

package/src/locale/{getLocale.js → getLocale.ts}

@@ -1,18 +1,19 @@
 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();
+const cache = new Map<string, Locale>();
 
-const getLocaleInstance = lang => {
+const getLocaleInstance = (lang: string) => {
 	if (!cache.has(lang)) {
 		cache.set(lang, new Locale(lang));
 	}
 
-	return cache.get(lang);
+	return cache.get(lang)!;
 };
 
-const convertToLocaleOrNull = lang => {
+const convertToLocaleOrNull = (lang: string) => {
 	try {
 		if (lang && typeof lang === "string") {
 			return getLocaleInstance(lang);
@@ -20,19 +21,23 @@ const convertToLocaleOrNull = 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 => {
+const getLocale = (lang?: string): Locale => {
 	if (lang) {
 		return convertToLocaleOrNull(lang);
 	}
 
-	if (getConfigLanguage()) {
-		return getLocaleInstance(getConfigLanguage());
+	const configLanguage = getConfigLanguage();
+
+	if (configLanguage) {
+		return getLocaleInstance(configLanguage);
 	}
 
 	return convertToLocaleOrNull(detectNavigatorLanguage());

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.js → nextFallbackLocale.ts}

@@ -6,7 +6,7 @@ import { DEFAULT_LOCALE } from "../generated/AssetParameters.js";
  * @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 => {
+const nextFallbackLocale = (locale: string) => {
 	if (!locale) {
 		return DEFAULT_LOCALE;
 	}

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

@@ -7,7 +7,7 @@ const SAPSupportabilityLocales = /(?:^|-)(saptrc|sappsd)(?:-|$)/i;
 const M_ISO639_NEW_TO_OLD = {
 	"he": "iw",
 	"yi": "ji",
-	"id": "in",
+	"nb": "no",
 	"sr": "sh",
 };
 
@@ -16,7 +16,7 @@ const M_ISO639_NEW_TO_OLD = {
  * @param {string} locale locale to normalize
  * @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) {
@@ -30,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 */ ||
@@ -49,6 +49,8 @@ const normalizeLocale = locale => {
 
 		return language + (region ? "_" + region + (variants ? "_" + variants.replace("-", "_") : "") : ""); /* eslint-disable-line */
 	}
+
+	return DEFAULT_LOCALE;
 };
 
 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/{executeTemplate.js → executeTemplate.ts}

@@ -1,4 +1,8 @@
 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
@@ -6,9 +10,8 @@ import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../Cus
  * @param template - the template to execute
  * @param component - the component
  * @public
- * @returns {*}
  */
-const executeTemplate = (template, component) => {
+const executeTemplate = (template: TemplateFunction, component: UI5Element): TemplateFunctionResult => {
 	const tagsToScope = getTagsToScope(component);
 	const scope = getCustomElementsScopingSuffix();
 	return template(component, tagsToScope, scope);
@@ -20,9 +23,11 @@ const executeTemplate = (template, component) => {
  * @returns {Array[]}
  * @private
  */
-const getTagsToScope = component => {
-	const componentTag = component.constructor.getMetadata().getPureTag();
-	const tagsToScope = component.constructor.getUniqueDependencies().map(dep => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
+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);
@@ -32,3 +37,4 @@ const getTagsToScope = component => {
 };
 
 export default executeTemplate;
+export type { TemplateFunction, TemplateFunctionResult };

package/src/theming/{CustomStyle.js → CustomStyle.ts}

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