@ui5/webcomponents-base 0.0.0-a3eca7ade → 0.0.0-a7032d86e

package/dist/util/isElementClickable.js

@@ -0,0 +1,16 @@
+const rClickable = /^(?:a|area)$/i;
+const rFocusable = /^(?:input|select|textarea|button)$/i;
+const isElementClickable = (el) => {
+    if (el.disabled) {
+        return false;
+    }
+    const tabIndex = el.getAttribute("tabindex");
+    if (tabIndex !== null && tabIndex !== undefined) {
+        return parseInt(tabIndex) >= 0;
+    }
+    return rFocusable.test(el.nodeName)
+        || (rClickable.test(el.nodeName)
+            && !!el.href);
+};
+export default isElementClickable;
+//# sourceMappingURL=isElementClickable.js.map

package/dist/util/isElementClickable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isElementClickable.js","sourceRoot":"","sources":["../../src/util/isElementClickable.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG,eAAe,CAAC;AACnC,MAAM,UAAU,GAAG,qCAAqC,CAAC;AAEzD,MAAM,kBAAkB,GAAG,CAAC,EAAe,EAAW,EAAE;IACvD,IAAK,EAAwB,CAAC,QAAQ,EAAE;QACvC,OAAO,KAAK,CAAC;KACb;IAED,MAAM,QAAQ,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAC7C,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,EAAE;QAChD,OAAO,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KAC/B;IAED,OAAO,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;WAC/B,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;eAC7B,CAAC,CAAE,EAAsB,CAAC,IAAI,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/util/isElementHidden.d.ts

@@ -0,0 +1,2 @@
+declare const isElementHidden: (el: HTMLElement) => boolean;
+export default isElementHidden;

package/dist/util/isElementHidden.js

@@ -0,0 +1,8 @@
+const isElementHidden = (el) => {
+    if (el.nodeName === "SLOT") {
+        return false;
+    }
+    return (el.offsetWidth <= 0 && el.offsetHeight <= 0) || (el.style && el.style.visibility === "hidden");
+};
+export default isElementHidden;
+//# sourceMappingURL=isElementHidden.js.map

package/dist/util/isElementHidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isElementHidden.js","sourceRoot":"","sources":["../../src/util/isElementHidden.ts"],"names":[],"mappings":"AAAA,MAAM,eAAe,GAAG,CAAC,EAAe,EAAE,EAAE;IAC3C,IAAI,EAAE,CAAC,QAAQ,KAAK,MAAM,EAAE;QAC3B,OAAO,KAAK,CAAC;KACb;IAED,OAAO,CAAC,EAAE,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC,YAAY,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,KAAK,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;AACxG,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/util/isElementInView.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Determines if the element is within the viewport.
+ * @param el {HTMLElement}
+ */
+declare const isElementInView: (el: HTMLElement) => boolean;
+export default isElementInView;

package/dist/util/isElementInView.js

@@ -2,14 +2,11 @@
  * Determines if the element is within the viewport.
  * @param el {HTMLElement}
  */
-const isElementInView = el => {
-	const rect = el.getBoundingClientRect();
-
-	return (
-		rect.top >= 0 && rect.left >= 0
-			&& rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
-			&& rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-	);
+const isElementInView = (el) => {
+    const rect = el.getBoundingClientRect();
+    return (rect.top >= 0 && rect.left >= 0
+        && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+        && rect.right <= (window.innerWidth || document.documentElement.clientWidth));
 };
-
 export default isElementInView;
+//# sourceMappingURL=isElementInView.js.map

package/dist/util/isElementInView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isElementInView.js","sourceRoot":"","sources":["../../src/util/isElementInView.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,eAAe,GAAG,CAAC,EAAe,EAAE,EAAE;IAC3C,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;IAExC,OAAO,CACN,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC;WAC3B,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;WAC5E,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC,CAC7E,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/util/isElementTabbable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns if the HTMLElement is tabbable.
+ *
+ * @public
+ * @param { HTMLElement } el the component to operate on (component that slots or contains within its shadow root the items the user navigates among)
+ * @returns { boolean } true if the element is tabbable or false - if not
+ */
+declare const isElementTabbable: (el: HTMLElement) => boolean;
+export default isElementTabbable;

package/dist/util/isElementTabbable.js

@@ -0,0 +1,30 @@
+import isElementHidden from "./isElementHidden.js";
+/**
+ * Returns if the HTMLElement is tabbable.
+ *
+ * @public
+ * @param { HTMLElement } el the component to operate on (component that slots or contains within its shadow root the items the user navigates among)
+ * @returns { boolean } true if the element is tabbable or false - if not
+ */
+const isElementTabbable = (el) => {
+    if (!el) {
+        return false;
+    }
+    const nodeName = el.nodeName.toLowerCase();
+    if (el.hasAttribute("data-sap-no-tab-ref")) {
+        return false;
+    }
+    if (isElementHidden(el)) {
+        return false;
+    }
+    const tabIndex = el.getAttribute("tabindex");
+    if (tabIndex !== null && tabIndex !== undefined) {
+        return parseInt(tabIndex) >= 0;
+    }
+    if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
+        return !el.disabled;
+    }
+    return false;
+};
+export default isElementTabbable;
+//# sourceMappingURL=isElementTabbable.js.map

package/dist/util/isElementTabbable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isElementTabbable.js","sourceRoot":"","sources":["../../src/util/isElementTabbable.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAEnD;;;;;;GAMG;AACH,MAAM,iBAAiB,GAAG,CAAC,EAAe,EAAW,EAAE;IACtD,IAAI,CAAC,EAAE,EAAE;QACR,OAAO,KAAK,CAAC;KACb;IAED,MAAM,QAAQ,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;IAE3C,IAAI,EAAE,CAAC,YAAY,CAAC,qBAAqB,CAAC,EAAE;QAC3C,OAAO,KAAK,CAAC;KACb;IAED,IAAI,eAAe,CAAC,EAAE,CAAC,EAAE;QACxB,OAAO,KAAK,CAAC;KACb;IAED,MAAM,QAAQ,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAC7C,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,EAAE;QAChD,OAAO,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KAC/B;IAED,IAAI,QAAQ,KAAK,GAAG,IAAI,qCAAqC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;QAC7E,OAAO,CAAE,EAAsB,CAAC,QAAQ,CAAC;KACzC;IAED,OAAO,KAAK,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/util/isValidPropertyName.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Checks whether a property name is valid (does not collide with existing DOM API properties)
+ *
+ * @param name
+ * @returns {boolean}
+ */
+declare const isValidPropertyName: (name: string) => boolean;
+export default isValidPropertyName;

package/dist/util/isValidPropertyName.js

@@ -1,29 +1,28 @@
 // Note: disabled is present in IE so we explicitly allow it here.
 // Others, such as title/hidden, we explicitly override, so valid too
 const allowList = [
-	"disabled",
-	"title",
-	"hidden",
-	"role",
-	"draggable",
+    "disabled",
+    "title",
+    "hidden",
+    "role",
+    "draggable",
 ];
-
 /**
  * Checks whether a property name is valid (does not collide with existing DOM API properties)
  *
  * @param name
  * @returns {boolean}
  */
-const isValidPropertyName = name => {
-	if (allowList.includes(name) || name.startsWith("aria")) {
-		return true;
-	}
-	const classes = [
-		HTMLElement,
-		Element,
-		Node,
-	];
-	return !classes.some(klass => klass.prototype.hasOwnProperty(name)); // eslint-disable-line
+const isValidPropertyName = (name) => {
+    if (allowList.includes(name) || name.startsWith("aria")) {
+        return true;
+    }
+    const classes = [
+        HTMLElement,
+        Element,
+        Node,
+    ];
+    return !classes.some(klass => klass.prototype.hasOwnProperty(name)); // eslint-disable-line
 };
-
 export default isValidPropertyName;
+//# sourceMappingURL=isValidPropertyName.js.map

package/dist/util/isValidPropertyName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isValidPropertyName.js","sourceRoot":"","sources":["../../src/util/isValidPropertyName.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,qEAAqE;AACrE,MAAM,SAAS,GAAG;IACjB,UAAU;IACV,OAAO;IACP,QAAQ;IACR,MAAM;IACN,WAAW;CACX,CAAC;AAEF;;;;;GAKG;AACH,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAE,EAAE;IAC5C,IAAI,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;QACxD,OAAO,IAAI,CAAC;KACZ;IACD,MAAM,OAAO,GAAG;QACf,WAAW;QACX,OAAO;QACP,IAAI;KACJ,CAAC;IACF,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,sBAAsB;AAC5F,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/util/whenDOMReady.d.ts

@@ -0,0 +1,2 @@
+declare const whenDOMReady: () => Promise<void>;
+export default whenDOMReady;

package/dist/util/whenDOMReady.js

@@ -1,13 +1,14 @@
 const whenDOMReady = () => {
-	return new Promise(resolve => {
-		if (document.body) {
-			resolve();
-		} else {
-			document.addEventListener("DOMContentLoaded", () => {
-				resolve();
-			});
-		}
-	});
+    return new Promise(resolve => {
+        if (document.body) {
+            resolve();
+        }
+        else {
+            document.addEventListener("DOMContentLoaded", () => {
+                resolve();
+            });
+        }
+    });
 };
-
 export default whenDOMReady;
+//# sourceMappingURL=whenDOMReady.js.map

package/dist/util/whenDOMReady.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whenDOMReady.js","sourceRoot":"","sources":["../../src/util/whenDOMReady.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,GAAG,EAAE;IACzB,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;QAClC,IAAI,QAAQ,CAAC,IAAI,EAAE;YAClB,OAAO,EAAE,CAAC;SACV;aAAM;YACN,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE;gBAClD,OAAO,EAAE,CAAC;YACX,CAAC,CAAC,CAAC;SACH;IACF,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/util/willShowContent.d.ts

@@ -0,0 +1,2 @@
+declare const willShowContent: (childNodes: Array<Node>) => boolean;
+export default willShowContent;

package/dist/util/willShowContent.js

@@ -0,0 +1,7 @@
+const willShowContent = (childNodes) => {
+    return Array.from(childNodes).filter(node => {
+        return node.nodeType !== Node.COMMENT_NODE && (node.nodeType !== Node.TEXT_NODE || (node.nodeValue || "").trim().length !== 0);
+    }).length > 0;
+};
+export default willShowContent;
+//# sourceMappingURL=willShowContent.js.map

package/dist/util/willShowContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"willShowContent.js","sourceRoot":"","sources":["../../src/util/willShowContent.ts"],"names":[],"mappings":"AAAA,MAAM,eAAe,GAAG,CAAC,UAAuB,EAAE,EAAE;IACnD,OAAO,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;QAC3C,OAAO,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;IAChI,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/validateThemeRoot.d.ts

@@ -0,0 +1,2 @@
+declare const validateThemeRoot: (themeRoot: string) => string | undefined;
+export default validateThemeRoot;

package/dist/validateThemeRoot.js

@@ -0,0 +1,47 @@
+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;
+//# sourceMappingURL=validateThemeRoot.js.map

package/dist/validateThemeRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateThemeRoot.js","sourceRoot":"","sources":["../src/validateThemeRoot.ts"],"names":[],"mappings":"AAAA,MAAM,eAAe,GAAG,CAAC,WAAmB,EAAE,EAAE;IAC/C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,WAAW,IAAI,CAAC,EACpE,cAAc,GAAG,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAE7D,OAAO,cAAc,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,MAAc,EAAE,EAAE;IAC9C,MAAM,cAAc,GAAG,eAAe,CAAC,yBAAyB,CAAC,CAAC;IAElE,OAAO,cAAc,IAAI,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;QACvE,OAAO,aAAa,KAAK,GAAG,IAAI,MAAM,KAAK,aAAa,CAAC,IAAI,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,MAAc,EAAE,SAAiB,EAAE,EAAE;IAC7D,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC;IAE5C,OAAO,IAAI,GAAG,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,SAAiB,EAAE,EAAE;IAC/C,IAAI,YAAY,EACf,SAAS,CAAC;IAEX,IAAI;QACH,YAAY,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC;QAElC,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,CAAC;QAEnC,YAAY,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;QAEvC,IAAI,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YACjE,sBAAsB;YACtB,wFAAwF;YACxF,iGAAiG;YACjG,0FAA0F;YAC1F,SAAS,GAAG,IAAI,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;SACnE;aAAM,IAAI,MAAM,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;YACjD,+BAA+B;YAC/B,SAAS,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;SACpC;aAAM;YACN,oFAAoF;YACpF,wBAAwB;YACxB,SAAS,GAAG,eAAe,CAAC,YAAY,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SAChE;QAED,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YAC7B,SAAS,GAAG,GAAG,SAAS,GAAG,CAAC;SAC5B;QAED,OAAO,GAAG,SAAS,MAAM,CAAC;KAC1B;IAAC,OAAO,CAAC,EAAE;QACX,8BAA8B;KAC9B;AACF,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/global.d.ts

@@ -0,0 +1,44 @@
+import { StyleData } from "./src/types.js";
+
+export {};
+
+declare global {
+
+	type VersionInfo = {
+		version: string,
+		major: number,
+		minor: number,
+		patch: number,
+		suffix: string,
+		isNext: boolean,
+		buildTime: number,
+	}
+
+	interface Window {
+		sap: any;
+		chrome: any;
+		v8: any;
+	}
+	module "*.css.js" {
+		const content: StyleData;
+		export default content;
+	}
+
+	module "*generated/AssetParameters.js" {
+		const DEFAULT_THEME: string;
+		const DEFAULT_LANGUAGE: string;
+		const DEFAULT_LOCALE: string;
+		const SUPPORTED_LOCALES: Array<string>;
+		export {
+			DEFAULT_THEME,
+			DEFAULT_LANGUAGE,
+			DEFAULT_LOCALE,
+			SUPPORTED_LOCALES,
+		};
+	}
+
+	module "*generated/VersionInfo.js" {
+		const content: VersionInfo;
+		export default content;
+	}
+}

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

@@ -1,5 +1,4 @@
-const fs = require('fs');
-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)};
@@ -16,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

@@ -1,18 +1,26 @@
-const fs = require('fs');
+const fs = require('fs').promises;
 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 {
+const generate = async () => {
+	await fs.mkdir("dist/generated/css/", {recursive: true});
+
+	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}\`
 };`;
 
-	fs.writeFileSync(path.join("dist/generated/css/", `${file}.js`), content);
-});
+		return fs.writeFile(path.join("dist/generated/css/", `${file}.js`), content);
+	});
 
+	return Promise.all(filesPromises);
+};
+
+generate().then(() => {
+	console.log("Styles files generated.");
+});

package/lib/generate-version-info/index.js

@@ -1,18 +1,18 @@
-const fs = require('fs');
-const mkdirp = require('mkdirp');
+const fs = require('fs').promises;
 
-const version = JSON.parse(fs.readFileSync("package.json")).version;
+const generate = async () => {
+	const version = JSON.parse(await fs.readFile("package.json")).version;
 
-// Parse version
-const matches = version.match(/^([0-9]+)\.([0-9]+)\.([0-9]+)(.*)$/);
-if (!matches) {
-	throw new Error("Unsupported version format");
-}
+	// Parse version
+	const matches = version.match(/^([0-9]+)\.([0-9]+)\.([0-9]+)(.*)$/);
+	if (!matches) {
+		throw new Error("Unsupported version format");
+	}
 
-const isNext = version.match(/[a-f0-9]{9}$/);
-const buildTime = Math.floor(new Date().getTime() / 1000);
+	const isNext = version.match(/[a-f0-9]{9}$/);
+	const buildTime = Math.floor(new Date().getTime() / 1000);
 
-const fileContent = `const VersionInfo = {
+	const fileContent = `const VersionInfo = {
 	version: "${version}",
 	major: ${matches[1]},
 	minor: ${matches[2]},
@@ -23,5 +23,10 @@ const fileContent = `const VersionInfo = {
 };
 export default VersionInfo;`;
 
-mkdirp.sync("dist/generated/");
-fs.writeFileSync("dist/generated/VersionInfo.js", fileContent);
+	await fs.mkdir("dist/generated/", { recursive: true });
+	await fs.writeFile("dist/generated/VersionInfo.js", fileContent);
+}
+
+generate().then(() => {
+	console.log("Version info file generated.");
+});

package/package-scripts.js

@@ -1,29 +1,28 @@
 const resolve = require("resolve");
+const path = require("path");
 
 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 versionScript = resolve.sync("@ui5/webcomponents-base/lib/generate-version-info/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");
 const copyUsedModules = resolve.sync("@ui5/webcomponents-tools/lib/copy-list/index.js");
-const replaceGlobalCore = resolve.sync("@ui5/webcomponents-tools/lib/replace-global-core/index.js");
 const esmAbsToRel = resolve.sync("@ui5/webcomponents-tools/lib/esm-abs-to-rel/index.js");
-const UP_TO_DATE = `node "${hashIsUpToDate}" dist/ hash.txt && echo "Up to date."`;
+const preprocessJSDocScript = resolve.sync("@ui5/webcomponents-tools/lib/jsdoc/preprocess.js");
+
+const LIB = path.join(__dirname, `../tools/lib/`);
+
+const viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-package/vite.config.js")}"`;
+const eslintConfig = `--config ${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}`;
 
 const scripts = {
-	clean: "rimraf dist && rimraf .port",
-	lint: "eslint . --config config/.eslintrc.js",
-	prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles",
+	clean: "rimraf jsdoc-dist && rimraf dist && rimraf .port",
+	lint: `eslint . ${eslintConfig}`,
+	prepare: "nps clean integrate copy typescript generateAssetParameters generateVersionInfo generateStyles generateTemplates generateAPI",
+	typescript: "tsc",
 	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",
+		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/`,
-		"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/`,
 		"third-party": {
 			default: "nps integrate.third-party.copy integrate.third-party.fix",
@@ -32,33 +31,34 @@ const scripts = {
 		},
 	},
 	build: {
-		default: `${UP_TO_DATE} || nps lint prepare build.bundle hash`,
-		bundle: "rollup --config config/rollup.config.js",
+		default: `nps lint prepare build.bundle`,
+		bundle: `vite build ${viteConfig}`,
 	},
 	copy: {
-		default: "nps copy.src copy.test",
+		default: "nps copy.src",
 		src: `copy-and-watch "src/**/*.{js,css}" dist/`,
-		test: `copy-and-watch "test/**/*.*" dist/test-resources`,
 	},
 	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: {
+		default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup",
+		prepare: `copy-and-watch "dist/**/*.js" jsdoc-dist/`,
+		preprocess: `node "${preprocessJSDocScript}" jsdoc-dist/`,
+		jsdoc: `jsdoc -c "${LIB}/jsdoc/configTypescript.json"`,
+		cleanup: "rimraf jsdoc-dist/"
+	},
 	watch: {
-		default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles"',
+		default: 'concurrently "nps watch.src" "nps watch.styles" "nps watch.typescript"',
+		withBundle: 'concurrently "nps watch.src" "nps watch.bundle" "nps watch.styles" "nps watch.typescript"',
 		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",
+		typescript: 'tsc --watch',
+		bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
 		styles: 'chokidar "src/css/*.css" -c "nps generateStyles"'
 	},
-	dev: 'concurrently "nps serve" "nps watch"',
-	start: "nps prepare dev",
-	serve: `node "${serve}" --dir="dist/" --port=9191 --packageName="@ui5/webcomponents-base"`,
-	test: {
-		// --success first - report the exit code of the test run (first command to finish), as serve is always terminated and has a non-0 exit code
-		default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
-		run: "cross-env WDIO_LOG_LEVEL=error FORCE_COLOR=0 wdio config/wdio.conf.js",
-	},
-	hash: `node "${generateHash}" dist/ hash.txt`,
+	start: "nps prepare watch.withBundle",
+	test: `node "${LIB}/test-runner/test-runner.js"`,
 };
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.0.0-a3eca7ade",
+  "version": "0.0.0-a7032d86e",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -28,21 +28,22 @@
     "start": "nps start",
     "build": "nps build",
     "test": "nps test",
-    "hash": "nps hash",
     "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
-    "lit-html": "2.0.1"
+    "lit-html": "^2.0.1"
   },
   "devDependencies": {
     "@buxlabs/amd-to-es6": "0.16.1",
-    "@openui5/sap.ui.core": "1.94.0",
-    "@ui5/webcomponents-tools": "0.0.0-a3eca7ade",
-    "chromedriver": "98.0.0",
+    "@openui5/sap.ui.core": "1.109.0",
+    "@ui5/webcomponents-tools": "0.0.0-a7032d86e",
+    "chromedriver": "108.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
+    "cross-env": "^7.0.3",
     "eslint": "^7.22.0",
     "mkdirp": "^1.0.4",
+    "replace-in-file": "^6.3.5",
     "resolve": "^1.20.0"
   }
 }

package/src/Boot.ts

@@ -0,0 +1,61 @@
+import whenDOMReady from "./util/whenDOMReady.js";
+import insertFontFace from "./FontFace.js";
+import insertSystemCSSVars from "./SystemCSSVars.js";
+import { getTheme } from "./config/Theme.js";
+import applyTheme from "./theming/applyTheme.js";
+import { registerCurrentRuntime } from "./Runtimes.js";
+import { getFeature } from "./FeaturesRegistry.js";
+import type OpenUI5Support from "./features/OpenUI5Support.js";
+import type F6Navigation from "./features/F6Navigation.js";
+import { PromiseResolve } from "./types.js";
+
+let bootPromise: Promise<void>;
+
+/**
+ * Attach  a callback that will be executed on boot
+ * @public
+ * @param listener
+ */
+const attachBoot = async (listener: () => void) => {
+	await boot();
+	listener();
+};
+
+const boot = async (): Promise<void> => {
+	if (bootPromise !== undefined) {
+		return bootPromise;
+	}
+
+	const bootExecutor = async (resolve: PromiseResolve) => {
+		registerCurrentRuntime();
+
+		const openUI5Support = getFeature<typeof OpenUI5Support>("OpenUI5Support");
+		const isOpenUI5Loaded = openUI5Support ? openUI5Support.isLoaded() : false;
+		const f6Navigation = getFeature<typeof F6Navigation>("F6Navigation");
+
+		if (openUI5Support) {
+			await openUI5Support.init();
+		}
+
+		if (f6Navigation && !isOpenUI5Loaded) {
+			f6Navigation.init();
+		}
+
+		await whenDOMReady();
+		await applyTheme(getTheme());
+		openUI5Support && openUI5Support.attachListeners();
+		insertFontFace();
+		insertSystemCSSVars();
+
+		resolve();
+	};
+
+	bootPromise = new Promise(bootExecutor as (resolve: PromiseResolve) => void);
+
+	return bootPromise;
+};
+
+export {
+	boot,
+	attachBoot,
+};