@ui5/webcomponents-base 0.0.0-6895c16dd → 0.0.0-6cb3eb0db

package/src/util/AriaLabelHelper.js

@@ -1,9 +1,9 @@
 import findNodeOwner from "./findNodeOwner.js";
 
 const getEffectiveAriaLabelText = el => {
-	if (!el.ariaLabelledby) {
-		if (el.ariaLabel) {
-			return el.ariaLabel;
+	if (!el.accessibleNameRef) {
+		if (el.accessibleName) {
+			return el.accessibleName;
 		}
 
 		return undefined;
@@ -19,7 +19,7 @@ const getEffectiveAriaLabelText = el => {
  * @param {String} readyIds (Optional) Defines a string of elements ids. The text of these elements will be returned. If used you should provide either el or ownerDocument
  */
 const getAriaLabelledByTexts = (el, ownerDocument, readyIds = "") => {
-	const ids = (readyIds && readyIds.split(" ")) || el.ariaLabelledby.split(" ");
+	const ids = (readyIds && readyIds.split(" ")) || el.accessibleNameRef.split(" ");
 	const owner = ownerDocument || findNodeOwner(el);
 	let result = "";
 

package/src/util/FocusableElements.js

@@ -21,6 +21,10 @@ const getLastFocusableElement = async container => {
 	return findFocusableElement(container, false);
 };
 
+const isElemFocusable = el => {
+	return el.hasAttribute("data-ui5-focus-redirect") || !isNodeHidden(el);
+};
+
 const findFocusableElement = async (container, forward) => {
 	let child;
 
@@ -48,7 +52,7 @@ const findFocusableElement = async (container, forward) => {
 			return null;
 		}
 
-		if (child.nodeType === 1 && !isNodeHidden(child) && !isFocusTrap(child)) {
+		if (child.nodeType === 1 && isElemFocusable(child) && !isFocusTrap(child)) {
 			if (isNodeClickable(child)) {
 				return (child && typeof child.focus === "function") ? child : null;
 			}

package/src/util/HTMLSanitizer.js

@@ -0,0 +1,7 @@
+import sanitizeHTML from "../sap/base/security/sanitizeHTML.js";
+import URLListValidator from "../sap/base/security/URLListValidator.js";
+
+export {
+	URLListValidator,
+	sanitizeHTML,
+};

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

@@ -17,7 +17,7 @@ const getTabbables = (nodes, tabbables) => {
 	}
 
 	Array.from(nodes).forEach(currentNode => {
-		if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE) {
+		if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE || currentNode.hasAttribute("data-sap-no-tab-ref")) {
 			return;
 		}
 

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/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/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/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/used-modules.txt

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

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

package/src/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/src/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/src/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;