@ui5/webcomponents-base 1.12.0-rc.0 → 1.12.0-rc.2

package/src/types/CSSColor.ts

@@ -1,19 +0,0 @@
-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
- */
-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

@@ -1,38 +0,0 @@
-/**
- * Different calendar types.
- *
- * @readonly
- * @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

@@ -1,28 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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
- */
-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

@@ -1,24 +0,0 @@
-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
- */
-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

@@ -1,27 +0,0 @@
-/**
- * Enumeration for different mode behaviors of the InvisibleMessage.
- *
- * @readonly
- * @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

@@ -1,26 +0,0 @@
-/**
- * Different behavior for ItemNavigation.
- *
- * @readonly
- * @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

@@ -1,33 +0,0 @@
-/**
- * Different navigation modes for ItemNavigation.
- *
- * @readonly
- * @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

@@ -1,47 +0,0 @@
-/**
- * Different types of ValueStates.
- *
- * @readonly
- * @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

@@ -1,30 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,218 +0,0 @@
-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.ts

@@ -1,28 +0,0 @@
-/**
- * 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,
-};