@ui5/webcomponents-base 0.0.0-2c7615fe9 → 0.0.0-2f7664755

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.ts

@@ -0,0 +1,25 @@
+/**
+ * Creates a <link> tag in the <head> tag
+ * @param href - the CSS
+ * @param attributes - optional attributes to add to the tag
+ */
+const createLinkInHead = (href: string, attributes?: Record<string, string>) => {
+	const link = document.createElement("link");
+	link.type = "text/css";
+	link.rel = "stylesheet";
+
+	if (attributes) {
+		Object.entries(attributes).forEach(pair => link.setAttribute(...pair));
+	}
+
+	link.href = href;
+
+	document.head.appendChild(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;

package/src/util/getFastNavigationGroups.ts

@@ -0,0 +1,63 @@
+let groups: Array<HTMLElement> = [];
+
+const isFastNavGroupElemenet = (el: HTMLElement) => {
+	return el.getAttribute("data-sap-ui-fastnavgroup") === "true";
+};
+
+const isElementVisible = (el: HTMLElement) => {
+	const style = window.getComputedStyle(el);
+
+	return style.width !== "0px"
+		&& style.height !== "0px"
+		&& style.opacity !== "0"
+		&& style.display !== "none"
+		&& style.visibility !== "hidden";
+};
+
+const findFastNavigationGroups = (container: HTMLElement, startFromContainer?: boolean) => {
+	let child,
+		assignedElements,
+		index = 0;
+
+	if (!isElementVisible(container)) {
+		return;
+	}
+
+	if (isFastNavGroupElemenet(container)) {
+		groups.push(container);
+	}
+
+	if (container.shadowRoot) {
+		child = container.shadowRoot.firstChild;
+	} else if (container instanceof HTMLSlotElement && container.assignedNodes()) {
+		assignedElements = container.assignedNodes();
+		child = assignedElements[0];
+	} else if (startFromContainer) {
+		child = container;
+	} else {
+		child = container.firstElementChild;
+	}
+
+	while (child) {
+		const originalChild: HTMLElement = child as HTMLElement;
+		if (!child) {
+			return;
+		}
+
+		if (child.nodeType === 1) {
+			findFastNavigationGroups(child as HTMLElement, false);
+		}
+
+		child = assignedElements && assignedElements.length ? assignedElements[++index] : originalChild.nextElementSibling;
+	}
+};
+
+const getFastNavigationGroups = (container: HTMLElement) => {
+	groups = [];
+
+	findFastNavigationGroups(container, true);
+
+	return groups;
+};
+
+export default getFastNavigationGroups;

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

@@ -5,10 +5,10 @@
  * "file.with.many.dots.doc" -> ".doc"
  * ".gitignore"              -> ""
  *
- * @param fileName - the file name
- * @returns {string}
+ * @param { string } fileName - the file name
+ * @returns { string }
  */
-const getFileExtension = fileName => {
+const getFileExtension = (fileName: string) => {
 	const dotPos = fileName.lastIndexOf(".");
 
 	if (dotPos < 1) {

package/src/util/getNormalizedTarget.ts

@@ -0,0 +1,16 @@
+/**
+ * Returns the normalized event target in cases when it has shadow root.
+ * @param {Object} target The original event target
+ * @returns {Object} The normalized target
+ */
+const getNormalizedTarget = (target: HTMLElement) => {
+	let element = target;
+
+	if (target.shadowRoot && target.shadowRoot.activeElement) {
+		element = target.shadowRoot.activeElement as HTMLElement;
+	}
+
+	return element;
+};
+
+export default getNormalizedTarget;

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

@@ -1,4 +1,4 @@
-const getSingletonElementInstance = (tag, parentElement = document.body) => {
+const getSingletonElementInstance = (tag: string, parentElement: HTMLElement = document.body) => {
 	let el = document.querySelector(tag);
 
 	if (el) {

package/src/util/isElementClickable.ts

@@ -0,0 +1,19 @@
+const rClickable = /^(?:a|area)$/i;
+const rFocusable = /^(?:input|select|textarea|button)$/i;
+
+const isElementClickable = (el: HTMLElement): boolean => {
+	if ((el as HTMLButtonElement).disabled) {
+		return false;
+	}
+
+	const tabIndex = el.getAttribute("tabindex");
+	if (tabIndex !== null && tabIndex !== undefined) {
+		return parseInt(tabIndex) >= 0;
+	}
+
+	return rFocusable.test(el.nodeName)
+		|| (rClickable.test(el.nodeName)
+		&& !!(el as HTMLLinkElement).href);
+};
+
+export default isElementClickable;

package/src/util/isElementHidden.ts

@@ -0,0 +1,9 @@
+const isElementHidden = (el: HTMLElement) => {
+	if (el.nodeName === "SLOT") {
+		return false;
+	}
+
+	return (el.offsetWidth <= 0 && el.offsetHeight <= 0) || (el.style && el.style.visibility === "hidden");
+};
+
+export default isElementHidden;

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

@@ -2,7 +2,7 @@
  * Determines if the element is within the viewport.
  * @param el {HTMLElement}
  */
-const isElementInView = el => {
+const isElementInView = (el: HTMLElement) => {
 	const rect = el.getBoundingClientRect();
 
 	return (

package/src/util/isElementTabbable.ts

@@ -0,0 +1,37 @@
+import isElementHidden from "./isElementHidden.js";
+
+/**
+ * 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;
+	}
+
+	const nodeName = el.nodeName.toLowerCase();
+
+	if (el.hasAttribute("data-sap-no-tab-ref")) {
+		return false;
+	}
+
+	if (isElementHidden(el)) {
+		return false;
+	}
+
+	const tabIndex = el.getAttribute("tabindex");
+	if (tabIndex !== null && tabIndex !== undefined) {
+		return parseInt(tabIndex) >= 0;
+	}
+
+	if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
+		return !(el as HTMLLinkElement).disabled;
+	}
+
+	return false;
+};
+
+export default isElementTabbable;

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

@@ -14,7 +14,7 @@ const allowList = [
  * @param name
  * @returns {boolean}
  */
-const isValidPropertyName = name => {
+const isValidPropertyName = (name: string) => {
 	if (allowList.includes(name) || name.startsWith("aria")) {
 		return true;
 	}

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

@@ -1,5 +1,5 @@
 const whenDOMReady = () => {
-	return new Promise(resolve => {
+	return new Promise<void>(resolve => {
 		if (document.body) {
 			resolve();
 		} else {

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;