@ui5/webcomponents-base 0.0.0-6cb3eb0db → 0.0.0-701b14e36

package/dist/sap/base/security/encodeCSS.js

@@ -0,0 +1,14 @@
+import toHex from '../strings/toHex.js';
+var rCSS = /[\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\xff\u2028\u2029][0-9A-Fa-f]?/g;
+var fnCSS = function (sChar) {
+    var iChar = sChar.charCodeAt(0);
+    if (sChar.length === 1) {
+        return '\\' + toHex(iChar);
+    } else {
+        return '\\' + toHex(iChar) + ' ' + sChar.substr(1);
+    }
+};
+var fnEncodeCSS = function (sString) {
+    return sString.replace(rCSS, fnCSS);
+};
+export default fnEncodeCSS;

package/dist/sap/base/security/encodeXML.js

@@ -0,0 +1,23 @@
+import toHex from '../strings/toHex.js';
+var rHtml = /[\x00-\x2b\x2f\x3a-\x40\x5b-\x5e\x60\x7b-\xff\u2028\u2029]/g, rHtmlReplace = /[\x00-\x08\x0b\x0c\x0e-\x1f\x7f-\x9f]/, mHtmlLookup = {
+        '<': '&lt;',
+        '>': '&gt;',
+        '&': '&amp;',
+        '"': '&quot;'
+    };
+var fnHtml = function (sChar) {
+    var sEncoded = mHtmlLookup[sChar];
+    if (!sEncoded) {
+        if (rHtmlReplace.test(sChar)) {
+            sEncoded = '&#xfffd;';
+        } else {
+            sEncoded = '&#x' + toHex(sChar.charCodeAt(0)) + ';';
+        }
+        mHtmlLookup[sChar] = sEncoded;
+    }
+    return sEncoded;
+};
+var fnEncodeXML = function (sString) {
+    return sString.replace(rHtml, fnHtml);
+};
+export default fnEncodeXML;

package/dist/sap/base/strings/toHex.js

@@ -0,0 +1,8 @@
+var fnToHex = function (iChar, iLength) {
+  var sHex = iChar.toString(16);
+  if (iLength) {
+    sHex = sHex.padStart(iLength, "0");
+  }
+  return sHex;
+};
+export default fnToHex;

package/dist/sap/ui/thirdparty/caja-html-sanitizer.js

@@ -1989,7 +1989,7 @@ if (typeof window !== 'undefined') {
 }
 /*!
  * OpenUI5
- * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 // Based on coding from the HTML4 Sanitizer by Google Inc.

package/dist/test-resources/pages/i18n.html

@@ -17,9 +17,7 @@
 		const demo = async () => {
 			["de", "es", "fr", "en"].forEach(localeId => registerI18nLoader("myApp", localeId, () => `./assets/messagebundle_${localeId}.properties`));
 
-			await fetchI18nBundle("myApp");
-
-			const bundle = getI18nBundle("myApp");
+			const bundle = await getI18nBundle("myApp");
 
 			const pleaseWait = bundle.getText("PLEASE_WAIT");
 			console.log("Please wait in the current language is: ", pleaseWait);

package/dist/test-resources/specs/CustomTheme.spec.js

@@ -16,8 +16,8 @@ describe("Custom themes can be registered", () => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
 			await config.setTheme(newTheme);
 
-			const style = document.querySelector(`style[data-ui5-theme-properties="@ui5/webcomponents-base-test"]`);
-			const varsFound = style && style.textContent.includes(var1);
+			const style = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === "data-ui5-theme-properties|@ui5/webcomponents-base-test").cssRules[0].cssText;
+			const varsFound = style && style.includes(var1);
 			done(varsFound);
 		}, newTheme);
 

package/dist/test-resources/specs/Theming.spec.js

@@ -8,8 +8,8 @@ describe("Theming works", () => {
 	it("Tests that the parameters for the default theme are embedded on boot", async () => {
 
 		const res = await browser.executeAsync(done => {
-			const style = document.querySelector(`style[data-ui5-theme-properties="@ui5/webcomponents-base-test"]`);
-			done(style && style.textContent.includes("--var1: red")); // see test/assets/Themes.js
+			const style = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === "data-ui5-theme-properties|@ui5/webcomponents-base-test").cssRules[0].cssText
+			done(style && style.includes("--var1: red")); // see test/assets/Themes.js
 		});
 
 		assert.strictEqual(res, true, "The fiori3 vars are found");
@@ -22,12 +22,23 @@ describe("Theming works", () => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
 			await config.setTheme(newTheme);
 
-			const style = document.querySelector(`style[data-ui5-theme-properties="@ui5/webcomponents-base-test"]`);
-			const varsFound = style && style.textContent.includes("--var1: orange"); // see test/assets/Themes.js
+			const style = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === "data-ui5-theme-properties|@ui5/webcomponents-base-test").cssRules[0].cssText
+			const varsFound = style && style.includes("--var1: orange"); // see test/assets/Themes.js
 			done(varsFound);
 		}, newTheme);
 
 		assert.strictEqual(res, true, "Theme parameters changed");
 	});
 
+	it("Tests fallback to default theme when setting unknown theme", async () => {
+		const unknownTheme = 'sap_unknown_theme';
+		await browser.url(`http://localhost:9191/test-resources/pages/AllTestElements.html?sap-ui-theme=${unknownTheme}`);
+
+		const res = await browser.executeAsync( async (done) => {
+			const cssVarValue = getComputedStyle(document.documentElement).getPropertyValue('--var1');
+			done(cssVarValue);
+		});
+
+		assert.strictEqual(res, ' red', "Default theme parameters loaded");
+	});
 });

package/dist/theming/CustomStyle.js

@@ -1,7 +1,8 @@
 import { reRenderAllUI5Elements } from "../Render.js";
+import getSharedResource from "../getSharedResource.js";
 import EventProvider from "../EventProvider.js";
 
-const eventProvider = new EventProvider();
+const eventProvider = getSharedResource("CustomStyle.eventProvider", new EventProvider());
 const CUSTOM_CSS_CHANGE = "CustomCSSChange";
 
 const attachCustomCSSChange = listener => {
@@ -16,14 +17,33 @@ const fireCustomCSSChange = tag => {
 	return eventProvider.fireEvent(CUSTOM_CSS_CHANGE, tag);
 };
 
-const customCSSFor = {};
+const customCSSFor = getSharedResource("CustomStyle.customCSSFor", {});
+
+// Listen to the eventProvider, in case other copies of this CustomStyle module fire this
+// event, and this copy would therefore need to reRender the ui5 webcomponents; but
+// don't reRender if it was this copy that fired the event to begin with.
+let skipRerender;
+attachCustomCSSChange(tag => {
+	if (!skipRerender) {
+		reRenderAllUI5Elements({ tag });
+	}
+});
 
 const addCustomCSS = (tag, css) => {
 	if (!customCSSFor[tag]) {
 		customCSSFor[tag] = [];
 	}
 	customCSSFor[tag].push(css);
-	fireCustomCSSChange(tag);
+
+	skipRerender = true;
+	try {
+		// The event is fired and the attached event listeners are all called synchronously
+		// The skipRerender flag will be used to avoid calling reRenderAllUI5Elements twice when it is this copy
+		// of CustomStyle.js which is firing the `CustomCSSChange` event.
+		fireCustomCSSChange(tag);
+	} finally {
+		skipRerender = false;
+	}
 
 	return reRenderAllUI5Elements({ tag });
 };

package/dist/theming/applyTheme.js

@@ -1,10 +1,10 @@
 import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "../asset-registries/Themes.js";
-import createThemePropertiesStyleTag from "./createThemePropertiesStyleTag.js";
+import { removeStyle, createOrUpdateStyle } from "../ManagedStyles.js";
 import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
 
-const BASE_THEME_PACKAGE = "@ui5/webcomponents-theme-base";
+const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming";
 
 const isThemeBaseRegistered = () => {
 	const registeredPackages = getRegisteredPackages();
@@ -16,15 +16,14 @@ const loadThemeBase = async theme => {
 		return;
 	}
 
-	const cssText = await getThemeProperties(BASE_THEME_PACKAGE, theme);
-	createThemePropertiesStyleTag(cssText, BASE_THEME_PACKAGE);
+	const cssData = await getThemeProperties(BASE_THEME_PACKAGE, theme);
+	if (cssData) {
+		createOrUpdateStyle(cssData, "data-ui5-theme-properties", BASE_THEME_PACKAGE);
+	}
 };
 
 const deleteThemeBase = () => {
-	const styleElement = document.head.querySelector(`style[data-ui5-theme-properties="${BASE_THEME_PACKAGE}"]`);
-	if (styleElement) {
-		styleElement.parentElement.removeChild(styleElement);
-	}
+	removeStyle("data-ui5-theme-properties", BASE_THEME_PACKAGE);
 };
 
 const loadComponentPackages = async theme => {
@@ -34,8 +33,10 @@ const loadComponentPackages = async theme => {
 			return;
 		}
 
-		const cssText = await getThemeProperties(packageName, theme);
-		createThemePropertiesStyleTag(cssText, packageName);
+		const cssData = await getThemeProperties(packageName, theme);
+		if (cssData) {
+			createOrUpdateStyle(cssData, "data-ui5-theme-properties", packageName);
+		}
 	});
 };
 

package/dist/theming/getEffectiveLinksHrefs.js

@@ -0,0 +1,27 @@
+import { getUrl } from "../CSP.js";
+import { getFeature } from "../FeaturesRegistry.js";
+
+const flatten = arr => {
+	return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
+};
+
+const getEffectiveLinksHrefs = (ElementClass, forStaticArea = false) => {
+	let stylesData = ElementClass[forStaticArea ? "staticAreaStyles" : "styles"];
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
+
+	if (!stylesData) {
+		return;
+	}
+
+	if (!Array.isArray(stylesData)) {
+		stylesData = [stylesData];
+	}
+
+	if (OpenUI5Enablement) {
+		stylesData.push(OpenUI5Enablement.getBusyIndicatorStyles());
+	}
+
+	return flatten(stylesData).filter(data => !!data).map(data => getUrl(data.packageName, data.fileName));
+};
+
+export default getEffectiveLinksHrefs;

package/dist/theming/getEffectiveStyle.js

@@ -1,5 +1,6 @@
 import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
 import getStylesString from "./getStylesString.js";
+import { getFeature } from "../FeaturesRegistry.js";
 
 const effectiveStyleMap = new Map();
 
@@ -10,9 +11,15 @@ attachCustomCSSChange(tag => {
 const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
 	const tag = ElementClass.getMetadata().getTag();
 	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
 
 	if (!effectiveStyleMap.has(key)) {
 		let effectiveStyle;
+		let busyIndicatorStyles = "";
+
+		if (OpenUI5Enablement) {
+			busyIndicatorStyles = getStylesString(OpenUI5Enablement.getBusyIndicatorStyles());
+		}
 
 		if (forStaticArea) {
 			effectiveStyle = getStylesString(ElementClass.staticAreaStyles);
@@ -21,6 +28,8 @@ const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
 			const builtInStyles = getStylesString(ElementClass.styles);
 			effectiveStyle = `${builtInStyles} ${customStyle}`;
 		}
+
+		effectiveStyle = `${effectiveStyle} ${busyIndicatorStyles}`;
 		effectiveStyleMap.set(key, effectiveStyle);
 	}
 

package/dist/theming/getStylesString.js

@@ -1,9 +1,11 @@
 const getStylesString = styles => {
 	if (Array.isArray(styles)) {
-		return flatten(styles.filter(style => !!style)).join(" ");
+		return flatten(styles.filter(style => !!style)).map(style => {
+			return typeof style === "string" ? style : style.content;
+		}).join(" ");
 	}
 
-	return styles;
+	return typeof styles === "string" ? styles : styles.content;
 };
 
 const flatten = arr => {

package/dist/theming/getThemeDesignerTheme.js

@@ -1,15 +1,26 @@
+const warnings = new Set();
+
 const getThemeMetadata = () => {
 	// Check if the class was already applied, most commonly to the link/style tag with the CSS Variables
-	let el = document.querySelector(".sapThemeMetaData-Base-baseLib");
+	let el = document.querySelector(".sapThemeMetaData-Base-baseLib") || document.querySelector(".sapThemeMetaData-UI5-sap-ui-core");
 	if (el) {
 		return getComputedStyle(el).backgroundImage;
 	}
 
 	el = document.createElement("span");
 	el.style.display = "none";
+
+	// Try with sapThemeMetaData-Base-baseLib first
 	el.classList.add("sapThemeMetaData-Base-baseLib");
 	document.body.appendChild(el);
-	const metadata = getComputedStyle(el).backgroundImage;
+	let metadata = getComputedStyle(el).backgroundImage;
+
+	// Try with sapThemeMetaData-UI5-sap-ui-core only if the previous selector was not found
+	if (metadata === "none") {
+		el.classList.add("sapThemeMetaData-UI5-sap-ui-core");
+		metadata = getComputedStyle(el).backgroundImage;
+	}
+
 	document.body.removeChild(el);
 
 	return metadata;
@@ -24,14 +35,20 @@ const parseThemeMetadata = metadataString => {
 			try {
 				paramsString = decodeURIComponent(paramsString);
 			} catch (ex) {
-				console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
+				if (!warnings.has("decode")) {
+					console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
+					warnings.add("decode");
+				}
 				return;
 			}
 		}
 		try {
 			return JSON.parse(paramsString);
 		} catch (ex) {
-			console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
+			if (!warnings.has("parse")) {
+				console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
+				warnings.add("parse");
+			}
 		}
 	}
 };
@@ -44,7 +61,10 @@ const processThemeMetadata = metadata => {
 		themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)[1];
 		baseThemeName = metadata.Extends[0];
 	} catch (ex) {
-		console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
+		if (!warnings.has("object")) {
+			console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
+			warnings.add("object");
+		}
 		return;
 	}
 

package/dist/theming/preloadLinks.js

@@ -0,0 +1,23 @@
+import getEffectiveLinksHrefs from "./getEffectiveLinksHrefs.js";
+import createLinkInHead from "../util/createLinkInHead.js";
+import { shouldUseLinks, shouldPreloadLinks } from "../CSP.js";
+
+const preloaded = new Set();
+
+const preloadLinks = ElementClass => {
+	if (!shouldUseLinks() || !shouldPreloadLinks()) {
+		return;
+	}
+
+	const linksHrefs = getEffectiveLinksHrefs(ElementClass, false) || [];
+	const staticAreaLinksHrefs = getEffectiveLinksHrefs(ElementClass, true) || [];
+
+	[...linksHrefs, ...staticAreaLinksHrefs].forEach(href => {
+		if (!preloaded.has(href)) {
+			createLinkInHead(href, { rel: "preload", as: "style" });
+			preloaded.add(href);
+		}
+	});
+};
+
+export default preloadLinks;

package/dist/updateShadowRoot.js

@@ -1,7 +1,9 @@
 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 isLegacyBrowser from "./isLegacyBrowser.js";
+import { shouldUseLinks } from "./CSP.js";
 
 /**
  * Updates the shadow root of a UI5Element or its static area item
@@ -9,18 +11,20 @@ import isLegacyBrowser from "./isLegacyBrowser.js";
  * @param forStaticArea
  */
 const updateShadowRoot = (element, forStaticArea = false) => {
-	let styleToPrepend;
+	let styleStrOrHrefsArr;
 	const template = forStaticArea ? "staticAreaTemplate" : "template";
 	const shadowRoot = forStaticArea ? element.staticAreaItem.shadowRoot : element.shadowRoot;
 	const renderResult = executeTemplate(element.constructor[template], element);
 
-	if (document.adoptedStyleSheets) { // Chrome
+	if (shouldUseLinks()) {
+		styleStrOrHrefsArr = getEffectiveLinksHrefs(element.constructor, forStaticArea);
+	} else if (document.adoptedStyleSheets) { // Chrome
 		shadowRoot.adoptedStyleSheets = getConstructableStyle(element.constructor, forStaticArea);
 	} else if (!isLegacyBrowser()) { // FF, Safari
-		styleToPrepend = getEffectiveStyle(element.constructor, forStaticArea);
+		styleStrOrHrefsArr = getEffectiveStyle(element.constructor, forStaticArea);
 	}
 
-	element.constructor.render(renderResult, shadowRoot, styleToPrepend, { host: element });
+	element.constructor.render(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
 };
 
 export default updateShadowRoot;

package/dist/util/FocusableElements.js

@@ -5,27 +5,27 @@ const isFocusTrap = el => {
 	return el.hasAttribute("data-ui5-focus-trap");
 };
 
-const getFirstFocusableElement = async container => {
+const getFirstFocusableElement = async (container, startFromContainer) => {
 	if (!container || isNodeHidden(container)) {
 		return null;
 	}
 
-	return findFocusableElement(container, true);
+	return findFocusableElement(container, true, startFromContainer);
 };
 
-const getLastFocusableElement = async container => {
+const getLastFocusableElement = async (container, startFromContainer) => {
 	if (!container || isNodeHidden(container)) {
 		return null;
 	}
 
-	return findFocusableElement(container, false);
+	return findFocusableElement(container, false, startFromContainer);
 };
 
 const isElemFocusable = el => {
 	return el.hasAttribute("data-ui5-focus-redirect") || !isNodeHidden(el);
 };
 
-const findFocusableElement = async (container, forward) => {
+const findFocusableElement = async (container, forward, startFromContainer) => {
 	let child;
 
 	if (container.shadowRoot) {
@@ -33,8 +33,10 @@ const findFocusableElement = async (container, forward) => {
 	} 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.firstChild : container.lastChild;
+		child = forward ? container.firstElementChild : container.lastElementChild;
 	}
 
 	let focusableDescendant;

package/dist/util/InvisibleMessage.js

@@ -5,18 +5,20 @@ import { attachBoot } from "../Boot.js";
 let politeSpan;
 let assertiveSpan;
 
+const setOutOfViewportStyles = el => {
+	el.style.position = "absolute";
+	el.style.clip = "rect(1px,1px,1px,1px)";
+	el.style.userSelect = "none";
+	el.style.left = "-1000px";
+	el.style.top = "-1000px";
+	el.style.pointerEvents = "none";
+};
+
 attachBoot(() => {
 	if (politeSpan && assertiveSpan) {
 		return;
 	}
 
-	const styles = `position: absolute;
-	clip: rect(1px,1px,1px,1px);
-	user-select: none;
-	left: -1000px;
-	top: -1000px;
-	pointer-events: none;`;
-
 	politeSpan = document.createElement("span");
 	assertiveSpan = document.createElement("span");
 
@@ -29,8 +31,8 @@ attachBoot(() => {
 	politeSpan.setAttribute("role", "alert");
 	assertiveSpan.setAttribute("role", "alert");
 
-	politeSpan.style.cssText = styles;
-	assertiveSpan.style.cssText = styles;
+	setOutOfViewportStyles(politeSpan);
+	setOutOfViewportStyles(assertiveSpan);
 
 	getSingletonElementInstance("ui5-static-area").appendChild(politeSpan);
 	getSingletonElementInstance("ui5-static-area").appendChild(assertiveSpan);

package/dist/util/TabbableElements.js

@@ -27,6 +27,10 @@ const getTabbables = (nodes, tabbables) => {
 			currentNode = Array.from(children).find(node => node.tagName !== "STYLE");
 		}
 
+		if (!currentNode) {
+			return;
+		}
+
 		if (isNodeTabbable(currentNode)) {
 			tabbablesNodes.push(currentNode);
 		}

package/dist/util/createLinkInHead.js

@@ -0,0 +1,19 @@
+/**
+ * Creates a <link> tag in the <head> tag
+ * @param href - the CSS
+ * @param attributes - optional attributes to add to the tag
+ * @returns {HTMLElement}
+ */
+const createLinkInHead = (href, attributes = {}) => {
+	const link = document.createElement("link");
+	link.type = "text/css";
+	link.rel = "stylesheet";
+
+	Object.entries(attributes).forEach(pair => link.setAttribute(...pair));
+
+	link.href = href;
+	document.head.appendChild(link);
+	return link;
+};
+
+export default createLinkInHead;

package/dist/util/escapeRegex.js

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

@@ -0,0 +1,42 @@
+import escapeRegex from "./escapeRegex.js";
+import encodeXML from "../sap/base/security/encodeXML.js";
+
+// utility to replace all occurances of a string
+function replaceAll(text, find, replace, caseInsensitive) {
+	return text.replace(new RegExp(escapeRegex(find), `${caseInsensitive ? "i" : ""}g`), replace);
+}
+
+/**
+ * Generate markup for a raw string where a particular text is wrapped with some tag, by default `<b>` (bold) tag.
+ * All inputs to this function are considered literal text, and special characters will always be escaped.
+ * @param {string} text The text to add highlighting to
+ * @param {string} textToHighlight The text which should be highlighted
+ * @return {string} the markup HTML which contains all occurrances of the input text surrounded with a `<b>` tag.
+ */
+function generateHighlightedMarkup(text, textToHighlight) {
+	if (!text || !textToHighlight) {
+		return text;
+	}
+	// a token is some string that does not appear in either of the input strings
+	// repeat the token until it does not appear in the string
+	const makeToken = t => {
+		const [s, e] = t.split("");
+		while (text.indexOf(t) >= 0 || textToHighlight.indexOf(t) >= 0) {
+			t = `${s}${t}${e}`;
+		}
+		return t;
+	};
+	// It doesn't matter what characters are used as long as all 4 of them are unique
+	// And also that encodeXML will not change these characters
+	const openToken = makeToken("12");
+	const closeToken = makeToken("34");
+	// wrap every occurance of the textToHighlight using the open/close tokens (instead of markup at this point)
+	let result = encodeXML(replaceAll(text, textToHighlight, match => `${openToken}${match}${closeToken}`, true));
+	// now replace the open and close tokens with the markup that we expect
+	[[openToken, "<b>"], [closeToken, "</b>"]].forEach(([find, replace]) => {
+		result = replaceAll(result, find, replace);
+	});
+	return result;
+}
+
+export default generateHighlightedMarkup;

package/dist/util/getNormalizedTarget.js

@@ -0,0 +1,16 @@
+/**
+ * Returns the normalized event target in cases when it has shadow root.
+ * @param {Object} target The original event target
+ * @returns {Object} The normalized target
+ */
+const getNormalizedTarget = target => {
+	let element = target;
+
+	if (target.shadowRoot && target.shadowRoot.activeElement) {
+		element = target.shadowRoot.activeElement;
+	}
+
+	return element;
+};
+
+export default getNormalizedTarget;

package/dist/util/isNodeHidden.js

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

package/lib/generate-asset-parameters/index.js

@@ -1,6 +1,4 @@
-const fs = require('fs');
-const path = require('path');
-const mkdirp = require('mkdirp');
+const fs = require('fs').promises;
 const assets = require('@ui5/webcomponents-tools/assets-meta.js');
 
 const fileContent = `const assetParameters = ${JSON.stringify(assets)};
@@ -17,6 +15,11 @@ export {
 	SUPPORTED_LOCALES,
 };`;
 
-mkdirp.sync("dist/generated/");
-fs.writeFileSync("dist/generated/AssetParameters.js", fileContent);
+const generate = async () => {
+	await fs.mkdir("dist/generated/", { recursive: true });
+	return fs.writeFile("dist/generated/AssetParameters.js", fileContent);
+}
 
+generate().then(() => {
+	console.log("Assets parameters generated.");
+});

package/lib/generate-styles/index.js

@@ -0,0 +1,26 @@
+const fs = require('fs').promises;
+const path = require('path');
+const CleanCSS = require('clean-css');
+
+const generate = async () => {
+	await fs.mkdir("dist/generated/css/");
+
+	const files = (await fs.readdir("src/css/")).filter(file => file.endsWith(".css"));
+	const filesPromises = files.map(async file => {
+		let content = await fs.readFile(path.join("src/css/", file));
+		const res = new CleanCSS().minify(`${content}`);
+		content = `export default {
+	packageName: "@ui5/webcomponents-base",
+	fileName: "${file}",
+	content: \`${res.styles}\`
+};`;
+
+		return fs.writeFile(path.join("dist/generated/css/", `${file}.js`), content);
+	});
+
+	return Promise.all(filesPromises);
+};
+
+generate().then(() => {
+	console.log("Styles files generated.");
+});