@ui5/webcomponents-base 1.9.3 → 1.10.0

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

@@ -1,19 +1,23 @@
-let resizeObserver;
-const observedElements = new Map();
+import { instanceOfUI5Element } from "../UI5Element.js";
+
+type ResizeObserverCallback = () => 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);
-				callbacks.forEach(callback => callback());
+				const callbacks = observedElements.get(entry.target as HTMLElement);
+				callbacks?.forEach((callback: ResizeObserverCallback) => callback());
 			});
 		});
 	}
 	return resizeObserver;
 };
 
-let observe = (element, callback) => {
+const observe = (element: HTMLElement, callback: ResizeObserverCallback) => {
 	const callbacks = observedElements.get(element) || [];
 
 	// if no callbacks have been added for this element - start observing it
@@ -25,13 +29,13 @@ let observe = (element, callback) => {
 	observedElements.set(element, [...callbacks, callback]);
 };
 
-let unobserve = (element, callback) => {
+const unobserve = (element: HTMLElement, callback: ResizeObserverCallback) => {
 	const callbacks = observedElements.get(element) || [];
 	if (callbacks.length === 0) {
 		return;
 	}
 
-	const filteredCallbacks = callbacks.filter(fn => fn !== callback);
+	const filteredCallbacks = callbacks.filter((fn: ResizeObserverCallback) => fn !== callback);
 	if (filteredCallbacks.length === 0) {
 		getResizeObserver().unobserve(element);
 		observedElements.delete(element);
@@ -53,13 +57,15 @@ class ResizeHandler {
 	 * @param {*} element UI5 Web Component or DOM Element to be observed
 	 * @param {*} callback Callback to be executed
 	 */
-	static register(element, callback) {
-		if (element.isUI5Element) {
-			element = element.getDomRef();
+	static register(element: HTMLElement, callback: ResizeObserverCallback) {
+		let effectiveElement: HTMLElement | undefined = element;
+
+		if (instanceOfUI5Element(effectiveElement)) {
+			effectiveElement = effectiveElement.getDomRef();
 		}
 
-		if (element instanceof HTMLElement) {
-			observe(element, callback);
+		if (effectiveElement instanceof HTMLElement) {
+			observe(effectiveElement, callback);
 		} else {
 			console.warn("Cannot register ResizeHandler for element", element); // eslint-disable-line
 		}
@@ -71,36 +77,19 @@ class ResizeHandler {
 	 * @param {*} element UI5 Web Component or DOM Element to be unobserved
 	 * @param {*} callback Callback to be removed
 	 */
-	static deregister(element, callback) {
-		if (element.isUI5Element) {
-			element = element.getDomRef();
+	static deregister(element: HTMLElement, callback: ResizeObserverCallback) {
+		let effectiveElement: HTMLElement | undefined = element;
+
+		if (instanceOfUI5Element(effectiveElement)) {
+			effectiveElement = effectiveElement.getDomRef();
 		}
 
-		if (element instanceof HTMLElement) {
-			unobserve(element, callback);
+		if (effectiveElement instanceof HTMLElement) {
+			unobserve(effectiveElement, callback);
 		} else {
 			console.warn("Cannot deregister ResizeHandler for element", element); // eslint-disable-line
 		}
 	}
 }
 
-/**
- * Set a function to be executed whenever a DOM node needs to be observed for size change.
- * @public
- * @param fn
- */
-const setResizeHandlerObserveFn = fn => {
-	observe = fn;
-};
-
-/**
- * Set a function to be executed whenever a DOM node needs to no longer be observed for size changes
- * @public
- * @param fn
- */
-const setResizeHandlerUnobserveFn = fn => {
-	unobserve = fn;
-};
-
 export default ResizeHandler;
-export { setResizeHandlerObserveFn, setResizeHandlerUnobserveFn };

package/src/delegate/ScrollEnablement.ts

@@ -0,0 +1,221 @@
+import { supportsTouch } from "../Device.js";
+import EventProvider from "../EventProvider.js";
+import scroll from "../animations/scroll.js";
+import type UI5Element from "../UI5Element.js";
+
+const scrollEventName = "scroll";
+const touchEndEventName = supportsTouch() ? "touchend" : "mouseup";
+
+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;
+	touchStart: (event: MouseEvent | TouchEvent) => void;
+	cachedValue: { dragX: number, dragY: number };
+	startX: number;
+	startY: number;
+	_container?: HTMLElement;
+	supportsTouch = supportsTouch();
+	_canScroll?: boolean;
+	_prevDragX?: number;
+	_prevDragY?: number;
+
+	constructor(containerComponent: UI5Element) {
+		super();
+		this.containerComponent = containerComponent;
+		this.mouseMove = this.ontouchmove.bind(this);
+		this.mouseUp = this.ontouchend.bind(this);
+		this.touchStart = this.ontouchstart.bind(this);
+
+		this.supportsTouch = supportsTouch();
+
+		// On Android devices touchmove is thrown one more time than neccessary (together with touchend)
+		// so we have to cache the previus coordinates in order to provide correct parameters in the
+		// event for Android
+		this.cachedValue = { dragX: 0, dragY: 0 };
+
+		// In components like Carousel you need to know if the user has clicked on something or swiped
+		// in order to throw the needed event or not
+		this.startX = 0;
+		this.startY = 0;
+
+		if (this.supportsTouch) {
+			containerComponent.addEventListener("touchstart", this.touchStart, { passive: true });
+			containerComponent.addEventListener("touchmove", this.mouseMove, { passive: true });
+			containerComponent.addEventListener("touchend", this.mouseUp, { passive: true });
+		} else {
+			containerComponent.addEventListener("mousedown", this.touchStart, { passive: true });
+		}
+	}
+
+	set scrollContainer(container: HTMLElement) {
+		this._container = container;
+	}
+
+	get scrollContainer() {
+		return this._container!;
+	}
+
+	/**
+	 * Scrolls the container to the left/top position, retrying retryCount times, if the container is not yet painted
+	 *
+	 * @param left
+	 * @param top
+	 * @param retryCount
+	 * @param retryInterval
+	 * @returns {Promise<void>} resolved when scrolled successfully
+	 */
+	async scrollTo(left: number, top: number, retryCount = 0, retryInterval = 0) {
+		let containerPainted = this.scrollContainer.clientHeight > 0 && this.scrollContainer.clientWidth > 0;
+
+		/* eslint-disable no-loop-func, no-await-in-loop */
+		while (!containerPainted && retryCount > 0) {
+			await new Promise<void>(resolve => {
+				setTimeout(() => {
+					containerPainted = this.scrollContainer.clientHeight > 0 && this.scrollContainer.clientWidth > 0;
+					retryCount--;
+					resolve();
+				}, retryInterval);
+			});
+		}
+		/* eslint-disable no-loop-func, no-await-in-loop */
+
+		this._container!.scrollLeft = left;
+		this._container!.scrollTop = top;
+	}
+
+	move(dx: number, dy: number, disableAnimation: boolean) {
+		if (disableAnimation) {
+			this._container!.scrollLeft += dx;
+			this._container!.scrollTop += dy;
+			return;
+		}
+
+		if (this._container) {
+			return scroll(this._container, dx, dy);
+		}
+	}
+
+	getScrollLeft() {
+		return this._container!.scrollLeft;
+	}
+
+	getScrollTop() {
+		return this._container!.scrollTop;
+	}
+
+	_isTouchInside(event: TouchEvent | MouseEvent) {
+		let touch = null;
+		if (this.supportsTouch && event instanceof TouchEvent) {
+			touch = event.touches[0];
+		}
+
+		const rect = this._container!.getBoundingClientRect();
+		const x = this.supportsTouch ? (touch as TouchInit).clientX : (event as MouseEvent).x;
+		const y = this.supportsTouch ? (touch as TouchInit).clientY : (event as MouseEvent).y;
+
+		return x! >= rect.left && x! <= rect.right
+			&& y! >= rect.top && y! <= rect.bottom;
+	}
+
+	ontouchstart(event: TouchEvent | MouseEvent) {
+		let touch = null;
+		if (this.supportsTouch && event instanceof TouchEvent) {
+			touch = event.touches[0];
+		}
+
+		if (!this.supportsTouch) {
+			document.addEventListener("mouseup", this.mouseUp, { passive: true });
+			document.addEventListener("mousemove", this.mouseMove, { passive: true });
+		} else {
+			// Needed only on mobile
+			this.startX = touch!.pageX;
+			this.startY = touch!.pageY;
+		}
+
+		if (this.supportsTouch && event instanceof TouchEvent) {
+			this._prevDragX = touch!.pageX;
+			this._prevDragY = touch!.pageY;
+		}
+
+		if (event instanceof MouseEvent) {
+			this._prevDragX = event.x;
+			this._prevDragY = event.y;
+		}
+
+		this._canScroll = this._isTouchInside(event);
+	}
+
+	ontouchmove(event: TouchEvent | MouseEvent) {
+		if (!this._canScroll) {
+			return;
+		}
+
+		const container = this._container;
+		const touch = this.supportsTouch ? (event as TouchEvent).touches[0] : null;
+
+		const dragX = this.supportsTouch ? (touch as TouchInit).pageX : (event as MouseEvent).x;
+		const dragY = this.supportsTouch ? (touch as TouchInit).pageY : (event as MouseEvent).y;
+
+		container!.scrollLeft += this._prevDragX! - dragX!;
+		container!.scrollTop += this._prevDragY! - dragY!;
+
+		this.fireEvent(scrollEventName, {
+			isLeft: dragX! > this._prevDragX!,
+			isRight: dragX! < this._prevDragX!,
+		});
+
+		this.cachedValue.dragX = this._prevDragX!;
+		this.cachedValue.dragY = this._prevDragY!;
+
+		this._prevDragX = dragX;
+		this._prevDragY = dragY;
+	}
+
+	ontouchend(event: TouchEvent | MouseEvent) {
+		if (this.supportsTouch) {
+			const deltaX = Math.abs((event as TouchEvent).changedTouches[0].pageX - this.startX);
+			const deltaY = Math.abs((event as TouchEvent).changedTouches[0].pageY - this.startY);
+
+			if (deltaX < 10 && deltaY < 10) {
+				return;
+			}
+		}
+
+		if (!this._canScroll) {
+			return;
+		}
+
+		const container = this._container;
+		const dragX = this.supportsTouch ? (event as TouchEvent).changedTouches[0].pageX : (event as MouseEvent).x;
+		const dragY = this.supportsTouch ? (event as TouchEvent).changedTouches[0].pageY : (event as MouseEvent).y;
+
+		container!.scrollLeft += this._prevDragX! - dragX;
+		container!.scrollTop += this._prevDragY! - dragY;
+
+		const useCachedValues = dragX === this._prevDragX;
+		const _dragX = useCachedValues ? this.cachedValue.dragX : dragX;
+		// const _dragY = useCachedValues ? this.cachedValue.dragY : dragY; add if needed
+
+		this.fireEvent(touchEndEventName, {
+			isLeft: _dragX < this._prevDragX!,
+			isRight: _dragX > this._prevDragX!,
+		});
+
+		this._prevDragX = dragX;
+		this._prevDragY = dragY;
+
+		if (!this.supportsTouch) {
+			document.removeEventListener("mousemove", this.mouseMove);
+			document.removeEventListener("mouseup", this.mouseUp);
+		}
+	}
+}
+
+export default ScrollEnablement;

package/src/features/{F6Navigation.js → F6Navigation.ts}

@@ -1,21 +1,25 @@
 import { registerFeature } from "../FeaturesRegistry.js";
 import { isF6Next, isF6Previous } from "../Keys.js";
+import { instanceOfUI5Element } from "../UI5Element.js";
 import { getFirstFocusableElement } from "../util/FocusableElements.js";
 import getFastNavigationGroups from "../util/getFastNavigationGroups.js";
 
 class F6Navigation {
-	init() {
-		this.keydownHandler = this._keydownHandler.bind(this);
+	static _instance: F6Navigation;
+	keydownHandler: (event: KeyboardEvent) => void;
+	selectedGroup: HTMLElement | null = null;
+	groups: Array<HTMLElement> = [];
+
+	constructor() {
+		this.keydownHandler = this._keydownHandler.bind(this) as (event: KeyboardEvent) => void;
 		this.attachEventListeners();
-		this.selectedGroup = null;
-		this.groups = [];
 	}
 
 	attachEventListeners() {
 		document.addEventListener("keydown", this.keydownHandler);
 	}
 
-	async _keydownHandler(event) {
+	async _keydownHandler(event: KeyboardEvent) {
 		if (isF6Next(event)) {
 			this.updateGroups();
 
@@ -25,8 +29,11 @@ class F6Navigation {
 
 			event.preventDefault();
 
-			const nextIndex = this.groups.indexOf(this.selectedGroup);
-			let nextElement = null;
+			let nextIndex = -1;
+			let nextElement;
+			if (this.selectedGroup) {
+				nextIndex = this.groups.indexOf(this.selectedGroup);
+			}
 
 			if (nextIndex > -1) {
 				if (nextIndex + 1 >= this.groups.length) {
@@ -38,8 +45,12 @@ class F6Navigation {
 				nextElement = this.groups[0];
 			}
 
-			const elementToFocus = await getFirstFocusableElement(nextElement.isUI5Element ? nextElement.getDomRef() : nextElement, true);
-			elementToFocus.focus();
+			const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
+
+			if (nextElementDomRef) {
+				const elementToFocus = await getFirstFocusableElement(nextElementDomRef, true);
+				elementToFocus?.focus();
+			}
 		}
 
 		if (isF6Previous(event)) {
@@ -51,8 +62,11 @@ class F6Navigation {
 
 			event.preventDefault();
 
-			const nextIndex = this.groups.indexOf(this.selectedGroup);
-			let nextElement = null;
+			let nextIndex = -1;
+			let nextElement;
+			if (this.selectedGroup) {
+				nextIndex = this.groups.indexOf(this.selectedGroup);
+			}
 
 			if (nextIndex > 0) {
 				// Handle the situation where the first focusable element of two neighbor groups is the same
@@ -72,8 +86,12 @@ class F6Navigation {
 				nextElement = this.groups[this.groups.length - 1];
 			}
 
-			const elementToFocus = await getFirstFocusableElement(nextElement.isUI5Element ? nextElement.getDomRef() : nextElement, true);
-			elementToFocus.focus();
+			const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
+
+			if (nextElementDomRef) {
+				const elementToFocus = await getFirstFocusableElement(nextElementDomRef, true);
+				elementToFocus?.focus();
+			}
 		}
 	}
 
@@ -86,31 +104,38 @@ class F6Navigation {
 		this.groups = getFastNavigationGroups(document.body);
 	}
 
-	setSelectedGroup(element = document) {
-		const htmlElement = document.querySelector("html");
-		element = this.deepActive(element);
+	setSelectedGroup(root: DocumentOrShadowRoot = window.document) {
+		const htmlElement = window.document.querySelector("html");
+		let element: Element | null | ParentNode = this.deepActive(root);
 
-		while (element && element.getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== htmlElement) {
-			element = element.parentElement ? element.parentNode : element.parentNode.host;
+		while (element && (element as Element).getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== htmlElement) {
+		   element = element.parentElement ? element.parentNode : (element.parentNode as ShadowRoot).host;
 		}
 
-		this.selectedGroup = element;
-	}
+		this.selectedGroup = element as HTMLElement;
+	 }
 
-	deepActive(root) {
+	 deepActive(root: DocumentOrShadowRoot): Element | null {
 		if (root.activeElement && root.activeElement.shadowRoot) {
-			return this.deepActive(root.activeElement.shadowRoot);
+		   return this.deepActive(root.activeElement.shadowRoot);
 		}
 
 		return root.activeElement;
-	}
+	 }
 
 	destroy() {
 		this.removeEventListeners();
 	}
+
+	static init() {
+		if (!this._instance) {
+			this._instance = new F6Navigation();
+		}
+
+		return this._instance;
+	}
 }
 
-const F6HelperInstance = new F6Navigation();
-registerFeature("F6Navigation", F6HelperInstance);
+registerFeature("F6Navigation", F6Navigation);
 
 export default F6Navigation;

package/src/features/OpenUI5Element.ts

@@ -0,0 +1,11 @@
+import UI5Element from "../UI5Element.js";
+
+class OpenUI5Element extends UI5Element {
+	__isBusy?: boolean;
+	isOpenUI5Component?: boolean;
+	__suppressFocusIn?: () => void;
+	__suppressFocusBack?: (e: KeyboardEvent) => void;
+	__redirectFocus?: boolean;
+}
+
+export default OpenUI5Element;

package/src/features/OpenUI5Enablement.ts

@@ -0,0 +1,117 @@
+import { TemplateResult } from "lit-html";
+import { registerFeature } from "../FeaturesRegistry.js";
+import BusyIndicatorStyles from "../generated/css/BusyIndicator.css.js";
+import merge from "../thirdparty/merge.js";
+import {
+	isTabPrevious,
+} from "../Keys.js";
+
+import type UI5Element from "../UI5Element.js";
+import type OpenUI5Element from "./OpenUI5Element.js";
+
+const busyIndicatorMetadata = {
+	properties: {
+		__isBusy: {
+			type: Boolean,
+		},
+	},
+};
+
+class OpenUI5Enablement {
+	static wrapTemplateResultInBusyMarkup(html: (strings: TemplateStringsArray, ...values: Array<unknown>) => TemplateResult, host: OpenUI5Element, templateResult: TemplateResult) {
+		if (host.isOpenUI5Component && host.__isBusy) {
+			templateResult = html`
+			<div class="busy-indicator-wrapper">
+				<span tabindex="0" busy-indicator-before-span @focusin=${host.__suppressFocusIn}></span>
+				${templateResult}
+				<div class="busy-indicator-overlay"></div>
+				<div busy-indicator
+					class="busy-indicator-busy-area"
+					tabindex="0"
+					role="progressbar"
+					@keydown=${host.__suppressFocusBack}
+					aria-valuemin="0"
+					aria-valuemax="100"
+					aria-valuetext="Busy">
+					<div>
+						<div class="busy-indicator-circle circle-animation-0"></div>
+						<div class="busy-indicator-circle circle-animation-1"></div>
+						<div class="busy-indicator-circle circle-animation-2"></div>
+					</div>
+				</div>
+			</div>`;
+		}
+
+		return templateResult;
+	}
+
+	static enrichBusyIndicatorSettings(klass: typeof UI5Element) {
+		OpenUI5Enablement.enrichBusyIndicatorMetadata(klass);
+		OpenUI5Enablement.enrichBusyIndicatorMethods(klass.prototype);
+	}
+
+	static enrichBusyIndicatorMetadata(klass: typeof UI5Element) {
+		klass.metadata = merge(klass.metadata, busyIndicatorMetadata);
+	}
+
+	static enrichBusyIndicatorMethods(UI5ElementPrototype: typeof OpenUI5Element.prototype) {
+		Object.defineProperties(UI5ElementPrototype, {
+			"__redirectFocus": { value: true, writable: true },
+			"__suppressFocusBack": {
+				get() {
+					return {
+						handleEvent: (e: KeyboardEvent) => {
+							if (isTabPrevious(e)) {
+								const beforeElem = this.shadowRoot.querySelector("[busy-indicator-before-span]");
+								this.__redirectFocus = false;
+								beforeElem.focus();
+								this.__redirectFocus = true;
+							}
+						},
+						capture: true,
+						passive: false,
+					};
+				},
+			},
+			"isOpenUI5Component": { get: () => { return true; } },
+		});
+
+		UI5ElementPrototype.__suppressFocusIn = function handleFocusIn() {
+			const busyIndicator = this.shadowRoot?.querySelector("[busy-indicator]") as HTMLElement;
+			if (busyIndicator && this.__redirectFocus) {
+				busyIndicator.focus();
+			}
+		};
+
+		UI5ElementPrototype.getDomRef = function getDomRef() {
+			// If a component set _getRealDomRef to its children, use the return value of this function
+			if (typeof this._getRealDomRef === "function") {
+				return this._getRealDomRef();
+			}
+
+			if (!this.shadowRoot || this.shadowRoot.children.length === 0) {
+				return;
+			}
+
+			const children = [...this.shadowRoot.children].filter(child => !["link", "style"].includes(child.localName));
+
+			if (children.length !== 1) {
+				console.warn(`The shadow DOM for ${(this.constructor as typeof UI5Element).getMetadata().getTag()} does not have a top level element, the getDomRef() method might not work as expected`); // eslint-disable-line
+			}
+
+			if (this.__isBusy) {
+				return children[0].querySelector(".busy-indicator-wrapper > :not([busy-indicator-before-span]):not(.busy-indicator-overlay):not(.busy-indicator-busy-area)") as HTMLElement;
+			}
+
+			return children[0] as HTMLElement;
+		};
+	}
+
+	static getBusyIndicatorStyles() {
+		return BusyIndicatorStyles;
+	}
+}
+
+registerFeature("OpenUI5Enablement", OpenUI5Enablement);
+
+export default OpenUI5Enablement;