@ui5/webcomponents-base 0.0.0-e463d2345 → 0.0.0-e55c2cec6

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

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

@@ -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,12 +1,21 @@
+// 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)
- * Note: disabled is present in IE so we explicitly allow it here.
  *
  * @param name
  * @returns {boolean}
  */
-const isValidPropertyName = name => {
-	if (name === "disabled") {
+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/Assets.js

@@ -1,2 +0,0 @@
-// Currently the base package provides CLDR assets only
-import "./json-imports/LocaleData.js";

package/dist/CSS.js

@@ -1,48 +0,0 @@
-import { getEffectiveStyle } from "./Theming.js";
-import { injectWebComponentStyle } from "./theming/StyleInjection.js";
-import adaptCSSForIE from "./util/CSSTransformUtils.js";
-
-const constructableStyleMap = new Map();
-const IEStyleSet = new Set();
-
-/**
- * Creates the needed CSS for a web component class in the head tag
- * Note: IE11, Edge
- * @param ElementClass
- */
-const createHeadStyle = ElementClass => {
-	const tag = ElementClass.getMetadata().getTag();
-	if (IEStyleSet.has(tag)) {
-		return;
-	}
-
-	let cssContent = getEffectiveStyle(ElementClass);
-	cssContent = adaptCSSForIE(cssContent, tag);
-	injectWebComponentStyle(tag, cssContent);
-	IEStyleSet.add(tag);
-};
-
-/**
- * Returns (and caches) a constructable style sheet for a web component class
- * Note: Chrome
- * @param ElementClass
- * @returns {*}
- */
-const getConstructableStyle = ElementClass => {
-	const tagName = ElementClass.getMetadata().getTag();
-	const styleContent = getEffectiveStyle(ElementClass);
-	if (constructableStyleMap.has(tagName)) {
-		return constructableStyleMap.get(tagName);
-	}
-
-	const style = new CSSStyleSheet();
-	style.replaceSync(styleContent);
-
-	constructableStyleMap.set(tagName, style);
-	return style;
-};
-
-export {
-	createHeadStyle,
-	getConstructableStyle,
-};

package/dist/FormatSettings.js

@@ -1,31 +0,0 @@
-import { getLocale } from "./LocaleProvider.js";
-
-const mSettings = {};
-
-const getFormatLocale = () => {
-	return getLocale();
-};
-
-const SETTINGS = {
-	configuration: null,
-};
-
-const setConfiguration = configuration => {
-	SETTINGS.configuration = configuration;
-};
-
-const getCustomLocaleData = () => {
-	return mSettings;
-};
-
-// needed for compatibilty
-const getLegacyDateFormat = () => {};
-const getLegacyDateCalendarCustomizing = () => {};
-
-export {
-	setConfiguration,
-	getFormatLocale,
-	getLegacyDateFormat,
-	getLegacyDateCalendarCustomizing,
-	getCustomLocaleData,
-};

package/dist/LocaleProvider.js

@@ -1,34 +0,0 @@
-import Locale from "./Locale.js";
-import detectNavigatorLanguage from "./util/detectNavigatorLanguage.js";
-import { getLanguage as getConfigLanguage } from "./config/Language.js";
-
-const convertToLocaleOrNull = lang => {
-	try {
-		if (lang && typeof lang === "string") {
-			return new Locale(lang);
-		}
-	} catch (e) {
-		// ignore
-	}
-};
-
-/**
- * Returns the locale based on the configured language Configuration#getLanguage
- * If no language has been configured - a new locale based on browser language is returned
- */
-const getLocale = () => {
-	if (getConfigLanguage()) {
-		return new Locale(getConfigLanguage());
-	}
-
-	return convertToLocaleOrNull(detectNavigatorLanguage());
-};
-
-/**
- * Returns the language of #getLocale return value
- */
-const getLanguage = () => {
-	return getLocale().sLanguage;
-};
-
-export { getLocale, getLanguage };

package/dist/RenderScheduler.js

@@ -1,165 +0,0 @@
-import RenderQueue from "./RenderQueue.js";
-
-const MAX_RERENDER_COUNT = 10;
-
-// 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 getNotDefinedComponents() {
-		return Array.from(document.querySelectorAll("*")).filter(el => el.localName.startsWith("ui5-") && !el.isUI5Element);
-	}
-
-	/**
-	 * return a promise that will be resolved once all ui5 webcomponents on the page have their shadow root ready
-	 */
-	static async whenShadowDOMReady() {
-		const undefinedElements = this.getNotDefinedComponents();
-
-		const definedPromises = undefinedElements.map(
-		  el => customElements.whenDefined(el.localName)
-		);
-		const timeoutPromise = new Promise(resolve => setTimeout(resolve, 5000));
-
-		await Promise.race([Promise.all(definedPromises), timeoutPromise]);
-		const stillUndefined = this.getNotDefinedComponents();
-		if (stillUndefined.length) {
-			// eslint-disable-next-line
-			console.warn("undefined elements after 5 seconds are: " + [...stillUndefined].map(el => el.localName).join(" ; "));
-		}
-
-		return Promise.resolve();
-	}
-
-	static async whenFinished() {
-		await RenderScheduler.whenShadowDOMReady();
-		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;
-		}
-	}
-}
-
-export default RenderScheduler;