@ui5/webcomponents-base 0.0.0-c6d8872f3 → 0.0.0-cf069fb29

package/src/util/InvisibleMessage.js

@@ -0,0 +1,58 @@
+import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
+import getSingletonElementInstance from "./getSingletonElementInstance.js";
+import { attachBoot } from "../Boot.js";
+
+let politeSpan;
+let assertiveSpan;
+
+attachBoot(() => {
+	if (politeSpan && assertiveSpan) {
+		return;
+	}
+
+	const styles = `position: absolute;
+	clip: rect(1px,1px,1px,1px);
+	user-select: none;
+	left: -1000px;
+	top: -1000px;
+	pointer-events: none;`;
+
+	politeSpan = document.createElement("span");
+	assertiveSpan = document.createElement("span");
+
+	politeSpan.classList.add("ui5-invisiblemessage-polite");
+	assertiveSpan.classList.add("ui5-invisiblemessage-assertive");
+
+	politeSpan.setAttribute("aria-live", "polite");
+	assertiveSpan.setAttribute("aria-live", "assertive");
+
+	politeSpan.setAttribute("role", "alert");
+	assertiveSpan.setAttribute("role", "alert");
+
+	politeSpan.style.cssText = styles;
+	assertiveSpan.style.cssText = styles;
+
+	getSingletonElementInstance("ui5-static-area").appendChild(politeSpan);
+	getSingletonElementInstance("ui5-static-area").appendChild(assertiveSpan);
+});
+
+/**
+ * Inserts the string into the respective span, depending on the mode provided.
+ *
+ * @param {string} message String to be announced by the screen reader.
+ * @param {sap.ui.core.InvisibleMessageMode} mode The mode to be inserted in the aria-live attribute.
+ */
+const announce = (message, mode) => {
+	// If no type is presented, fallback to polite announcement.
+	const span = mode === InvisibleMessageMode.Assertive ? assertiveSpan : politeSpan;
+
+	// Set textContent to empty string in order to trigger screen reader's announcement.
+	span.textContent = "";
+	span.textContent = message;
+
+	if (mode !== InvisibleMessageMode.Assertive && mode !== InvisibleMessageMode.Polite) {
+		console.warn(`You have entered an invalid mode. Valid values are: "Polite" and "Assertive". The framework will automatically set the mode to "Polite".`); // eslint-disable-line
+	}
+};
+
+export default announce;

package/src/util/PopupUtils.js

@@ -0,0 +1,93 @@
+import getSharedResource from "../getSharedResource.js";
+import { getFeature } from "../FeaturesRegistry.js";
+import getActiveElement from "./getActiveElement.js";
+
+const PopupUtilsData = getSharedResource("PopupUtilsData", {});
+PopupUtilsData.currentZIndex = PopupUtilsData.currentZIndex || 100;
+
+const getFocusedElement = () => {
+	const element = getActiveElement();
+	return (element && typeof element.focus === "function") ? element : null;
+};
+
+const isFocusedElementWithinNode = node => {
+	const fe = getFocusedElement();
+
+	if (fe) {
+		return isNodeContainedWithin(node, fe);
+	}
+
+	return false;
+};
+
+const isNodeContainedWithin = (parent, child) => {
+	let currentNode = parent;
+
+	if (currentNode.shadowRoot) {
+		currentNode = Array.from(currentNode.shadowRoot.children).find(n => n.localName !== "style");
+	}
+
+	if (currentNode === child) {
+		return true;
+	}
+
+	const childNodes = currentNode.localName === "slot" ? currentNode.assignedNodes() : currentNode.children;
+
+	if (childNodes) {
+		return Array.from(childNodes).some(n => isNodeContainedWithin(n, child));
+	}
+};
+
+const isPointInRect = (x, y, rect) => {
+	return x >= rect.left && x <= rect.right
+		&& y >= rect.top && y <= rect.bottom;
+};
+
+const isClickInRect = (event, rect) => {
+	let x;
+	let y;
+
+	if (event.touches) {
+		const touch = event.touches[0];
+		x = touch.clientX;
+		y = touch.clientY;
+	} else {
+		x = event.clientX;
+		y = event.clientY;
+	}
+
+	return isPointInRect(x, y, rect);
+};
+
+const getClosedPopupParent = el => {
+	const parent = el.parentElement || (el.getRootNode && el.getRootNode().host);
+
+	if (parent && ((parent.showAt && parent.isUI5Element) || (parent.open && parent.isUI5Element) || parent === document.documentElement)) {
+		return parent;
+	}
+
+	return getClosedPopupParent(parent);
+};
+
+const getNextZIndex = () => {
+	const OpenUI5Support = getFeature("OpenUI5Support");
+	if (OpenUI5Support && OpenUI5Support.isLoaded()) { // use OpenUI5 for getting z-index values, if loaded
+		return OpenUI5Support.getNextZIndex();
+	}
+
+	PopupUtilsData.currentZIndex += 2;
+	return PopupUtilsData.currentZIndex;
+};
+
+const getCurrentZIndex = () => {
+	return PopupUtilsData.currentZIndex;
+};
+
+export {
+	getFocusedElement,
+	isClickInRect,
+	getClosedPopupParent,
+	getNextZIndex,
+	getCurrentZIndex,
+	isFocusedElementWithinNode,
+};

package/src/util/SlotsHelper.js

@@ -0,0 +1,43 @@
+/**
+ * Determines the slot to which a node should be assigned
+ * @param node Text node or HTML element
+ * @returns {string}
+ */
+const getSlotName = 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 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);
+	}
+
+	return [el];
+};
+
+const getSlottedElementsList = elList => {
+	const reducer = (acc, curr) => acc.concat(getSlottedElements(curr));
+	return elList.reduce(reducer, []);
+};
+
+export {
+	getSlotName,
+	isSlot,
+	getSlottedElements,
+	getSlottedElementsList,
+};

package/src/util/TabbableElements.js

@@ -12,8 +12,12 @@ const getLastTabbableElement = node => {
 const getTabbables = (nodes, tabbables) => {
 	const tabbablesNodes = tabbables || [];
 
+	if (!nodes) {
+		return tabbablesNodes;
+	}
+
 	Array.from(nodes).forEach(currentNode => {
-		if (currentNode.nodeType === Node.TEXT_NODE) {
+		if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE || currentNode.hasAttribute("data-sap-no-tab-ref")) {
 			return;
 		}
 

package/src/util/arraysAreEqual.js

@@ -0,0 +1,15 @@
+const arraysAreEqual = (arr1, arr2) => {
+	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.js

@@ -0,0 +1,12 @@
+/**
+ * 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, min, max) => {
+	return Math.min(Math.max(val, min), max);
+};
+
+export default clamp;

package/src/util/createLinkInHead.js

@@ -0,0 +1,19 @@
+/**
+ * Creates a <link> tag in the <head> tag
+ * @param href - the CSS
+ * @param attributes - optional attributes to add to the tag
+ * @returns {HTMLElement}
+ */
+const createLinkInHead = (href, attributes = {}) => {
+	const link = document.createElement("link");
+	link.type = "text/css";
+	link.rel = "stylesheet";
+
+	Object.entries(attributes).forEach(pair => link.setAttribute(...pair));
+
+	link.href = href;
+	document.head.appendChild(link);
+	return link;
+};
+
+export default createLinkInHead;

package/src/util/debounce.js

@@ -0,0 +1,17 @@
+/**
+ * Delays function execution by given threshold.
+ * @param fn {Function}
+ * @param delay {Integer}
+ */
+
+let debounceInterval = null;
+
+const debounce = (fn, delay) => {
+	clearTimeout(debounceInterval);
+	debounceInterval = setTimeout(() => {
+		debounceInterval = null;
+		fn();
+	}, delay);
+};
+
+export default debounce;

package/src/util/detectNavigatorLanguage.js

@@ -1,3 +1,5 @@
+import { DEFAULT_LANGUAGE } from "../generated/AssetParameters.js";
+
 export default () => {
 	const browserLanguages = navigator.languages;
 
@@ -7,5 +9,5 @@ export default () => {
 
 	const rawLocale = (browserLanguages && browserLanguages[0]) || navigatorLanguage() || navigator.userLanguage || navigator.browserLanguage;
 
-	return rawLocale || "en";
+	return rawLocale || DEFAULT_LANGUAGE;
 };

package/src/util/escapeRegex.js

@@ -0,0 +1,10 @@
+/**
+ * Escape a regular expression text so that it can be used in a regular expression.
+ * @param {string} text The string to be interpreted literally
+ * @returns Regular expression string to pass to regex
+ */
+function escapeRegex(text) {
+	return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export default escapeRegex;

package/src/util/findNodeOwner.js

@@ -0,0 +1,35 @@
+const findNodeOwner = node => {
+	if (!(node instanceof HTMLElement)) {
+		throw new Error("Argument node should be of type HTMLElement");
+	}
+
+	const ownerTypes = [HTMLHtmlElement, HTMLIFrameElement];
+	let currentShadowRootFlag = true;
+	let currentCustomElementFlag = true;
+
+	while (node) {
+		if (node.toString() === "[object ShadowRoot]") {
+			// Web Component
+			// or the shadow root of web component with attached shadow root
+			if (currentShadowRootFlag) {
+				currentShadowRootFlag = false;
+			}
+			if (!currentCustomElementFlag && !currentShadowRootFlag) {
+				return node;
+			}
+		} else if (node.tagName && node.tagName.indexOf("-") > -1) {
+			if (currentCustomElementFlag) {
+				currentCustomElementFlag = false;
+			} else {
+				return node;
+			}
+		} else if (ownerTypes.indexOf(node.constructor) > -1) {
+			// Document or Iframe reached
+			return node;
+		}
+
+		node = node.parentNode || node.host;
+	}
+};
+
+export default findNodeOwner;

package/src/util/generateHighlightedMarkup.js

@@ -0,0 +1,42 @@
+import escapeRegex from "./escapeRegex.js";
+import encodeXML from "../sap/base/security/encodeXML.js";
+
+// utility to replace all occurances of a string
+function replaceAll(text, find, replace, caseInsensitive) {
+	return text.replace(new RegExp(escapeRegex(find), `${caseInsensitive ? "i" : ""}g`), replace);
+}
+
+/**
+ * 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, textToHighlight) {
+	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 => {
+		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 => `${openToken}${match}${closeToken}`, true));
+	// 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);
+	});
+	return result;
+}
+
+export default generateHighlightedMarkup;

package/src/util/getActiveElement.js

@@ -0,0 +1,11 @@
+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.js

@@ -0,0 +1,10 @@
+const getClassCopy = (klass, constructorCallback) => {
+	return class classCopy extends klass {
+		constructor() {
+			super();
+			constructorCallback && constructorCallback();
+		}
+	};
+};
+
+export default getClassCopy;

package/src/util/getEffectiveContentDensity.js

@@ -0,0 +1,5 @@
+const GLOBAL_CONTENT_DENSITY_CSS_VAR = "--_ui5_content_density";
+
+const getEffectiveContentDensity = el => getComputedStyle(el).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR);
+
+export default getEffectiveContentDensity;

package/src/util/getFileExtension.js

@@ -0,0 +1,21 @@
+/**
+ * ""                        -> ""
+ * "noExtension"             -> ""
+ * "file.txt"                -> ".txt"
+ * "file.with.many.dots.doc" -> ".doc"
+ * ".gitignore"              -> ""
+ *
+ * @param fileName - the file name
+ * @returns {string}
+ */
+const getFileExtension = fileName => {
+	const dotPos = fileName.lastIndexOf(".");
+
+	if (dotPos < 1) {
+		return "";
+	}
+
+	return fileName.slice(dotPos);
+};
+
+export default getFileExtension;

package/src/util/getSingletonElementInstance.js

@@ -0,0 +1,13 @@
+const getSingletonElementInstance = (tag, parentElement = 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/isElementInView.js

@@ -0,0 +1,15 @@
+/**
+ * Determines if the element is within the viewport.
+ * @param el {HTMLElement}
+ */
+const isElementInView = el => {
+	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/isNodeHidden.js

@@ -3,11 +3,7 @@ const isNodeHidden = node => {
 		return false;
 	}
 
-	const rect = node.getBoundingClientRect();
-
-	return (node.offsetWidth <= 0 && node.offsetHeight <= 0)
-		|| node.style.visibility === "hidden"
-		|| (rect.width === 0 && 0 && rect.height === 0);
+	return (node.offsetWidth <= 0 && node.offsetHeight <= 0) || (node.style && node.style.visibility === "hidden");
 };
 
 export default isNodeHidden;

package/src/util/isNodeTabbable.js

@@ -15,14 +15,14 @@ const isNodeTabbable = node => {
 		return false;
 	}
 
-	if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
-		return !node.disabled;
-	}
-
 	const tabIndex = node.getAttribute("tabindex");
 	if (tabIndex !== null && tabIndex !== undefined) {
 		return parseInt(tabIndex) >= 0;
 	}
+
+	if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
+		return !node.disabled;
+	}
 };
 
 export default isNodeTabbable;

package/src/util/isValidPropertyName.js

@@ -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") {
+	if (allowList.includes(name) || name.startsWith("aria")) {
 		return true;
 	}
 	const classes = [

package/src/util/setToArray.js

@@ -0,0 +1,10 @@
+// This is needed as IE11 doesn't have Set.prototype.keys/values/entries, so [...mySet.values()] is not an option
+const setToArray = s => {
+	const arr = [];
+	s.forEach(item => {
+		arr.push(item);
+	});
+	return arr;
+};
+
+export default setToArray;

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/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/boot.js

@@ -1,32 +0,0 @@
-import whenDOMReady from "./util/whenDOMReady.js";
-import insertFontFace from "./FontFace.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 OpenUI5Support = getFeature("OpenUI5Support");
-
-const boot = () => {
-	if (bootPromise) {
-		return bootPromise;
-	}
-
-	bootPromise = new Promise(async resolve => {
-		if (OpenUI5Support) {
-			await OpenUI5Support.init();
-		}
-
-		await whenDOMReady();
-		await applyTheme(getTheme());
-		OpenUI5Support && OpenUI5Support.attachListeners();
-		insertFontFace();
-		await whenPolyfillLoaded();
-		resolve();
-	});
-
-	return bootPromise;
-};
-
-export default boot;