@ui5/webcomponents-base 1.8.0 → 1.9.1

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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;

package/package-scripts.js

@@ -15,7 +15,7 @@ const eslintConfig = `--config ${require.resolve("@ui5/webcomponents-tools/compo
 const scripts = {
 	clean: "rimraf dist && rimraf .port",
 	lint: `eslint . ${eslintConfig}`,
-	prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles",
+	prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles generateTemplates generateAPI",
 	integrate: {
 		default: "nps integrate.copy-used-modules integrate.replace-amd integrate.amd-to-es6 integrate.esm-abs-to-rel integrate.third-party",
 		"copy-used-modules": `node "${copyUsedModules}" ./used-modules.txt dist/`,
@@ -39,6 +39,8 @@ const scripts = {
 	generateAssetParameters: `node "${assetParametersScript}"`,
 	generateVersionInfo: `node "${versionScript}"`,
 	generateStyles: `node "${stylesScript}"`,
+	generateTemplates: `mkdirp dist/generated/templates && node "${LIB}/hbs2ui5/index.js" -d test/elements -o dist/generated/templates`,
+	generateAPI: `jsdoc -c "${LIB}/jsdoc/config.json"`,
 	watch: {
 		default: 'concurrently "nps watch.src" "nps watch.styles"',
 		withBundle: 'concurrently "nps watch.src" "nps watch.bundle" "nps watch.styles"',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -36,8 +36,8 @@
   "devDependencies": {
     "@buxlabs/amd-to-es6": "0.16.1",
     "@openui5/sap.ui.core": "1.101.0",
-    "@ui5/webcomponents-tools": "1.8.0",
-    "chromedriver": "105.0.1",
+    "@ui5/webcomponents-tools": "1.9.1",
+    "chromedriver": "106.0.1",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
     "cross-env": "^7.0.3",

package/src/InitialConfiguration.js

@@ -1,12 +1,14 @@
 import merge from "./thirdparty/merge.js";
 import { getFeature } from "./FeaturesRegistry.js";
 import { DEFAULT_THEME } from "./generated/AssetParameters.js";
+import validateThemeRoot from "./validateThemeRoot.js";
 
 let initialized = false;
 
 let initialConfig = {
 	animationMode: "full",
 	theme: DEFAULT_THEME,
+	themeRoot: null,
 	rtl: null,
 	language: null,
 	calendarType: null,
@@ -26,6 +28,11 @@ const getTheme = () => {
 	return initialConfig.theme;
 };
 
+const getThemeRoot = () => {
+	initConfiguration();
+	return initialConfig.themeRoot;
+};
+
 const getRTL = () => {
 	initConfiguration();
 	return initialConfig.rtl;
@@ -106,7 +113,13 @@ const parseURLParameters = () => {
 	});
 };
 
-const normalizeParamValue = (param, value) => {
+const normalizeThemeRootParamValue = value => {
+	const themeRoot = value.split("@")[1];
+
+	return validateThemeRoot(themeRoot);
+};
+
+const normalizeThemeParamValue = (param, value) => {
 	if (param === "theme" && value.includes("@")) { // the theme parameter might have @<URL-TO-THEME> in the value - strip this
 		return value.split("@")[0];
 	}
@@ -122,9 +135,15 @@ const applyURLParam = (key, value, paramType) => {
 		value = booleanMapping.get(lowerCaseValue);
 	}
 
-	value = normalizeParamValue(param, value);
+	if (param === "theme") {
+		initialConfig.theme = normalizeThemeParamValue(param, value);
 
-	initialConfig[param] = value;
+		if (value && value.includes("@")) {
+			initialConfig.themeRoot = normalizeThemeRootParamValue(value);
+		}
+	} else {
+		initialConfig[param] = value;
+	}
 };
 
 const applyOpenUI5Configuration = () => {
@@ -157,6 +176,7 @@ const initConfiguration = () => {
 export {
 	getAnimationMode,
 	getTheme,
+	getThemeRoot,
 	getRTL,
 	getLanguage,
 	getFetchDefaultLanguage,

package/src/StaticAreaItem.js

@@ -17,6 +17,7 @@ class StaticAreaItem extends HTMLElement {
 		this._rendered = false;
 		this.attachShadow({ mode: "open" });
 		this.pureTagName = "ui5-static-area-item";
+		this.popupIntegrationAttr = "data-sap-ui-integration-popup-content";
 	}
 
 	/**
@@ -37,7 +38,7 @@ class StaticAreaItem extends HTMLElement {
 	 */
 	update() {
 		if (this._rendered) {
-			this.setAttribute(this.pureTagName, "");
+			this._updateAdditionalAttrs();
 			this._updateContentDensity();
 			this._updateDirection();
 			updateShadowRoot(this.ownerElement, true);
@@ -67,6 +68,11 @@ class StaticAreaItem extends HTMLElement {
 		}
 	}
 
+	_updateAdditionalAttrs() {
+		this.setAttribute(this.pureTagName, "");
+		this.setAttribute(this.popupIntegrationAttr, "");
+	}
+
 	/**
 	 * @protected
 	 * Returns reference to the DOM element where the current fragment is added.

package/src/asset-registries/Illustrations.js

@@ -1,6 +1,8 @@
 import getSharedResource from "../getSharedResource.js";
 
+const loaders = new Map();
 const registry = getSharedResource("SVGIllustration.registry", new Map());
+const illustrationPromises = getSharedResource("SVGIllustration.promises", new Map());
 const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
 
 const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, set, title, subtitle } = {}) => { // eslint-disable-line
@@ -13,6 +15,21 @@ const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, set, title,
 	});
 };
 
+const registerIllustrationLoader = async (illustrationName, loader) => {
+	loaders.set(illustrationName, loader);
+};
+
+const _loadIllustrationOnce = async illustrationName => {
+	if (!illustrationPromises.has(illustrationName)) {
+		if (!loaders.has(illustrationName)) {
+			throw new Error(`No loader registered for the ${illustrationName} illustration. Probably you forgot to import the "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js" module.`);
+		}
+		const loadIllustrations = loaders.get(illustrationName);
+		illustrationPromises.set(illustrationName, loadIllustrations(illustrationName));
+	}
+	return illustrationPromises.get(illustrationName);
+};
+
 const getIllustrationDataSync = nameProp => {
 	let set = "fiori";
 
@@ -20,11 +37,23 @@ const getIllustrationDataSync = nameProp => {
 		set = "tnt";
 		nameProp = nameProp.replace(/^Tnt/, "");
 	}
+	return registry.get(`${set}/${nameProp}`);
+};
+
+const getIllustrationData = async illustrationName => {
+	let set = "fiori";
 
-	return registry.get(`${set}/${nameProp}`) || ILLUSTRATION_NOT_FOUND;
+	await _loadIllustrationOnce(illustrationName);
+	if (illustrationName.startsWith("Tnt")) {
+		set = "tnt";
+		illustrationName = illustrationName.replace(/^Tnt/, "");
+	}
+	return registry.get(`${set}/${illustrationName}`) || ILLUSTRATION_NOT_FOUND;
 };
 
 export {
 	getIllustrationDataSync,
 	registerIllustration,
+	registerIllustrationLoader,
+	getIllustrationData,
 };

package/src/config/ThemeRoots.js

@@ -0,0 +1,39 @@
+import createLinkInHead from "../util/createLinkInHead.js";
+import validateThemeRoot from "../validateThemeRoot.js";
+import { getThemeRoot as getConfiguredThemeRoot } from "../InitialConfiguration.js";
+
+let themeRoot;
+
+const getThemeRoot = () => {
+	if (themeRoot === undefined) {
+		themeRoot = getConfiguredThemeRoot();
+	}
+
+	return themeRoot;
+};
+
+const setThemeRoot = (theme, newThemeRoot) => {
+	themeRoot = validateThemeRoot(newThemeRoot);
+
+	attachCustomThemeStylesToHead(theme);
+};
+
+const formatThemeLink = theme => {
+	return `${getThemeRoot()}Base/baseLib/${theme}/css_variables.css`;
+};
+
+const attachCustomThemeStylesToHead = async theme => {
+	const link = document.querySelector(`[sap-ui-webcomponents-theme="${theme}"]`);
+
+	if (link) {
+		document.head.removeChild(link);
+	}
+
+	await createLinkInHead(formatThemeLink(theme), { "sap-ui-webcomponents-theme": theme });
+};
+
+export {
+	getThemeRoot,
+	setThemeRoot,
+	attachCustomThemeStylesToHead,
+};