@ui5/webcomponents-base 0.0.0-1b568f22b → 0.0.0-1d11e4833

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

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

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

@@ -1,6 +1,12 @@
 // Note: disabled is present in IE so we explicitly allow it here.
-// Others, such as ariaLabel, we explicitly override, so valid too
-const whitelist = ["disabled", "ariaLabel"];
+// 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)
@@ -8,8 +14,8 @@ const whitelist = ["disabled", "ariaLabel"];
  * @param name
  * @returns {boolean}
  */
-const isValidPropertyName = name => {
-	if (whitelist.includes(name)) {
+const isValidPropertyName = (name: string) => {
+	if (allowList.includes(name) || name.startsWith("aria")) {
 		return true;
 	}
 	const classes = [

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/**/*", "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/bundle.es5.js

@@ -1,28 +0,0 @@
-// ES5 bundle targets IE11 only
-import "./dist/features/browsersupport/IE11.js";
-
-import "./bundle.esm.js";
-
-import { getAnimationMode } from "./dist/config/AnimationMode.js";
-import { getLanguage } from "./dist/config/Language.js";
-import { getCalendarType } from "./dist/config/CalendarType.js";
-import { getTheme, setTheme } from "./dist/config/Theme.js";
-import { getNoConflict, setNoConflict } from "./dist/config/NoConflict.js";
-import { getRTL } from "./dist/config/RTL.js";
-import { getFirstDayOfWeek } from "./dist/config/FormatSettings.js";
-import { getRegisteredNames as getIconNames } from  "./dist/SVGIconRegistry.js"
-const configuration = {
-	getAnimationMode,
-	getLanguage,
-	getTheme,
-	setTheme,
-	getNoConflict,
-	setNoConflict,
-	getCalendarType,
-	getRTL,
-	getFirstDayOfWeek,
-};
-export {
-	configuration,
-	getIconNames,
-};

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,178 +0,0 @@
-import RenderQueue from "./RenderQueue.js";
-import { getAllRegisteredTags } from "./CustomElementsRegistry.js";
-import { isRtlAware } from "./locale/RTLAwareRegistry.js";
-
-const MAX_RERENDER_COUNT = 10;
-const registeredElements = new Set();
-
-// Tells whether a render task is currently scheduled
-let renderTaskId;
-
-// Queue for invalidated web components
-const invalidatedWebComponents = new RenderQueue();
-
-let renderTaskPromise,
-	renderTaskPromiseResolve,
-	taskResult;
-
-let mutationObserverTimer;
-
-/**
- * Class that manages the rendering/re-rendering of web components
- * This is always asynchronous
- */
-class RenderScheduler {
-	constructor() {
-		throw new Error("Static class");
-	}
-
-	/**
-	 * Queues a web component for re-rendering
-	 * @param webComponent
-	 */
-	static renderDeferred(webComponent) {
-		// Enqueue the web component
-		const res = invalidatedWebComponents.add(webComponent);
-
-		// Schedule a rendering task
-		RenderScheduler.scheduleRenderTask();
-		return res;
-	}
-
-	static renderImmediately(webComponent) {
-		// Enqueue the web component
-		const res = invalidatedWebComponents.add(webComponent);
-
-		// Immediately start a render task
-		RenderScheduler.runRenderTask();
-		return res;
-	}
-
-	/**
-	 * Schedules a rendering task, if not scheduled already
-	 */
-	static scheduleRenderTask() {
-		if (!renderTaskId) {
-			// renderTaskId = window.setTimeout(RenderScheduler.renderWebComponents, 3000); // Task
-			// renderTaskId = Promise.resolve().then(RenderScheduler.renderWebComponents); // Micro task
-			renderTaskId = window.requestAnimationFrame(RenderScheduler.renderWebComponents); // AF
-		}
-	}
-
-	static runRenderTask() {
-		if (!renderTaskId) {
-			renderTaskId = 1; // prevent another rendering task from being scheduled, all web components should use this task
-			RenderScheduler.renderWebComponents();
-		}
-	}
-
-	static renderWebComponents() {
-		// console.log("------------- NEW RENDER TASK ---------------");
-
-		let webComponentInfo,
-			webComponent,
-			promise;
-		const renderStats = new Map();
-		while (webComponentInfo = invalidatedWebComponents.shift()) { // eslint-disable-line
-			webComponent = webComponentInfo.webComponent;
-			promise = webComponentInfo.promise;
-
-			const timesRerendered = renderStats.get(webComponent) || 0;
-			if (timesRerendered > MAX_RERENDER_COUNT) {
-				// console.warn("WARNING RERENDER", webComponent);
-				throw new Error(`Web component re-rendered too many times this task, max allowed is: ${MAX_RERENDER_COUNT}`);
-			}
-			webComponent._render();
-			promise._deferredResolve();
-			renderStats.set(webComponent, timesRerendered + 1);
-		}
-
-		// wait for Mutation observer just in case
-		if (!mutationObserverTimer) {
-			mutationObserverTimer = setTimeout(() => {
-				mutationObserverTimer = undefined;
-				if (invalidatedWebComponents.getList().length === 0) {
-					RenderScheduler._resolveTaskPromise();
-				}
-			}, 200);
-		}
-
-		renderTaskId = undefined;
-	}
-
-	/**
-	 * return a promise that will be resolved once all invalidated web components are rendered
-	 */
-	static whenDOMUpdated() {
-		if (renderTaskPromise) {
-			return renderTaskPromise;
-		}
-
-		renderTaskPromise = new Promise(resolve => {
-			renderTaskPromiseResolve = resolve;
-			window.requestAnimationFrame(() => {
-				if (invalidatedWebComponents.getList().length === 0) {
-					renderTaskPromise = undefined;
-					resolve();
-				}
-			});
-		});
-
-		return renderTaskPromise;
-	}
-
-	static whenAllCustomElementsAreDefined() {
-		const definedPromises = getAllRegisteredTags().map(tag => customElements.whenDefined(tag));
-		return Promise.all(definedPromises);
-	}
-
-	static async whenFinished() {
-		await RenderScheduler.whenAllCustomElementsAreDefined();
-		await RenderScheduler.whenDOMUpdated();
-	}
-
-	static _resolveTaskPromise() {
-		if (invalidatedWebComponents.getList().length > 0) {
-			// More updates are pending. Resolve will be called again
-			return;
-		}
-
-		if (renderTaskPromiseResolve) {
-			renderTaskPromiseResolve.call(this, taskResult);
-			renderTaskPromiseResolve = undefined;
-			renderTaskPromise = undefined;
-		}
-	}
-
-	static register(element) {
-		registeredElements.add(element);
-	}
-
-	static deregister(element) {
-		registeredElements.delete(element);
-	}
-
-	/**
-	 * Re-renders all UI5 Elements on the page, with the option to specify filters to rerender only some components.
-	 *
-	 * Usage:
-	 * reRenderAllUI5Elements() -> rerenders all components
-	 * reRenderAllUI5Elements({rtlAware: true}) -> re-renders only rtlAware components
-	 * reRenderAllUI5Elements({languageAware: true}) -> re-renders only languageAware components
-	 * reRenderAllUI5Elements({rtlAware: true, languageAware: true}) -> re-renders components that are rtlAware or languageAware
-	 *
-	 * @public
-	 * @param {Object|undefined} filters - Object with keys that can be "rtlAware" or "languageAware"
-	 */
-	static reRenderAllUI5Elements(filters) {
-		registeredElements.forEach(element => {
-			const rtlAware = isRtlAware(element.constructor);
-			const languageAware = element.constructor.getMetadata().isLanguageAware();
-			if (!filters || (filters.rtlAware && rtlAware) || (filters.languageAware && languageAware)) {
-				RenderScheduler.renderDeferred(element);
-			}
-		});
-	}
-}
-
-export default RenderScheduler;

package/dist/SVGIconRegistry.js

@@ -1,60 +0,0 @@
-const registry = new Map();
-const iconCollectionPromises = new Map();
-
-const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const DEFAULT_COLLECTION = "SAP-icons";
-
-const calcKey = (name, collection) => {
-	// silently support ui5-compatible URIs
-	if (name.startsWith("sap-icon://")) {
-		name = name.replace("sap-icon://", "");
-		[name, collection] = name.split("/").reverse();
-	}
-	collection = collection || DEFAULT_COLLECTION;
-	return `${collection}:${name}`;
-};
-
-const registerIcon = (name, { pathData, accData, collection } = {}) => {
-	const key = calcKey(name, collection);
-	registry.set(key, { pathData, accData });
-};
-
-const getIconDataSync = (name, collection = DEFAULT_COLLECTION) => {
-	const key = calcKey(name, collection);
-	return registry.get(key);
-};
-
-const getIconData = async (name, collection = DEFAULT_COLLECTION) => {
-	const key = calcKey(name, collection);
-
-	if (!iconCollectionPromises.has(collection)) {
-		iconCollectionPromises.set(collection, Promise.resolve(ICON_NOT_FOUND));
-	}
-
-	const iconData = await iconCollectionPromises.get(collection);
-
-	if (iconData === ICON_NOT_FOUND) {
-		return iconData;
-	}
-
-	return registry.get(key);
-};
-
-const getRegisteredNames = async () => {
-	if (iconCollectionPromises.has(DEFAULT_COLLECTION)) {
-		await iconCollectionPromises.get(DEFAULT_COLLECTION);
-	}
-	return Array.from(registry.keys()).map(k => k.split(":")[1]);
-};
-
-const registerCollectionPromise = (collection, promise) => {
-	iconCollectionPromises.set(collection, promise);
-};
-
-export {
-	getIconData,
-	getIconDataSync,
-	registerIcon,
-	getRegisteredNames,
-	registerCollectionPromise,
-};

package/dist/animations/config.js

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

package/dist/boot.js

@@ -1,34 +0,0 @@
-import whenDOMReady from "./util/whenDOMReady.js";
-import insertFontFace from "./FontFace.js";
-import insertSystemCSSVars from "./SystemCSSVars.js";
-import { getTheme } from "./config/Theme.js";
-import applyTheme from "./theming/applyTheme.js";
-import whenPolyfillLoaded from "./compatibility/whenPolyfillLoaded.js";
-import { getFeature } from "./FeaturesRegistry.js";
-
-let bootPromise;
-
-const boot = () => {
-	if (bootPromise) {
-		return bootPromise;
-	}
-
-	bootPromise = new Promise(async resolve => {
-		const OpenUI5Support = getFeature("OpenUI5Support");
-		if (OpenUI5Support) {
-			await OpenUI5Support.init();
-		}
-
-		await whenDOMReady();
-		await applyTheme(getTheme());
-		OpenUI5Support && OpenUI5Support.attachListeners();
-		insertFontFace();
-		insertSystemCSSVars();
-		await whenPolyfillLoaded();
-		resolve();
-	});
-
-	return bootPromise;
-};
-
-export default boot;