@ui5/webcomponents-base 0.0.0-4b9b0ab7c → 0.0.0-4e88b8243

package/src/util/FocusableElements.ts

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

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

package/src/util/InvisibleMessage.ts

@@ -1,69 +0,0 @@
-import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
-import getSingletonElementInstance from "./getSingletonElementInstance.js";
-import { attachBoot } from "../Boot.js";
-
-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;
-	}
-
-	politeSpan = document.createElement("span");
-	assertiveSpan = document.createElement("span");
-
-	politeSpan.classList.add("ui5-invisiblemessage-polite");
-	assertiveSpan.classList.add("ui5-invisiblemessage-assertive");
-
-	politeSpan.setAttribute("aria-live", "polite");
-	assertiveSpan.setAttribute("aria-live", "assertive");
-
-	politeSpan.setAttribute("role", "alert");
-	assertiveSpan.setAttribute("role", "alert");
-
-	setOutOfViewportStyles(politeSpan);
-	setOutOfViewportStyles(assertiveSpan);
-
-	getSingletonElementInstance("ui5-static-area").appendChild(politeSpan);
-	getSingletonElementInstance("ui5-static-area").appendChild(assertiveSpan);
-});
-
-/**
- * Inserts the string into the respective span, depending on the mode provided.
- *
- * @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: string, mode: InvisibleMessageMode) => {
-	// If no type is presented, fallback to polite announcement.
-	const span = mode === InvisibleMessageMode.Assertive ? assertiveSpan : politeSpan;
-
-	// Set textContent to empty string in order to trigger screen reader's announcement.
-	span.textContent = "";
-	span.textContent = message;
-
-	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

@@ -1,112 +0,0 @@
-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.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;