@ui5/webcomponents-base 0.0.0-4b9b0ab7c → 0.0.0-4e88b8243

package/src/util/AriaLabelHelper.ts

@@ -1,218 +0,0 @@
-import UI5Element, { ChangeInfo } from "../UI5Element.js";
-
-type InvalidateCallback = (changeInfo: ChangeInfo) => void;
-type MutationCallback = () => void;
-type AssociatedElement = {
-	observer: MutationObserver | null;
-	callbacks: Array<MutationCallback>;
-};
-type RegisteredElement = {
-	host: UI5Element;
-	observedElements: Array<HTMLElement>;
-	callback: MutationCallback;
-	invalidationCallback: InvalidateCallback;
-};
-
-const associatedElements = new WeakMap<HTMLElement, AssociatedElement>();
-const registeredElements = new WeakMap<UI5Element, RegisteredElement>();
-
-type AccessibleElement = HTMLElement & {
-	accessibleNameRef: string;
-	accessibleName: string;
-};
-
-const observerOptions = {
-	attributes: true,
-	childList: true,
-	characterData: true,
-	subtree: true,
-};
-
-const getEffectiveAriaLabelText = (el: HTMLElement) => {
-	const accessibleEl = el as AccessibleElement;
-
-	if (!accessibleEl.accessibleNameRef) {
-		if (accessibleEl.accessibleName) {
-			return accessibleEl.accessibleName;
-		}
-
-		return undefined;
-	}
-
-	return getAllAccessibleNameRefTexts(el);
-};
-
-/**
- *
- * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related texts
- */
-const getAllAccessibleNameRefTexts = (el: HTMLElement) => {
-	const ids = (el as AccessibleElement).accessibleNameRef?.split(" ") ?? [];
-	const owner = el.getRootNode() as HTMLElement;
-	let result = "";
-
-	ids.forEach((elementId: string, index: number) => {
-		const element = owner.querySelector(`[id='${elementId}']`);
-		const text = `${element && element.textContent ? element.textContent : ""}`;
-		if (text) {
-			result += text;
-			if (index < ids.length - 1) {
-				result += " ";
-			}
-		}
-	});
-
-	return result;
-};
-
-const _getAllAssociatedElementsFromDOM = (el: UI5Element): Array<HTMLElement> => {
-	const set = new Set<HTMLElement>();
-	// adding labels with attribute for matching the el.id
-	const labelsForAssociated = _getAssociatedLabels(el);
-	labelsForAssociated.forEach(itm => {
-		set.add(itm);
-	});
-	// adding other elements that id is the same as accessibleNameRef value
-	const value = el["accessibleNameRef" as keyof typeof el] as string;
-	const ids = value?.split(" ") ?? [];
-	ids.forEach(id => {
-		const refEl = _getReferencedElementById(el, id);
-		if (refEl) {
-			set.add(refEl);
-		}
-	});
-	return Array.from(set);
-};
-
-const _getAssociatedLabels = (el: HTMLElement): Array<HTMLElement> => {
-	const labels = (el.getRootNode() as HTMLElement).querySelectorAll<HTMLElement>(`[for="${el.id}"]`);
-	return Array.from(labels);
-};
-
-const _getReferencedElementById = (el: HTMLElement, elementId: string): HTMLElement | null => {
-	return (el.getRootNode() as HTMLElement).querySelector<HTMLElement>(`[id='${elementId}']`);
-};
-
-/**
- * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related "label for" texts
- */
-const getAssociatedLabelForTexts = (el: HTMLElement) => {
-	const results: Array<string> = [];
-	const labels = _getAssociatedLabels(el);
-
-	labels.forEach((label: HTMLElement) => {
-		const labelText = label.textContent;
-		labelText && results.push(labelText);
-	});
-
-	if (results.length) {
-		return results.join(" ");
-	}
-
-	return undefined;
-};
-
-const _createInvalidationCallback = (el: UI5Element) => {
-	const invalidationCallback = (changeInfo: ChangeInfo) => {
-		if (!(changeInfo && changeInfo.type === "property" && changeInfo.name === "accessibleNameRef")) {
-			return;
-		}
-		const registeredElement = registeredElements.get(el);
-		if (!registeredElement) {
-			return;
-		}
-		const oldAssociatedElements = registeredElement.observedElements;
-		const newAssociatedElements = _getAllAssociatedElementsFromDOM(el);
-		oldAssociatedElements.forEach(oldElement => {
-			if (!newAssociatedElements.includes(oldElement)) {
-				_removeObservedElementFromRegisteredElement(registeredElement, oldElement);
-			}
-		});
-		newAssociatedElements.forEach(newElement => {
-			if (!oldAssociatedElements.includes(newElement)) {
-				_addObservedElementToRegisteredElement(registeredElement, newElement);
-				registeredElement.observedElements.push(newElement);
-			}
-		});
-		registeredElement?.callback();
-	};
-	return invalidationCallback;
-};
-
-const registerUI5Element = (el: UI5Element, callback: MutationCallback) => {
-	if (registeredElements.has(el)) {
-		return;
-	}
-	const allAssociatedElements = _getAllAssociatedElementsFromDOM(el);
-	const invalidationCallback = _createInvalidationCallback(el);
-	const registeredElement = {
-		host: el,
-		observedElements: allAssociatedElements,
-		callback,
-		invalidationCallback,
-	};
-	registeredElements.set(el, registeredElement);
-	el.attachInvalidate(invalidationCallback);
-
-	allAssociatedElements.forEach((element: HTMLElement) => {
-		_addObservedElementToRegisteredElement(registeredElement, element);
-	});
-	callback();
-};
-
-const _addObservedElementToRegisteredElement = (registeredElement: RegisteredElement, element: HTMLElement) => {
-	let associatedElement = associatedElements.get(element);
-	if (!associatedElement) {
-		associatedElement = { observer: null, callbacks: [] };
-		const observer = new MutationObserver(() => {
-			const callbacks = (associatedElement as AssociatedElement).callbacks;
-			callbacks.forEach(callback => {
-				callback();
-			});
-			const domEl = document.getElementById(element.id);
-			// if no longer should be observed from this registeredElement, remove it
-			if (!(registeredElement.host.id === element.getAttribute("for") || domEl)) {
-				_removeObservedElementFromRegisteredElement(registeredElement, element);
-			}
-		});
-		associatedElement.observer = observer;
-		observer.observe(element, observerOptions);
-		associatedElements.set(element, associatedElement);
-	}
-	if (!associatedElement.callbacks.includes(registeredElement.callback)) {
-		associatedElement.callbacks.push(registeredElement.callback);
-	}
-};
-
-const _removeObservedElementFromRegisteredElement = (registeredElement: RegisteredElement, element: HTMLElement) => {
-	const associatedElement = associatedElements.get(element);
-	if (associatedElement) {
-		associatedElement.callbacks = associatedElement.callbacks.filter(itm => itm !== registeredElement.callback);
-		if (!associatedElement.callbacks.length) {
-			associatedElement.observer?.disconnect();
-			associatedElements.delete(element);
-		}
-	}
-	registeredElement.observedElements = registeredElement.observedElements.filter(itm => itm !== element);
-};
-
-const deregisterUI5Element = (el: UI5Element) => {
-	const registeredElement = registeredElements.get(el);
-	if (!registeredElement) {
-		return;
-	}
-	const oldObservedElements = [...registeredElement.observedElements];
-	oldObservedElements.forEach(observedElement => {
-		_removeObservedElementFromRegisteredElement(registeredElement, observedElement);
-	});
-	el.detachInvalidate(registeredElement.invalidationCallback);
-	registeredElements.delete(el);
-};
-
-export {
-	getEffectiveAriaLabelText,
-	getAssociatedLabelForTexts,
-	registerUI5Element,
-	deregisterUI5Element,
-	getAllAccessibleNameRefTexts,
-};

package/src/util/Caret.ts

@@ -1,28 +0,0 @@
-/**
- * Returns the caret (cursor) position of the specified text field (field).
- * Return value range is 0-field.value.length.
- */
-const getCaretPosition = (field: HTMLInputElement): number | null => {
-	// Initialize
-	let caretPos: number | null = 0;
-
-	if (field.selectionStart || field.selectionStart === 0) { // Firefox support
-		caretPos = field.selectionDirection === "backward" ? field.selectionStart : field.selectionEnd;
-	}
-
-	return caretPos;
-};
-
-const setCaretPosition = (field: HTMLInputElement, caretPos: number | null) => {
-	if (field.selectionStart) {
-		field.focus();
-		field.setSelectionRange(caretPos, caretPos);
-	} else {
-		field.focus();
-	}
-};
-
-export {
-	getCaretPosition,
-	setCaretPosition,
-};

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 };