@ui5/webcomponents-base 0.0.0-cf50976ce → 0.0.0-d4d43327a

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

@@ -5,14 +5,18 @@ import DataType from "./DataType.js";
  * 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 isValid(value) {
+	static override isValid(value: string | HTMLElement) {
 		return (typeof value === "string" || value instanceof HTMLElement);
 	}
 
-	static propertyToAttribute(propertyValue) {
+	static override propertyToAttribute(propertyValue: string | HTMLElement) {
 		if (propertyValue instanceof HTMLElement) {
 			return null;
 		}

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,42 @@
+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);
+	}
+
+	if (ctor.renderer) {
+		ctor.renderer(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
+		return;
+	}
+
+	ctor.render(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
+};
+
+export default updateShadowRoot;

package/src/util/AriaLabelHelper.ts

@@ -0,0 +1,218 @@
+import UI5Element, { ChangeInfo } from "../UI5Element.js";
+
+type InvalidateCallback = (changeInfo: ChangeInfo) => void;
+type MutationCallback = () => void;
+type AssociatedElement = {
+	observer: MutationObserver | null;
+	callbacks: Array<MutationCallback>;
+};
+type RegisteredElement = {
+	host: UI5Element;
+	observedElements: Array<HTMLElement>;
+	callback: MutationCallback;
+	invalidationCallback: InvalidateCallback;
+};
+
+const associatedElements = new WeakMap<HTMLElement, AssociatedElement>();
+const registeredElements = new WeakMap<UI5Element, RegisteredElement>();
+
+type AccessibleElement = HTMLElement & {
+	accessibleNameRef: string;
+	accessibleName: string;
+};
+
+const observerOptions = {
+	attributes: true,
+	childList: true,
+	characterData: true,
+	subtree: true,
+};
+
+const getEffectiveAriaLabelText = (el: HTMLElement) => {
+	const accessibleEl = el as AccessibleElement;
+
+	if (!accessibleEl.accessibleNameRef) {
+		if (accessibleEl.accessibleName) {
+			return accessibleEl.accessibleName;
+		}
+
+		return undefined;
+	}
+
+	return getAllAccessibleNameRefTexts(el);
+};
+
+/**
+ *
+ * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related texts
+ */
+const getAllAccessibleNameRefTexts = (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}']`);
+		const text = `${element && element.textContent ? element.textContent : ""}`;
+		if (text) {
+			result += text;
+			if (index < ids.length - 1) {
+				result += " ";
+			}
+		}
+	});
+
+	return result;
+};
+
+const _getAllAssociatedElementsFromDOM = (el: UI5Element): Array<HTMLElement> => {
+	const set = new Set<HTMLElement>();
+	// adding labels with attribute for matching the el.id
+	const labelsForAssociated = _getAssociatedLabels(el);
+	labelsForAssociated.forEach(itm => {
+		set.add(itm);
+	});
+	// adding other elements that id is the same as accessibleNameRef value
+	const value = el["accessibleNameRef" as keyof typeof el] as string;
+	const ids = value?.split(" ") ?? [];
+	ids.forEach(id => {
+		const refEl = _getReferencedElementById(el, id);
+		if (refEl) {
+			set.add(refEl);
+		}
+	});
+	return Array.from(set);
+};
+
+const _getAssociatedLabels = (el: HTMLElement): Array<HTMLElement> => {
+	const labels = (el.getRootNode() as HTMLElement).querySelectorAll<HTMLElement>(`[for="${el.id}"]`);
+	return Array.from(labels);
+};
+
+const _getReferencedElementById = (el: HTMLElement, elementId: string): HTMLElement | null => {
+	return (el.getRootNode() as HTMLElement).querySelector<HTMLElement>(`[id='${elementId}']`);
+};
+
+/**
+ * @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 = _getAssociatedLabels(el);
+
+	labels.forEach((label: HTMLElement) => {
+		const labelText = label.textContent;
+		labelText && results.push(labelText);
+	});
+
+	if (results.length) {
+		return results.join(" ");
+	}
+
+	return undefined;
+};
+
+const _createInvalidationCallback = (el: UI5Element) => {
+	const invalidationCallback = (changeInfo: ChangeInfo) => {
+		if (!(changeInfo && changeInfo.type === "property" && changeInfo.name === "accessibleNameRef")) {
+			return;
+		}
+		const registeredElement = registeredElements.get(el);
+		if (!registeredElement) {
+			return;
+		}
+		const oldAssociatedElements = registeredElement.observedElements;
+		const newAssociatedElements = _getAllAssociatedElementsFromDOM(el);
+		oldAssociatedElements.forEach(oldElement => {
+			if (!newAssociatedElements.includes(oldElement)) {
+				_removeObservedElementFromRegisteredElement(registeredElement, oldElement);
+			}
+		});
+		newAssociatedElements.forEach(newElement => {
+			if (!oldAssociatedElements.includes(newElement)) {
+				_addObservedElementToRegisteredElement(registeredElement, newElement);
+				registeredElement.observedElements.push(newElement);
+			}
+		});
+		registeredElement?.callback();
+	};
+	return invalidationCallback;
+};
+
+const registerUI5Element = (el: UI5Element, callback: MutationCallback) => {
+	if (registeredElements.has(el)) {
+		return;
+	}
+	const allAssociatedElements = _getAllAssociatedElementsFromDOM(el);
+	const invalidationCallback = _createInvalidationCallback(el);
+	const registeredElement = {
+		host: el,
+		observedElements: allAssociatedElements,
+		callback,
+		invalidationCallback,
+	};
+	registeredElements.set(el, registeredElement);
+	el.attachInvalidate(invalidationCallback);
+
+	allAssociatedElements.forEach((element: HTMLElement) => {
+		_addObservedElementToRegisteredElement(registeredElement, element);
+	});
+	callback();
+};
+
+const _addObservedElementToRegisteredElement = (registeredElement: RegisteredElement, element: HTMLElement) => {
+	let associatedElement = associatedElements.get(element);
+	if (!associatedElement) {
+		associatedElement = { observer: null, callbacks: [] };
+		const observer = new MutationObserver(() => {
+			const callbacks = (associatedElement as AssociatedElement).callbacks;
+			callbacks.forEach(callback => {
+				callback();
+			});
+			const domEl = document.getElementById(element.id);
+			// if no longer should be observed from this registeredElement, remove it
+			if (!(registeredElement.host.id === element.getAttribute("for") || domEl)) {
+				_removeObservedElementFromRegisteredElement(registeredElement, element);
+			}
+		});
+		associatedElement.observer = observer;
+		observer.observe(element, observerOptions);
+		associatedElements.set(element, associatedElement);
+	}
+	if (!associatedElement.callbacks.includes(registeredElement.callback)) {
+		associatedElement.callbacks.push(registeredElement.callback);
+	}
+};
+
+const _removeObservedElementFromRegisteredElement = (registeredElement: RegisteredElement, element: HTMLElement) => {
+	const associatedElement = associatedElements.get(element);
+	if (associatedElement) {
+		associatedElement.callbacks = associatedElement.callbacks.filter(itm => itm !== registeredElement.callback);
+		if (!associatedElement.callbacks.length) {
+			associatedElement.observer?.disconnect();
+			associatedElements.delete(element);
+		}
+	}
+	registeredElement.observedElements = registeredElement.observedElements.filter(itm => itm !== element);
+};
+
+const deregisterUI5Element = (el: UI5Element) => {
+	const registeredElement = registeredElements.get(el);
+	if (!registeredElement) {
+		return;
+	}
+	const oldObservedElements = [...registeredElement.observedElements];
+	oldObservedElements.forEach(observedElement => {
+		_removeObservedElementFromRegisteredElement(registeredElement, observedElement);
+	});
+	el.detachInvalidate(registeredElement.invalidationCallback);
+	registeredElements.delete(el);
+};
+
+export {
+	getEffectiveAriaLabelText,
+	getAssociatedLabelForTexts,
+	registerUI5Element,
+	deregisterUI5Element,
+	getAllAccessibleNameRefTexts,
+};

package/src/util/{Caret.js → Caret.ts}

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