@ui5/webcomponents-base 0.33.0 → 1.0.0

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,6 +1,6 @@
 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;
 	}
@@ -8,6 +8,7 @@ const getThemeMetadata = () => {
 	el = document.createElement("span");
 	el.style.display = "none";
 	el.classList.add("sapThemeMetaData-Base-baseLib");
+	el.classList.add("sapThemeMetaData-UI5-sap-ui-core");
 	document.body.appendChild(el);
 	const metadata = getComputedStyle(el).backgroundImage;
 	document.body.removeChild(el);

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/types/DataType.js

@@ -11,6 +11,18 @@ class DataType {
 	static isValid(value) {
 	}
 
+	static attributeToProperty(attributeValue) {
+		return attributeValue;
+	}
+
+	static propertyToAttribute(propertyValue) {
+		return `${propertyValue}`;
+	}
+
+	static valuesAreEqual(value1, value2) {
+		return value1 === value2;
+	}
+
 	static generateTypeAccessors(types) {
 		Object.keys(types).forEach(type => {
 			Object.defineProperty(this, type, {

package/dist/types/Float.js

@@ -5,6 +5,10 @@ class Float extends DataType {
 		// Assuming that integers are floats as well!
 		return Number(value) === value;
 	}
+
+	static attributeToProperty(attributeValue) {
+		return parseFloat(attributeValue);
+	}
 }
 
 export default Float;

package/dist/types/Integer.js

@@ -4,6 +4,10 @@ class Integer extends DataType {
 	static isValid(value) {
 		return Number.isInteger(value);
 	}
+
+	static attributeToProperty(attributeValue) {
+		return parseInt(attributeValue);
+	}
 }
 
 export default Integer;

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, { host: element });
 };
 
 export default updateShadowRoot;

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/encodeXML.js

@@ -0,0 +1,35 @@
+const fnToHex = (iChar, iLength) => {
+	let sHex = iChar.toString(16);
+	if (iLength) {
+		sHex = sHex.padStart(iLength, "0");
+	}
+	return sHex;
+};
+
+const rHtml = /[\x00-\x2b\x2f\x3a-\x40\x5b-\x5e\x60\x7b-\xff\u2028\u2029]/g, // eslint-disable-line no-control-regex
+	rHtmlReplace = /[\x00-\x08\x0b\x0c\x0e-\x1f\x7f-\x9f]/, // eslint-disable-line no-control-regex
+	mHtmlLookup = {
+		"<": "&lt;",
+		">": "&gt;",
+		"&": "&amp;",
+		"\"": "&quot;",
+	};
+
+const fnHtml = sChar => {
+	let sEncoded = mHtmlLookup[sChar];
+	if (!sEncoded) {
+		if (rHtmlReplace.test(sChar)) {
+			sEncoded = "&#xfffd;";
+		} else {
+			sEncoded = `&#x${fnToHex(sChar.charCodeAt(0))};`;
+		}
+		mHtmlLookup[sChar] = sEncoded;
+	}
+	return sEncoded;
+};
+
+const fnEncodeXML = sString => {
+	return sString.replace(rHtml, fnHtml);
+};
+
+export default fnEncodeXML;

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 "./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/hash.txt

@@ -1 +1 @@
-4ww8NXNfQEKz/jKz4fx9NcfWBUE=
+lG/1T57aPULqB5ErWOkk2B0Pejk=

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

@@ -1,5 +1,4 @@
 const fs = require('fs');
-const path = require('path');
 const mkdirp = require('mkdirp');
 const assets = require('@ui5/webcomponents-tools/assets-meta.js');
 

package/lib/generate-styles/index.js

@@ -0,0 +1,18 @@
+const fs = require('fs');
+const path = require('path');
+const mkdirp = require('mkdirp');
+const CleanCSS = require('clean-css');
+
+mkdirp.sync("dist/generated/css/");
+fs.readdirSync("src/css/").filter(file => file.endsWith(".css")).forEach(file => {
+	let content = fs.readFileSync(path.join("src/css/", file));
+	const res = new CleanCSS().minify(`${content}`);
+	content = `export default {
+	packageName: "@ui5/webcomponents-base",
+	fileName: "${file}",
+	content: \`${res.styles}\`
+};`;
+
+	fs.writeFileSync(path.join("dist/generated/css/", `${file}.js`), content);
+});
+

package/package-scripts.js

@@ -1,6 +1,7 @@
 const resolve = require("resolve");
 
 const assetParametersScript = resolve.sync("@ui5/webcomponents-base/lib/generate-asset-parameters/index.js");
+const stylesScript = resolve.sync("@ui5/webcomponents-base/lib/generate-styles/index.js");
 const serve = resolve.sync("@ui5/webcomponents-tools/lib/serve/index.js");
 const generateHash = resolve.sync("@ui5/webcomponents-tools/lib/hash/generate.js");
 const hashIsUpToDate = resolve.sync("@ui5/webcomponents-tools/lib/hash/upToDate.js");
@@ -12,17 +13,17 @@ const UP_TO_DATE = `node "${hashIsUpToDate}" dist/ hash.txt && echo "Up to date.
 const scripts = {
 	clean: "rimraf dist && rimraf .port",
 	lint: "eslint . --config config/.eslintrc.js",
-	prepare: "nps clean integrate copy generateAssetParameters",
+	prepare: "nps clean integrate copy generateAssetParameters generateStyles",
 	integrate: {
 		default: "nps integrate.copy-used-modules integrate.copy-overlay integrate.replace-amd integrate.replace-export-true integrate.replace-export-false integrate.amd-to-es6 integrate.replace-global-core-usage integrate.esm-abs-to-rel integrate.third-party",
-		"copy-used-modules": `node ${copyUsedModules} ./used-modules.txt dist/`,
+		"copy-used-modules": `node "${copyUsedModules}" ./used-modules.txt dist/`,
 		"copy-overlay": `copy-and-watch "overlay/**/*.js" dist/`,
 		"replace-amd": "replace-in-file sap.ui.define define dist/**/*.js",
 		"replace-export-true": `replace-in-file ", /* bExport= */ true" "" dist/**/*.js`,
 		"replace-export-false": `replace-in-file ", /* bExport= */ false" "" dist/**/*.js`,
 		"amd-to-es6": "amdtoes6 --src=dist/ --replace --glob=**/*.js",
-		"replace-global-core-usage": `node ${replaceGlobalCore} dist/`,
-		"esm-abs-to-rel": `node ${esmAbsToRel} dist/ dist/`,
+		"replace-global-core-usage": `node "${replaceGlobalCore}" dist/`,
+		"esm-abs-to-rel": `node "${esmAbsToRel}" dist/ dist/`,
 		"third-party": {
 			default: "nps integrate.third-party.copy integrate.third-party.fix",
 			copy: "mkdirp dist/sap/ui/thirdparty/ && copy-and-watch ../../node_modules/@openui5/sap.ui.core/src/sap/ui/thirdparty/caja-html-sanitizer.js dist/sap/ui/thirdparty/",
@@ -35,15 +36,17 @@ const scripts = {
 	},
 	copy: {
 		default: "nps copy.src copy.test",
-		src: `copy-and-watch "src/**/*.js" dist/`,
+		src: `copy-and-watch "src/**/*.{js,css}" dist/`,
 		test: `copy-and-watch "test/**/*.*" dist/test-resources`,
 	},
 	generateAssetParameters: `node "${assetParametersScript}"`,
+	generateStyles: `node "${stylesScript}"`,
 	watch: {
-		default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle"',
+		default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles"',
 		src: 'nps "copy.src --watch --skip-initial-copy"',
 		test: 'nps "copy.test --watch --skip-initial-copy"',
 		bundle: "rollup --config config/rollup.config.js -w --environment DEV",
+		styles: 'chokidar "src/css/*.css" -c "nps generateStyles"'
 	},
 	dev: 'concurrently "nps serve" "nps watch"',
 	start: "nps prepare dev",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.33.0",
+  "version": "1.0.0",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -32,19 +32,17 @@
     "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
-    "lit-html": "2.0.0-rc.3"
+    "lit-html": "2.0.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.33.0",
-    "@buxlabs/amd-to-es6": "0.16.0",
-    "@openui5/sap.ui.core": "1.87.3",
-    "array-uniq": "^2.0.0",
-    "chromedriver": "92.0.0",
+    "@buxlabs/amd-to-es6": "0.16.1",
+    "@openui5/sap.ui.core": "1.94.0",
+    "@ui5/webcomponents-tools": "1.0.0",
+    "chromedriver": "95.0.0",
+    "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
     "eslint": "^7.22.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "npm-run-all": "^4.1.5",
-    "path-exists-cli": "^1.0.0",
-    "replace-in-file": "^6.2.0"
+    "mkdirp": "^1.0.4",
+    "resolve": "^1.20.0"
   }
-}
+}

package/src/CSP.js

@@ -0,0 +1,59 @@
+const roots = new Map();
+let useLinks = false;
+let preloadLinks = true;
+
+/**
+ * Use this function to provide the path to the directory where the css resources for the given package will be served from
+ *
+ * @public
+ * @param packageName name of the package that is being configured
+ * @param root path, accessible by the server that will serve the css resources
+ */
+const setPackageCSSRoot = (packageName, root) => {
+	roots.set(packageName, root);
+};
+
+const getUrl = (packageName, path) => {
+	return `${roots.get(packageName)}${path}`;
+};
+
+/**
+ * Call this function to enable or disable the usage of <link> tags instead of <style> tags to achieve CSP compliance
+ * Example: "setUseLinks(true)" will unconditionally use <link> tags for all browsers;
+ * Example: "setUseLinks(!document.adoptedStyleSheets) will only enable the usage of <link> tags for browsers that do not support constructable stylesheets.
+ *
+ * @public
+ * @param use whether links will be used
+ */
+const setUseLinks = use => {
+	useLinks = use;
+};
+
+/**
+ * Call this function to enable or disable the preloading of <link> tags.
+ * Note: only taken into account when <link> tags are being used.
+ * Note: links are being preloaded by default, so call "setPreloadLinks(false)" to opt out of this.
+ *
+ * @public
+ * @param preload
+ */
+const setPreloadLinks = preload => {
+	preloadLinks = preload;
+};
+
+const shouldUseLinks = () => {
+	return useLinks;
+};
+
+const shouldPreloadLinks = () => {
+	return preloadLinks;
+};
+
+export {
+	setPackageCSSRoot,
+	getUrl,
+	setUseLinks,
+	setPreloadLinks,
+	shouldUseLinks,
+	shouldPreloadLinks,
+};

package/src/Device.js

@@ -91,6 +91,10 @@ const isDesktop = () => {
 	return (!isTablet() && !isPhone()) || isWindows8OrAbove();
 };
 
+const isCombi = () => {
+	return isTablet() && isDesktop();
+};
+
 export {
 	supportsTouch,
 	isIE,
@@ -99,4 +103,5 @@ export {
 	isPhone,
 	isTablet,
 	isDesktop,
+	isCombi,
 };

package/src/EventProvider.js

@@ -1,36 +1,37 @@
 class EventProvider {
 	constructor() {
-		this._eventRegistry = {};
+		this._eventRegistry = new Map();
 	}
 
 	attachEvent(eventName, fnFunction) {
 		const eventRegistry = this._eventRegistry;
-		let eventListeners = eventRegistry[eventName];
+		const eventListeners = eventRegistry.get(eventName);
 
 		if (!Array.isArray(eventListeners)) {
-			eventRegistry[eventName] = [];
-			eventListeners = eventRegistry[eventName];
+			eventRegistry.set(eventName, [fnFunction]);
+			return;
 		}
 
-		eventListeners.push({
-			"function": fnFunction,
-		});
+		if (!eventListeners.includes(fnFunction)) {
+			eventListeners.push(fnFunction);
+		}
 	}
 
 	detachEvent(eventName, fnFunction) {
 		const eventRegistry = this._eventRegistry;
-		let eventListeners = eventRegistry[eventName];
+		const eventListeners = eventRegistry.get(eventName);
 
 		if (!eventListeners) {
 			return;
 		}
+		const indexOfFnToDetach = eventListeners.indexOf(fnFunction);
 
-		eventListeners = eventListeners.filter(event => {
-			return event["function"] !== fnFunction; // eslint-disable-line
-		});
+		if (indexOfFnToDetach !== -1) {
+			eventListeners.splice(indexOfFnToDetach, 1);
+		}
 
 		if (eventListeners.length === 0) {
-			delete eventRegistry[eventName];
+			eventRegistry.delete(eventName);
 		}
 	}
 
@@ -43,14 +44,14 @@ class EventProvider {
 	 */
 	fireEvent(eventName, data) {
 		const eventRegistry = this._eventRegistry;
-		const eventListeners = eventRegistry[eventName];
+		const eventListeners = eventRegistry.get(eventName);
 
 		if (!eventListeners) {
 			return [];
 		}
 
-		return eventListeners.map(event => {
-			return event["function"].call(this, data); // eslint-disable-line
+		return eventListeners.map(fn => {
+			return fn.call(this, data); // eslint-disable-line
 		});
 	}
 
@@ -67,24 +68,17 @@ class EventProvider {
 
 	isHandlerAttached(eventName, fnFunction) {
 		const eventRegistry = this._eventRegistry;
-		const eventListeners = eventRegistry[eventName];
+		const eventListeners = eventRegistry.get(eventName);
 
 		if (!eventListeners) {
 			return false;
 		}
 
-		for (let i = 0; i < eventListeners.length; i++) {
-			const event = eventListeners[i];
-			if (event["function"] === fnFunction) { // eslint-disable-line
-				return true;
-			}
-		}
-
-		return false;
+		return eventListeners.includes(fnFunction);
 	}
 
 	hasListeners(eventName) {
-		return !!this._eventRegistry[eventName];
+		return !!this._eventRegistry.get(eventName);
 	}
 }
 

package/src/FontFace.js

@@ -1,95 +1,7 @@
-/**
- * CSS font face used for the texts provided by SAP.
- */
-import createStyleInHead from "./util/createStyleInHead.js";
+import { hasStyle, createStyle } from "./ManagedStyles.js";
 import { getFeature } from "./FeaturesRegistry.js";
-
-/* CDN Locations */
-const font72RegularWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents`;
-const font72RegularWoff2 = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents`;
-
-const font72RegularFullWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents`;
-const font72RegularFullWoff2 = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents`;
-
-const font72BoldWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents`;
-const font72BoldWoff2 = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents`;
-
-const font72BoldFullWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents`;
-const font72BoldFullWoff2 = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents`;
-
-const fontFaceCSS = `
-	@font-face {
-		font-family: "72";
-		font-style: normal;
-		font-weight: 400;
-		src: local("72"),
-			url(${font72RegularWoff2}) format("woff2"),
-			url(${font72RegularWoff}) format("woff");
-	}
-	
-	@font-face {
-		font-family: "72full";
-		font-style: normal;
-		font-weight: 400;
-		src: local('72-full'),
-			url(${font72RegularFullWoff2}) format("woff2"),
-			url(${font72RegularFullWoff}) format("woff");
-		
-	}
-	
-	@font-face {
-		font-family: "72";
-		font-style: normal;
-		font-weight: 700;
-		src: local('72-Bold'),
-			url(${font72BoldWoff2}) format("woff2"),
-			url(${font72BoldWoff}) format("woff");
-	}
-	
-	@font-face {
-		font-family: "72full";
-		font-style: normal;
-		font-weight: 700;
-		src: local('72-Bold-full'),
-			url(${font72BoldFullWoff2}) format("woff2"),
-			url(${font72BoldFullWoff}) format("woff");
-	}
-`;
-
-/**
- * Some diacritics are supported by the 72 font:
- *  * Grave
- *  * Acute
- *  * Circumflex
- *  * Tilde
- *
- * However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
- *  * Breve
- *  * Horn
- *  * Dot below
- *  * Hook above
- *
- *
- * Override for the characters that aren't covered by the '72' font to other system fonts
- *
- * U+0102-0103: A and a with Breve
- * U+01A0-01A1: O and o with Horn
- * U+01AF-01B0: U and u with Horn
- * U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
- * U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
- * U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
- * U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
- * U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
- * U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
- *
- */
-const overrideFontFaceCSS = `
-	@font-face {
-		font-family: '72override';
-		unicode-range: U+0102-0103, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EB7, U+1EB8-1EC7, U+1EC8-1ECB, U+1ECC-1EE3, U+1EE4-1EF1, U+1EF4-1EF7;
-		src: local('Arial'), local('Helvetica'), local('sans-serif');
-	}
-`;
+import fontFaceCSS from "./generated/css/FontFace.css.js";
+import overrideFontFaceCSS from "./generated/css/OverrideFontFace.css.js";
 
 const insertFontFace = () => {
 	const OpenUI5Support = getFeature("OpenUI5Support");
@@ -104,14 +16,14 @@ const insertFontFace = () => {
 };
 
 const insertMainFontFace = () => {
-	if (!document.querySelector(`head>style[data-ui5-font-face]`)) {
-		createStyleInHead(fontFaceCSS, { "data-ui5-font-face": "" });
+	if (!hasStyle("data-ui5-font-face")) {
+		createStyle(fontFaceCSS, "data-ui5-font-face");
 	}
 };
 
 const insertOverrideFontFace = () => {
-	if (!document.querySelector(`head>style[data-ui5-font-face-override]`)) {
-		createStyleInHead(overrideFontFaceCSS, { "data-ui5-font-face-override": "" });
+	if (!hasStyle("data-ui5-font-face-override")) {
+		createStyle(overrideFontFaceCSS, "data-ui5-font-face-override");
 	}
 };