@ui5/webcomponents-base 0.0.0-7d5f73b20 → 0.0.0-81513ce21

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;

package/src/util/isElementTabbable.ts

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

@@ -1,29 +0,0 @@
-// Note: disabled is present in IE so we explicitly allow it here.
-// Others, such as title/hidden, we explicitly override, so valid too
-const allowList = [
-	"disabled",
-	"title",
-	"hidden",
-	"role",
-	"draggable",
-];
-
-/**
- * Checks whether a property name is valid (does not collide with existing DOM API properties)
- *
- * @param name
- * @returns {boolean}
- */
-const isValidPropertyName = (name: string) => {
-	if (allowList.includes(name) || name.startsWith("aria")) {
-		return true;
-	}
-	const classes = [
-		HTMLElement,
-		Element,
-		Node,
-	];
-	return !classes.some(klass => klass.prototype.hasOwnProperty(name)); // eslint-disable-line
-};
-
-export default isValidPropertyName;

package/src/util/whenDOMReady.ts

@@ -1,13 +0,0 @@
-const whenDOMReady = () => {
-	return new Promise<void>(resolve => {
-		if (document.body) {
-			resolve();
-		} else {
-			document.addEventListener("DOMContentLoaded", () => {
-				resolve();
-			});
-		}
-	});
-};
-
-export default whenDOMReady;

package/src/util/willShowContent.ts

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