@ui5/webcomponents-base 0.0.0-deac3098a → 0.0.0-e0658a650

package/src/util/ColorConversion.js

@@ -1,370 +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 RGBToRGB(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 RGBToRGB = 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;
-};
-
-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,
-};

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

@@ -1,51 +0,0 @@
-import isNodeTabbable from "./isNodeTabbable.js";
-
-const getTabbableElements = node => {
-	return getTabbables(node.children);
-};
-
-const getLastTabbableElement = node => {
-	const tabbables = getTabbables(node.children);
-	return tabbables.length ? tabbables[tabbables.length - 1] : null;
-};
-
-const getTabbables = (nodes, tabbables) => {
-	const tabbablesNodes = tabbables || [];
-
-	if (!nodes) {
-		return tabbablesNodes;
-	}
-
-	Array.from(nodes).forEach(currentNode => {
-		if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE || currentNode.hasAttribute("data-sap-no-tab-ref")) {
-			return;
-		}
-
-		if (currentNode.shadowRoot) {
-			// get the root node of the ShadowDom (1st none style tag)
-			const children = currentNode.shadowRoot.children;
-			currentNode = Array.from(children).find(node => node.tagName !== "STYLE");
-		}
-
-		if (!currentNode) {
-			return;
-		}
-
-		if (isNodeTabbable(currentNode)) {
-			tabbablesNodes.push(currentNode);
-		}
-
-		if (currentNode.tagName === "SLOT") {
-			getTabbables(currentNode.assignedNodes(), tabbablesNodes);
-		} else {
-			getTabbables(currentNode.children, tabbablesNodes);
-		}
-	});
-
-	return tabbablesNodes;
-};
-
-export {
-	getTabbableElements,
-	getLastTabbableElement,
-};

package/src/util/escapeRegex.js

@@ -1,10 +0,0 @@
-/**
- * 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/findNodeOwner.js

@@ -1,35 +0,0 @@
-const findNodeOwner = node => {
-	if (!(node instanceof HTMLElement)) {
-		throw new Error("Argument node should be of type HTMLElement");
-	}
-
-	const ownerTypes = [HTMLHtmlElement, HTMLIFrameElement];
-	let currentShadowRootFlag = true;
-	let currentCustomElementFlag = true;
-
-	while (node) {
-		if (node.toString() === "[object ShadowRoot]") {
-			// Web Component
-			// or the shadow root of web component with attached shadow root
-			if (currentShadowRootFlag) {
-				currentShadowRootFlag = false;
-			}
-			if (!currentCustomElementFlag && !currentShadowRootFlag) {
-				return node;
-			}
-		} else if (node.tagName && node.tagName.indexOf("-") > -1) {
-			if (currentCustomElementFlag) {
-				currentCustomElementFlag = false;
-			} else {
-				return node;
-			}
-		} else if (ownerTypes.indexOf(node.constructor) > -1) {
-			// Document or Iframe reached
-			return node;
-		}
-
-		node = node.parentNode || node.host;
-	}
-};
-
-export default findNodeOwner;

package/src/util/getEffectiveContentDensity.js

@@ -1,5 +0,0 @@
-const GLOBAL_CONTENT_DENSITY_CSS_VAR = "--_ui5_content_density";
-
-const getEffectiveContentDensity = el => getComputedStyle(el).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR);
-
-export default getEffectiveContentDensity;

package/src/util/isDescendantOf.js

@@ -1,15 +0,0 @@
-const isDescendantOf = (klass, baseKlass, inclusive = false) => {
-	if (typeof klass !== "function" || typeof baseKlass !== "function") {
-		return false;
-	}
-	if (inclusive && klass === baseKlass) {
-		return true;
-	}
-	let parent = klass;
-	do {
-		parent = Object.getPrototypeOf(parent);
-	} while (parent !== null && parent !== baseKlass);
-	return parent === baseKlass;
-};
-
-export default isDescendantOf;

package/src/util/isNodeClickable.js

@@ -1,19 +0,0 @@
-const rClickable = /^(?:a|area)$/i;
-const rFocusable = /^(?:input|select|textarea|button)$/i;
-
-const isNodeClickable = node => {
-	if (node.disabled) {
-		return false;
-	}
-
-	const tabIndex = node.getAttribute("tabindex");
-	if (tabIndex !== null && tabIndex !== undefined) {
-		return parseInt(tabIndex) >= 0;
-	}
-
-	return rFocusable.test(node.nodeName)
-		|| (rClickable.test(node.nodeName)
-		&& node.href);
-};
-
-export default isNodeClickable;

package/src/util/isNodeHidden.js

@@ -1,9 +0,0 @@
-const isNodeHidden = node => {
-	if (node.nodeName === "SLOT") {
-		return false;
-	}
-
-	return (node.offsetWidth <= 0 && node.offsetHeight <= 0) || (node.style && node.style.visibility === "hidden");
-};
-
-export default isNodeHidden;