@ui5/webcomponents-base 0.0.0-a3eca7ade → 0.0.0-a7032d86e

package/src/util/ColorConversion.ts

@@ -0,0 +1,399 @@
+/**
+ *
+ * @param {String} color Color in one of the following formats: RGBA or HEX
+ */
+
+type ColorHSL = {
+	h: number,
+	s: number,
+	l: number,
+};
+
+type ColorRGB = {
+	r: number,
+	b: number,
+	g: number,
+};
+
+/**
+ * Map of CSS colors to hex representation
+ */
+enum CSSColors {
+	aliceblue = "f0f8ff",
+	antiquewhite = "faebd7",
+	aqua = "00ffff",
+	aquamarine = "7fffd4",
+	azure = "f0ffff",
+	beige = "f5f5dc",
+	bisque = "ffe4c4",
+	black = "000000",
+	blanchedalmond = "ffebcd",
+	blue = "0000ff",
+	blueviolet = "8a2be2",
+	brown = "a52a2a",
+	burlywood = "deb887",
+	cadetblue = "5f9ea0",
+	chartreuse = "7fff00",
+	chocolate = "d2691e",
+	coral = "ff7f50",
+	cornflowerblue = "6495ed",
+	cornsilk = "fff8dc",
+	crimson = "dc143c",
+	cyan = "00ffff",
+	darkblue = "00008b",
+	darkcyan = "008b8b",
+	darkgoldenrod = "b8860b",
+	darkgray = "a9a9a9",
+	darkgrey = "a9a9a9",
+	darkgreen = "006400",
+	darkkhaki = "bdb76b",
+	darkmagenta = "8b008b",
+	darkolivegreen = "556b2f",
+	darkorange = "ff8c00",
+	darkorchid = "9932cc",
+	darkred = "8b0000",
+	darksalmon = "e9967a",
+	darkseagreen = "8fbc8f",
+	darkslateblue = "483d8b",
+	darkslategray = "2f4f4f",
+	darkslategrey = "2f4f4f",
+	darkturquoise = "00ced1",
+	darkviolet = "9400d3",
+	deeppink = "ff1493",
+	deepskyblue = "00bfff",
+	dimgray = "696969",
+	dimgrey = "696969",
+	dodgerblue = "1e90ff",
+	firebrick = "b22222",
+	floralwhite = "fffaf0",
+	forestgreen = "228b22",
+	fuchsia = "ff00ff",
+	gainsboro = "dcdcdc",
+	ghostwhite = "f8f8ff",
+	gold = "ffd700",
+	goldenrod = "daa520",
+	gray = "808080",
+	grey = "808080",
+	green = "008000",
+	greenyellow = "adff2f",
+	honeydew = "f0fff0",
+	hotpink = "ff69b4",
+	indianred = "cd5c5c",
+	indigo = "4b0082",
+	ivory = "fffff0",
+	khaki = "f0e68c",
+	lavender = "e6e6fa",
+	lavenderblush = "fff0f5",
+	lawngreen = "7cfc00",
+	lemonchiffon = "fffacd",
+	lightblue = "add8e6",
+	lightcoral = "f08080",
+	lightcyan = "e0ffff",
+	lightgoldenrodyellow = "fafad2",
+	lightgray = "d3d3d3",
+	lightgrey = "d3d3d3",
+	lightgreen = "90ee90",
+	lightpink = "ffb6c1",
+	lightsalmon = "ffa07a",
+	lightseagreen = "20b2aa",
+	lightskyblue = "87cefa",
+	lightslategray = "778899",
+	lightslategrey = "778899",
+	lightsteelblue = "b0c4de",
+	lightyellow = "ffffe0",
+	lime = "00ff00",
+	limegreen = "32cd32",
+	linen = "faf0e6",
+	magenta = "ff00ff",
+	maroon = "800000",
+	mediumaquamarine = "66cdaa",
+	mediumblue = "0000cd",
+	mediumorchid = "ba55d3",
+	mediumpurple = "9370db",
+	mediumseagreen = "3cb371",
+	mediumslateblue = "7b68ee",
+	mediumspringgreen = "00fa9a",
+	mediumturquoise = "48d1cc",
+	mediumvioletred = "c71585",
+	midnightblue = "191970",
+	mintcream = "f5fffa",
+	mistyrose = "ffe4e1",
+	moccasin = "ffe4b5",
+	navajowhite = "ffdead",
+	navy = "000080",
+	oldlace = "fdf5e6",
+	olive = "808000",
+	olivedrab = "6b8e23",
+	orange = "ffa500",
+	orangered = "ff4500",
+	orchid = "da70d6",
+	palegoldenrod = "eee8aa",
+	palegreen = "98fb98",
+	paleturquoise = "afeeee",
+	palevioletred = "db7093",
+	papayawhip = "ffefd5",
+	peachpuff = "ffdab9",
+	peru = "cd853f",
+	pink = "ffc0cb",
+	plum = "dda0dd",
+	powderblue = "b0e0e6",
+	purple = "800080",
+	red = "ff0000",
+	rosybrown = "bc8f8f",
+	royalblue = "4169e1",
+	saddlebrown = "8b4513",
+	salmon = "fa8072",
+	sandybrown = "f4a460",
+	seagreen = "2e8b57",
+	seashell = "fff5ee",
+	sienna = "a0522d",
+	silver = "c0c0c0",
+	skyblue = "87ceeb",
+	slateblue = "6a5acd",
+	slategray = "708090",
+	slategrey = "708090",
+	snow = "fffafa",
+	springgreen = "00ff7f",
+	steelblue = "4682b4",
+	tan = "d2b48c",
+	teal = "008080",
+	thistle = "d8bfd8",
+	tomato = "ff6347",
+	turquoise = "40e0d0",
+	violet = "ee82ee",
+	wheat = "f5deb3",
+	white = "ffffff",
+	whitesmoke = "f5f5f5",
+	yellow = "ffff00",
+	yellowgreen = "9acd32",
+	transparent = "00000000",
+}
+
+const getRGBColor = (color: string): ColorRGB => {
+	if (color.startsWith("rgba")) {
+		return RGBAToRGB(color);
+	}
+
+	if (color.startsWith("rgb")) {
+		return RGBStringToRGBObject(color);
+	}
+
+	// HEX
+	if (color.indexOf("#") === 0) {
+		// Shorthand Syntax
+		if (color.length === 4) {
+			color = `${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`;
+		} else {
+			color = color.slice(1, color.length);
+		}
+	}
+
+	// Css Color
+	if (color in CSSColors) {
+		color = CSSColors[color as keyof typeof CSSColors];
+	}
+
+	return HEXToRGB(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: "rgba(0, 0, 0, 1)
+ */
+const RGBAToRGB = (color: string): ColorRGB => {
+	const openingBracketIndex = color.indexOf("("),
+		commasIndexes = [];
+
+	for (let i = 0; i < color.length; i++) {
+		if (color[i] === ",") {
+			commasIndexes.push(i);
+		}
+	}
+
+	return {
+		r: parseInt(color.slice(openingBracketIndex + 1, commasIndexes[0]).trim()),
+		g: parseInt(color.slice(commasIndexes[0] + 1, commasIndexes[1]).trim()),
+		b: parseInt(color.slice(commasIndexes[1] + 1, commasIndexes[2]).trim()),
+	};
+};
+
+/**
+ * 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 RGBStringToRGBObject = (color: string): ColorRGB => {
+	const openingBracketIndex = color.indexOf("("),
+		closingBraketIndex = color.indexOf(")"),
+		commasIndexes = [];
+
+	for (let i = 0; i < color.length; i++) {
+		if (color[i] === ",") {
+			commasIndexes.push(i);
+		}
+	}
+
+	return {
+		r: parseInt(color.slice(openingBracketIndex + 1, commasIndexes[0]).trim()),
+		g: parseInt(color.slice(commasIndexes[0] + 1, commasIndexes[1]).trim()),
+		b: parseInt(color.slice(commasIndexes[1] + 1, closingBraketIndex).trim()),
+	};
+};
+
+const HSLToRGB = (color: ColorHSL): ColorRGB => {
+	// Formula taken from https://www.rapidtables.com/convert/color/hsl-to-rgb.html
+	const C = (1 - Math.abs((2 * color.l) - 1)) * color.s,
+		X = C * (1 - Math.abs(((color.h / 60) % 2) - 1)),
+		m = color.l - C / 2;
+
+	let tempColor: ColorRGB;
+	switch (Math.round(color.h / 60)) {
+	// 0 ≤ H < 60
+	case 0:
+		tempColor = {
+			r: C,
+			g: X,
+			b: 0,
+		};
+		break;
+
+	// 60 ≤ H < 120
+	case 1:
+		tempColor = {
+			r: X,
+			g: C,
+			b: 0,
+		};
+		break;
+
+	// 120 ≤ H < 180
+	case 2:
+		tempColor = {
+			r: 0,
+			g: C,
+			b: X,
+		};
+		break;
+
+	// 180 ≤ H < 240
+	case 3:
+		tempColor = {
+			r: 0,
+			g: X,
+			b: C,
+		};
+		break;
+
+	// 240 ≤ H < 300
+	case 4:
+		tempColor = {
+			r: X,
+			g: 0,
+			b: C,
+		};
+		break;
+
+	// 300 ≤ H < 360
+	default:
+		tempColor = {
+			r: C,
+			g: 0,
+			b: X,
+		};
+	}
+
+	return {
+		r: Math.floor((tempColor.r + m) * 255),
+		g: Math.floor((tempColor.g + m) * 255),
+		b: Math.floor((tempColor.b + m) * 255),
+	};
+};
+
+const HEXToRGB = (hex: string): ColorRGB => {
+	// Please make sure you pass a valid 6 digit hex color
+	// In the implementation of this method we assume that the hex argument is a 6 digit valid hex color
+
+	return {
+		r: parseInt(hex.substr(0, 2), 16),
+		g: parseInt(hex.substr(2, 2), 16),
+		b: parseInt(hex.substr(4, 2), 16),
+	};
+};
+
+/**
+ * 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: ColorRGB): string => {
+	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: ColorRGB): ColorHSL => {
+	const R = color.r / 255,
+		G = color.g / 255,
+		B = color.b / 255,
+		max = Math.max(R, G, B),
+		min = Math.min(R, G, B),
+		delta = max - min;
+
+	let h = 0,
+		s;
+
+	// Hue calculation
+	if (delta === 0) {
+		h = 0;
+	} else if (max === R) {
+		h = 60 * (((G - B) / delta) % 6);
+	} else if (max === G) {
+		h = 60 * (((B - R) / delta) + 2);
+	} else if (max === B) {
+		h = 60 * (((R - G) / delta) + 4);
+	}
+
+	// Lightness calculation
+	const l = (max + min) / 2;
+
+	// Saturation calculation
+	if (delta === 0) {
+		s = 0;
+	} else {
+		s = delta / (1 - Math.abs(2 * l - 1));
+	}
+
+	return {
+		h,
+		s,
+		l,
+	};
+};
+
+export {
+	getRGBColor,
+	HSLToRGB,
+	HEXToRGB,
+	RGBToHSL,
+	RGBStringToRGBObject,
+	RGBtoHEX,
+};
+
+export type {
+	ColorHSL,
+	ColorRGB,
+};

package/src/util/{FetchHelper.js → FetchHelper.ts}

@@ -1,27 +1,27 @@
-const fetchPromises = new Map();
-const jsonPromises = new Map();
-const textPromises = new Map();
+const fetchPromises = new Map<string, Promise<Response>>();
+const jsonPromises = new Map<string, Promise<any>>();
+const textPromises = new Map<string, Promise<string>>();
 
-const fetchTextOnce = async url => {
+const fetchTextOnce = async (url: string) => {
 	if (!fetchPromises.get(url)) {
 		fetchPromises.set(url, fetch(url));
 	}
 	const response = await fetchPromises.get(url);
 
-	if (!textPromises.get(url)) {
+	if (response && !textPromises.get(url)) {
 		textPromises.set(url, response.text());
 	}
 
 	return textPromises.get(url);
 };
 
-const fetchJsonOnce = async url => {
+const fetchJsonOnce = async (url: string) => {
 	if (!fetchPromises.get(url)) {
 		fetchPromises.set(url, fetch(url));
 	}
 	const response = await fetchPromises.get(url);
 
-	if (!jsonPromises.get(url)) {
+	if (response && !jsonPromises.get(url)) {
 		jsonPromises.set(url, response.json());
 	}
 

package/src/util/FocusableElements.ts

@@ -0,0 +1,82 @@
+import isElementHidden from "./isElementHidden.js";
+import isElementClickable from "./isElementClickable.js";
+import { instanceOfUI5Element } from "../UI5Element.js";
+
+type FocusableElementPromise = Promise<HTMLElement | null>;
+
+const isFocusTrap = (el: HTMLElement) => {
+	return el.hasAttribute("data-ui5-focus-trap");
+};
+
+const getFirstFocusableElement = async (container: HTMLElement, startFromContainer?: boolean): FocusableElementPromise => {
+	if (!container || isElementHidden(container)) {
+		return null;
+	}
+
+	return findFocusableElement(container, true, startFromContainer);
+};
+
+const getLastFocusableElement = async (container: HTMLElement, startFromContainer?: boolean): FocusableElementPromise => {
+	if (!container || isElementHidden(container)) {
+		return null;
+	}
+
+	return findFocusableElement(container, false, startFromContainer);
+};
+
+const isElemFocusable = (el: HTMLElement) => {
+	return el.hasAttribute("data-ui5-focus-redirect") || !isElementHidden(el);
+};
+
+const findFocusableElement = async (container: HTMLElement, forward: boolean, startFromContainer?: boolean): FocusableElementPromise => {
+	let child: HTMLElement | undefined;
+
+	if (container.shadowRoot) {
+		child = forward ? container.shadowRoot.firstChild as HTMLElement : container.shadowRoot.lastChild as HTMLElement;
+	} else if (container instanceof HTMLSlotElement && container.assignedNodes()) {
+		const assignedElements = container.assignedNodes();
+		child = forward ? assignedElements[0] as HTMLElement : assignedElements[assignedElements.length - 1] as HTMLElement;
+	} else if (startFromContainer) {
+		child = container;
+	} else {
+		child = forward ? container.firstElementChild as HTMLElement : container.lastElementChild as HTMLElement;
+	}
+
+	let focusableDescendant;
+
+	/* eslint-disable no-await-in-loop */
+
+	while (child) {
+		const originalChild: HTMLElement | undefined = child;
+
+		if (instanceOfUI5Element(child)) {
+			child = await child.getFocusDomRefAsync();
+		}
+
+		if (!child) {
+			return null;
+		}
+
+		if (child.nodeType === 1 && isElemFocusable(child) && !isFocusTrap(child)) {
+			if (isElementClickable(child)) {
+				return (child && typeof child.focus === "function") ? child : null;
+			}
+
+			focusableDescendant = await findFocusableElement(child, forward);
+			if (focusableDescendant) {
+				return (focusableDescendant && typeof focusableDescendant.focus === "function") ? focusableDescendant : null;
+			}
+		}
+
+		child = forward ? originalChild.nextSibling as HTMLElement : originalChild.previousSibling as HTMLElement;
+	}
+
+	/* eslint-enable no-await-in-loop */
+
+	return null;
+};
+
+export {
+	getFirstFocusableElement,
+	getLastFocusableElement,
+};

package/src/util/{HTMLSanitizer.js → HTMLSanitizer.ts}

@@ -1,4 +1,6 @@
+// @ts-ignore
 import sanitizeHTML from "../sap/base/security/sanitizeHTML.js";
+// @ts-ignore
 import URLListValidator from "../sap/base/security/URLListValidator.js";
 
 export {

package/src/util/{InvisibleMessage.js → InvisibleMessage.ts}

@@ -2,10 +2,10 @@ import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
 import getSingletonElementInstance from "./getSingletonElementInstance.js";
 import { attachBoot } from "../Boot.js";
 
-let politeSpan;
-let assertiveSpan;
+let politeSpan: HTMLElement;
+let assertiveSpan: HTMLElement;
 
-const setOutOfViewportStyles = el => {
+const setOutOfViewportStyles = (el: HTMLElement) => {
 	el.style.position = "absolute";
 	el.style.clip = "rect(1px,1px,1px,1px)";
 	el.style.userSelect = "none";
@@ -41,10 +41,11 @@ attachBoot(() => {
 /**
  * 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.
+ * @param { string } message String to be announced by the screen reader.
+ * @param { InvisibleMessageMode } mode The mode to be inserted in the aria-live attribute.
+ * @public
  */
-const announce = (message, mode) => {
+const announce = (message: string, mode: InvisibleMessageMode) => {
 	// If no type is presented, fallback to polite announcement.
 	const span = mode === InvisibleMessageMode.Assertive ? assertiveSpan : politeSpan;
 
@@ -55,6 +56,14 @@ const announce = (message, mode) => {
 	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.ts

@@ -0,0 +1,112 @@
+import getSharedResource from "../getSharedResource.js";
+import { getFeature } from "../FeaturesRegistry.js";
+import getActiveElement from "./getActiveElement.js";
+import type OpenUI5Support from "../features/OpenUI5Support.js";
+
+type PopupUtilsData = {
+	currentZIndex: number
+};
+
+const popupUtilsData = getSharedResource<PopupUtilsData>("PopupUtilsData", { currentZIndex: 100 });
+
+const getFocusedElement = () => {
+	const element = getActiveElement() as HTMLElement;
+	return (element && typeof element.focus === "function") ? element : null;
+};
+
+const isFocusedElementWithinNode = (node: HTMLElement) => {
+	const fe = getFocusedElement();
+
+	if (fe) {
+		return isNodeContainedWithin(node, fe);
+	}
+
+	return false;
+};
+
+const isNodeContainedWithin = (parent: HTMLElement, child: HTMLElement): boolean => {
+	let currentNode: HTMLElement | undefined = parent;
+
+	if (currentNode.shadowRoot) {
+		const children = Array.from(currentNode.shadowRoot.children) as Array<HTMLElement>;
+		currentNode = children.find(n => n.localName !== "style");
+
+		if (!currentNode) {
+			return false;
+		}
+	}
+
+	if (currentNode === child) {
+		return true;
+	}
+
+	const childNodes = currentNode.localName === "slot" ? (currentNode as HTMLSlotElement).assignedNodes() : currentNode.children;
+
+	if (childNodes) {
+		return Array.from(childNodes).some(n => isNodeContainedWithin(n as HTMLElement, child));
+	}
+
+	return false;
+};
+
+const isPointInRect = (x: number, y: number, rect: DOMRect) => {
+	return x >= rect.left && x <= rect.right
+		&& y >= rect.top && y <= rect.bottom;
+};
+
+const isClickInRect = (e: MouseEvent | TouchEvent, rect: DOMRect) => {
+	let x;
+	let y;
+
+	if (e instanceof MouseEvent) {
+		x = e.clientX;
+		y = e.clientY;
+	} else {
+		const touch = e.touches[0];
+		x = touch.clientX;
+		y = touch.clientY;
+	}
+
+	return isPointInRect(x, y, rect);
+};
+
+interface PopupInterface { // Refactor: replace with Popup.js
+	_show: () => void,
+	open: boolean,
+}
+function instanceOfPopup(object: any): object is PopupInterface {
+	return "isUI5Element" in object && "_show" in object;
+}
+
+const getClosedPopupParent = (el: HTMLElement): HTMLElement => {
+	const parent = el.parentElement || (el.getRootNode && (el.getRootNode() as ShadowRoot).host);
+
+	if (parent && ((instanceOfPopup(parent) || parent === document.documentElement))) {
+		return parent as HTMLElement;
+	}
+
+	return getClosedPopupParent(parent as HTMLElement);
+};
+
+const getNextZIndex = () => {
+	const openUI5Support = getFeature<typeof OpenUI5Support>("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,
+};