@ui5/webcomponents-base 0.0.0-e0658a650 → 0.0.0-e55c2cec6

package/src/decorators/slot.ts

@@ -0,0 +1,49 @@
+import type UI5Element from "../UI5Element.js";
+import { Slot } from "../UI5ElementMetadata.js";
+
+/**
+ * Returns a slot decorator.
+ *
+ * @param { Slot } slotData
+ * @returns { PropertyDecorator }
+ */
+const slot = (slotData?: Slot): PropertyDecorator => {
+	return (target: any, slotKey: string | symbol) => {
+		const ctor = target.constructor as typeof UI5Element;
+
+		if (!Object.prototype.hasOwnProperty.call(ctor, "decoratorMetadata")) {
+			ctor.decoratorMetadata = {};
+		}
+
+		const decoratorMetadata = ctor.decoratorMetadata;
+		if (!decoratorMetadata.slots) {
+			decoratorMetadata.slots = {};
+		}
+
+		const slotMetadata = decoratorMetadata.slots;
+
+		if (slotData?.default && slotMetadata.default) {
+			throw new Error("Only one slot can be the default slot.");
+		}
+
+		const key = slotData?.default ? "default" : slotKey as string;
+		slotData = slotData || { type: HTMLElement };
+
+		if (!slotData.type) {
+			slotData.type = HTMLElement;
+		}
+
+		if (!slotMetadata[key]) {
+			slotMetadata[key] = slotData;
+		}
+
+		if (slotData.default) {
+			delete slotMetadata.default.default;
+			slotMetadata.default.propertyName = slotKey as string;
+		}
+
+		ctor.decoratorMetadata.managedSlots = true;
+	};
+};
+
+export default slot;

package/src/decorators/themeAware.ts

@@ -0,0 +1,14 @@
+/**
+ * Class decorator, that sets the themeAware metadata.
+ * @param { any } target the decorated class
+ * @returns { void }
+ */
+const themeAware = (target: any): void => {
+	if (!Object.prototype.hasOwnProperty.call(target, "decoratorMetadata")) {
+		target.decoratorMetadata = {};
+	}
+
+	target.decoratorMetadata.themeAware = true;
+};
+
+export default themeAware;

package/src/delegate/ItemNavigation.ts

@@ -16,9 +16,9 @@ import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
 import type UI5Element from "../UI5Element.js";
 import { instanceOfUI5Element } from "../UI5Element.js";
 
-interface Tabbable {
-	id?: string,
-	_tabIndex?: string,
+interface ITabbable {
+	id: string,
+	_tabIndex: string,
 }
 
 type ItemNavigationOptions = {
@@ -27,7 +27,7 @@ type ItemNavigationOptions = {
 	rowSize?: number
 	skipItemsSize?: number,
 	behavior?: ItemNavigationBehavior,
-	getItemsCallback: () => Array<Tabbable>,
+	getItemsCallback: () => Array<ITabbable>,
 	affectedPropertiesNames?: Array<string>,
 };
 
@@ -67,7 +67,7 @@ type ItemNavigationOptions = {
 class ItemNavigation {
 	rootWebComponent: UI5Element;
 
-	_getItems: () => Array<Tabbable>;
+	_getItems: () => Array<ITabbable>;
 
 	_currentIndex: number;
 
@@ -126,7 +126,7 @@ class ItemNavigation {
 	 * @public
 	 * @param current the new selected item
 	 */
-	setCurrentItem(current: Tabbable) {
+	setCurrentItem(current: ITabbable) {
 		const currentItemIndex = this._getItems().indexOf(current);
 
 		if (currentItemIndex === -1) {
@@ -338,7 +338,7 @@ class ItemNavigation {
 	_focusCurrentItem() {
 		const currentItem = this._getCurrentItem();
 		if (currentItem) {
-			currentItem.focus();
+			currentItem.focus({ focusVisible: true } as FocusOptions);
 		}
 	}
 
@@ -353,7 +353,7 @@ class ItemNavigation {
 		const items = this._getItems();
 
 		if (!items.length) {
-			return null;
+			return;
 		}
 
 		// normalize the index
@@ -389,5 +389,5 @@ class ItemNavigation {
 export default ItemNavigation;
 
 export {
-	Tabbable,
+	ITabbable,
 };

package/src/delegate/ScrollEnablement.ts

@@ -6,7 +6,13 @@ import type UI5Element from "../UI5Element.js";
 const scrollEventName = "scroll";
 const touchEndEventName = supportsTouch() ? "touchend" : "mouseup";
 
-class ScrollEnablement<EventListenerParam, EventListenerReturn> extends EventProvider<EventListenerParam, EventListenerReturn> {
+type EventListenerParam = {
+	isLeft: boolean;
+	isRight: boolean
+}
+type EventListenerReturn = void;
+
+class ScrollEnablement extends EventProvider<EventListenerParam, EventListenerReturn> {
 	containerComponent: UI5Element;
 	mouseMove: (event: MouseEvent | TouchEvent) => void;
 	mouseUp: (event: MouseEvent | TouchEvent) => void;
@@ -163,7 +169,7 @@ class ScrollEnablement<EventListenerParam, EventListenerReturn> extends EventPro
 		this.fireEvent(scrollEventName, {
 			isLeft: dragX! > this._prevDragX!,
 			isRight: dragX! < this._prevDragX!,
-		} as unknown as EventListenerParam);
+		});
 
 		this.cachedValue.dragX = this._prevDragX!;
 		this.cachedValue.dragY = this._prevDragY!;
@@ -200,7 +206,7 @@ class ScrollEnablement<EventListenerParam, EventListenerReturn> extends EventPro
 		this.fireEvent(touchEndEventName, {
 			isLeft: _dragX < this._prevDragX!,
 			isRight: _dragX > this._prevDragX!,
-		} as unknown as EventListenerParam);
+		});
 
 		this._prevDragX = dragX;
 		this._prevDragY = dragY;

package/src/locale/normalizeLocale.ts

@@ -7,7 +7,7 @@ const SAPSupportabilityLocales = /(?:^|-)(saptrc|sappsd)(?:-|$)/i;
 const M_ISO639_NEW_TO_OLD = {
 	"he": "iw",
 	"yi": "ji",
-	"id": "in",
+	"nb": "no",
 	"sr": "sh",
 };
 

package/src/theming/getEffectiveLinksHrefs.ts

@@ -2,23 +2,25 @@ import { getUrl } from "../CSP.js";
 import { getFeature } from "../FeaturesRegistry.js";
 import type UI5Element from "../UI5Element.js";
 import type OpenUI5Enablement from "../features/OpenUI5Enablement.js";
-import { StyleData, StyleDataCSP } from "../types.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: StyleData | Array<StyleData> = ElementClass[forStaticArea ? "staticAreaStyles" : "styles"];
+	const stylesData: ComponentStylesData = ElementClass[forStaticArea ? "staticAreaStyles" : "styles"];
 
 	if (!stylesData) {
 		return;
 	}
 
-	const stylesDataArray: Array<StyleData> = Array.isArray(stylesData) ? stylesData : [stylesData];
+	const stylesDataArray: ComponentStylesData = Array.isArray(stylesData) ? stylesData : [stylesData];
 
 	const openUI5Enablement = getFeature<typeof OpenUI5Enablement>("OpenUI5Enablement");
 	if (openUI5Enablement) {
 		stylesDataArray.push(openUI5Enablement.getBusyIndicatorStyles());
 	}
 
-	return stylesDataArray.flat().filter(data => !!data).map(data => getUrl((data as StyleDataCSP).packageName, (data as StyleDataCSP).fileName));
+	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/getStylesString.ts

@@ -1,8 +1,10 @@
-import { StyleData } from "../types.js";
+import { ComponentStylesData, StyleData } from "../types.js";
 
-const getStylesString = (styles: Array<StyleData> | StyleData) => {
+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().map((style: StyleData) => {
+		return (styles.filter(style => !!style).flat(MAX_DEPTH_INHERITED_CLASSES) as Array<StyleData>).map((style: StyleData) => {
 			return typeof style === "string" ? style : style.content;
 		}).join(" ");
 	}

package/src/types/AnimationMode.ts

@@ -5,7 +5,7 @@
  * @enum {string}
  * @public
  * @author SAP SE
- * @alias sap.ui.webcomponents.base.types.AnimationMode
+ * @alias sap.ui.webc.base.types.AnimationMode
  */
 enum AnimationMode {
 	/**

package/src/types/CSSColor.ts

@@ -4,10 +4,10 @@ import DataType from "./DataType.js";
  * @class
  * CSSColor data type.
  *
- * @extends sap.ui.webcomponents.base.types.DataType
+ * @extends sap.ui.webc.base.types.DataType
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.base.types.CSSColor
+ * @alias sap.ui.webc.base.types.CSSColor
  * @public
  * @enum {string}
  */

package/src/types/CalendarType.ts

@@ -5,7 +5,7 @@
  * @enum {string}
  * @public
  * @author SAP SE
- * @alias sap.ui.webcomponents.base.types.CalendarType
+ * @alias sap.ui.webc.base.types.CalendarType
  */
 enum CalendarType {
 	/**

package/src/types/DOMReference.ts

@@ -6,9 +6,9 @@ import DataType from "./DataType.js";
  * <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.webcomponents.base.types.DataType
+ * @extends sap.ui.webc.base.types.DataType
  * @author SAP SE
- * @alias sap.ui.webcomponents.base.types.DOMReference
+ * @alias sap.ui.webc.base.types.DOMReference
  * @public
  */
 class DOMReference extends DataType {

package/src/types/DataType.ts

@@ -6,7 +6,7 @@ import { PropertyValue } from "../UI5ElementMetadata.js";
  * @class
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.base.types.DataType
+ * @alias sap.ui.webc.base.types.DataType
  * @public
  */
 class DataType {

package/src/types/Float.ts

@@ -6,9 +6,9 @@ import DataType from "./DataType.js";
  * Float data type.
  *
  * @constructor
- * @extends sap.ui.webcomponents.base.types.DataType
+ * @extends sap.ui.webc.base.types.DataType
  * @author SAP SE
- * @alias sap.ui.webcomponents.base.types.Float
+ * @alias sap.ui.webc.base.types.Float
  * @public
  * @enum {number}
  */

package/src/types/Integer.ts

@@ -6,9 +6,9 @@ import DataType from "./DataType.js";
  * Integer data type.
  *
  * @constructor
- * @extends sap.ui.webcomponents.base.types.DataType
+ * @extends sap.ui.webc.base.types.DataType
  * @author SAP SE
- * @alias sap.ui.webcomponents.base.types.Integer
+ * @alias sap.ui.webc.base.types.Integer
  * @public
  * @enum {number}
  */

package/src/types/InvisibleMessageMode.ts

@@ -5,7 +5,7 @@
  * @enum {string}
  * @public
  * @author SAP SE
- * @alias sap.ui.webcomponents.base.types.InvisibleMessageMode
+ * @alias sap.ui.webc.base.types.InvisibleMessageMode
  */
 enum InvisibleMessageMode {
 	/**

package/src/types/ItemNavigationBehavior.ts

@@ -5,7 +5,7 @@
  * @enum {string}
  * @public
  * @author SAP SE
- * @alias sap.ui.webcomponents.base.types.ItemNavigationBehavior
+ * @alias sap.ui.webc.base.types.ItemNavigationBehavior
  */
 enum ItemNavigationBehavior {
 	/**

package/src/types/NavigationMode.ts

@@ -5,7 +5,7 @@
  * @enum {string}
  * @public
  * @author SAP SE
- * @alias sap.ui.webcomponents.base.types.NavigationMode
+ * @alias sap.ui.webc.base.types.NavigationMode
  */
 enum NavigationMode {
 	/**

package/src/types/ValueState.ts

@@ -5,7 +5,7 @@
  * @enum {string}
  * @public
  * @author SAP SE
- * @alias sap.ui.webcomponents.base.types.ValueState
+ * @alias sap.ui.webc.base.types.ValueState
  */
 enum ValueState {
 	/**

package/src/types.ts

@@ -1,22 +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 I18nDefaultText = {
-	key: string,
-	defaultText: 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,
-	I18nDefaultText,
+	ComponentStylesData,
+	ClassMap,
+	PassiveEventListenerObject,
 };

package/src/util/Caret.ts

@@ -2,7 +2,7 @@
  * Returns the caret (cursor) position of the specified text field (field).
  * Return value range is 0-field.value.length.
  */
-const getCaretPosition = (field: HTMLInputElement) => {
+const getCaretPosition = (field: HTMLInputElement): number | null => {
 	// Initialize
 	let caretPos: number | null = 0;
 

package/src/util/ColorConversion.ts

@@ -169,7 +169,7 @@ enum CSSColors {
 	transparent = "00000000",
 }
 
-const getRGBColor = (color: string) => {
+const getRGBColor = (color: string): ColorRGB => {
 	if (color.startsWith("rgba")) {
 		return RGBAToRGB(color);
 	}
@@ -189,7 +189,7 @@ const getRGBColor = (color: string) => {
 	}
 
 	// Css Color
-	if (Object.keys(CSSColors).includes(color)) {
+	if (color in CSSColors) {
 		color = CSSColors[color as keyof typeof CSSColors];
 	}
 
@@ -200,7 +200,7 @@ const getRGBColor = (color: string) => {
  * Return an object with the properties for each of the main colors(red, green, blue)
  * @param {String} color Receives a color in the following format: "rgba(0, 0, 0, 1)
  */
-const RGBAToRGB = (color: string) => {
+const RGBAToRGB = (color: string): ColorRGB => {
 	const openingBracketIndex = color.indexOf("("),
 		commasIndexes = [];
 
@@ -221,7 +221,7 @@ const RGBAToRGB = (color: string) => {
  * Return an object with the properties for each of the main colors(red, green, blue)
  * @param {String} color Receives a color in the following format: "rgb(0, 0, 0)
  */
-const RGBStringToRGBObject = (color: string) => {
+const RGBStringToRGBObject = (color: string): ColorRGB => {
 	const openingBracketIndex = color.indexOf("("),
 		closingBraketIndex = color.indexOf(")"),
 		commasIndexes = [];
@@ -239,7 +239,7 @@ const RGBStringToRGBObject = (color: string) => {
 	};
 };
 
-const HSLToRGB = (color: ColorHSL) => {
+const HSLToRGB = (color: ColorHSL): ColorRGB => {
 	// Formula taken from https://www.rapidtables.com/convert/color/hsl-to-rgb.html
 	const C = (1 - Math.abs((2 * color.l) - 1)) * color.s,
 		X = C * (1 - Math.abs(((color.h / 60) % 2) - 1)),
@@ -305,10 +305,10 @@ const HSLToRGB = (color: ColorHSL) => {
 		r: Math.floor((tempColor.r + m) * 255),
 		g: Math.floor((tempColor.g + m) * 255),
 		b: Math.floor((tempColor.b + m) * 255),
-	} as ColorRGB;
+	};
 };
 
-const HEXToRGB = (hex: string) => {
+const HEXToRGB = (hex: string): ColorRGB => {
 	// Please make sure you pass a valid 6 digit hex color
 	// In the implementation of this method we assume that the hex argument is a 6 digit valid hex color
 
@@ -316,14 +316,14 @@ const HEXToRGB = (hex: string) => {
 		r: parseInt(hex.substr(0, 2), 16),
 		g: parseInt(hex.substr(2, 2), 16),
 		b: parseInt(hex.substr(4, 2), 16),
-	} as ColorRGB;
+	};
 };
 
 /**
  * Returns the hex value of the color as string
  * @param {Object} color Receives an object with the properties for each of the main colors(r, g, b)
  */
-const RGBtoHEX = (color: ColorRGB) => {
+const RGBtoHEX = (color: ColorRGB): string => {
 	const hexMap = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E"];
 	let hexValue = "#";
 
@@ -345,7 +345,7 @@ const RGBtoHEX = (color: ColorRGB) => {
 	return hexValue;
 };
 
-const RGBToHSL = (color: ColorRGB) => {
+const RGBToHSL = (color: ColorRGB): ColorHSL => {
 	const R = color.r / 255,
 		G = color.g / 255,
 		B = color.b / 255,
@@ -353,7 +353,7 @@ const RGBToHSL = (color: ColorRGB) => {
 		min = Math.min(R, G, B),
 		delta = max - min;
 
-	let h,
+	let h = 0,
 		s;
 
 	// Hue calculation
@@ -381,7 +381,7 @@ const RGBToHSL = (color: ColorRGB) => {
 		h,
 		s,
 		l,
-	} as ColorHSL;
+	};
 };
 
 export {
@@ -392,3 +392,8 @@ export {
 	RGBStringToRGBObject,
 	RGBtoHEX,
 };
+
+export type {
+	ColorHSL,
+	ColorRGB,
+};

package/src/util/FocusableElements.ts

@@ -2,11 +2,13 @@ import isElementHidden from "./isElementHidden.js";
 import isElementClickable from "./isElementClickable.js";
 import { instanceOfUI5Element } from "../UI5Element.js";
 
+type FocusableElementPromise = Promise<HTMLElement | null>;
+
 const isFocusTrap = (el: HTMLElement) => {
 	return el.hasAttribute("data-ui5-focus-trap");
 };
 
-const getFirstFocusableElement = async (container: HTMLElement, startFromContainer: boolean): Promise<HTMLElement | null> => {
+const getFirstFocusableElement = async (container: HTMLElement, startFromContainer?: boolean): FocusableElementPromise => {
 	if (!container || isElementHidden(container)) {
 		return null;
 	}
@@ -14,7 +16,7 @@ const getFirstFocusableElement = async (container: HTMLElement, startFromContain
 	return findFocusableElement(container, true, startFromContainer);
 };
 
-const getLastFocusableElement = async (container: HTMLElement, startFromContainer: boolean) => {
+const getLastFocusableElement = async (container: HTMLElement, startFromContainer?: boolean): FocusableElementPromise => {
 	if (!container || isElementHidden(container)) {
 		return null;
 	}
@@ -26,7 +28,7 @@ const isElemFocusable = (el: HTMLElement) => {
 	return el.hasAttribute("data-ui5-focus-redirect") || !isElementHidden(el);
 };
 
-const findFocusableElement = async (container: HTMLElement, forward: boolean, startFromContainer?: boolean): Promise<HTMLElement | null> => {
+const findFocusableElement = async (container: HTMLElement, forward: boolean, startFromContainer?: boolean): FocusableElementPromise => {
 	let child: HTMLElement | undefined;
 
 	if (container.shadowRoot) {

package/src/util/PopupUtils.ts

@@ -59,13 +59,13 @@ const isClickInRect = (event: MouseEvent | TouchEvent, rect: DOMRect) => {
 	let x;
 	let y;
 
-	if (event instanceof TouchEvent) {
+	if (event instanceof MouseEvent) {
+		x = event.clientX;
+		y = event.clientY;
+	} else {
 		const touch = event.touches[0];
 		x = touch.clientX;
 		y = touch.clientY;
-	} else {
-		x = event.clientX;
-		y = event.clientY;
 	}
 
 	return isPointInRect(x, y, rect);

package/src/util/TabbableElements.ts

@@ -1,15 +1,29 @@
 import isElementTabbable from "./isElementTabbable.js";
 
-const getTabbableElements = (el: HTMLElement) => {
+/**
+ * Returns the tabbable elements within the provided HTMLElement.
+ *
+ * @public
+ * @param { HTMLElement } el the component to operate on (component that slots or contains within its shadow root the items the user navigates among)
+ * @returns { Array<HTMLElement> } the tabbable elements
+ */
+const getTabbableElements = (el: HTMLElement): Array<HTMLElement> => {
 	return getTabbables([...el.children]);
 };
 
-const getLastTabbableElement = (el: HTMLElement) => {
+/**
+ * Returns the last tabbable element within the provided HTMLElement.
+ *
+ * @public
+ * @param { HTMLElement } el the component to operate on (component that slots or contains within its shadow root the items the user navigates among)
+ * @returns { HTMLElement | null } the last tabbable element or "null" if not found
+ */
+const getLastTabbableElement = (el: HTMLElement): HTMLElement | null => {
 	const tabbables = getTabbables([...el.children]);
 	return tabbables.length ? tabbables[tabbables.length - 1] : null;
 };
 
-const getTabbables = (nodes: Array<Node>, tabbables?: Array<HTMLElement>) => {
+const getTabbables = (nodes: Array<Node>, tabbables?: Array<HTMLElement>): Array<HTMLElement> => {
 	const tabbableElements = tabbables || [];
 
 	if (!nodes) {

package/src/util/isElementTabbable.ts

@@ -1,6 +1,13 @@
 import isElementHidden from "./isElementHidden.js";
 
-const isElementTabbable = (el: HTMLElement) => {
+/**
+ * Returns if the HTMLElement is tabbable.
+ *
+ * @public
+ * @param { HTMLElement } el the component to operate on (component that slots or contains within its shadow root the items the user navigates among)
+ * @returns { boolean } true if the element is tabbable or false - if not
+ */
+const isElementTabbable = (el: HTMLElement): boolean => {
 	if (!el) {
 		return false;
 	}
@@ -23,6 +30,8 @@ const isElementTabbable = (el: HTMLElement) => {
 	if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
 		return !(el as HTMLLinkElement).disabled;
 	}
+
+	return false;
 };
 
 export default isElementTabbable;

package/src/util/willShowContent.ts

@@ -0,0 +1,7 @@
+const willShowContent = (childNodes: Array<Node>) => {
+	return Array.from(childNodes).filter(node => {
+		return node.nodeType !== Node.COMMENT_NODE && (node.nodeType !== Node.TEXT_NODE || (node.nodeValue || "").trim().length !== 0);
+	}).length > 0;
+};
+
+export default willShowContent;