@ui5/webcomponents-base 0.0.0-2db62badf → 0.0.0-2f7664755

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,
+};

package/src/theming/ThemeLoaded.ts

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

package/src/theming/applyTheme.ts

@@ -0,0 +1,90 @@
+import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "../asset-registries/Themes.js";
+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";
+
+const isThemeBaseRegistered = () => {
+	const registeredPackages = getRegisteredPackages();
+	return registeredPackages.has(BASE_THEME_PACKAGE);
+};
+
+const loadThemeBase = async (theme: string) => {
+	if (!isThemeBaseRegistered()) {
+		return;
+	}
+
+	const cssData = await getThemeProperties(BASE_THEME_PACKAGE, theme);
+	if (cssData) {
+		createOrUpdateStyle(cssData, "data-ui5-theme-properties", BASE_THEME_PACKAGE);
+	}
+};
+
+const deleteThemeBase = () => {
+	removeStyle("data-ui5-theme-properties", BASE_THEME_PACKAGE);
+};
+
+const loadComponentPackages = async (theme: string) => {
+	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 = async (theme: string) => {
+	// 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<typeof OpenUI5Support>("OpenUI5Support");
+	if (openUI5Support) {
+		const varsLoaded = openUI5Support.cssVariablesLoaded();
+		if (varsLoaded) {
+			return {
+				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: 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) {
+		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;

package/src/theming/getConstructableStyle.ts

@@ -0,0 +1,31 @@
+import getEffectiveStyle from "./getEffectiveStyle.js";
+import { attachCustomCSSChange } from "./CustomStyle.js";
+import UI5Element from "../UI5Element.js";
+
+const constructableStyleMap = new Map<string, Array<CSSStyleSheet>>();
+
+attachCustomCSSChange((tag: string) => {
+	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
+ * @param ElementClass
+ * @returns {*}
+ */
+const getConstructableStyle = (ElementClass: typeof UI5Element, 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)!;
+};
+
+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.ts

@@ -0,0 +1,41 @@
+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<string, string>();
+
+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: typeof UI5Element, forStaticArea = false) => {
+	const tag = ElementClass.getMetadata().getTag();
+	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+	const openUI5Enablement = getFeature<typeof OpenUI5Enablement>("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;

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.ts

@@ -0,0 +1,101 @@
+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
+	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 as HTMLSpanElement).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: string) => {
+	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) as ThemeMetadata;
+		} 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: ThemeMetadata): ThemeDescriptor | undefined => {
+	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 = (): ThemeDescriptor | undefined => {
+	const metadataString = getThemeMetadata();
+	if (!metadataString || metadataString === "none") {
+		return;
+	}
+
+	const metadata = parseThemeMetadata(metadataString);
+
+	if (metadata) {
+		return processThemeMetadata(metadata);
+	}
+};
+
+export default getThemeDesignerTheme;
+export type { ThemeDescriptor };

package/src/theming/preloadLinks.ts

@@ -0,0 +1,24 @@
+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<string>();
+
+const preloadLinks = (ElementClass: typeof UI5Element) => {
+	if (!shouldUseLinks() || !shouldPreloadLinks()) {
+		return;
+	}
+
+	const linksHrefs = getEffectiveLinksHrefs(ElementClass, false) || [];
+	const staticAreaLinksHrefs = getEffectiveLinksHrefs(ElementClass, true) || [];
+
+	[...linksHrefs, ...staticAreaLinksHrefs].forEach(href => {
+		if (!preloaded.has(href)) {
+			createLinkInHead(href, { rel: "preload", as: "style" });
+			preloaded.add(href);
+		}
+	});
+};
+
+export default preloadLinks;

package/src/thirdparty/_merge.ts

@@ -0,0 +1,32 @@
+import isPlainObject from './isPlainObject.js';
+var oToken = Object.create(null);
+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 = {};
+    }
+    for (; i < length; i++) {
+        if ((options = arguments[i]) != null) {
+            for (name in options) {
+                src = target[name];
+                copy = options[name];
+                if (name === '__proto__' || target === copy) {
+                    continue;
+                }
+                if (deep && copy && (isPlainObject(copy) || (copyIsArray = Array.isArray(copy)))) {
+                    if (copyIsArray) {
+                        copyIsArray = false;
+                        clone = src && Array.isArray(src) ? src : [];
+                    } else {
+                        clone = src && isPlainObject(src) ? src : {};
+                    }
+                    target[name] = fnMerge(deep, arguments[1], clone, copy);
+                } else if (copy !== skipToken) {
+                    target[name] = copy;
+                }
+            }
+        }
+    }
+    return target;
+};
+export default fnMerge;

package/src/thirdparty/isPlainObject.ts

@@ -0,0 +1,18 @@
+var class2type = {};
+var hasOwn = class2type.hasOwnProperty;
+var toString = class2type.toString;
+var fnToString = hasOwn.toString;
+var ObjectFunctionString = fnToString.call(Object);
+var fnIsPlainObject = function (obj: object) {
+  var proto, Ctor;
+  if (!obj || toString.call(obj) !== "[object Object]") {
+    return false;
+  }
+  proto = Object.getPrototypeOf(obj);
+  if (!proto) {
+    return true;
+  }
+  Ctor = hasOwn.call(proto, "constructor") && proto.constructor;
+  return typeof Ctor === "function" && fnToString.call(Ctor) === ObjectFunctionString;
+};
+export default fnIsPlainObject;

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.ts

@@ -0,0 +1,20 @@
+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 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
+	}
+}
+
+export default CSSColor;

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;

package/src/types/DataType.ts

@@ -0,0 +1,51 @@
+import { PropertyValue } from "../UI5ElementMetadata.js";
+
+/**
+ * Base class for all data types.
+ *
+ * @class
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.DataType
+ * @public
+ */
+class DataType {
+	/**
+	 * Checks if the value is valid for its data type.
+ 	 * @public
+	 * @abstract
+	 * @returns {Boolean}
+	 */
+	// eslint-disable-next-line
+	static isValid(value: any): boolean {
+		return false;
+	}
+
+	static attributeToProperty(attributeValue: string | null): PropertyValue {
+		return attributeValue;
+	}
+
+	static propertyToAttribute(propertyValue: PropertyValue): string | null {
+		return propertyValue === null ? null : String(propertyValue);
+	}
+
+	static valuesAreEqual(value1: any, value2: any) {
+		return value1 === value2;
+	}
+
+	static generateTypeAccessors(types: Record<string, string>) {
+		Object.keys(types).forEach(type => {
+			Object.defineProperty(this, type, {
+				get() {
+					return types[type];
+				},
+			});
+		});
+	}
+
+	static get isDataTypeClass() {
+		return true;
+	}
+}
+
+export default DataType;

package/src/types/Float.ts

@@ -0,0 +1,25 @@
+import { PropertyValue } from "../UI5ElementMetadata.js";
+import DataType from "./DataType.js";
+
+/**
+ * @class
+ * Float data type.
+ *
+ * @constructor
+ * @extends sap.ui.webc.base.types.DataType
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.Float
+ * @public
+ * @enum {number}
+ */
+class Float extends DataType {
+	static override isValid(value: any) {
+		return Number(value) === value;
+	}
+
+	static override attributeToProperty(attributeValue: string): PropertyValue {
+		return parseFloat(attributeValue);
+	}
+}
+
+export default Float;