@ui5/webcomponents-base 0.0.0-0a074c90e → 0.0.0-111ecd79a

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

@@ -0,0 +1,15 @@
+/**
+ * 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

@@ -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;

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/**/*", "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");

package/dist/RenderScheduler.js

@@ -1,44 +0,0 @@
-import {
-	renderDeferred,
-	renderImmediately,
-	renderFinished,
-} from "./Render.js";
-
-/**
- * @deprecated Use the Render.js module instead
- */
-class RenderScheduler {
-	/**
-	 * Schedules a render task (if not already scheduled) to render the component
-	 *
-	 * @param webComponent
-	 * @returns {Promise}
-	 * @deprecated Use renderDeferred from the Render.js module instead
-	 */
-	static async renderDeferred(webComponent) {
-		console.log("RenderScheduler.renderDeferred is deprecated, please use renderDeferred, exported by Render.js instead"); // eslint-disable-line
-		await renderDeferred(webComponent);
-	}
-
-	/**
-	 * Renders a component synchronously
-	 *
-	 * @param webComponent
-	 * @deprecated Use renderImmediately from the Render.js module instead
-	 */
-	static renderImmediately(webComponent) {
-		console.log("RenderScheduler.renderImmediately is deprecated, please use renderImmediately, exported by Render.js instead"); // eslint-disable-line
-		return renderImmediately(webComponent);
-	}
-
-	/**
-	 * @deprecated Use renderFinished from the Render.js module instead
-	 * @returns {Promise<void>}
-	 */
-	static async whenFinished() {
-		console.log("RenderScheduler.whenFinished is deprecated, please use renderFinished, exported by Render.js instead"); // eslint-disable-line
-		await renderFinished();
-	}
-}
-
-export default RenderScheduler;

package/dist/animations/config.js

@@ -1,5 +0,0 @@
-export default {
-	defaultDuration: 400,
-	element: document.createElement("DIV"),
-	identity: () => {},
-};

package/dist/config/AssetsPath.js

@@ -1,17 +0,0 @@
-import { getAssetsPath as getConfiguredAssetsPath } from "../InitialConfiguration.js";
-
-let assetsPath;
-
-const getAssetsPath = () => {
-	if (assetsPath === undefined) {
-		assetsPath = getConfiguredAssetsPath();
-	}
-
-	return assetsPath;
-};
-
-const setAssetsPath = newAssetsPath => {
-	assetsPath = newAssetsPath;
-};
-
-export { getAssetsPath, setAssetsPath }; // eslint-disable-line

package/dist/isLegacyBrowser.js

@@ -1,3 +0,0 @@
-const isLegacyBrowser = () => !!window.ShadyDOM;
-
-export default isLegacyBrowser;

package/dist/renderer/ifDefined.js

@@ -1,21 +0,0 @@
-import {
-	AttributePart,
-	directive,
-	noChange,
-} from "lit-html/lit-html.js";
-
-/*
-	lit-html directive that removes and attribute if it is undefined
-*/
-export default directive(value => part => {
-	if ((value === undefined) && part instanceof AttributePart) {
-		if (value !== part.value) {
-			const name = part.committer.name;
-			part.committer.element.removeAttribute(name);
-		}
-	} else if (part.committer && part.committer.element && part.committer.element.getAttribute(part.committer.name) === value) {
-		part.setValue(noChange);
-	} else {
-		part.setValue(value);
-	}
-});

package/dist/renderer/scopeHTML.js

@@ -1,32 +0,0 @@
-const cache = new Map();
-
-const scopeHTML = (strings, tags, suffix) => {
-	if (suffix && tags && tags.length) {
-		strings = strings.map(string => {
-			if (cache.has(string)) {
-				return cache.get(string);
-			}
-
-			/*
-			const allTags = [...string.matchAll(/<(ui5-.*?)[> ]/g)].map(x => x[1]);
-			allTags.forEach(t => {
-				if (!tags.includes(t)) {
-					throw new Error(`${t} not found in ${string}`);
-					// console.log(t, " in ", string);
-				}
-			});
-			*/
-
-			let result = string;
-			tags.forEach(tag => {
-				result = result.replace(new RegExp(`(</?)(${tag})(/?[> \t\n])`, "g"), `$1$2-${suffix}$3`);
-			});
-			cache.set(string, result);
-			return result;
-		});
-	}
-
-	return strings;
-};
-
-export default scopeHTML;