@ui5/webcomponents-base 0.0.0-cf50976ce → 0.0.0-d4d43327a

package/dist/util/getSingletonElementInstance.d.ts

@@ -0,0 +1,2 @@
+declare const getSingletonElementInstance: (tag: string, parentElement?: HTMLElement) => Element;
+export default getSingletonElementInstance;

package/dist/util/getSingletonElementInstance.js

@@ -1,13 +1,10 @@
 const getSingletonElementInstance = (tag, parentElement = document.body) => {
-	let el = document.querySelector(tag);
-
-	if (el) {
-		return el;
-	}
-
-	el = document.createElement(tag);
-
-	return parentElement.insertBefore(el, parentElement.firstChild);
+    let el = document.querySelector(tag);
+    if (el) {
+        return el;
+    }
+    el = document.createElement(tag);
+    return parentElement.insertBefore(el, parentElement.firstChild);
 };
-
 export default getSingletonElementInstance;
+//# sourceMappingURL=getSingletonElementInstance.js.map

package/dist/util/getSingletonElementInstance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSingletonElementInstance.js","sourceRoot":"","sources":["../../src/util/getSingletonElementInstance.ts"],"names":[],"mappings":"AAAA,MAAM,2BAA2B,GAAG,CAAC,GAAW,EAAE,gBAA6B,QAAQ,CAAC,IAAI,EAAE,EAAE;IAC/F,IAAI,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAErC,IAAI,EAAE,EAAE;QACP,OAAO,EAAE,CAAC;KACV;IAED,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAEjC,OAAO,aAAa,CAAC,YAAY,CAAC,EAAE,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;AACjE,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/util/isElementClickable.d.ts

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

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/lib/generate-styles/index.js

@@ -3,19 +3,24 @@ const path = require('path');
 const CleanCSS = require('clean-css');
 
 const generate = async () => {
-	await fs.mkdir("dist/generated/css/", {recursive: true});
+	await fs.mkdir("src/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 {
+		content = `import type { StyleData } from "../../types.js";
+
+const styleData: StyleData = {
 	packageName: "@ui5/webcomponents-base",
 	fileName: "${file}",
-	content: \`${res.styles}\`
-};`;
+	content: \`${res.styles}\`,
+};
+
+export default styleData;
+`;
 
-		return fs.writeFile(path.join("dist/generated/css/", `${file}.js`), content);
+		return fs.writeFile(path.join("src/generated/css/", `${file}.ts`), content);
 	});
 
 	return Promise.all(filesPromises);

package/package-scripts.js

@@ -6,6 +6,7 @@ const stylesScript = resolve.sync("@ui5/webcomponents-base/lib/generate-styles/i
 const versionScript = resolve.sync("@ui5/webcomponents-base/lib/generate-version-info/index.js");
 const copyUsedModules = resolve.sync("@ui5/webcomponents-tools/lib/copy-list/index.js");
 const esmAbsToRel = resolve.sync("@ui5/webcomponents-tools/lib/esm-abs-to-rel/index.js");
+const preprocessJSDocScript = resolve.sync("@ui5/webcomponents-tools/lib/jsdoc/preprocess.js");
 
 const LIB = path.join(__dirname, `../tools/lib/`);
 
@@ -13,9 +14,10 @@ const viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-p
 const eslintConfig = `--config ${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}`;
 
 const scripts = {
-	clean: "rimraf dist && rimraf .port",
+	clean: "rimraf jsdoc-dist && rimraf src/generated && rimraf dist && rimraf .port",
 	lint: `eslint . ${eslintConfig}`,
-	prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles",
+	prepare: "cross-env UI5_TS=true nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles generateTemplates typescript generateAPI",
+	typescript: "tsc",
 	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/`,
@@ -29,25 +31,38 @@ const scripts = {
 		},
 	},
 	build: {
-		default: `nps lint prepare build.bundle`,
+		default: `nps prepare lint build.bundle`,
 		bundle: `vite build ${viteConfig}`,
 	},
 	copy: {
 		default: "nps copy.src",
-		src: `copy-and-watch "src/**/*.{js,css}" dist/`,
+		src: `copy-and-watch "src/**/*.{js,css,d.ts}" dist/`,
 	},
 	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.src" "nps watch.styles"',
-		withBundle: 'concurrently "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"',
+		typescript: 'tsc --watch',
 		bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
 		styles: 'chokidar "src/css/*.css" -c "nps generateStyles"'
 	},
 	start: "nps prepare watch.withBundle",
-	test: `node "${LIB}/test-runner/test-runner.js"`,
+	test: {
+		default: 'concurrently "nps test.wdio"',
+		ssr: `mocha test/ssr`,
+		wdio: `node "${LIB}/test-runner/test-runner.js"`
+	},
 };
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.0.0-cf50976ce",
+  "version": "0.0.0-d4d43327a",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -35,9 +35,9 @@
   },
   "devDependencies": {
     "@buxlabs/amd-to-es6": "0.16.1",
-    "@openui5/sap.ui.core": "1.101.0",
-    "@ui5/webcomponents-tools": "0.0.0-cf50976ce",
-    "chromedriver": "104.0.0",
+    "@openui5/sap.ui.core": "1.109.0",
+    "@ui5/webcomponents-tools": "0.0.0-d4d43327a",
+    "chromedriver": "109.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
     "cross-env": "^7.0.3",

package/src/Boot.ts

@@ -0,0 +1,76 @@
+import whenDOMReady from "./util/whenDOMReady.js";
+import EventProvider from "./EventProvider.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 booted = false;
+let bootPromise: Promise<void>;
+const eventProvider = new EventProvider<void, void>();
+
+/**
+ * Attaches a callback that will be executed after boot finishes.
+ * <b>Note:</b> If the framework already booted, the callback will be immediately executed.
+ * @public
+ * @param { Function } listener
+ */
+const attachBoot = (listener: () => void) => {
+	if (!booted) {
+		eventProvider.attachEvent("boot", listener);
+		return;
+	}
+
+	listener();
+};
+
+const boot = async (): Promise<void> => {
+	if (bootPromise !== undefined) {
+		return bootPromise;
+	}
+
+	const bootExecutor = async (resolve: PromiseResolve) => {
+		if (typeof document === "undefined") {
+			resolve();
+			return;
+		}
+
+		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();
+
+		booted = true;
+		await eventProvider.fireEventAsync("boot");
+	};
+
+	bootPromise = new Promise(bootExecutor as (resolve: PromiseResolve) => void);
+	return bootPromise;
+};
+
+export {
+	boot,
+	attachBoot,
+};

package/src/{CSP.js → CSP.ts}

@@ -1,20 +1,27 @@
-const roots = new Map();
+const roots = new Map<string, string>();
 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
+ * 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) => {
+const setPackageCSSRoot = (packageName: string, root: string) => {
 	roots.set(packageName, root);
 };
 
-const getUrl = (packageName, path) => {
-	return `${roots.get(packageName)}${path}`;
+const getUrl = (packageName: string, path: string) => {
+	const packageCSSRoot = roots.get(packageName);
+
+	if (!packageCSSRoot) {
+		console.warn(`Root path to the CSS resources ${packageName} not provided - use "setPackageCSSRoot" to provide the root.`); // eslint-disable-line
+		return "";
+	}
+
+	return `${packageCSSRoot}${path}`;
 };
 
 /**
@@ -25,7 +32,7 @@ const getUrl = (packageName, path) => {
  * @public
  * @param use whether links will be used
  */
-const setUseLinks = use => {
+const setUseLinks = (use: boolean) => {
 	useLinks = use;
 };
 
@@ -37,7 +44,7 @@ const setUseLinks = use => {
  * @public
  * @param preload
  */
-const setPreloadLinks = preload => {
+const setPreloadLinks = (preload: boolean) => {
 	preloadLinks = preload;
 };
 

package/src/{CustomElementsRegistry.js → CustomElementsRegistry.ts}

@@ -1,40 +1,43 @@
-import setToArray from "./util/setToArray.js";
 import getSharedResource from "./getSharedResource.js";
 import { getCurrentRuntimeIndex, compareRuntimes, getAllRuntimes } from "./Runtimes.js";
+import { Timeout } from "./types.js";
 
-const Tags = getSharedResource("Tags", new Map());
+const Tags = getSharedResource<Map<string, number>>("Tags", new Map());
+const Definitions = new Set<string>();
 
-const Definitions = new Set();
-let Failures = {};
-let failureTimeout;
+let Failures = new Map<number, Set<string>>();
+let failureTimeout: Timeout | undefined;
 
-const UNKNOWN_RUNTIME = "unknown";
+const UNKNOWN_RUNTIME = -1;
 
-const registerTag = tag => {
+const registerTag = (tag: string) => {
 	Definitions.add(tag);
 	Tags.set(tag, getCurrentRuntimeIndex());
 };
 
-const isTagRegistered = tag => {
+const isTagRegistered = (tag: string) => {
 	return Definitions.has(tag);
 };
 
 const getAllRegisteredTags = () => {
-	return setToArray(Definitions);
+	return [...Definitions.values()];
 };
 
-const recordTagRegistrationFailure = tag => {
+const recordTagRegistrationFailure = (tag: string) => {
 	let tagRegRuntimeIndex = Tags.get(tag);
 	if (tagRegRuntimeIndex === undefined) {
 		tagRegRuntimeIndex = UNKNOWN_RUNTIME; // If the tag is taken, but not registered in Tags, then a version before 1.1.0 defined it => use the "unknown" key
 	}
-	Failures[tagRegRuntimeIndex] = Failures[tagRegRuntimeIndex] || new Set();
-	Failures[tagRegRuntimeIndex].add(tag);
+
+	if (!Failures.has(tagRegRuntimeIndex)) {
+		Failures.set(tagRegRuntimeIndex, new Set());
+	}
+	Failures.get(tagRegRuntimeIndex)!.add(tag);
 
 	if (!failureTimeout) {
 		failureTimeout = setTimeout(() => {
 			displayFailedRegistrations();
-			Failures = {};
+			Failures = new Map();
 			failureTimeout = undefined;
 		}, 1000);
 	}
@@ -51,8 +54,8 @@ const displayFailedRegistrations = () => {
 		message = `${message}\nLoading order (versions before 1.1.0 not listed): ${allRuntimes.map(runtime => `\n${runtime.description}`).join("")}`;
 	}
 
-	Object.keys(Failures).forEach(otherRuntimeIndex => {
-		let comparison;
+	[...Failures.keys()].forEach(otherRuntimeIndex => {
+		let comparison: number;
 		let otherRuntime;
 
 		if (otherRuntimeIndex === UNKNOWN_RUNTIME) { // version < 1.1.0 defined the tag
@@ -73,7 +76,7 @@ const displayFailedRegistrations = () => {
 		} else {
 			compareWord = "the same";
 		}
-		message = `${message}\n\n"${currentRuntime.description}" failed to define ${Failures[otherRuntimeIndex].size} tag(s) as they were defined by a runtime of ${compareWord} version "${otherRuntime.description}": ${setToArray(Failures[otherRuntimeIndex]).sort().join(", ")}.`;
+		message = `${message}\n\n"${currentRuntime.description}" failed to define ${Failures.get(otherRuntimeIndex)!.size} tag(s) as they were defined by a runtime of ${compareWord} version "${otherRuntime.description}": ${([...Failures.get(otherRuntimeIndex)!]).sort().join(", ")}.`;
 
 		if (comparison > 0) {
 			message = `${message}\nWARNING! If your code uses features of the above web components, unavailable in ${otherRuntime.description}, it might not work as expected!`;