@ui5/webcomponents-base 1.8.0 → 1.9.0

package/src/features/F6Navigation.js

@@ -54,24 +54,20 @@ class F6Navigation {
 			const nextIndex = this.groups.indexOf(this.selectedGroup);
 			let nextElement = null;
 
-			if (nextIndex > -1) {
-				if (nextIndex - 1 < 0) {
-					nextElement = this.groups[this.groups.length - 1];
-				} else {
-					// Handle the situation where the first focusable element of two neighbor groups is the same
-					// For example:
-					// <ui5-flexible-column-layout>
-					//     <ui5-list>
-					//         <ui5-li>List Item</ui5-li>
-					//     </ui5-list>
-					// </ui5-flexible-column-layout>
-					// Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
-
-					const firstFocusable = await getFirstFocusableElement(this.groups[nextIndex - 1], true);
-					const shouldSkipParent = firstFocusable === await getFirstFocusableElement(this.groups[nextIndex], true);
-
-					nextElement = this.groups[shouldSkipParent ? nextIndex - 2 : nextIndex - 1];
-				}
+			if (nextIndex > 0) {
+				// Handle the situation where the first focusable element of two neighbor groups is the same
+				// For example:
+				// <ui5-flexible-column-layout>
+				//     <ui5-list>
+				//         <ui5-li>List Item</ui5-li>
+				//     </ui5-list>
+				// </ui5-flexible-column-layout>
+				// Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
+
+				const firstFocusable = await getFirstFocusableElement(this.groups[nextIndex - 1], true);
+				const shouldSkipParent = firstFocusable === await getFirstFocusableElement(this.groups[nextIndex], true);
+
+				nextElement = this.groups[shouldSkipParent ? nextIndex - 2 : nextIndex - 1];
 			} else {
 				nextElement = this.groups[this.groups.length - 1];
 			}
@@ -86,26 +82,27 @@ class F6Navigation {
 	}
 
 	updateGroups() {
-		this.setSelectedGroup(document.activeElement);
+		this.setSelectedGroup();
 		this.groups = getFastNavigationGroups(document.body);
 	}
 
-	setSelectedGroup(element) {
+	setSelectedGroup(element = document) {
+		const htmlElement = document.querySelector("html");
 		element = this.deepActive(element);
 
-		while (element && element.getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== document.querySelector("html")) {
+		while (element && element.getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== htmlElement) {
 			element = element.parentElement ? element.parentNode : element.parentNode.host;
 		}
 
 		this.selectedGroup = element;
 	}
 
-	deepActive(element) {
-		if (element.shadowRoot) {
-			return this.deepActive(element.shadowRoot);
+	deepActive(root) {
+		if (root.activeElement && root.activeElement.shadowRoot) {
+			return this.deepActive(root.activeElement.shadowRoot);
 		}
 
-		return element.activeElement;
+		return root.activeElement;
 	}
 
 	destroy() {

package/src/features/OpenUI5Support.js

@@ -41,6 +41,7 @@ const getConfigurationSettingsObject = () => {
 		animationMode: config.getAnimationMode(),
 		language: config.getLanguage(),
 		theme: config.getTheme(),
+		themeRoot: config.getThemeRoot(),
 		rtl: config.getRTL(),
 		calendarType: config.getCalendarType(),
 		formatSettings: {

package/src/theming/applyTheme.js

@@ -3,6 +3,7 @@ import { removeStyle, createOrUpdateStyle } from "../ManagedStyles.js";
 import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
+import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoots.js";
 
 const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming";
 
@@ -40,7 +41,7 @@ const loadComponentPackages = async theme => {
 	});
 };
 
-const detectExternalTheme = () => {
+const detectExternalTheme = async theme => {
 	// If theme designer theme is detected, use this
 	const extTheme = getThemeDesignerTheme();
 	if (extTheme) {
@@ -56,11 +57,15 @@ const detectExternalTheme = () => {
 				themeName: OpenUI5Support.getConfigurationSettingsObject().theme, // just themeName, baseThemeName is only relevant for custom themes
 			};
 		}
+	} else if (getThemeRoot()) {
+		await attachCustomThemeStylesToHead(theme);
+
+		return getThemeDesignerTheme();
 	}
 };
 
 const applyTheme = async theme => {
-	const extTheme = detectExternalTheme();
+	const extTheme = await detectExternalTheme(theme);
 
 	// Only load theme_base properties if there is no externally loaded theme, or there is, but it is not being loaded
 	if (!extTheme || theme !== extTheme.themeName) {

package/src/types/CSSColor.js

@@ -1,5 +1,16 @@
 import DataType from "./DataType.js";
 
+/**
+ * @class
+ * CSSColor data type.
+ *
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.CSSColor
+ * @public
+ * @enum {string}
+ */
 class CSSColor extends DataType {
 	static isValid(value) {
 		return /^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})|rgb\(\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*(,\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*){2}\)|rgba\((\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*,){3}\s*(0(\.[0-9]+)?|1(\.0+)?)\s*\)|hsl\(\s*([0-2]?[0-9]?[0-9]|3([0-5][0-9]|60))\s*(,\s*(([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*){2}\)|hsla\(\s*([0-2]?[0-9]?[0-9]|3([0-5][0-9]|60))\s*,(\s*(([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*,){2}\s*(0(\.[0-9]+)?|1(\.0+)?)\s*\)|aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgrey|darkgreen|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|grey|green|greenyellow|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgrey|lightgreen|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silverskyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen|transparent|inherit|)$/.test(value ); // eslint-disable-line

package/src/types/CSSSize.js

@@ -1,5 +1,16 @@
 import DataType from "./DataType.js";
 
+/**
+ * @class
+ * CSSSize data type.
+ *
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.CSSSize
+ * @public
+ * @enum {string}
+ */
 class CSSSize extends DataType {
 	static isValid(value) {
 		return /^(auto|inherit|[-+]?(0*|([0-9]+|[0-9]*\.[0-9]+)([rR][eE][mM]|[eE][mM]|[eE][xX]|[pP][xX]|[cC][mM]|[mM][mM]|[iI][nN]|[pP][tT]|[pP][cC]|%))|calc\(\s*(\(\s*)*[-+]?(([0-9]+|[0-9]*\.[0-9]+)([rR][eE][mM]|[eE][mM]|[eE][xX]|[pP][xX]|[cC][mM]|[mM][mM]|[iI][nN]|[pP][tT]|[pP][cC]|%)?)(\s*(\)\s*)*(\s[-+]\s|[*\/])\s*(\(\s*)*([-+]?(([0-9]+|[0-9]*\.[0-9]+)([rR][eE][mM]|[eE][mM]|[eE][xX]|[pP][xX]|[cC][mM]|[mM][mM]|[iI][nN]|[pP][tT]|[pP][cC]|%)?)))*\s*(\)\s*)*\))$/.test(value); // eslint-disable-line

package/src/types/CalendarType.js

@@ -2,15 +2,52 @@ import DataType from "./DataType.js";
 
 /**
  * Different calendar types.
+ * @lends sap.ui.webcomponents.base.types.CalendarType.prototype
+ * @public
  */
 const CalendarTypes = {
+	/**
+	 * @public
+	 * @type {Gregorian}
+	 */
 	Gregorian: "Gregorian",
+
+	/**
+	 * @public
+	 * @type {Islamic}
+	 */
 	Islamic: "Islamic",
+
+	/**
+	 * @public
+	 * @type {Japanese}
+	 */
 	Japanese: "Japanese",
+
+	/**
+	 * @public
+	 * @type {Buddhist}
+	 */
 	Buddhist: "Buddhist",
+
+	/**
+	 * @public
+	 * @type {Persian}
+	 */
 	Persian: "Persian",
 };
 
+/**
+ * @class
+ * Different calendar types.
+ *
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.CalendarType
+ * @public
+ * @enum {string}
+ */
 class CalendarType extends DataType {
 	static isValid(value) {
 		return !!CalendarTypes[value];

package/src/types/DOMReference.js

@@ -5,6 +5,10 @@ import DataType from "./DataType.js";
  * DOM Element reference or ID.
  * <b>Note:</b> If an ID is passed, it is expected to be part of the same <code>document</code> element as the consuming component.
  *
+ * @constructor
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.DOMReference
  * @public
  */
 class DOMReference extends DataType {

package/src/types/DataType.js

@@ -8,6 +8,12 @@
  * @public
  */
 class DataType {
+	/**
+	 * Checks if the value is valid for its data type.
+ 	 * @public
+	 * @abstract
+	 * @returns {Boolean}
+	 */
 	static isValid(value) {
 	}
 

package/src/types/Float.js

@@ -1,5 +1,16 @@
 import DataType from "./DataType.js";
 
+/**
+ * @class
+ * Float data type.
+ *
+ * @constructor
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.Float
+ * @public
+ * @enum {number}
+ */
 class Float extends DataType {
 	static isValid(value) {
 		// Assuming that integers are floats as well!

package/src/types/Integer.js

@@ -1,5 +1,16 @@
 import DataType from "./DataType.js";
 
+/**
+ * @class
+ * Integer data type.
+ *
+ * @constructor
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.Integer
+ * @public
+ * @enum {number}
+ */
 class Integer extends DataType {
 	static isValid(value) {
 		return Number.isInteger(value);

package/src/types/InvisibleMessageMode.js

@@ -2,23 +2,39 @@ import DataType from "./DataType.js";
 
 /**
  * Enumeration for different mode behaviors of the <code>InvisibleMessage</code>.
- * @private
+ * @lends sap.ui.webcomponents.base.types.InvisibleMessageMode.prototype
+ * @public
  */
 const InvisibleMessageModes = {
 
 	/**
      * Indicates that updates to the region should be presented at the next graceful opportunity,
      * such as at the end of reading the current sentence, or when the user pauses typing.
+	 * @public
+	 * @type {Polite}
      */
 	Polite: "Polite",
 
 	/**
      * Indicates that updates to the region have the highest priority and should be presented to the user immediately.
+	 * @public
+	 * @type {Assertive}
      */
 	Assertive: "Assertive",
 
 };
 
+/**
+ * @class
+ * Different types of InvisibleMessageMode.
+ *
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.InvisibleMessageMode
+ * @public
+ * @enum {string}
+ */
 class InvisibleMessageMode extends DataType {
 	static isValid(value) {
 		return !!InvisibleMessageModes[value];

package/src/types/PopupState.js

@@ -1,31 +1,51 @@
 import DataType from "./DataType.js";
 
+/**
+ * Different types of PopupStates.
+ * @lends sap.ui.webcomponents.base.types.PopupState.prototype
+ * @public
+ */
 const PopupStates = {
 	/**
 	 * Open and currently not changing states.
 	 * @public
+	 * @type {OPEN}
 	 */
 	OPEN: "OPEN",
 
 	/**
 	 * Closed and currently not changing states.
 	 * @public
+	 * @type {CLOSED}
 	 */
 	CLOSED: "CLOSED",
 
 	/**
 	 * Already left the CLOSED state, is not OPEN yet, but in the process of getting OPEN.
 	 * @public
+	 * @type {OPENING}
 	 */
 	OPENING: "OPENING",
 
 	/**
 	 * Still open, but in the process of going to the CLOSED state.
 	 * @public
+	 * @type {CLOSING}
 	 */
 	CLOSING: "CLOSING",
 };
 
+/**
+ * @class
+ * Different types of PopupState.
+ *
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.PopupState
+ * @public
+ * @enum {string}
+ */
 class PopupState extends DataType {
 	static isValid(value) {
 		return !!PopupStates[value];

package/src/types/ValueState.js

@@ -1,16 +1,58 @@
 import DataType from "./DataType.js";
 
 /**
- * Different states.
+ * Different types of ValueStates.
+ * @lends sap.ui.webcomponents.base.types.ValueState.prototype
+ * @public
  */
 const ValueStates = {
+	/**
+	 *
+	 * @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",
 };
 
+/**
+ * @class
+ * Different types of ValueState.
+ *
+ * @extends sap.ui.webcomponents.base.types.DataType
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.base.types.ValueState
+ * @public
+ * @enum {string}
+ */
 class ValueState extends DataType {
 	static isValid(value) {
 		return !!ValueStates[value];

package/src/util/AriaLabelHelper.js

@@ -33,7 +33,24 @@ const getAriaLabelledByTexts = (el, ownerDocument, readyIds = "") => {
 	return result;
 };
 
+/**
+ * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related "label for" texts
+ */
+const getAssociatedLabelForTexts = el => {
+	const results = [];
+	const labels = el.getRootNode().querySelectorAll(`[ui5-label][for="${el.id}"],label[for="${el.id}"]`);
+
+	labels.forEach(label => results.push(label.textContent));
+
+	if (results.length) {
+		return results.join(" ");
+	}
+
+	return undefined;
+};
+
 export {
 	getEffectiveAriaLabelText,
 	getAriaLabelledByTexts,
+	getAssociatedLabelForTexts,
 };

package/src/util/createLinkInHead.js

@@ -12,8 +12,13 @@ const createLinkInHead = (href, attributes = {}) => {
 	Object.entries(attributes).forEach(pair => link.setAttribute(...pair));
 
 	link.href = href;
+
 	document.head.appendChild(link);
-	return link;
+
+	return new Promise(resolve => {
+		link.addEventListener("load", resolve);
+		link.addEventListener("error", resolve);
+	});
 };
 
 export default createLinkInHead;

package/src/validateThemeRoot.js

@@ -0,0 +1,58 @@
+const getMetaTagValue = metaTagName => {
+	const metaTag = document.querySelector(`META[name="${metaTagName}"]`),
+		metaTagContent = metaTag && metaTag.getAttribute("content");
+
+	return metaTagContent;
+};
+
+const validateThemeOrigin = origin => {
+	const allowedOrigins = getMetaTagValue("sap-allowedThemeOrigins");
+
+	return allowedOrigins && allowedOrigins.split(",").some(allowedOrigin => {
+		return allowedOrigin === "*" || origin === allowedOrigin.trim();
+	});
+};
+
+const buildCorrectUrl = (oldUrl, newOrigin) => {
+	const oldUrlPath = new URL(oldUrl).pathname;
+
+	return new URL(oldUrlPath, newOrigin).toString();
+};
+
+const validateThemeRoot = themeRoot => {
+	let themeRootURL,
+		resultUrl;
+
+	try {
+		themeRootURL = new URL(themeRoot);
+
+		const origin = themeRootURL.origin;
+
+		themeRootURL = themeRootURL.toString();
+
+		if (themeRootURL.startsWith(".") || themeRootURL.startsWith("/")) {
+			// Handle relative url
+			// new URL("/newExmPath", "http://example.com/exmPath") => http://example.com/newExmPath
+			// new URL("./newExmPath", "http://example.com/exmPath") => http://example.com/exmPath/newExmPath
+			// new URL("../newExmPath", "http://example.com/exmPath") => http://example.com/newExmPath
+			resultUrl = new URL(themeRootURL, window.location.href).toString();
+		} else if (origin && validateThemeOrigin(origin)) {
+			// If origin is allowed, use it
+			resultUrl = themeRootURL.toString();
+		} else {
+			// If origin is not allow and the URL is not relative, we have to replace the origin
+			// with current location
+			resultUrl = buildCorrectUrl(themeRootURL, window.location.href);
+		}
+
+		if (!resultUrl.endsWith("/")) {
+			resultUrl = `${resultUrl}/`;
+		}
+
+		return `${resultUrl}UI5/`;
+	} catch (e) {
+		// Catch if URL is not correct
+	}
+};
+
+export default validateThemeRoot;