@ui5/webcomponents-base 0.0.0-96e98c995 → 0.0.0-974b11d82

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

@@ -14,9 +14,9 @@ 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 jsdoc-dist && rimraf dist && rimraf .port",
+	clean: "rimraf jsdoc-dist && rimraf src/generated && rimraf dist && rimraf .port",
 	lint: `eslint . ${eslintConfig}`,
-	prepare: "nps clean integrate copy typescript generateAssetParameters generateVersionInfo generateStyles generateTemplates generateAPI",
+	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",
@@ -31,7 +31,7 @@ const scripts = {
 		},
 	},
 	build: {
-		default: `nps lint prepare build.bundle`,
+		default: `nps prepare lint build.bundle`,
 		bundle: `vite build ${viteConfig}`,
 	},
 	copy: {
@@ -58,7 +58,11 @@ const scripts = {
 		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-96e98c995",
+  "version": "0.0.0-974b11d82",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@buxlabs/amd-to-es6": "0.16.1",
     "@openui5/sap.ui.core": "1.109.0",
-    "@ui5/webcomponents-tools": "0.0.0-96e98c995",
+    "@ui5/webcomponents-tools": "0.0.0-974b11d82",
     "chromedriver": "109.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",

package/src/Boot.ts

@@ -27,6 +27,10 @@ const boot = async (): Promise<void> => {
 	}
 
 	const bootExecutor = async (resolve: PromiseResolve) => {
+		if (typeof document === "undefined") {
+			resolve();
+			return;
+		}
 		registerCurrentRuntime();
 
 		const openUI5Support = getFeature<typeof OpenUI5Support>("OpenUI5Support");

package/src/Device.ts

@@ -1,30 +1,98 @@
-const ua = navigator.userAgent;
-const touch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
-const ie = /(msie|trident)/i.test(ua);
-const chrome = !ie && /(Chrome|CriOS)/.test(ua);
-const firefox = /Firefox/.test(ua);
-const safari = !ie && !chrome && /(Version|PhantomJS)\/(\d+\.\d+).*Safari/.test(ua);
-const webkit = !ie && /webkit/.test(ua);
-const windows = navigator.platform.indexOf("Win") !== -1;
-const iOS = !!(navigator.platform.match(/iPhone|iPad|iPod/)) || !!(navigator.userAgent.match(/Mac/) && "ontouchend" in document);
-const android = !windows && /Android/.test(ua);
-const androidPhone = android && /(?=android)(?=.*mobile)/i.test(ua);
-const ipad = /ipad/i.test(ua) || (/Macintosh/i.test(ua) && "ontouchend" in document);
-// With iOS 13 the string 'iPad' was removed from the user agent string through a browser setting, which is applied on all sites by default:
-// "Request Desktop Website -> All websites" (for more infos see: https://forums.developer.apple.com/thread/119186).
-// Therefore the OS is detected as MACINTOSH instead of iOS and the device is a tablet if the Device.support.touch is true.
+const isSSR = typeof document === "undefined";
+
+const internals = {
+	get userAgent() {
+		if (isSSR) {
+			return "";
+		}
+		return navigator.userAgent;
+	},
+	get touch() {
+		if (isSSR) {
+			return false;
+		}
+		return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+	},
+	get ie() {
+		if (isSSR) {
+			return false;
+		}
+		return /(msie|trident)/i.test(internals.userAgent);
+	},
+	get chrome() {
+		if (isSSR) {
+			return false;
+		}
+		return !internals.ie && /(Chrome|CriOS)/.test(internals.userAgent);
+	},
+	get firefox() {
+		if (isSSR) {
+			return false;
+		}
+		return /Firefox/.test(internals.userAgent);
+	},
+	get safari() {
+		if (isSSR) {
+			return false;
+		}
+		return !internals.ie && !internals.chrome && /(Version|PhantomJS)\/(\d+\.\d+).*Safari/.test(internals.userAgent);
+	},
+	get webkit() {
+		if (isSSR) {
+			return false;
+		}
+		return !internals.ie && /webkit/.test(internals.userAgent);
+	},
+	get windows() {
+		if (isSSR) {
+			return false;
+		}
+		return navigator.platform.indexOf("Win") !== -1;
+	},
+	get iOS() {
+		if (isSSR) {
+			return false;
+		}
+		return !!(navigator.platform.match(/iPhone|iPad|iPod/)) || !!(internals.userAgent.match(/Mac/) && "ontouchend" in document);
+	},
+	get android() {
+		if (isSSR) {
+			return false;
+		}
+		return !internals.windows && /Android/.test(internals.userAgent);
+	},
+	get androidPhone() {
+		if (isSSR) {
+			return false;
+		}
+		return internals.android && /(?=android)(?=.*mobile)/i.test(internals.userAgent);
+	},
+	get ipad() {
+		if (isSSR) {
+			return false;
+		}
+		// With iOS 13 the string 'iPad' was removed from the user agent string through a browser setting, which is applied on all sites by default:
+		// "Request Desktop Website -> All websites" (for more infos see: https://forums.developer.apple.com/thread/119186).
+		// Therefore the OS is detected as MACINTOSH instead of iOS and the device is a tablet if the Device.support.touch is true.
+		return /ipad/i.test(internals.userAgent) || (/Macintosh/i.test(internals.userAgent) && "ontouchend" in document);
+	},
+};
 
 let windowsVersion: number;
 let webkitVersion: number;
 let tablet: boolean;
 
 const isWindows8OrAbove = () => {
-	if (!windows) {
+	if (isSSR) {
+		return false;
+	}
+
+	if (!internals.windows) {
 		return false;
 	}
 
 	if (windowsVersion === undefined) {
-		const matches = ua.match(/Windows NT (\d+).(\d)/);
+		const matches = internals.userAgent.match(/Windows NT (\d+).(\d)/);
 		windowsVersion = matches ? parseFloat(matches[1]) : 0;
 	}
 
@@ -32,12 +100,16 @@ const isWindows8OrAbove = () => {
 };
 
 const isWebkit537OrAbove = () => {
-	if (!webkit) {
+	if (isSSR) {
+		return false;
+	}
+
+	if (!internals.webkit) {
 		return false;
 	}
 
 	if (webkitVersion === undefined) {
-		const matches = ua.match(/(webkit)[ /]([\w.]+)/);
+		const matches = internals.userAgent.match(/(webkit)[ /]([\w.]+)/);
 		webkitVersion = matches ? parseFloat(matches[1]) : 0;
 	}
 
@@ -45,28 +117,32 @@ const isWebkit537OrAbove = () => {
 };
 
 const detectTablet = () => {
+	if (isSSR) {
+		return false;
+	}
+
 	if (tablet !== undefined) {
 		return;
 	}
 
-	if (ipad) {
+	if (internals.ipad) {
 		tablet = true;
 		return;
 	}
 
-	if (touch) {
+	if (internals.touch) {
 		if (isWindows8OrAbove()) {
 			tablet = true;
 			return;
 		}
 
-		if (chrome && android) {
-			tablet = !/Mobile Safari\/[.0-9]+/.test(ua);
+		if (internals.chrome && internals.android) {
+			tablet = !/Mobile Safari\/[.0-9]+/.test(internals.userAgent);
 			return;
 		}
 
 		let densityFactor = window.devicePixelRatio ? window.devicePixelRatio : 1; // may be undefined in Windows Phone devices
-		if (android && isWebkit537OrAbove()) {
+		if (internals.android && isWebkit537OrAbove()) {
 			densityFactor = 1;
 		}
 
@@ -74,26 +150,29 @@ const detectTablet = () => {
 		return;
 	}
 
-	tablet = (ie && ua.indexOf("Touch") !== -1) || (android && !androidPhone);
+	tablet = (internals.ie && internals.userAgent.indexOf("Touch") !== -1) || (internals.android && !internals.androidPhone);
 };
 
-const supportsTouch = (): boolean => touch;
-const isIE = (): boolean => ie;
-const isSafari = (): boolean => safari;
-const isChrome = (): boolean => chrome;
-const isFirefox = (): boolean => firefox;
+const supportsTouch = (): boolean => internals.touch;
+const isIE = (): boolean => internals.ie;
+const isSafari = (): boolean => internals.safari;
+const isChrome = (): boolean => internals.chrome;
+const isFirefox = (): boolean => internals.firefox;
 
 const isTablet = (): boolean => {
 	detectTablet();
-	return (touch || isWindows8OrAbove()) && tablet;
+	return (internals.touch || isWindows8OrAbove()) && tablet;
 };
 
 const isPhone = (): boolean => {
 	detectTablet();
-	return touch && !tablet;
+	return internals.touch && !tablet;
 };
 
 const isDesktop = (): boolean => {
+	if (isSSR) {
+		return false;
+	}
 	return (!isTablet() && !isPhone()) || isWindows8OrAbove();
 };
 
@@ -102,11 +181,11 @@ const isCombi = (): boolean => {
 };
 
 const isIOS = (): boolean => {
-	return iOS;
+	return internals.iOS;
 };
 
 const isAndroid = (): boolean => {
-	return android || androidPhone;
+	return internals.android || internals.androidPhone;
 };
 
 export {

package/src/InitialConfiguration.ts

@@ -178,7 +178,7 @@ const applyOpenUI5Configuration = () => {
 };
 
 const initConfiguration = () => {
-	if (initialized) {
+	if (typeof document === "undefined" || initialized) {
 		return;
 	}
 

package/src/UI5Element.ts

@@ -23,14 +23,24 @@ import { getSlotName, getSlottedNodesList } from "./util/SlotsHelper.js";
 import arraysAreEqual from "./util/arraysAreEqual.js";
 import { markAsRtlAware } from "./locale/RTLAwareRegistry.js";
 import preloadLinks from "./theming/preloadLinks.js";
-import { TemplateFunction, TemplateFunctionResult } from "./renderer/executeTemplate.js";
-import { PromiseResolve, ComponentStylesData, ClassMap } from "./types.js";
+import type { TemplateFunction, TemplateFunctionResult } from "./renderer/executeTemplate.js";
+import type { PromiseResolve, ComponentStylesData, ClassMap } from "./types.js";
 
 let autoId = 0;
 
 const elementTimeouts = new Map<string, Promise<void>>();
 const uniqueDependenciesCache = new Map<typeof UI5Element, Array<typeof UI5Element>>();
 
+type Renderer = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | Array<string> | undefined, forStaticArea: boolean, options: RendererOptions) => void;
+
+type RendererOptions = {
+	/**
+	 * An object to use as the `this` value for event listeners. It's often
+	 * useful to set this to the host component rendering a template.
+	 */
+	host?: object,
+}
+
 type ChangeInfo = {
 	type: "property" | "slot",
 	name: string,
@@ -99,7 +109,12 @@ abstract class UI5Element extends HTMLElement {
 	static template?: TemplateFunction;
 	static staticAreaTemplate?: TemplateFunction;
 	static _metadata: UI5ElementMetadata;
-	static render: (templateFunctionResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | Array<string> | undefined, forStaticArea: boolean, options: { host: HTMLElement }) => void;
+
+	/**
+	 * @deprecated
+	 */
+	static render: Renderer;
+	static renderer?: Renderer;
 
 	constructor() {
 		super();
@@ -764,15 +779,16 @@ abstract class UI5Element extends HTMLElement {
 
 	/**
 	 * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref")
+	 * @param {FocusOptions} focusOptions additional options for the focus
 	 * @public
 	 */
-	async focus() {
+	async focus(focusOptions?: FocusOptions) {
 		await this._waitForDomRef();
 
 		const focusDomRef = this.getFocusDomRef();
 
 		if (focusDomRef && typeof focusDomRef.focus === "function") {
-			focusDomRef.focus();
+			focusDomRef.focus(focusOptions);
 		}
 	}
 
@@ -830,8 +846,8 @@ abstract class UI5Element extends HTMLElement {
 	 * Useful when there are transitive slots in nested component scenarios and you don't want to get a list of the slots, but rather of their content.
 	 * @public
 	 */
-	getSlottedNodes(slotName: string) {
-		return getSlottedNodesList((this as unknown as Record<string, Array<SlotValue>>)[slotName]);
+	getSlottedNodes<T = Node>(slotName: string) {
+		return getSlottedNodesList((this as unknown as Record<string, Array<SlotValue>>)[slotName]) as Array<T>;
 	}
 
 	/**
@@ -1152,4 +1168,8 @@ const instanceOfUI5Element = (object: any): object is UI5Element => {
 
 export default UI5Element;
 export { instanceOfUI5Element };
-export type { ChangeInfo };
+export type {
+	ChangeInfo,
+	Renderer,
+	RendererOptions,
+};

package/src/asset-registries/Icons.ts

@@ -1,6 +1,6 @@
 import getSharedResource from "../getSharedResource.js";
-import IconCollectionsAlias from "../assets-meta/IconCollectionsAlias.js";
-import { getEffectiveDefaultIconCollection } from "../config/Icons.js";
+import { getIconCollectionByAlias } from "../assets-meta/IconCollectionsAlias.js";
+import { getEffectiveIconCollection } from "../config/Icons.js";
 import { I18nText } from "../i18nBundle.js";
 import { TemplateFunction } from "../renderer/executeTemplate.js";
 
@@ -19,7 +19,7 @@ type CollectionData = {
 };
 
 type IconData = {
-	collection?: string,
+	collection: string,
 	packageName: string,
 	pathData: string | Array<string>,
 	ltr: boolean,
@@ -67,11 +67,8 @@ const _fillRegistry = (bundleData: CollectionData) => {
 
 // set
 const registerIcon = (name: string, iconData: IconData) => { // eslint-disable-line
-	if (!iconData.collection) {
-		iconData.collection = getEffectiveDefaultIconCollection();
-	}
-
 	const key = `${iconData.collection}/${name}`;
+
 	registry.set(key, {
 		pathData: iconData.pathData,
 		ltr: iconData.ltr,
@@ -79,38 +76,48 @@ const registerIcon = (name: string, iconData: IconData) => { // eslint-disable-l
 		packageName: iconData.packageName,
 		customTemplate: iconData.customTemplate,
 		viewBox: iconData.viewBox,
+		collection: iconData.collection,
 	});
 };
 
-const _parseName = (name: string) => {
+/**
+ * Processes the full icon name and splits it into - "name", "collection"
+ * to form the proper registry key ("collection/name") under which the icon is registered:
+ *
+ * - removes legacy protocol ("sap-icon://")
+ * - resolves aliases (f.e "SAP-icons-TNT/actor" => "tnt/actor")
+ * - determines theme dependant icon collection (f.e "home" => "SAP-icons-v4/home" in Quartz | "SAP-icons-v5/home" in Horizon)
+ *
+ * @param { string } name
+ * @return { object }
+ */
+const processName = (name: string) => {
 	// silently support ui5-compatible URIs
 	if (name.startsWith("sap-icon://")) {
 		name = name.replace("sap-icon://", "");
 	}
 
-	let collection;
+	let collection: string;
 	[name, collection] = name.split("/").reverse();
-	collection = collection || getEffectiveDefaultIconCollection();
-
-	// Normalize collection name.
-	// - resolve `SAP-icons-TNT` to `tnt`.
-	// - resolve `BusinessSuiteInAppSymbols` to `business-suite`.
-	// - resolve `horizon` to `SAP-icons-v5`,
-	// Note: aliases can be made as a feature, if more collections need it or more aliases are needed.
-	collection = _normalizeCollection(collection);
+
 	name = name.replace("icon-", "");
 
+	if (collection) {
+		collection = getIconCollectionByAlias(collection);
+	}
+	collection = getEffectiveIconCollection(collection);
+
 	const registryKey = `${collection}/${name}`;
 	return { name, collection, registryKey };
 };
 
 const getIconDataSync = (name: string) => {
-	const { registryKey } = _parseName(name);
+	const { registryKey } = processName(name);
 	return registry.get(registryKey);
 };
 
 const getIconData = async (name: string) => {
-	const { collection, registryKey } = _parseName(name);
+	const { collection, registryKey } = processName(name);
 
 	let iconData: string | CollectionData = ICON_NOT_FOUND;
 	try {
@@ -140,14 +147,6 @@ const _getRegisteredNames = async () => {
 	return Array.from(registry.keys());
 };
 
-const _normalizeCollection = (collectionName: string) => {
-	if (IconCollectionsAlias[collectionName as keyof typeof IconCollectionsAlias]) {
-		return IconCollectionsAlias[collectionName as keyof typeof IconCollectionsAlias];
-	}
-
-	return collectionName;
-};
-
 export {
 	registerIconLoader,
 	getIconData,

package/src/asset-registries/Illustrations.ts

@@ -1,5 +1,5 @@
 import getSharedResource from "../getSharedResource.js";
-import { I18nText } from "../i18nBundle.js";
+import type { I18nText } from "../i18nBundle.js";
 
 type IllustrationLoader = (illustrationName: string) => Promise<IllustrationData>;
 

package/src/asset-registries/Themes.ts

@@ -65,3 +65,8 @@ export {
 	getRegisteredPackages,
 	isThemeRegistered,
 };
+
+export type {
+	ThemeData,
+	ThemeLoader,
+};

package/src/assets-meta/IconCollectionsAlias.ts

@@ -1,18 +1,41 @@
 /**
- * Supported icon collection names and aliases.
+ * Supported icon collection aliases.
  *
  * Users might specify a collection, using both the key and the value in the following key-value pairs,
  * e.g the following pairs are completely exchangeable:
- * "SAP-icons-TNT/actor" and "tnt/actor", "BusinessSuiteInAppSymbols/3d" and "business-suite/3d",
- * "SAP-icons-v5/accept" and "horizon/accept".
  *
- * Note: technically, in the code we maintain the collections under the "value" name - "tnt", "business-suite",
- * SAP-icons-v5" and "SAP-icons"(which does not have an alias).
+ * - "SAP-icons/accept" and "SAP-icons-v4/accept"
+ * - "horizon/accept" and "SAP-icons-v5/accept"
+ * - "SAP-icons-TNT/actor" and "tnt/actor"
+ * - "BusinessSuiteInAppSymbols/3d" and "business-suite/3d"
  */
-const IconCollectionsAlias = {
-	"SAP-icons-TNT": "tnt",
-	"BusinessSuiteInAppSymbols": "business-suite",
-	"horizon": "SAP-icons-v5",
+enum IconCollectionsAlias {
+	"SAP-icons" = "SAP-icons-v4",
+	"horizon" = "SAP-icons-v5",
+	"SAP-icons-TNT" = "tnt",
+	"BusinessSuiteInAppSymbols" = "business-suite",
+}
+
+/**
+ * Returns the mapped collection name for a given alias.
+ *
+ * <b>For example</b>:
+ * - "SAP-icons-TNT"resolves to "tnt"
+ * - "BusinessSuiteInAppSymbols" resolves to "business-suite"
+ * - "horizon" resolves to "SAP-icons-v5"
+ *
+ * @param { string } collectionName
+ * @return { string } the normalized collection name
+ */
+const getIconCollectionByAlias = (collectionName: string) => {
+	if (IconCollectionsAlias[collectionName as keyof typeof IconCollectionsAlias]) {
+		return IconCollectionsAlias[collectionName as keyof typeof IconCollectionsAlias];
+	}
+
+	return collectionName;
 };
 
 export default IconCollectionsAlias;
+export {
+	getIconCollectionByAlias,
+};

package/src/config/FormatSettings.ts

@@ -1,6 +1,12 @@
+import LegacyDateFormats from "../features/LegacyDateFormats.js";
+import type { LegacyDateCalendarCustomizing } from "../features/LegacyDateFormats.js";
 import { getFormatSettings } from "../InitialConfiguration.js";
+import { getFeature } from "../FeaturesRegistry.js";
 
-type FormatSettings = { firstDayOfWeek?: number };
+type FormatSettings = {
+	firstDayOfWeek?: number,
+	legacyDateCalendarCustomizing?: LegacyDateCalendarCustomizing,
+};
 
 let formatSettings: FormatSettings;
 
@@ -17,5 +23,13 @@ const getFirstDayOfWeek = (): number | undefined => {
 	return formatSettings.firstDayOfWeek;
 };
 
-export { getFirstDayOfWeek }; // eslint-disable-line
+const legacyDateFormats = getFeature<typeof LegacyDateFormats>("LegacyDateFormats");
+
+const getLegacyDateCalendarCustomizing = legacyDateFormats ? LegacyDateFormats.getLegacyDateCalendarCustomizing : () => { return []; };
+
+export {
+	getFirstDayOfWeek,
+	getLegacyDateCalendarCustomizing,
+};
+
 export type { FormatSettings };