@ui5/webcomponents-base 0.0.0-cc312800a → 0.0.0-cf50976ce

package/src/util/ColorConversion.js

@@ -163,7 +163,7 @@ const getRGBColor = color => {
 	}
 
 	if (color.startsWith("rgb")) {
-		return RGBToRGB(color);
+		return RGBStringToRGBObject(color);
 	}
 
 	// HEX
@@ -209,7 +209,7 @@ const RGBAToRGB = color => {
  * Return an object with the properties for each of the main colors(red, green, blue)
  * @param {String} color Receives a color in the following format: "rgb(0, 0, 0)
  */
-const RGBToRGB = color => {
+const RGBStringToRGBObject = color => {
 	const openingBracketIndex = color.indexOf("("),
 		closingBraketIndex = color.indexOf(")"),
 		commasIndexes = [];
@@ -319,6 +319,32 @@ const HEXToRGB = hex => {
 	return rgbValues;
 };
 
+/**
+ * Returns the hex value of the color as string
+ * @param {Object} color Receives an object with the properties for each of the main colors(r, g, b)
+ */
+const RGBtoHEX = color => {
+	const hexMap = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E"];
+	let hexValue = "#";
+
+	let divisionNumber = color.r / 16;
+	let remainder = color.r % 16;
+	hexValue += String(hexMap[Math.floor(divisionNumber)]);
+	hexValue += String(hexMap[remainder]);
+
+	divisionNumber = color.g / 16;
+	remainder = color.g % 16;
+	hexValue += String(hexMap[Math.floor(divisionNumber)]);
+	hexValue += String(hexMap[remainder]);
+
+	divisionNumber = color.b / 16;
+	remainder = color.b % 16;
+	hexValue += String(hexMap[Math.floor(divisionNumber)]);
+	hexValue += String(hexMap[remainder]);
+
+	return hexValue;
+};
+
 const RGBToHSL = (color = {
 	r: undefined,
 	g: undefined,
@@ -367,4 +393,6 @@ export {
 	HSLToRGB,
 	HEXToRGB,
 	RGBToHSL,
+	RGBStringToRGBObject,
+	RGBtoHEX,
 };

package/src/util/FocusableElements.js

@@ -5,23 +5,27 @@ const isFocusTrap = el => {
 	return el.hasAttribute("data-ui5-focus-trap");
 };
 
-const getFirstFocusableElement = async container => {
+const getFirstFocusableElement = async (container, startFromContainer) => {
 	if (!container || isNodeHidden(container)) {
 		return null;
 	}
 
-	return findFocusableElement(container, true);
+	return findFocusableElement(container, true, startFromContainer);
 };
 
-const getLastFocusableElement = async container => {
+const getLastFocusableElement = async (container, startFromContainer) => {
 	if (!container || isNodeHidden(container)) {
 		return null;
 	}
 
-	return findFocusableElement(container, false);
+	return findFocusableElement(container, false, startFromContainer);
 };
 
-const findFocusableElement = async (container, forward) => {
+const isElemFocusable = el => {
+	return el.hasAttribute("data-ui5-focus-redirect") || !isNodeHidden(el);
+};
+
+const findFocusableElement = async (container, forward, startFromContainer) => {
 	let child;
 
 	if (container.shadowRoot) {
@@ -29,8 +33,10 @@ const findFocusableElement = async (container, forward) => {
 	} else if (container.assignedNodes && container.assignedNodes()) {
 		const assignedElements = container.assignedNodes();
 		child = forward ? assignedElements[0] : assignedElements[assignedElements.length - 1];
+	} else if (startFromContainer) {
+		child = container;
 	} else {
-		child = forward ? container.firstChild : container.lastChild;
+		child = forward ? container.firstElementChild : container.lastElementChild;
 	}
 
 	let focusableDescendant;
@@ -48,7 +54,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,69 @@
+import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
+import getSingletonElementInstance from "./getSingletonElementInstance.js";
+import { attachBoot } from "../Boot.js";
+
+let politeSpan;
+let assertiveSpan;
+
+const setOutOfViewportStyles = el => {
+	el.style.position = "absolute";
+	el.style.clip = "rect(1px,1px,1px,1px)";
+	el.style.userSelect = "none";
+	el.style.left = "-1000px";
+	el.style.top = "-1000px";
+	el.style.pointerEvents = "none";
+};
+
+attachBoot(() => {
+	if (politeSpan && assertiveSpan) {
+		return;
+	}
+
+	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");
+
+	setOutOfViewportStyles(politeSpan);
+	setOutOfViewportStyles(assertiveSpan);
+
+	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.
+ * @public
+ */
+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
+	}
+
+	// clear the span in order to avoid reading it out while in JAWS reading node
+	setTimeout(() => {
+		// ensure that we clear the text node only if no announce is made in the meantime
+		if (span.textContent === message) {
+			span.textContent = "";
+		}
+	}, 3000);
+};
+
+export default announce;

package/src/util/PopupUtils.js

@@ -62,7 +62,7 @@ const isClickInRect = (event, rect) => {
 const getClosedPopupParent = el => {
 	const parent = el.parentElement || (el.getRootNode && el.getRootNode().host);
 
-	if (parent && ((parent.openBy && parent.isUI5Element) || (parent.open && parent.isUI5Element) || parent === document.documentElement)) {
+	if (parent && ((parent.showAt && parent.isUI5Element) || (parent.open && parent.isUI5Element) || parent === document.documentElement)) {
 		return parent;
 	}
 

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;
 		}
 
@@ -27,6 +27,10 @@ const getTabbables = (nodes, tabbables) => {
 			currentNode = Array.from(children).find(node => node.tagName !== "STYLE");
 		}
 
+		if (!currentNode) {
+			return;
+		}
+
 		if (isNodeTabbable(currentNode)) {
 			tabbablesNodes.push(currentNode);
 		}

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

@@ -0,0 +1,5 @@
+const NO_SCROLLBAR_STYLE_CLASS = "ui5-content-native-scrollbars";
+
+const getEffectiveScrollbarStyle = () => document.body.classList.contains(NO_SCROLLBAR_STYLE_CLASS);
+
+export default getEffectiveScrollbarStyle;

package/src/util/getNormalizedTarget.js

@@ -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 => {
+	let element = target;
+
+	if (target.shadowRoot && target.shadowRoot.activeElement) {
+		element = target.shadowRoot.activeElement;
+	}
+
+	return element;
+};
+
+export default getNormalizedTarget;

package/src/util/isDefaultSlotProvided.js

@@ -0,0 +1,11 @@
+import { getSlotName } from "./SlotsHelper.js";
+
+const isDefaultSlotProvided = element => {
+	return Array.from(element.childNodes).filter(node => {
+		return node.nodeType !== Node.COMMENT_NODE
+		&& getSlotName(node) === "default"
+		&& (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0);
+	}).length > 0;
+};
+
+export default isDefaultSlotProvided;

package/src/util/isNodeHidden.js

@@ -3,7 +3,7 @@ const isNodeHidden = node => {
 		return false;
 	}
 
-	return (node.offsetWidth <= 0 && node.offsetHeight <= 0) || node.style.visibility === "hidden";
+	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/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/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;