@ui5/webcomponents-base 0.0.0-e818f286e → 0.0.0-ee3bbe46b

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("") : "";
 };
 

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

@@ -1,17 +1,19 @@
 import EventProvider from "../EventProvider.js";
 
-const eventProvider = new EventProvider();
+type ThemeLoadedCallback = (theme: string) => void;
+
+const eventProvider = new EventProvider<string, void>();
 const THEME_LOADED = "themeLoaded";
 
-const attachThemeLoaded = listener => {
+const attachThemeLoaded = (listener: ThemeLoadedCallback) => {
 	eventProvider.attachEvent(THEME_LOADED, listener);
 };
 
-const detachThemeLoaded = listener => {
+const detachThemeLoaded = (listener: ThemeLoadedCallback) => {
 	eventProvider.detachEvent(THEME_LOADED, listener);
 };
 
-const fireThemeLoaded = theme => {
+const fireThemeLoaded = (theme: string) => {
 	return eventProvider.fireEvent(THEME_LOADED, theme);
 };
 

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

@@ -3,6 +3,9 @@ import { removeStyle, createOrUpdateStyle } from "../ManagedStyles.js";
 import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
+import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoots.js";
+import type OpenUI5Support from "../features/OpenUI5Support.js";
+import { DEFAULT_THEME } from "../generated/AssetParameters.js";
 
 const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming";
 
@@ -11,7 +14,7 @@ const isThemeBaseRegistered = () => {
 	return registeredPackages.has(BASE_THEME_PACKAGE);
 };
 
-const loadThemeBase = async theme => {
+const loadThemeBase = async (theme: string) => {
 	if (!isThemeBaseRegistered()) {
 		return;
 	}
@@ -26,9 +29,10 @@ const deleteThemeBase = () => {
 	removeStyle("data-ui5-theme-properties", BASE_THEME_PACKAGE);
 };
 
-const loadComponentPackages = async theme => {
+const loadComponentPackages = async (theme: string) => {
 	const registeredPackages = getRegisteredPackages();
-	registeredPackages.forEach(async packageName => {
+
+	const packagesStylesPromises = [...registeredPackages].map(async packageName => {
 		if (packageName === BASE_THEME_PACKAGE) {
 			return;
 		}
@@ -38,9 +42,11 @@ const loadComponentPackages = async theme => {
 			createOrUpdateStyle(cssData, "data-ui5-theme-properties", packageName);
 		}
 	});
+
+	return Promise.all(packagesStylesPromises);
 };
 
-const detectExternalTheme = () => {
+const detectExternalTheme = async (theme: string) => {
 	// If theme designer theme is detected, use this
 	const extTheme = getThemeDesignerTheme();
 	if (extTheme) {
@@ -48,19 +54,24 @@ const detectExternalTheme = () => {
 	}
 
 	// If OpenUI5Support is enabled, try to find out if it loaded variables
-	const OpenUI5Support = getFeature("OpenUI5Support");
-	if (OpenUI5Support) {
-		const varsLoaded = OpenUI5Support.cssVariablesLoaded();
+	const openUI5Support = getFeature<typeof OpenUI5Support>("OpenUI5Support");
+	if (openUI5Support) {
+		const varsLoaded = openUI5Support.cssVariablesLoaded();
 		if (varsLoaded) {
 			return {
-				themeName: OpenUI5Support.getConfigurationSettingsObject().theme, // just themeName, baseThemeName is only relevant for custom themes
+				themeName: openUI5Support.getConfigurationSettingsObject()?.theme, // just themeName
+				baseThemeName: "", // baseThemeName is only relevant for custom themes
 			};
 		}
+	} else if (getThemeRoot()) {
+		await attachCustomThemeStylesToHead(theme);
+
+		return getThemeDesignerTheme();
 	}
 };
 
-const applyTheme = async theme => {
-	const extTheme = detectExternalTheme();
+const applyTheme = async (theme: string) => {
+	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) {
@@ -71,7 +82,7 @@ const applyTheme = async theme => {
 
 	// 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);
+	await loadComponentPackages(packagesTheme || DEFAULT_THEME);
 
 	fireThemeLoaded(theme);
 };

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

@@ -1,9 +1,10 @@
 import getEffectiveStyle from "./getEffectiveStyle.js";
 import { attachCustomCSSChange } from "./CustomStyle.js";
+import UI5Element from "../UI5Element.js";
 
-const constructableStyleMap = new Map();
+const constructableStyleMap = new Map<string, Array<CSSStyleSheet>>();
 
-attachCustomCSSChange(tag => {
+attachCustomCSSChange((tag: string) => {
 	constructableStyleMap.delete(`${tag}_normal`); // there is custom CSS only for the component itself, not for its static area part
 });
 
@@ -13,7 +14,7 @@ attachCustomCSSChange(tag => {
  * @param ElementClass
  * @returns {*}
  */
-const getConstructableStyle = (ElementClass, forStaticArea = false) => {
+const getConstructableStyle = (ElementClass: typeof UI5Element, forStaticArea = false) => {
 	const tag = ElementClass.getMetadata().getTag();
 	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
 
@@ -24,7 +25,7 @@ const getConstructableStyle = (ElementClass, forStaticArea = false) => {
 		constructableStyleMap.set(key, [style]);
 	}
 
-	return constructableStyleMap.get(key);
+	return constructableStyleMap.get(key)!;
 };
 
 export default getConstructableStyle;

package/src/theming/getEffectiveLinksHrefs.ts

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

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

@@ -1,24 +1,26 @@
 import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
 import getStylesString from "./getStylesString.js";
 import { getFeature } from "../FeaturesRegistry.js";
+import type UI5Element from "../UI5Element.js";
+import OpenUI5Enablement from "../features/OpenUI5Enablement.js";
 
-const effectiveStyleMap = new Map();
+const effectiveStyleMap = new Map<string, string>();
 
-attachCustomCSSChange(tag => {
+attachCustomCSSChange((tag: string) => {
 	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 getEffectiveStyle = (ElementClass: typeof UI5Element, forStaticArea = false) => {
 	const tag = ElementClass.getMetadata().getTag();
 	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
-	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
+	const openUI5Enablement = getFeature<typeof OpenUI5Enablement>("OpenUI5Enablement");
 
 	if (!effectiveStyleMap.has(key)) {
 		let effectiveStyle;
 		let busyIndicatorStyles = "";
 
-		if (OpenUI5Enablement) {
-			busyIndicatorStyles = getStylesString(OpenUI5Enablement.getBusyIndicatorStyles());
+		if (openUI5Enablement) {
+			busyIndicatorStyles = getStylesString(openUI5Enablement.getBusyIndicatorStyles());
 		}
 
 		if (forStaticArea) {
@@ -33,7 +35,7 @@ const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
 		effectiveStyleMap.set(key, effectiveStyle);
 	}
 
-	return effectiveStyleMap.get(key);
+	return effectiveStyleMap.get(key)!; // The key is guaranteed to exist
 };
 
 export default getEffectiveStyle;

package/src/theming/getStylesString.ts

@@ -0,0 +1,15 @@
+import { ComponentStylesData, StyleData } from "../types.js";
+
+const MAX_DEPTH_INHERITED_CLASSES = 10; // TypeScript complains about Infinity and big numbers
+
+const getStylesString = (styles: ComponentStylesData) => {
+	if (Array.isArray(styles)) {
+		return (styles.filter(style => !!style).flat(MAX_DEPTH_INHERITED_CLASSES) as Array<StyleData>).map((style: StyleData) => {
+			return typeof style === "string" ? style : style.content;
+		}).join(" ");
+	}
+
+	return typeof styles === "string" ? styles : styles.content;
+};
+
+export default getStylesString;

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

@@ -1,4 +1,14 @@
-const warnings = new Set();
+type ThemeDescriptor = {
+	themeName: string,
+	baseThemeName?: string,
+};
+
+type ThemeMetadata = {
+	Path: string,
+	Extends: Array<string>,
+};
+
+const warnings = new Set<string>();
 
 const getThemeMetadata = () => {
 	// Check if the class was already applied, most commonly to the link/style tag with the CSS Variables
@@ -8,7 +18,7 @@ const getThemeMetadata = () => {
 	}
 
 	el = document.createElement("span");
-	el.style.display = "none";
+	(el as HTMLSpanElement).style.display = "none";
 
 	// Try with sapThemeMetaData-Base-baseLib first
 	el.classList.add("sapThemeMetaData-Base-baseLib");
@@ -26,7 +36,7 @@ const getThemeMetadata = () => {
 	return metadata;
 };
 
-const parseThemeMetadata = metadataString => {
+const parseThemeMetadata = (metadataString: string) => {
 	const params = /\(["']?data:text\/plain;utf-8,(.*?)['"]?\)$/i.exec(metadataString);
 	if (params && params.length >= 2) {
 		let paramsString = params[1];
@@ -43,7 +53,7 @@ const parseThemeMetadata = metadataString => {
 			}
 		}
 		try {
-			return JSON.parse(paramsString);
+			return JSON.parse(paramsString) as ThemeMetadata;
 		} catch (ex) {
 			if (!warnings.has("parse")) {
 				console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
@@ -53,12 +63,12 @@ const parseThemeMetadata = metadataString => {
 	}
 };
 
-const processThemeMetadata = metadata => {
+const processThemeMetadata = (metadata: ThemeMetadata): ThemeDescriptor | undefined => {
 	let themeName;
 	let baseThemeName;
 
 	try {
-		themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)[1];
+		themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)![1];
 		baseThemeName = metadata.Extends[0];
 	} catch (ex) {
 		if (!warnings.has("object")) {
@@ -74,14 +84,18 @@ const processThemeMetadata = metadata => {
 	};
 };
 
-const getThemeDesignerTheme = () => {
+const getThemeDesignerTheme = (): ThemeDescriptor | undefined => {
 	const metadataString = getThemeMetadata();
 	if (!metadataString || metadataString === "none") {
 		return;
 	}
 
 	const metadata = parseThemeMetadata(metadataString);
-	return processThemeMetadata(metadata);
+
+	if (metadata) {
+		return processThemeMetadata(metadata);
+	}
 };
 
 export default getThemeDesignerTheme;
+export type { ThemeDescriptor };

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

@@ -1,10 +1,11 @@
 import getEffectiveLinksHrefs from "./getEffectiveLinksHrefs.js";
 import createLinkInHead from "../util/createLinkInHead.js";
 import { shouldUseLinks, shouldPreloadLinks } from "../CSP.js";
+import type UI5Element from "../UI5Element.js";
 
-const preloaded = new Set();
+const preloaded = new Set<string>();
 
-const preloadLinks = ElementClass => {
+const preloadLinks = (ElementClass: typeof UI5Element) => {
 	if (!shouldUseLinks() || !shouldPreloadLinks()) {
 		return;
 	}

package/src/thirdparty/{_merge.js → _merge.ts}

@@ -1,6 +1,6 @@
 import isPlainObject from './isPlainObject.js';
 var oToken = Object.create(null);
-var fnMerge = function () {
+var fnMerge = function (arg1?: any, arg2?: any, arg3?: any, arg4?: any) {
     var src, copyIsArray, copy, name, options, clone, target = arguments[2] || {}, i = 3, length = arguments.length, deep = arguments[0] || false, skipToken = arguments[1] ? undefined : oToken;
     if (typeof target !== 'object' && typeof target !== 'function') {
         target = {};
@@ -29,4 +29,4 @@ var fnMerge = function () {
     }
     return target;
 };
-export default fnMerge;
+export default fnMerge;

package/src/thirdparty/{isPlainObject.js → isPlainObject.ts}

@@ -3,7 +3,7 @@ var hasOwn = class2type.hasOwnProperty;
 var toString = class2type.toString;
 var fnToString = hasOwn.toString;
 var ObjectFunctionString = fnToString.call(Object);
-var fnIsPlainObject = function (obj) {
+var fnIsPlainObject = function (obj: object) {
   var proto, Ctor;
   if (!obj || toString.call(obj) !== "[object Object]") {
     return false;

package/src/thirdparty/merge.ts

@@ -0,0 +1,5 @@
+import _merge from './_merge.js';
+const fnMerge = function (arg1?: any, arg2?: any) {
+    return _merge(true, false, ...arguments);
+};
+export default fnMerge;

package/src/types/AnimationMode.ts

@@ -0,0 +1,33 @@
+/**
+ * Different types of AnimationMode.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.AnimationMode
+ */
+enum AnimationMode {
+	/**
+	 * @public
+	 * @type {Full}
+	 */
+	Full = "full",
+	/**
+	 * @public
+	 * @type {Basic}
+	 */
+	Basic = "basic",
+	/**
+	 * @public
+	 * @type {Minimal}
+	 */
+	Minimal = "minimal",
+	/**
+	 * @public
+	 * @type {None}
+	 */
+	None = "none",
+}
+
+export default AnimationMode;

package/src/types/{CSSColor.js → CSSColor.ts}

@@ -1,7 +1,18 @@
 import DataType from "./DataType.js";
 
+/**
+ * @class
+ * CSSColor data type.
+ *
+ * @extends sap.ui.webc.base.types.DataType
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.CSSColor
+ * @public
+ * @enum {string}
+ */
 class CSSColor extends DataType {
-	static isValid(value) {
+	static override isValid(value: string) {
 		return /^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})|rgb\(\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*(,\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*){2}\)|rgba\((\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*,){3}\s*(0(\.[0-9]+)?|1(\.0+)?)\s*\)|hsl\(\s*([0-2]?[0-9]?[0-9]|3([0-5][0-9]|60))\s*(,\s*(([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*){2}\)|hsla\(\s*([0-2]?[0-9]?[0-9]|3([0-5][0-9]|60))\s*,(\s*(([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*,){2}\s*(0(\.[0-9]+)?|1(\.0+)?)\s*\)|aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgrey|darkgreen|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|grey|green|greenyellow|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgrey|lightgreen|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silverskyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen|transparent|inherit|)$/.test(value ); // eslint-disable-line
 	}
 }

package/src/types/CalendarType.ts

@@ -0,0 +1,38 @@
+/**
+ * Different calendar types.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.CalendarType
+ */
+enum CalendarType {
+	/**
+	 * @public
+	 * @type {Gregorian}
+	 */
+	Gregorian = "Gregorian",
+	/**
+	 * @public
+	 * @type {Islamic}
+	 */
+	Islamic = "Islamic",
+	/**
+	 * @public
+	 * @type {Japanese}
+	 */
+	Japanese = "Japanese",
+	/**
+	 * @public
+	 * @type {Buddhist}
+	 */
+	Buddhist = "Buddhist",
+	/**
+	 * @public
+	 * @type {Persian}
+	 */
+	Persian = "Persian",
+}
+
+export default CalendarType;

package/src/types/DOMReference.ts

@@ -0,0 +1,28 @@
+import DataType from "./DataType.js";
+
+/**
+ * @class
+ * DOM Element reference or ID.
+ * <b>Note:</b> If an ID is passed, it is expected to be part of the same <code>document</code> element as the consuming component.
+ *
+ * @constructor
+ * @extends sap.ui.webc.base.types.DataType
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.DOMReference
+ * @public
+ */
+class DOMReference extends DataType {
+	static override isValid(value: string | HTMLElement) {
+		return (typeof value === "string" || value instanceof HTMLElement);
+	}
+
+	static override propertyToAttribute(propertyValue: string | HTMLElement) {
+		if (propertyValue instanceof HTMLElement) {
+			return null;
+		}
+
+		return propertyValue;
+	}
+}
+
+export default DOMReference;