@ui5/webcomponents-base 1.12.0-rc.1 → 1.12.0-rc.2

package/src/util/ColorConversion.ts

@@ -1,399 +0,0 @@
-/**
- *
- * @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.ts

@@ -1,31 +0,0 @@
-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: string) => {
-	if (!fetchPromises.get(url)) {
-		fetchPromises.set(url, fetch(url));
-	}
-	const response = await fetchPromises.get(url);
-
-	if (response && !textPromises.get(url)) {
-		textPromises.set(url, response.text());
-	}
-
-	return textPromises.get(url);
-};
-
-const fetchJsonOnce = async (url: string) => {
-	if (!fetchPromises.get(url)) {
-		fetchPromises.set(url, fetch(url));
-	}
-	const response = await fetchPromises.get(url);
-
-	if (response && !jsonPromises.get(url)) {
-		jsonPromises.set(url, response.json());
-	}
-
-	return jsonPromises.get(url);
-};
-
-export { fetchTextOnce, fetchJsonOnce };

package/src/util/FocusableElements.ts

@@ -1,92 +0,0 @@
-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;
-	let assignedElements;
-	let currentIndex = -1;
-
-	if (container.shadowRoot) {
-		child = forward ? container.shadowRoot.firstChild as HTMLElement : container.shadowRoot.lastChild as HTMLElement;
-	} else if (container instanceof HTMLSlotElement && container.assignedNodes()) {
-		assignedElements = container.assignedNodes();
-		currentIndex = forward ? 0 : assignedElements.length - 1;
-		child = assignedElements[currentIndex] 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;
-
-		// If the child element is not part of the currently assigned element,
-		// we have to check the next element assigned to the slot or continue with the next sibling of the slot,
-		// otherwise, the nextSibling is the next element inside the light DOM
-		if (assignedElements && !assignedElements[currentIndex].contains(child)) {
-			child = assignedElements[++currentIndex] as HTMLElement;
-		}
-	}
-
-	/* eslint-enable no-await-in-loop */
-
-	return null;
-};
-
-export {
-	getFirstFocusableElement,
-	getLastFocusableElement,
-};

package/src/util/HTMLSanitizer.ts

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

package/src/util/InvisibleMessage.ts

@@ -1,69 +0,0 @@
-import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
-import getSingletonElementInstance from "./getSingletonElementInstance.js";
-import { attachBoot } from "../Boot.js";
-
-let politeSpan: HTMLElement;
-let assertiveSpan: HTMLElement;
-
-const setOutOfViewportStyles = (el: HTMLElement) => {
-	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 { InvisibleMessageMode } mode The mode to be inserted in the aria-live attribute.
- * @public
- */
-const announce = (message: string, mode: InvisibleMessageMode) => {
-	// 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.ts

@@ -1,112 +0,0 @@
-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,
-};