@ui5/webcomponents-base 0.0.0-7e7d9ea6f → 0.0.0-81513ce21

package/src/util/ColorConversion.js

@@ -1,398 +0,0 @@
-/**
- *
- * @param {String} color Color in one of the following formats: RGBA or HEX
- */
-
-/**
- * Map of CSS colors to hex representation
- */
-const 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 => {
-	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 (Object.keys(CSSColors).includes(color)) {
-		color = CSSColors[color];
-	}
-
-	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 => {
-	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 => {
-	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 = {
-	h: undefined,
-	s: undefined,
-	l: undefined,
-}) => {
-	// 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 = {};
-	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 => {
-	// 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
-
-	const rgbValues = {
-		r: hex.substr(0, 2),
-		g: hex.substr(2, 2),
-		b: hex.substr(4, 2),
-	};
-
-	const rgbKeys = Object.keys(rgbValues);
-
-	rgbKeys.forEach(key => {
-		rgbValues[key] = parseInt(rgbValues[key], 16);
-	});
-
-	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,
-	b: undefined,
-}) => {
-	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,
-		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,
-};

package/src/util/FetchHelper.js

@@ -1,31 +0,0 @@
-const fetchPromises = new Map();
-const jsonPromises = new Map();
-const textPromises = new Map();
-
-const fetchTextOnce = async url => {
-	if (!fetchPromises.get(url)) {
-		fetchPromises.set(url, fetch(url));
-	}
-	const response = await fetchPromises.get(url);
-
-	if (!textPromises.get(url)) {
-		textPromises.set(url, response.text());
-	}
-
-	return textPromises.get(url);
-};
-
-const fetchJsonOnce = async url => {
-	if (!fetchPromises.get(url)) {
-		fetchPromises.set(url, fetch(url));
-	}
-	const response = await fetchPromises.get(url);
-
-	if (!jsonPromises.get(url)) {
-		jsonPromises.set(url, response.json());
-	}
-
-	return jsonPromises.get(url);
-};
-
-export { fetchTextOnce, fetchJsonOnce };

package/src/util/FocusableElements.js

@@ -1,79 +0,0 @@
-import isNodeHidden from "./isNodeHidden.js";
-import isNodeClickable from "./isNodeClickable.js";
-
-const isFocusTrap = el => {
-	return el.hasAttribute("data-ui5-focus-trap");
-};
-
-const getFirstFocusableElement = async (container, startFromContainer) => {
-	if (!container || isNodeHidden(container)) {
-		return null;
-	}
-
-	return findFocusableElement(container, true, startFromContainer);
-};
-
-const getLastFocusableElement = async (container, startFromContainer) => {
-	if (!container || isNodeHidden(container)) {
-		return null;
-	}
-
-	return findFocusableElement(container, false, startFromContainer);
-};
-
-const isElemFocusable = el => {
-	return el.hasAttribute("data-ui5-focus-redirect") || !isNodeHidden(el);
-};
-
-const findFocusableElement = async (container, forward, startFromContainer) => {
-	let child;
-
-	if (container.shadowRoot) {
-		child = forward ? container.shadowRoot.firstChild : container.shadowRoot.lastChild;
-	} 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.firstElementChild : container.lastElementChild;
-	}
-
-	let focusableDescendant;
-
-	/* eslint-disable no-await-in-loop */
-
-	while (child) {
-		const originalChild = child;
-
-		if (child.isUI5Element) {
-			child = await child.getFocusDomRefAsync();
-		}
-
-		if (!child) {
-			return null;
-		}
-
-		if (child.nodeType === 1 && isElemFocusable(child) && !isFocusTrap(child)) {
-			if (isNodeClickable(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 : originalChild.previousSibling;
-	}
-
-	/* eslint-enable no-await-in-loop */
-
-	return null;
-};
-
-export {
-	getFirstFocusableElement,
-	getLastFocusableElement,
-};

package/src/util/InvisibleMessage.js

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

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

@@ -1,43 +0,0 @@
-/**
- * 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,
-};