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

package/src/util/PopupUtils.ts

@@ -1,114 +0,0 @@
-import getSharedResource from "../getSharedResource.js";
-import { getFeature } from "../FeaturesRegistry.js";
-import getActiveElement from "./getActiveElement.js";
-import type OpenUI5Support from "../features/OpenUI5Support.js";
-import type DOMReference from "../types/DOMReference.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 = (event: MouseEvent | TouchEvent, rect: DOMRect) => {
-	let x;
-	let y;
-
-	if (event instanceof MouseEvent) {
-		x = event.clientX;
-		y = event.clientY;
-	} else {
-		const touch = event.touches[0];
-		x = touch.clientX;
-		y = touch.clientY;
-	}
-
-	return isPointInRect(x, y, rect);
-};
-
-interface PopupInterface { // Refactor: replace with Popup.js
-	showAt: (opener: DOMReference, preventInitialFocus: boolean) => Promise<void>,
-	open: boolean,
-}
-
-function instanceOfPopup(object: any): object is PopupInterface {
-	return "isUI5Element" in object && "showAt" 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.ts

@@ -1,39 +0,0 @@
-/**
- * Determines the slot to which a node should be assigned
- * @param node Text node or HTML element
- * @returns {string}
- */
-const getSlotName = (node: Node) => {
-	// Text nodes can only go to the default slot
-	if (!(node instanceof HTMLElement)) {
-		return "default";
-	}
-
-	// Discover the slot based on the real slot name (f.e. footer => footer, or content-32 => content)
-	const slot = node.getAttribute("slot");
-	if (slot) {
-		const match = slot.match(/^(.+?)-\d+$/);
-		return match ? match[1] : slot;
-	}
-
-	// Use default slot as a fallback
-	return "default";
-};
-
-const getSlottedNodes = (node: Node) => {
-	if (node instanceof HTMLSlotElement) {
-		return node.assignedNodes({ flatten: true }).filter(item => item instanceof HTMLElement);
-	}
-
-	return [node];
-};
-
-const getSlottedNodesList = (nodeList: Array<Node>) => {
-	return nodeList.reduce((acc, curr) => acc.concat(getSlottedNodes(curr)), [] as Array<Node>);
-};
-
-export {
-	getSlotName,
-	getSlottedNodes,
-	getSlottedNodesList,
-};

package/src/util/StringHelper.ts

@@ -1,26 +0,0 @@
-const kebabToCamelMap = new Map<string, string>();
-const camelToKebabMap = new Map<string, string>();
-
-const kebabToCamelCase = (string: string) => {
-	if (!kebabToCamelMap.has(string)) {
-		const result = toCamelCase(string.split("-"));
-		kebabToCamelMap.set(string, result);
-	}
-	return kebabToCamelMap.get(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)!;
-};
-
-const toCamelCase = (parts: Array<string>) => {
-	return parts.map((string, index) => {
-		return index === 0 ? string.toLowerCase() : string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
-	}).join("");
-};
-
-export { kebabToCamelCase, camelToKebabCase };

package/src/util/TabbableElements.ts

@@ -1,70 +0,0 @@
-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.ts

@@ -1,15 +0,0 @@
-const arraysAreEqual = (arr1: Array<any>, arr2: Array<any>) => {
-	if (arr1.length !== arr2.length) {
-		return false;
-	}
-
-	for (let i = 0; i < arr1.length; i++) {
-		if (arr1[i] !== arr2[i]) {
-			return false;
-		}
-	}
-
-	return true;
-};
-
-export default arraysAreEqual;

package/src/util/clamp.ts

@@ -1,12 +0,0 @@
-/**
- * Returns a value clamped between an upper bound 'max' and lower bound 'min'.
- * @param {number} val value
- * @param {number} min lower bound
- * @param {number} max upper bound
- * @returns {number}
- */
-const clamp = (val: number, min: number, max: number) => {
-	return Math.min(Math.max(val, min), max);
-};
-
-export default clamp;

package/src/util/createLinkInHead.ts

@@ -1,25 +0,0 @@
-/**
- * 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.ts

@@ -1,20 +0,0 @@
-/**
- * Creates a <style> tag in the <head> tag
- * @param cssText - the CSS
- * @param attributes - optional attributes to add to the tag
- * @returns {HTMLElement}
- */
-const createStyleInHead = (cssText: string, attributes?: Record<string, string>) => {
-	const style = document.createElement("style");
-	style.type = "text/css";
-
-	if (attributes) {
-		Object.entries(attributes).forEach(pair => style.setAttribute(...pair));
-	}
-
-	style.textContent = cssText;
-	document.head.appendChild(style);
-	return style;
-};
-
-export default createStyleInHead;

package/src/util/debounce.ts

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

package/src/util/detectNavigatorLanguage.ts

@@ -1,13 +0,0 @@
-import { DEFAULT_LANGUAGE } from "../generated/AssetParameters.js";
-
-export default () => {
-	const browserLanguages = navigator.languages;
-
-	const navigatorLanguage = () => {
-		return navigator.language;
-	};
-
-	const rawLocale = (browserLanguages && browserLanguages[0]) || navigatorLanguage();
-
-	return rawLocale || DEFAULT_LANGUAGE;
-};

package/src/util/escapeRegex.ts

@@ -1,11 +0,0 @@
-/**
- * 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.ts

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

package/src/util/generateHighlightedMarkup.ts

@@ -1,43 +0,0 @@
-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/getActiveElement.ts

@@ -1,11 +0,0 @@
-const getActiveElement = () => {
-	let element = document.activeElement;
-
-	while (element && element.shadowRoot && element.shadowRoot.activeElement) {
-		element = element.shadowRoot.activeElement;
-	}
-
-	return element;
-};
-
-export default getActiveElement;

package/src/util/getClassCopy.ts

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

package/src/util/getDesigntimePropertyAsArray.ts

@@ -1,4 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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.ts

@@ -1,21 +0,0 @@
-/**
- * ""                        -> ""
- * "noExtension"             -> ""
- * "file.txt"                -> ".txt"
- * "file.with.many.dots.doc" -> ".doc"
- * ".gitignore"              -> ""
- *
- * @param { string } fileName - the file name
- * @returns { string }
- */
-const getFileExtension = (fileName: string) => {
-	const dotPos = fileName.lastIndexOf(".");
-
-	if (dotPos < 1) {
-		return "";
-	}
-
-	return fileName.slice(dotPos);
-};
-
-export default getFileExtension;

package/src/util/getNormalizedTarget.ts

@@ -1,16 +0,0 @@
-/**
- * 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.ts

@@ -1,13 +0,0 @@
-const getSingletonElementInstance = (tag: string, parentElement: HTMLElement = document.body) => {
-	let el = document.querySelector(tag);
-
-	if (el) {
-		return el;
-	}
-
-	el = document.createElement(tag);
-
-	return parentElement.insertBefore(el, parentElement.firstChild);
-};
-
-export default getSingletonElementInstance;

package/src/util/isElementClickable.ts

@@ -1,19 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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.ts

@@ -1,15 +0,0 @@
-/**
- * Determines if the element is within the viewport.
- * @param el {HTMLElement}
- */
-const isElementInView = (el: HTMLElement) => {
-	const rect = el.getBoundingClientRect();
-
-	return (
-		rect.top >= 0 && rect.left >= 0
-			&& rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
-			&& rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-	);
-};
-
-export default isElementInView;