@ui5/webcomponents-base 0.0.0-4821618b2 → 0.0.0-49cef2d02

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

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;

package/src/types/Integer.ts

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

package/src/types/InvisibleMessageMode.ts

@@ -0,0 +1,27 @@
+/**
+ * Enumeration for different mode behaviors of the InvisibleMessage.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.InvisibleMessageMode
+ */
+enum InvisibleMessageMode {
+	/**
+     * Indicates that updates to the region should be presented at the next graceful opportunity,
+     * such as at the end of reading the current sentence, or when the user pauses typing.
+	 * @public
+	 * @type {Polite}
+     */
+	Polite = "Polite",
+
+	/**
+     * Indicates that updates to the region have the highest priority and should be presented to the user immediately.
+	 * @public
+	 * @type {Assertive}
+     */
+	Assertive = "Assertive",
+}
+
+export default InvisibleMessageMode;

package/src/types/ItemNavigationBehavior.ts

@@ -0,0 +1,26 @@
+/**
+ * Different behavior for ItemNavigation.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.ItemNavigationBehavior
+ */
+enum ItemNavigationBehavior {
+	/**
+	 * Static behavior: navigations stops at the first or last item.
+	 * @public
+	 * @type {Static}
+ 	 */
+	Static = "Static",
+
+	/**
+	 * Cycling behavior: navigating past the last item continues with the first and vice versa.
+	 * @public
+	 * @type {Cyclic}
+ 	 */
+	Cyclic = "Cyclic",
+}
+
+export default ItemNavigationBehavior;

package/src/types/NavigationMode.ts

@@ -0,0 +1,33 @@
+/**
+ * Different navigation modes for ItemNavigation.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.NavigationMode
+ */
+enum NavigationMode {
+	/**
+	 * @public
+	 * @type {Auto}
+	 */
+	Auto = "Auto",
+	/**
+	 * @public
+	 * @type {Vertical}
+	 */
+	Vertical = "Vertical",
+	/**
+	 * @public
+	 * @type {Horizontal}
+	 */
+	Horizontal = "Horizontal",
+	/**
+	 * @public
+	 * @type {Paging}
+	 */
+	Paging = "Paging",
+}
+
+export default NavigationMode;

package/src/types/ValueState.ts

@@ -0,0 +1,47 @@
+/**
+ * Different types of ValueStates.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.ValueState
+ */
+enum ValueState {
+	/**
+	 *
+	 * @public
+	 * @type {None}
+	 */
+	None = "None",
+
+	/**
+	 *
+	 * @public
+	 * @type {Success}
+	 */
+	Success = "Success",
+
+	/**
+	 *
+	 * @public
+	 * @type {Warning}
+	 */
+	Warning = "Warning",
+
+	/**
+	 *
+	 * @public
+	 * @type {Error}
+	 */
+	Error = "Error",
+
+	/**
+	 *
+	 * @public
+	 * @type {Information}
+	 */
+	Information = "Information",
+}
+
+export default ValueState;

package/src/types.ts

@@ -0,0 +1,30 @@
+type PromiseResolve = (value: void | PromiseLike<void>) => void;
+type Timeout = ReturnType<typeof setTimeout>;
+type Interval = ReturnType<typeof setInterval>;
+
+type StyleDataCSP = {
+	content: string,
+	packageName: string,
+	fileName: string,
+};
+
+type StyleData = StyleDataCSP | string;
+
+type ComponentStylesData = Array<ComponentStylesData> | Array<StyleData> | StyleData;
+
+type ClassMapValue = Record<string, boolean>
+
+type ClassMap = { [x: string] : ClassMapValue | ClassMap };
+
+type PassiveEventListenerObject = EventListenerObject & { passive: boolean };
+
+export type {
+	PromiseResolve,
+	Timeout,
+	Interval,
+	StyleData,
+	StyleDataCSP,
+	ComponentStylesData,
+	ClassMap,
+	PassiveEventListenerObject,
+};

package/src/updateShadowRoot.ts

@@ -0,0 +1,37 @@
+import executeTemplate from "./renderer/executeTemplate.js";
+import getConstructableStyle from "./theming/getConstructableStyle.js";
+import getEffectiveStyle from "./theming/getEffectiveStyle.js";
+import getEffectiveLinksHrefs from "./theming/getEffectiveLinksHrefs.js";
+import { shouldUseLinks } from "./CSP.js";
+import type UI5Element from "./UI5Element.js";
+
+/**
+ * Updates the shadow root of a UI5Element or its static area item
+ * @param element
+ * @param forStaticArea
+ */
+const updateShadowRoot = (element: UI5Element, forStaticArea = false) => {
+	let styleStrOrHrefsArr;
+	const ctor = element.constructor as typeof UI5Element;
+	const propertyName = forStaticArea ? "staticAreaTemplate" : "template";
+	const template = ctor[propertyName];
+	const shadowRoot = forStaticArea ? element.staticAreaItem!.shadowRoot : element.shadowRoot;
+	const renderResult = executeTemplate(template!, element); // this is checked before calling updateShadowRoot
+
+	if (!shadowRoot) {
+		console.warn(`There is no shadow root to update`); // eslint-disable-line
+		return;
+	}
+
+	if (shouldUseLinks()) {
+		styleStrOrHrefsArr = getEffectiveLinksHrefs(ctor, forStaticArea);
+	} else if (document.adoptedStyleSheets) { // Chrome
+		shadowRoot.adoptedStyleSheets = getConstructableStyle(ctor, forStaticArea);
+	} else { // FF, Safari
+		styleStrOrHrefsArr = getEffectiveStyle(ctor, forStaticArea);
+	}
+
+	ctor.render(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
+};
+
+export default updateShadowRoot;

package/src/util/AriaLabelHelper.ts

@@ -0,0 +1,63 @@
+type AccessibleElement = HTMLElement & {
+	accessibleNameRef: string,
+	accessibleName: string,
+}
+
+const getEffectiveAriaLabelText = (el: HTMLElement) => {
+	const accessibleEl = el as AccessibleElement;
+
+	if (!accessibleEl.accessibleNameRef) {
+		if (accessibleEl.accessibleName) {
+			return accessibleEl.accessibleName;
+		}
+
+		return undefined;
+	}
+
+	return _getAriaLabelledByTexts(el);
+};
+
+/**
+ *
+ * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related texts
+ */
+const _getAriaLabelledByTexts = (el: HTMLElement) => {
+	const ids = (el as AccessibleElement).accessibleNameRef.split(" ");
+	const owner = el.getRootNode() as HTMLElement;
+	let result = "";
+
+	ids.forEach((elementId: string, index: number) => {
+		const element = owner.querySelector(`[id='${elementId}']`);
+		result += `${element && element.textContent ? element.textContent : ""}`;
+
+		if (index < ids.length - 1) {
+			result += " ";
+		}
+	});
+
+	return result;
+};
+
+/**
+ * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related "label for" texts
+ */
+const getAssociatedLabelForTexts = (el: HTMLElement) => {
+	const results: Array<string> = [];
+	const labels = (el.getRootNode() as HTMLElement).querySelectorAll(`[ui5-label][for="${el.id}"],label[for="${el.id}"]`);
+
+	labels.forEach((label: Node) => {
+		const labelText = label.textContent;
+		labelText && results.push(labelText);
+	});
+
+	if (results.length) {
+		return results.join(" ");
+	}
+
+	return undefined;
+};
+
+export {
+	getEffectiveAriaLabelText,
+	getAssociatedLabelForTexts,
+};

package/src/util/Caret.ts

@@ -0,0 +1,28 @@
+/**
+ * Returns the caret (cursor) position of the specified text field (field).
+ * Return value range is 0-field.value.length.
+ */
+const getCaretPosition = (field: HTMLInputElement): number | null => {
+	// Initialize
+	let caretPos: number | null = 0;
+
+	if (field.selectionStart || field.selectionStart === 0) { // Firefox support
+		caretPos = field.selectionDirection === "backward" ? field.selectionStart : field.selectionEnd;
+	}
+
+	return caretPos;
+};
+
+const setCaretPosition = (field: HTMLInputElement, caretPos: number | null) => {
+	if (field.selectionStart) {
+		field.focus();
+		field.setSelectionRange(caretPos, caretPos);
+	} else {
+		field.focus();
+	}
+};
+
+export {
+	getCaretPosition,
+	setCaretPosition,
+};