@ui5/webcomponents-base 0.0.0-4180fe799 → 0.0.0-4738ea0dc

package/src/util/FocusableElements.ts

@@ -0,0 +1,92 @@
+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): FocusableElementPromise => {
+	if (!container || isElementHidden(container)) {
+		return null;
+	}
+
+	return findFocusableElement(container, true, startFromContainer);
+};
+
+const getLastFocusableElement = async (container: HTMLElement, startFromContainer?: boolean): FocusableElementPromise => {
+	if (!container || isElementHidden(container)) {
+		return null;
+	}
+
+	return findFocusableElement(container, false, startFromContainer);
+};
+
+const isElemFocusable = (el: HTMLElement) => {
+	return el.hasAttribute("data-ui5-focus-redirect") || !isElementHidden(el);
+};
+
+const findFocusableElement = async (container: HTMLElement, forward: boolean, startFromContainer?: boolean): FocusableElementPromise => {
+	let child: HTMLElement | undefined;
+	let assignedElements;
+	let currentIndex = -1;
+
+	if (container.shadowRoot) {
+		child = forward ? container.shadowRoot.firstChild as HTMLElement : container.shadowRoot.lastChild as HTMLElement;
+	} else if (container instanceof HTMLSlotElement && container.assignedNodes()) {
+		assignedElements = container.assignedNodes();
+		currentIndex = forward ? 0 : assignedElements.length - 1;
+		child = assignedElements[currentIndex] as HTMLElement;
+	} else if (startFromContainer) {
+		child = container;
+	} else {
+		child = forward ? container.firstElementChild as HTMLElement : container.lastElementChild as HTMLElement;
+	}
+
+	let focusableDescendant;
+
+	/* eslint-disable no-await-in-loop */
+
+	while (child) {
+		const originalChild: HTMLElement | undefined = child;
+
+		if (instanceOfUI5Element(child)) {
+			child = await child.getFocusDomRefAsync();
+		}
+
+		if (!child) {
+			return null;
+		}
+
+		if (child.nodeType === 1 && isElemFocusable(child) && !isFocusTrap(child)) {
+			if (isElementClickable(child)) {
+				return (child && typeof child.focus === "function") ? child : null;
+			}
+
+			focusableDescendant = await findFocusableElement(child, forward);
+			if (focusableDescendant) {
+				return (focusableDescendant && typeof focusableDescendant.focus === "function") ? focusableDescendant : null;
+			}
+		}
+
+		child = forward ? originalChild.nextSibling as HTMLElement : originalChild.previousSibling as HTMLElement;
+
+		// If the child element is not part of the currently assigned element,
+		// we have to check the next element assigned to the slot or continue with the next sibling of the slot,
+		// otherwise, the nextSibling is the next element inside the light DOM
+		if (assignedElements && !assignedElements[currentIndex].contains(child)) {
+			child = assignedElements[++currentIndex] as HTMLElement;
+		}
+	}
+
+	/* eslint-enable no-await-in-loop */
+
+	return null;
+};
+
+export {
+	getFirstFocusableElement,
+	getLastFocusableElement,
+};

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

@@ -1,4 +1,6 @@
+// @ts-ignore
 import sanitizeHTML from "../sap/base/security/sanitizeHTML.js";
+// @ts-ignore
 import URLListValidator from "../sap/base/security/URLListValidator.js";
 
 export {

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

@@ -2,21 +2,23 @@ import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
 import getSingletonElementInstance from "./getSingletonElementInstance.js";
 import { attachBoot } from "../Boot.js";
 
-let politeSpan;
-let assertiveSpan;
+let politeSpan: HTMLElement;
+let assertiveSpan: HTMLElement;
+
+const setOutOfViewportStyles = (el: HTMLElement) => {
+	el.style.position = "absolute";
+	el.style.clip = "rect(1px,1px,1px,1px)";
+	el.style.userSelect = "none";
+	el.style.left = "-1000px";
+	el.style.top = "-1000px";
+	el.style.pointerEvents = "none";
+};
 
 attachBoot(() => {
 	if (politeSpan && assertiveSpan) {
 		return;
 	}
 
-	const styles = `position: absolute;
-	clip: rect(1px,1px,1px,1px);
-	user-select: none;
-	left: -1000px;
-	top: -1000px;
-	pointer-events: none;`;
-
 	politeSpan = document.createElement("span");
 	assertiveSpan = document.createElement("span");
 
@@ -29,8 +31,8 @@ attachBoot(() => {
 	politeSpan.setAttribute("role", "alert");
 	assertiveSpan.setAttribute("role", "alert");
 
-	politeSpan.style.cssText = styles;
-	assertiveSpan.style.cssText = styles;
+	setOutOfViewportStyles(politeSpan);
+	setOutOfViewportStyles(assertiveSpan);
 
 	getSingletonElementInstance("ui5-static-area").appendChild(politeSpan);
 	getSingletonElementInstance("ui5-static-area").appendChild(assertiveSpan);
@@ -39,10 +41,11 @@ attachBoot(() => {
 /**
  * Inserts the string into the respective span, depending on the mode provided.
  *
- * @param {string} message String to be announced by the screen reader.
- * @param {sap.ui.core.InvisibleMessageMode} mode The mode to be inserted in the aria-live attribute.
+ * @param { string } message String to be announced by the screen reader.
+ * @param { InvisibleMessageMode } mode The mode to be inserted in the aria-live attribute.
+ * @public
  */
-const announce = (message, mode) => {
+const announce = (message: string, mode: InvisibleMessageMode) => {
 	// If no type is presented, fallback to polite announcement.
 	const span = mode === InvisibleMessageMode.Assertive ? assertiveSpan : politeSpan;
 
@@ -53,6 +56,14 @@ const announce = (message, mode) => {
 	if (mode !== InvisibleMessageMode.Assertive && mode !== InvisibleMessageMode.Polite) {
 		console.warn(`You have entered an invalid mode. Valid values are: "Polite" and "Assertive". The framework will automatically set the mode to "Polite".`); // eslint-disable-line
 	}
+
+	// clear the span in order to avoid reading it out while in JAWS reading node
+	setTimeout(() => {
+		// ensure that we clear the text node only if no announce is made in the meantime
+		if (span.textContent === message) {
+			span.textContent = "";
+		}
+	}, 3000);
 };
 
 export default announce;

package/src/util/PopupUtils.ts

@@ -0,0 +1,112 @@
+import getSharedResource from "../getSharedResource.js";
+import { getFeature } from "../FeaturesRegistry.js";
+import getActiveElement from "./getActiveElement.js";
+import type OpenUI5Support from "../features/OpenUI5Support.js";
+
+type PopupUtilsData = {
+	currentZIndex: number
+};
+
+const popupUtilsData = getSharedResource<PopupUtilsData>("PopupUtilsData", { currentZIndex: 100 });
+
+const getFocusedElement = () => {
+	const element = getActiveElement() as HTMLElement;
+	return (element && typeof element.focus === "function") ? element : null;
+};
+
+const isFocusedElementWithinNode = (node: HTMLElement) => {
+	const fe = getFocusedElement();
+
+	if (fe) {
+		return isNodeContainedWithin(node, fe);
+	}
+
+	return false;
+};
+
+const isNodeContainedWithin = (parent: HTMLElement, child: HTMLElement): boolean => {
+	let currentNode: HTMLElement | undefined = parent;
+
+	if (currentNode.shadowRoot) {
+		const children = Array.from(currentNode.shadowRoot.children) as Array<HTMLElement>;
+		currentNode = children.find(n => n.localName !== "style");
+
+		if (!currentNode) {
+			return false;
+		}
+	}
+
+	if (currentNode === child) {
+		return true;
+	}
+
+	const childNodes = currentNode.localName === "slot" ? (currentNode as HTMLSlotElement).assignedNodes() : currentNode.children;
+
+	if (childNodes) {
+		return Array.from(childNodes).some(n => isNodeContainedWithin(n as HTMLElement, child));
+	}
+
+	return false;
+};
+
+const isPointInRect = (x: number, y: number, rect: DOMRect) => {
+	return x >= rect.left && x <= rect.right
+		&& y >= rect.top && y <= rect.bottom;
+};
+
+const isClickInRect = (e: MouseEvent | TouchEvent, rect: DOMRect) => {
+	let x;
+	let y;
+
+	if (e instanceof MouseEvent) {
+		x = e.clientX;
+		y = e.clientY;
+	} else {
+		const touch = e.touches[0];
+		x = touch.clientX;
+		y = touch.clientY;
+	}
+
+	return isPointInRect(x, y, rect);
+};
+
+interface PopupInterface { // Refactor: replace with Popup.js
+	_show: () => void,
+	open: boolean,
+}
+function instanceOfPopup(object: any): object is PopupInterface {
+	return "isUI5Element" in object && "_show" in object;
+}
+
+const getClosedPopupParent = (el: HTMLElement): HTMLElement => {
+	const parent = el.parentElement || (el.getRootNode && (el.getRootNode() as ShadowRoot).host);
+
+	if (parent && ((instanceOfPopup(parent) || parent === document.documentElement))) {
+		return parent as HTMLElement;
+	}
+
+	return getClosedPopupParent(parent as HTMLElement);
+};
+
+const getNextZIndex = () => {
+	const openUI5Support = getFeature<typeof OpenUI5Support>("OpenUI5Support");
+	if (openUI5Support && openUI5Support.isLoaded()) { // use OpenUI5 for getting z-index values, if loaded
+		return openUI5Support.getNextZIndex();
+	}
+
+	popupUtilsData.currentZIndex += 2;
+	return popupUtilsData.currentZIndex;
+};
+
+const getCurrentZIndex = () => {
+	return popupUtilsData.currentZIndex;
+};
+
+export {
+	getFocusedElement,
+	isClickInRect,
+	getClosedPopupParent,
+	getNextZIndex,
+	getCurrentZIndex,
+	isFocusedElementWithinNode,
+};

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

@@ -3,7 +3,7 @@
  * @param node Text node or HTML element
  * @returns {string}
  */
-const getSlotName = node => {
+const getSlotName = (node: Node) => {
 	// Text nodes can only go to the default slot
 	if (!(node instanceof HTMLElement)) {
 		return "default";
@@ -20,24 +20,20 @@ const getSlotName = node => {
 	return "default";
 };
 
-const isSlot = el => el && el instanceof HTMLElement && el.localName === "slot";
-
-const getSlottedElements = el => {
-	if (isSlot(el)) {
-		return el.assignedNodes({ flatten: true }).filter(item => item instanceof HTMLElement);
+const getSlottedNodes = (node: Node) => {
+	if (node instanceof HTMLSlotElement) {
+		return node.assignedNodes({ flatten: true }).filter(item => item instanceof HTMLElement);
 	}
 
-	return [el];
+	return [node];
 };
 
-const getSlottedElementsList = elList => {
-	const reducer = (acc, curr) => acc.concat(getSlottedElements(curr));
-	return elList.reduce(reducer, []);
+const getSlottedNodesList = (nodeList: Array<Node>) => {
+	return nodeList.reduce((acc, curr) => acc.concat(getSlottedNodes(curr)), [] as Array<Node>);
 };
 
 export {
 	getSlotName,
-	isSlot,
-	getSlottedElements,
-	getSlottedElementsList,
+	getSlottedNodes,
+	getSlottedNodesList,
 };

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

@@ -1,23 +1,23 @@
-const kebabToCamelMap = new Map();
-const camelToKebabMap = new Map();
+const kebabToCamelMap = new Map<string, string>();
+const camelToKebabMap = new Map<string, string>();
 
-const kebabToCamelCase = string => {
+const kebabToCamelCase = (string: string) => {
 	if (!kebabToCamelMap.has(string)) {
 		const result = toCamelCase(string.split("-"));
 		kebabToCamelMap.set(string, result);
 	}
-	return kebabToCamelMap.get(string);
+	return kebabToCamelMap.get(string)!;
 };
 
-const camelToKebabCase = string => {
+const camelToKebabCase = (string: string) => {
 	if (!camelToKebabMap.has(string)) {
 		const result = string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 		camelToKebabMap.set(string, result);
 	}
-	return camelToKebabMap.get(string);
+	return camelToKebabMap.get(string)!;
 };
 
-const toCamelCase = parts => {
+const toCamelCase = (parts: Array<string>) => {
 	return parts.map((string, index) => {
 		return index === 0 ? string.toLowerCase() : string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
 	}).join("");

package/src/util/TabbableElements.ts

@@ -0,0 +1,70 @@
+import isElementTabbable from "./isElementTabbable.js";
+
+/**
+ * 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]);
+};
+
+/**
+ * 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>): Array<HTMLElement> => {
+	const tabbableElements = tabbables || [];
+
+	if (!nodes) {
+		return tabbableElements;
+	}
+
+	nodes.forEach(currentNode => {
+		if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE) {
+			return;
+		}
+
+		let currentElement = currentNode as HTMLElement;
+		if (currentElement.hasAttribute("data-sap-no-tab-ref")) {
+			return;
+		}
+
+		if (currentElement.shadowRoot) {
+			// get the root node of the ShadowDom (1st none style tag)
+			const children = currentElement.shadowRoot.children;
+			currentElement = Array.from(children).find(node => node.tagName !== "STYLE") as HTMLElement;
+		}
+
+		if (!currentElement) {
+			return;
+		}
+
+		if (isElementTabbable(currentElement)) {
+			tabbableElements.push(currentElement);
+		}
+
+		if (currentElement.tagName === "SLOT") {
+			getTabbables((currentElement as HTMLSlotElement).assignedNodes() as Array<HTMLElement>, tabbableElements);
+		} else {
+			getTabbables([...currentElement.children], tabbableElements);
+		}
+	});
+
+	return tabbableElements;
+};
+
+export {
+	getTabbableElements,
+	getLastTabbableElement,
+};

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

@@ -1,4 +1,4 @@
-const arraysAreEqual = (arr1, arr2) => {
+const arraysAreEqual = (arr1: Array<any>, arr2: Array<any>) => {
 	if (arr1.length !== arr2.length) {
 		return false;
 	}

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

@@ -5,7 +5,7 @@
  * @param {number} max upper bound
  * @returns {number}
  */
-const clamp = (val, min, max) => {
+const clamp = (val: number, min: number, max: number) => {
 	return Math.min(Math.max(val, min), max);
 };
 

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

@@ -2,18 +2,24 @@
  * Creates a <link> tag in the <head> tag
  * @param href - the CSS
  * @param attributes - optional attributes to add to the tag
- * @returns {HTMLElement}
  */
-const createLinkInHead = (href, attributes = {}) => {
+const createLinkInHead = (href: string, attributes?: Record<string, string>) => {
 	const link = document.createElement("link");
 	link.type = "text/css";
 	link.rel = "stylesheet";
 
-	Object.entries(attributes).forEach(pair => link.setAttribute(...pair));
+	if (attributes) {
+		Object.entries(attributes).forEach(pair => link.setAttribute(...pair));
+	}
 
 	link.href = href;
+
 	document.head.appendChild(link);
-	return link;
+
+	return new Promise<Event>(resolve => {
+		link.addEventListener("load", resolve);
+		link.addEventListener("error", resolve); // intended
+	});
 };
 
 export default createLinkInHead;

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

@@ -4,11 +4,13 @@
  * @param attributes - optional attributes to add to the tag
  * @returns {HTMLElement}
  */
-const createStyleInHead = (cssText, attributes = {}) => {
+const createStyleInHead = (cssText: string, attributes?: Record<string, string>) => {
 	const style = document.createElement("style");
 	style.type = "text/css";
 
-	Object.entries(attributes).forEach(pair => style.setAttribute(...pair));
+	if (attributes) {
+		Object.entries(attributes).forEach(pair => style.setAttribute(...pair));
+	}
 
 	style.textContent = cssText;
 	document.head.appendChild(style);

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

@@ -1,13 +1,14 @@
+import { Timeout } from "../types.js";
+
 /**
  * Delays function execution by given threshold.
  * @param fn {Function}
  * @param delay {Integer}
  */
+let debounceInterval: Timeout | null = null;
 
-let debounceInterval = null;
-
-const debounce = (fn, delay) => {
-	clearTimeout(debounceInterval);
+const debounce = (fn: () => void, delay: number) => {
+	debounceInterval && clearTimeout(debounceInterval);
 	debounceInterval = setTimeout(() => {
 		debounceInterval = null;
 		fn();

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

@@ -7,7 +7,7 @@ export default () => {
 		return navigator.language;
 	};
 
-	const rawLocale = (browserLanguages && browserLanguages[0]) || navigatorLanguage() || navigator.userLanguage || navigator.browserLanguage;
+	const rawLocale = (browserLanguages && browserLanguages[0]) || navigatorLanguage();
 
 	return rawLocale || DEFAULT_LANGUAGE;
 };

package/src/util/escapeRegex.ts

@@ -0,0 +1,11 @@
+/**
+ * Escapes a regular expression text so that it can be used in a regular expression.
+ *
+ * @param { string } text the string to be interpreted literally
+ * @returns { string } the escaped string
+ */
+const escapeRegex = (text: string) => {
+	return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
+
+export default escapeRegex;

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

@@ -1,9 +1,9 @@
 const messageFormatRegEX = /('')|'([^']+(?:''[^']*)*)(?:'|$)|\{([0-9]+(?:\s*,[^{}]*)?)\}|[{}]/g;
 
-const formatMessage = (text, values) => {
+const formatMessage = (text: string, values: Array<number | string>) => {
 	values = values || [];
 
-	return text.replace(messageFormatRegEX, ($0, $1, $2, $3, offset) => {
+	return text.replace(messageFormatRegEX, ($0, $1, $2, $3: string | number, offset: number) => {
 		if ($1) {
 			return '\''; /* eslint-disable-line */
 		}
@@ -13,7 +13,8 @@ const formatMessage = (text, values) => {
 		}
 
 		if ($3) {
-			return String(values[parseInt($3)]);
+			const ind = typeof $3 === "string" ? parseInt($3) : $3;
+			return String(values[ind]);
 		}
 
 		throw new Error(`[i18n]: pattern syntax error at pos ${offset}`);

package/src/util/generateHighlightedMarkup.ts

@@ -0,0 +1,43 @@
+import escapeRegex from "./escapeRegex.js";
+// @ts-ignore
+import encodeXML from "../sap/base/security/encodeXML.js";
+
+// utility to replace all occurances of a string
+function replaceAll(text: string, find: string, replace: string | ((substring: string, ...args: any[]) => string), caseInsensitive: boolean) {
+	return text.replaceAll(new RegExp(escapeRegex(find), `${caseInsensitive ? "i" : ""}g`), replace as string);
+}
+
+/**
+ * Generate markup for a raw string where a particular text is wrapped with some tag, by default `<b>` (bold) tag.
+ * All inputs to this function are considered literal text, and special characters will always be escaped.
+ * @param {string} text The text to add highlighting to
+ * @param {string} textToHighlight The text which should be highlighted
+ * @return {string} the markup HTML which contains all occurrances of the input text surrounded with a `<b>` tag.
+ */
+function generateHighlightedMarkup(text: string, textToHighlight: string) {
+	if (!text || !textToHighlight) {
+		return text;
+	}
+	// a token is some string that does not appear in either of the input strings
+	// repeat the token until it does not appear in the string
+	const makeToken = (t: string) => {
+		const [s, e] = t.split("");
+		while (text.indexOf(t) >= 0 || textToHighlight.indexOf(t) >= 0) {
+			t = `${s}${t}${e}`;
+		}
+		return t;
+	};
+	// It doesn't matter what characters are used as long as all 4 of them are unique
+	// And also that encodeXML will not change these characters
+	const openToken = makeToken("12");
+	const closeToken = makeToken("34");
+	// wrap every occurance of the textToHighlight using the open/close tokens (instead of markup at this point)
+	let result = encodeXML(replaceAll(text, textToHighlight, (match: string) => `${openToken}${match}${closeToken}`, true)) as string;
+	// now replace the open and close tokens with the markup that we expect
+	[[openToken, "<b>"], [closeToken, "</b>"]].forEach(([find, replace]) => {
+		result = replaceAll(result, find, replace, false);
+	});
+	return result;
+}
+
+export default generateHighlightedMarkup;

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

@@ -1,4 +1,6 @@
-const getClassCopy = (klass, constructorCallback) => {
+import type UI5Element from "../UI5Element.js";
+
+const getClassCopy = (klass: typeof UI5Element, constructorCallback: () => void) => {
 	return class classCopy extends klass {
 		constructor() {
 			super();

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

@@ -1,4 +1,4 @@
-export default value => {
+export default (value: string) => {
 	const m = /\$([-a-z0-9A-Z._]+)(?::([^$]*))?\$/.exec(value);
 	return m && m[2] ? m[2].split(/,/) : null;
 };

package/src/util/getEffectiveContentDensity.ts

@@ -0,0 +1,5 @@
+const GLOBAL_CONTENT_DENSITY_CSS_VAR = "--_ui5_content_density";
+
+const getEffectiveContentDensity = (el: HTMLElement) => getComputedStyle(el).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR);
+
+export default getEffectiveContentDensity;

package/src/util/getEffectiveScrollbarStyle.ts

@@ -0,0 +1,5 @@
+const NO_SCROLLBAR_STYLE_CLASS = "ui5-content-native-scrollbars";
+
+const getEffectiveScrollbarStyle = () => document.body.classList.contains(NO_SCROLLBAR_STYLE_CLASS);
+
+export default getEffectiveScrollbarStyle;