@ui5/webcomponents-base 1.9.3 → 1.10.0

package/src/types/ValueState.ts

@@ -0,0 +1,47 @@
+/**
+ * Different types of ValueStates.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.ValueState
+ */
+enum ValueState {
+	/**
+	 *
+	 * @public
+	 * @type {None}
+	 */
+	None = "None",
+
+	/**
+	 *
+	 * @public
+	 * @type {Success}
+	 */
+	Success = "Success",
+
+	/**
+	 *
+	 * @public
+	 * @type {Warning}
+	 */
+	Warning = "Warning",
+
+	/**
+	 *
+	 * @public
+	 * @type {Error}
+	 */
+	Error = "Error",
+
+	/**
+	 *
+	 * @public
+	 * @type {Information}
+	 */
+	Information = "Information",
+}
+
+export default ValueState;

package/src/types.ts

@@ -0,0 +1,30 @@
+type PromiseResolve = (value: void | PromiseLike<void>) => void;
+type Timeout = ReturnType<typeof setTimeout>;
+type Interval = ReturnType<typeof setInterval>;
+
+type StyleDataCSP = {
+	content: string,
+	packageName: string,
+	fileName: string,
+};
+
+type StyleData = StyleDataCSP | string;
+
+type ComponentStylesData = Array<ComponentStylesData> | Array<StyleData> | StyleData;
+
+type ClassMapValue = Record<string, boolean>
+
+type ClassMap = { [x: string] : ClassMapValue | ClassMap };
+
+type PassiveEventListenerObject = EventListenerObject & { passive: boolean };
+
+export type {
+	PromiseResolve,
+	Timeout,
+	Interval,
+	StyleData,
+	StyleDataCSP,
+	ComponentStylesData,
+	ClassMap,
+	PassiveEventListenerObject,
+};

package/src/updateShadowRoot.ts

@@ -0,0 +1,37 @@
+import executeTemplate from "./renderer/executeTemplate.js";
+import getConstructableStyle from "./theming/getConstructableStyle.js";
+import getEffectiveStyle from "./theming/getEffectiveStyle.js";
+import getEffectiveLinksHrefs from "./theming/getEffectiveLinksHrefs.js";
+import { shouldUseLinks } from "./CSP.js";
+import type UI5Element from "./UI5Element.js";
+
+/**
+ * Updates the shadow root of a UI5Element or its static area item
+ * @param element
+ * @param forStaticArea
+ */
+const updateShadowRoot = (element: UI5Element, forStaticArea = false) => {
+	let styleStrOrHrefsArr;
+	const ctor = element.constructor as typeof UI5Element;
+	const propertyName = forStaticArea ? "staticAreaTemplate" : "template";
+	const template = ctor[propertyName];
+	const shadowRoot = forStaticArea ? element.staticAreaItem!.shadowRoot : element.shadowRoot;
+	const renderResult = executeTemplate(template!, element); // this is checked before calling updateShadowRoot
+
+	if (!shadowRoot) {
+		console.warn(`There is no shadow root to update`); // eslint-disable-line
+		return;
+	}
+
+	if (shouldUseLinks()) {
+		styleStrOrHrefsArr = getEffectiveLinksHrefs(ctor, forStaticArea);
+	} else if (document.adoptedStyleSheets) { // Chrome
+		shadowRoot.adoptedStyleSheets = getConstructableStyle(ctor, forStaticArea);
+	} else { // FF, Safari
+		styleStrOrHrefsArr = getEffectiveStyle(ctor, forStaticArea);
+	}
+
+	ctor.render(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
+};
+
+export default updateShadowRoot;

package/src/util/AriaLabelHelper.ts

@@ -0,0 +1,63 @@
+type AccessibleElement = HTMLElement & {
+	accessibleNameRef: string,
+	accessibleName: string,
+}
+
+const getEffectiveAriaLabelText = (el: HTMLElement) => {
+	const accessibleEl = el as AccessibleElement;
+
+	if (!accessibleEl.accessibleNameRef) {
+		if (accessibleEl.accessibleName) {
+			return accessibleEl.accessibleName;
+		}
+
+		return undefined;
+	}
+
+	return _getAriaLabelledByTexts(el);
+};
+
+/**
+ *
+ * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related texts
+ */
+const _getAriaLabelledByTexts = (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}']`);
+		result += `${element && element.textContent ? element.textContent : ""}`;
+
+		if (index < ids.length - 1) {
+			result += " ";
+		}
+	});
+
+	return result;
+};
+
+/**
+ * @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 = (el.getRootNode() as HTMLElement).querySelectorAll(`[ui5-label][for="${el.id}"],label[for="${el.id}"]`);
+
+	labels.forEach((label: Node) => {
+		const labelText = label.textContent;
+		labelText && results.push(labelText);
+	});
+
+	if (results.length) {
+		return results.join(" ");
+	}
+
+	return undefined;
+};
+
+export {
+	getEffectiveAriaLabelText,
+	getAssociatedLabelForTexts,
+};

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

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

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

@@ -3,161 +3,173 @@
  * @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
  */
-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 => {
+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);
 	}
@@ -177,8 +189,8 @@ const getRGBColor = color => {
 	}
 
 	// Css Color
-	if (Object.keys(CSSColors).includes(color)) {
-		color = CSSColors[color];
+	if (color in CSSColors) {
+		color = CSSColors[color as keyof typeof CSSColors];
 	}
 
 	return HEXToRGB(color);
@@ -188,7 +200,7 @@ const getRGBColor = 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 RGBAToRGB = (color: string): ColorRGB => {
 	const openingBracketIndex = color.indexOf("("),
 		commasIndexes = [];
 
@@ -209,7 +221,7 @@ const RGBAToRGB = 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: "rgb(0, 0, 0)
  */
-const RGBStringToRGBObject = color => {
+const RGBStringToRGBObject = (color: string): ColorRGB => {
 	const openingBracketIndex = color.indexOf("("),
 		closingBraketIndex = color.indexOf(")"),
 		commasIndexes = [];
@@ -227,17 +239,13 @@ const RGBStringToRGBObject = color => {
 	};
 };
 
-const HSLToRGB = (color = {
-	h: undefined,
-	s: undefined,
-	l: undefined,
-}) => {
+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 = {};
+	let tempColor: ColorRGB;
 	switch (Math.round(color.h / 60)) {
 	// 0 ≤ H < 60
 	case 0:
@@ -300,30 +308,22 @@ const HSLToRGB = (color = {
 	};
 };
 
-const HEXToRGB = hex => {
+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
 
-	const rgbValues = {
-		r: hex.substr(0, 2),
-		g: hex.substr(2, 2),
-		b: hex.substr(4, 2),
+	return {
+		r: parseInt(hex.substr(0, 2), 16),
+		g: parseInt(hex.substr(2, 2), 16),
+		b: parseInt(hex.substr(4, 2), 16),
 	};
-
-	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 RGBtoHEX = (color: ColorRGB): string => {
 	const hexMap = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E"];
 	let hexValue = "#";
 
@@ -345,11 +345,7 @@ const RGBtoHEX = color => {
 	return hexValue;
 };
 
-const RGBToHSL = (color = {
-	r: undefined,
-	g: undefined,
-	b: undefined,
-}) => {
+const RGBToHSL = (color: ColorRGB): ColorHSL => {
 	const R = color.r / 255,
 		G = color.g / 255,
 		B = color.b / 255,
@@ -357,7 +353,7 @@ const RGBToHSL = (color = {
 		min = Math.min(R, G, B),
 		delta = max - min;
 
-	let h,
+	let h = 0,
 		s;
 
 	// Hue calculation
@@ -396,3 +392,8 @@ export {
 	RGBStringToRGBObject,
 	RGBtoHEX,
 };
+
+export type {
+	ColorHSL,
+	ColorRGB,
+};