@ui5/webcomponents-base 0.0.0-8db0ce01a → 0.0.0-8e1845415

package/src/decorators/customElement.ts

@@ -0,0 +1,57 @@
+import type UI5Element from "../UI5Element.js";
+import type { Renderer } from "../UI5Element.js";
+import type { TemplateFunction as Template } from "../renderer/executeTemplate.js";
+import type { ComponentStylesData as Styles } from "../types.js";
+
+/**
+ * Returns a custom element class decorator.
+ *
+ * @param { string | object } tagNameOrComponentSettings
+ * @returns { ClassDecorator }
+ */
+const customElement = (tagNameOrComponentSettings: string | {
+	tag?: string,
+	renderer?: Renderer,
+	styles?: Styles,
+	template?: Template,
+	dependencies?: Array<typeof UI5Element>,
+	staticAreaStyles?: Styles,
+	staticAreaTemplate?: Template,
+	languageAware?: boolean,
+	themeAware?: boolean,
+	fastNavigation?: boolean,
+}): ClassDecorator => {
+	return (target: any) => {
+		if (!Object.prototype.hasOwnProperty.call(target, "metadata")) {
+			target.metadata = {};
+		}
+
+		if (typeof tagNameOrComponentSettings === "string") {
+			target.metadata.tag = tagNameOrComponentSettings;
+			return;
+		}
+
+		const {
+			tag,
+			languageAware = false,
+			themeAware = false,
+			fastNavigation = false,
+		 } = tagNameOrComponentSettings;
+
+		target.metadata.tag = tag;
+		target.metadata.languageAware = languageAware;
+		target.metadata.themeAware = themeAware;
+		target.metadata.fastNavigation = fastNavigation;
+
+		["render", "renderer", "template", "staticAreaTemplate", "styles", "staticAreaStyles", "dependencies"].forEach((customElementEntity: string) => {
+			const _customElementEntity = customElementEntity === "render" ? "renderer" : customElementEntity;
+			const customElementEntityValue = tagNameOrComponentSettings[_customElementEntity as keyof typeof tag];
+
+			customElementEntityValue && Object.defineProperty(target, customElementEntity, {
+				get: () => customElementEntityValue,
+			});
+		});
+	};
+};
+
+export default customElement;

package/src/decorators/event.ts

@@ -0,0 +1,28 @@
+import { EventData } from "../UI5ElementMetadata.js";
+
+/**
+ * Returns an event class decorator.
+ *
+ * @param { string } name the event name
+ * @param { EventData } data the event data
+ * @returns { ClassDecorator }
+ */
+const event = (name: string, data: EventData = {}): ClassDecorator => {
+	return (target: any) => {
+		if (!Object.prototype.hasOwnProperty.call(target, "metadata")) {
+			target.metadata = {};
+		}
+
+		const metadata = target.metadata;
+		if (!metadata.events) {
+			metadata.events = {};
+		}
+
+		const eventsMetadata = metadata.events;
+		if (!eventsMetadata[name]) {
+			eventsMetadata[name] = data;
+		}
+	};
+};
+
+export default event;

package/src/decorators/property.ts

@@ -0,0 +1,30 @@
+import type UI5Element from "../UI5Element.js";
+import { Property } from "../UI5ElementMetadata.js";
+
+/**
+ * Returns a property decorator.
+ *
+ * @param { Property } propData
+ * @returns { PropertyDecorator }
+ */
+const property = (propData?: Property): PropertyDecorator => {
+	return (target: any, propertyKey: string | symbol) => {
+		const ctor = target.constructor as typeof UI5Element;
+
+		if (!Object.prototype.hasOwnProperty.call(ctor, "metadata")) {
+			ctor.metadata = {};
+		}
+
+		const metadata = ctor.metadata;
+		if (!metadata.properties) {
+			metadata.properties = {};
+		}
+
+		const propsMetadata = metadata.properties;
+		if (!propsMetadata[propertyKey as string]) {
+			propsMetadata[propertyKey as string] = propData || { type: String };
+		}
+	};
+};
+
+export default property;

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, "metadata")) {
+			ctor.metadata = {};
+		}
+
+		const metadata = ctor.metadata;
+		if (!metadata.slots) {
+			metadata.slots = {};
+		}
+
+		const slotMetadata = metadata.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.metadata.managedSlots = true;
+	};
+};
+
+export default slot;

package/src/delegate/{ItemNavigation.js → ItemNavigation.ts}

@@ -5,12 +5,32 @@ import {
 	isRight,
 	isHome,
 	isEnd,
+	isPageDown,
+	isPageUp,
 } from "../Keys.js";
 import getActiveElement from "../util/getActiveElement.js";
 
 import NavigationMode from "../types/NavigationMode.js";
 import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
 
+import type UI5Element from "../UI5Element.js";
+import { instanceOfUI5Element } from "../UI5Element.js";
+
+interface ITabbable {
+	id: string,
+	_tabIndex: string,
+}
+
+type ItemNavigationOptions = {
+	currentIndex?: number,
+	navigationMode?: NavigationMode,
+	rowSize?: number
+	skipItemsSize?: number,
+	behavior?: ItemNavigationBehavior,
+	getItemsCallback: () => Array<ITabbable>,
+	affectedPropertiesNames?: Array<string>,
+};
+
 /**
  * The ItemNavigation class manages the calculations to determine the correct "tabindex" for a group of related items inside a root component.
  * Important: ItemNavigation only does the calculations and does not change "tabindex" directly, this is a responsibility of the developer.
@@ -45,36 +65,47 @@ import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
  * @public
  */
 class ItemNavigation {
+	rootWebComponent: UI5Element;
+
+	_getItems: () => Array<ITabbable>;
+
+	_currentIndex: number;
+
+	_rowSize: number;
+
+	_behavior: ItemNavigationBehavior;
+
+	_navigationMode: NavigationMode;
+
+	_affectedPropertiesNames: Array<string>;
+
+	_skipItemsSize: number | null;
+
 	/**
 	 *
 	 * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among)
-	 * @param options Object with configuration options:
+	 * @param {ItemNavigationOptions} options Object with configuration options:
 	 *  - currentIndex: the index of the item that will be initially selected (from which navigation will begin)
 	 *  - navigationMode (Auto|Horizontal|Vertical): whether the items are displayed horizontally (Horizontal), vertically (Vertical) or as a matrix (Auto) meaning the user can navigate in both directions (up/down and left/right)
 	 *  - rowSize: tells how many items per row there are when the items are not rendered as a flat list but rather as a matrix. Relevant for navigationMode=Auto
+	 * 	- skipItemsSize: tells how many items upon PAGE_UP and PAGE_DOWN should be skipped to applying the focus on the next item
 	 *  - behavior (Static|Cycling): tells what to do when trying to navigate beyond the first and last items
 	 *    Static means that nothing happens if the user tries to navigate beyond the first/last item.
 	 *    Cycling means that when the user navigates beyond the last item they go to the first and vice versa.
 	 *  - getItemsCallback: function that, when called, returns an array with all items the user can navigate among
 	 *  - affectedPropertiesNames: a list of metadata properties on the root component which, upon user navigation, will be reassigned by address thus causing the root component to invalidate
 	 */
-	constructor(rootWebComponent, options = {}) {
-		this._setRootComponent(rootWebComponent);
-		this._initOptions(options);
-	}
-
-	_setRootComponent(rootWebComponent) {
+	constructor(rootWebComponent: UI5Element, options: ItemNavigationOptions) {
 		if (!rootWebComponent.isUI5Element) {
 			throw new Error("The root web component must be a UI5 Element instance");
 		}
+
 		this.rootWebComponent = rootWebComponent;
 		this.rootWebComponent.addEventListener("keydown", this._onkeydown.bind(this));
 		this.rootWebComponent._onComponentStateFinalized = () => {
 			this._init();
 		};
-	}
 
-	_initOptions(options) {
 		if (typeof options.getItemsCallback !== "function") {
 			throw new Error("getItemsCallback is required");
 		}
@@ -85,6 +116,7 @@ class ItemNavigation {
 		this._behavior = options.behavior || ItemNavigationBehavior.Static;
 		this._navigationMode = options.navigationMode || NavigationMode.Auto;
 		this._affectedPropertiesNames = options.affectedPropertiesNames || [];
+		this._skipItemsSize = options.skipItemsSize || null;
 	}
 
 	/**
@@ -94,7 +126,7 @@ class ItemNavigation {
 	 * @public
 	 * @param current the new selected item
 	 */
-	setCurrentItem(current) {
+	setCurrentItem(current: ITabbable) {
 		const currentItemIndex = this._getItems().indexOf(current);
 
 		if (currentItemIndex === -1) {
@@ -112,7 +144,7 @@ class ItemNavigation {
 	 * @public
 	 * @param newRowSize
 	 */
-	setRowSize(newRowSize) {
+	setRowSize(newRowSize: number) {
 		this._rowSize = newRowSize;
 	}
 
@@ -122,26 +154,35 @@ class ItemNavigation {
 		});
 	}
 
-	_onkeydown(event) {
+	_onkeydown(event: KeyboardEvent) {
 		if (!this._canNavigate()) {
 			return;
 		}
 
 		const horizontalNavigationOn = this._navigationMode === NavigationMode.Horizontal || this._navigationMode === NavigationMode.Auto;
 		const verticalNavigationOn = this._navigationMode === NavigationMode.Vertical || this._navigationMode === NavigationMode.Auto;
+		const isRTL = this.rootWebComponent.effectiveDir === "rtl";
 
-		if (isUp(event) && verticalNavigationOn) {
-			this._handleUp();
-		} else if (isDown(event) && verticalNavigationOn) {
-			this._handleDown();
+		if (isRTL && isLeft(event) && horizontalNavigationOn) {
+			this._handleRight();
+		} else if (isRTL && isRight(event) && horizontalNavigationOn) {
+			this._handleLeft();
 		} else if (isLeft(event) && horizontalNavigationOn) {
 			this._handleLeft();
 		} else if (isRight(event) && horizontalNavigationOn) {
 			this._handleRight();
+		} else if (isUp(event) && verticalNavigationOn) {
+			this._handleUp();
+		} else if (isDown(event) && verticalNavigationOn) {
+			this._handleDown();
 		} else if (isHome(event)) {
 			this._handleHome();
 		} else if (isEnd(event)) {
 			this._handleEnd();
+		} else if (isPageUp(event)) {
+			this._handlePageUp();
+		} else if (isPageDown(event)) {
+			this._handlePageDown();
 		} else {
 			return; // if none of the supported keys is pressed, we don't want to prevent the event or update the item navigation
 		}
@@ -222,6 +263,66 @@ class ItemNavigation {
 		this._currentIndex += (homeEndRange - 1 - this._currentIndex % homeEndRange); // eslint-disable-line
 	}
 
+	_handlePageUp() {
+		if (this._rowSize > 1) {
+			// eslint-disable-next-line
+			// TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.
+			return;
+		}
+		this._handlePageUpFlat();
+	}
+
+	_handlePageDown() {
+		if (this._rowSize > 1) {
+			// eslint-disable-next-line
+			// TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.
+			return;
+		}
+		this._handlePageDownFlat();
+	}
+
+	/**
+	 * Handles PAGE_UP in a flat list-like structure, both vertically and horizontally.
+	 */
+	_handlePageUpFlat() {
+		if (this._skipItemsSize === null) {
+			// Move the focus to the very top (as Home).
+			this._currentIndex -= this._currentIndex;
+			return;
+		}
+
+		if (this._currentIndex + 1 > this._skipItemsSize) {
+			// When there are more than "skipItemsSize" number of items to the top,
+			// move the focus up/left with the predefined number.
+			this._currentIndex -= this._skipItemsSize;
+		} else {
+			// Otherwise, move the focus to the very top (as Home).
+			this._currentIndex -= this._currentIndex;
+		}
+	}
+
+	/**
+	 * Handles PAGE_DOWN in a flat list-like structure, both vertically and horizontally.
+	 */
+	_handlePageDownFlat() {
+		if (this._skipItemsSize === null) {
+			// Move the focus to the very bottom (as End).
+			this._currentIndex = this._getItems().length - 1;
+			return;
+		}
+
+		const currentToEndRange = this._getItems().length - this._currentIndex - 1;
+
+		if (currentToEndRange > this._skipItemsSize) {
+			// When there are more than "skipItemsSize" number of items until the bottom,
+			// move the focus down/right with the predefined number.
+			this._currentIndex += this._skipItemsSize;
+		} else {
+			// Otherwise, move the focus to the very bottom (as End).
+			this._currentIndex = this._getItems().length - 1;
+		}
+	}
+
 	_applyTabIndex() {
 		const items = this._getItems();
 		for (let i = 0; i < items.length; i++) {
@@ -229,15 +330,15 @@ class ItemNavigation {
 		}
 
 		this._affectedPropertiesNames.forEach(propName => {
-			const prop = this.rootWebComponent[propName];
-			this.rootWebComponent[propName] = Array.isArray(prop) ? [...prop] : { ...prop };
+			const prop = (this.rootWebComponent as Record<string, any>)[propName];
+			(this.rootWebComponent as Record<string, any>)[propName] = Array.isArray(prop) ? [...prop] : { ...prop };
 		});
 	}
 
 	_focusCurrentItem() {
 		const currentItem = this._getCurrentItem();
 		if (currentItem) {
-			currentItem.focus();
+			currentItem.focus({ focusVisible: true } as FocusOptions);
 		}
 	}
 
@@ -252,7 +353,7 @@ class ItemNavigation {
 		const items = this._getItems();
 
 		if (!items.length) {
-			return null;
+			return;
 		}
 
 		// normalize the index
@@ -270,16 +371,23 @@ class ItemNavigation {
 			return;
 		}
 
-		if (currentItem.isUI5Element) {
+		if (instanceOfUI5Element(currentItem)) {
 			return currentItem.getFocusDomRef();
 		}
 
-		if (!this.rootWebComponent.getDomRef()) {
+		const currentItemDOMRef = this.rootWebComponent.getDomRef();
+		if (!currentItemDOMRef) {
 			return;
 		}
 
-		return this.rootWebComponent.getDomRef().querySelector(`#${currentItem.id}`);
+		if (currentItem.id) {
+			return currentItemDOMRef.querySelector(`#${currentItem.id}`) as HTMLElement;
+		}
 	}
 }
 
 export default ItemNavigation;
+
+export {
+	ITabbable,
+};

package/src/delegate/ResizeHandler.ts

@@ -0,0 +1,100 @@
+import { instanceOfUI5Element } from "../UI5Element.js";
+
+type ResizeObserverCallback = () => Promise<void> | void;
+
+let resizeObserver: ResizeObserver;
+const observedElements = new Map<HTMLElement, Array<ResizeObserverCallback>>();
+
+const getResizeObserver = () => {
+	if (!resizeObserver) {
+		resizeObserver = new window.ResizeObserver(entries => {
+			entries.forEach(entry => {
+				const callbacks = observedElements.get(entry.target as HTMLElement);
+				// Callbacks could be async and we need to handle returned promises to comply with the eslint "no-misused-promises" rule.
+				// Although Promise.all awaits all, we don't additonal task after calling the callbacks and should not make any difference.
+				callbacks && Promise.all(callbacks.map((callback: ResizeObserverCallback) => callback()));
+			});
+		});
+	}
+	return resizeObserver;
+};
+
+const observe = (element: HTMLElement, callback: ResizeObserverCallback) => {
+	const callbacks = observedElements.get(element) || [];
+
+	// if no callbacks have been added for this element - start observing it
+	if (!callbacks.length) {
+		getResizeObserver().observe(element);
+	}
+
+	// save the callbacks in an array
+	observedElements.set(element, [...callbacks, callback]);
+};
+
+const unobserve = (element: HTMLElement, callback: ResizeObserverCallback) => {
+	const callbacks = observedElements.get(element) || [];
+	if (callbacks.length === 0) {
+		return;
+	}
+
+	const filteredCallbacks = callbacks.filter((fn: ResizeObserverCallback) => fn !== callback);
+	if (filteredCallbacks.length === 0) {
+		getResizeObserver().unobserve(element);
+		observedElements.delete(element);
+	} else {
+		observedElements.set(element, filteredCallbacks);
+	}
+};
+
+/**
+ * Allows to register/deregister resize observers for a DOM element
+ *
+ * @public
+ * @class
+  */
+class ResizeHandler {
+	/**
+	 * @static
+	 * @public
+	 * @param {*} element UI5 Web Component or DOM Element to be observed
+	 * @param {*} callback Callback to be executed
+	 */
+	static register(element: HTMLElement, callback: ResizeObserverCallback) {
+		let effectiveElement: HTMLElement | undefined = element;
+
+		if (instanceOfUI5Element(effectiveElement)) {
+			effectiveElement = effectiveElement.getDomRef();
+		}
+
+		if (effectiveElement instanceof HTMLElement) {
+			observe(effectiveElement, callback);
+		} else {
+			console.warn("Cannot register ResizeHandler for element", element); // eslint-disable-line
+		}
+	}
+
+	/**
+	 * @static
+	 * @public
+	 * @param {*} element UI5 Web Component or DOM Element to be unobserved
+	 * @param {*} callback Callback to be removed
+	 */
+	static deregister(element: HTMLElement, callback: ResizeObserverCallback) {
+		let effectiveElement: HTMLElement | undefined = element;
+
+		if (instanceOfUI5Element(effectiveElement)) {
+			effectiveElement = effectiveElement.getDomRef();
+		}
+
+		if (effectiveElement instanceof HTMLElement) {
+			unobserve(effectiveElement, callback);
+		} else {
+			console.warn("Cannot deregister ResizeHandler for element", element); // eslint-disable-line
+		}
+	}
+}
+
+export default ResizeHandler;
+export type {
+	ResizeObserverCallback,
+};