@ui5/webcomponents-base 0.0.0-8db0ce01a → 0.0.0-918b4fbe7

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,56 @@
+import isElementTabbable from "./isElementTabbable.js";
+
+const getTabbableElements = (el: HTMLElement) => {
+	return getTabbables([...el.children]);
+};
+
+const getLastTabbableElement = (el: HTMLElement) => {
+	const tabbables = getTabbables([...el.children]);
+	return tabbables.length ? tabbables[tabbables.length - 1] : null;
+};
+
+const getTabbables = (nodes: Array<Node>, tabbables?: 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/isDefaultSlotProvided.ts

@@ -0,0 +1,11 @@
+import { getSlotName } from "./SlotsHelper.js";
+
+const isDefaultSlotProvided = (element: HTMLElement) => {
+	return Array.from(element.childNodes).filter(node => {
+		return node.nodeType !== Node.COMMENT_NODE
+		&& getSlotName(node) === "default"
+		&& (node.nodeType !== Node.TEXT_NODE || (node.nodeValue || "").trim().length !== 0);
+	}).length > 0;
+};
+
+export default isDefaultSlotProvided;

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,28 @@
+import isElementHidden from "./isElementHidden.js";
+
+const isElementTabbable = (el: HTMLElement) => {
+	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;
+	}
+};
+
+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/validateThemeRoot.ts

@@ -0,0 +1,58 @@
+const getMetaTagValue = (metaTagName: string) => {
+	const metaTag = document.querySelector(`META[name="${metaTagName}"]`),
+		metaTagContent = metaTag && metaTag.getAttribute("content");
+
+	return metaTagContent;
+};
+
+const validateThemeOrigin = (origin: string) => {
+	const allowedOrigins = getMetaTagValue("sap-allowedThemeOrigins");
+
+	return allowedOrigins && allowedOrigins.split(",").some(allowedOrigin => {
+		return allowedOrigin === "*" || origin === allowedOrigin.trim();
+	});
+};
+
+const buildCorrectUrl = (oldUrl: string, newOrigin: string) => {
+	const oldUrlPath = new URL(oldUrl).pathname;
+
+	return new URL(oldUrlPath, newOrigin).toString();
+};
+
+const validateThemeRoot = (themeRoot: string) => {
+	let themeRootURL,
+		resultUrl;
+
+	try {
+		themeRootURL = new URL(themeRoot);
+
+		const origin = themeRootURL.origin;
+
+		themeRootURL = themeRootURL.toString();
+
+		if (themeRootURL.startsWith(".") || themeRootURL.startsWith("/")) {
+			// Handle relative url
+			// new URL("/newExmPath", "http://example.com/exmPath") => http://example.com/newExmPath
+			// new URL("./newExmPath", "http://example.com/exmPath") => http://example.com/exmPath/newExmPath
+			// new URL("../newExmPath", "http://example.com/exmPath") => http://example.com/newExmPath
+			resultUrl = new URL(themeRootURL, window.location.href).toString();
+		} else if (origin && validateThemeOrigin(origin)) {
+			// If origin is allowed, use it
+			resultUrl = themeRootURL.toString();
+		} else {
+			// If origin is not allow and the URL is not relative, we have to replace the origin
+			// with current location
+			resultUrl = buildCorrectUrl(themeRootURL, window.location.href);
+		}
+
+		if (!resultUrl.endsWith("/")) {
+			resultUrl = `${resultUrl}/`;
+		}
+
+		return `${resultUrl}UI5/`;
+	} catch (e) {
+		// Catch if URL is not correct
+	}
+};
+
+export default validateThemeRoot;

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "include": ["src/**/*", "global.d.ts"],
+    "compilerOptions": {
+      "target": "ES2021",
+      // Generate d.ts files
+      "declaration": true,
+      "outDir": "dist",
+      "skipLibCheck": true,
+      "sourceMap": true,
+      "strict": true,
+      "moduleResolution": "node",
+    },
+}

package/used-modules.txt

@@ -0,0 +1,10 @@
+# Needed files from OpenUI5
+
+sap/base/util/now.js
+sap/base/Log.js
+sap/base/assert.js
+sap/base/security/URLListValidator.js
+sap/base/security/sanitizeHTML.js
+sap/base/strings/toHex.js
+sap/base/security/encodeXML.js
+sap/base/security/encodeCSS.js

package/config/.eslintrc.js

@@ -1,3 +0,0 @@
-const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
-
-module.exports = config;

package/config/rollup.config.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/rollup.js");