@ui5/webcomponents-base 1.11.0-rc.0 → 1.11.0-rc.2

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/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/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/Icons.ts

@@ -1,59 +1,119 @@
 import { getTheme, isThemeFamily } from "./Theme.js";
+import { getIconCollectionByAlias } from "../assets-meta/IconCollectionsAlias.js";
 
 const IconCollectionConfiguration = new Map<string, string>();
 
-enum IconCollection {
-	v4 = "SAP-icons",
-	v5 = "SAP-icons-v5",
+// All supported icon collections + uknown custom ones
+type IconCollection = "SAP-icons" | "SAP-icons-v4" | "SAP-icons-v5" | "horizon" | "tnt" | "tnt-v2" | "tnt-v3" | "business-suite" | string;
+
+// All registered icon collections - all icon collections resolves to these options at the end
+enum RegisteredIconCollection {
+	SAPIconsV4 = "SAP-icons-v4",
+	SAPIconsV5 = "SAP-icons-v5",
+	SAPIconsTNTV2 = "tnt-v2",
+	SAPIconsTNTV3 = "tnt-v3",
+	SAPBSIcons = "business-suite",
 }
 
 /**
- * Sets the default icon collection (SAP-icons font v4 or SAP-icons font v5) per theme,
- * which will be applied in case icon collection is not specified.
+ * Sets the default icon collection for a given theme.
+ *
+ * SAP Icons is the default icon collection (that resolves to SAP-icons version 5.x in Horizon theme family and SAP-icons version 4.x in all other themes)
+ * and to display icons from other collections, you have to specify the icon collection in addition to the icon name, for example: "tnt/actor", "business-suite/1x2-grid-layout", etc.
+ * This method allows setting another (built-in or custom) icon collection as default per theme.
+ *
+ * <b>Usage</b>
+ * <b>For example</b>, to make "SAP-icons version 5.x" the default icon collection in "sap_fiori_3":
+ *
+ * <pre>
+ * setDefaultIconCollection("sap_fiori_3", "SAP-icons-v5");
+ *
+ * <ui5-icon name="home"></ui5-icon>
+ * </pre>
+ *
+ * <b>For example</b>, to make a custom icon collection (with name "my-custom-collection") the default icon collection in "sap_fiori_3":
+ *
+ * <pre>
+ * setDefaultIconCollection("sap_fiori_3", "my-custom-collection");
+ *
+ * <ui5-icon name="custom-icon-name"></ui5-icon>
+ * </pre>
  *
- * Note: by default SAP-icons-v5 is used in all SAP Horizon variants and SAP-icons-v4 for all the rest.
  * @public
- * @param {string} theme
- * @param {IconCollection} collectionName
+ * @param { string } theme
+ * @param { string } collectionName
  */
-const setDefaultIconCollection = (theme: string, collectionName: "horizon" | IconCollection) => {
-	if (collectionName === "horizon") {
-		collectionName = IconCollection.v5;
-	}
-
+const setDefaultIconCollection = (theme: string, collectionName: IconCollection) => {
 	IconCollectionConfiguration.set(theme, collectionName);
 };
 
 /**
- * Returns the default icon collection (v4 or v5) for given theme,
- * that is configured.
+ * Returns the configured default icon collection for a given theme.
  *
- * @param {string} theme
+ * @param { string } theme
  * @public
- * @returns {string | undefined}
+ * @returns { string | undefined }
  */
 const getDefaultIconCollection = (theme: string): string | undefined => {
 	return IconCollectionConfiguration.get(theme);
 };
 
 /**
- * Returns the effective icon collection that will be applied for icon web components
- * whenever namespace is not specified.
- * @returns {string}
+ * Returns the effective icon collection,
+ * based on the default icon collection configuration and the current theme:
+ * @param { IconCollection } collectionName
+ * @returns { IconCollection } the effective collection name
  */
-const getEffectiveDefaultIconCollection = () => {
+const getEffectiveIconCollection = (collectionName?: IconCollection): IconCollection => {
 	const currentTheme = getTheme();
 	const currentThemeConfiguration = IconCollectionConfiguration.get(currentTheme);
 
-	if (currentThemeConfiguration) {
-		return currentThemeConfiguration;
+	// when no collection is set and default collection is configured - return the configured icon collection
+	if (!collectionName && currentThemeConfiguration) {
+		return getIconCollectionByAlias(currentThemeConfiguration);
 	}
 
-	return isThemeFamily("sap_horizon") ? IconCollection.v5 : IconCollection.v4;
+	// when collection is set - return the theme dependant icon collection
+	// when collection is not set and there is no default icon collection configured - return theme dependant icon collection
+	return getIconCollectionByTheme(collectionName);
+};
+
+/**
+ * Returns the icon theme dependant collection, based on the collection name and current theme as follows:
+ *
+ * - "no collection" resolves to "SAP-icons-v4" in "Quartz" and "Belize", and to "SAP-icons-v5" in "Horizon" (or as confugred via setDefaultIconCollection)
+ * - "SAP-icons-v4" (and its alias "SAP-icons") forces "SAP-icons v4" in any theme and resolves to itself "SAP-icons-v4"
+ * - "SAP-icons-v5" (and its alias "horizon") forces  "SAP-icons v5" in any theme and resolves to itself "SAP-icons-v5"
+ * - "tnt" (and its alias "SAP-icons-TNT") resolves to "tnt-v2" in "Quartz", "Belize", and resolves to "tnt-v3" in "Horizon"
+ * - "tnt-v2" forces "TNT icons v2" in any theme and resolves to itself "tnt-v2"
+ * - "tnt-v3" forces "TNT icons v3" in any theme and resolves to itself "tnt-v3"
+ * - "business-suite" (and its alias "BusinessSuiteInAppSymbols") has no versioning and resolves to "business-suite"
+ *
+ * <b>Note:</b> "SAP-icons-v4", "SAP-icons-v5", "tnt-v2", "tnt-v3" and "business-suite" are just returned
+ * @param { IconCollection } collectionName
+ * @returns { RegisteredIconCollection } the registered collection name
+ */
+const getIconCollectionByTheme = (collectionName?: IconCollection): RegisteredIconCollection => {
+	const horizonThemeFamily = isThemeFamily("sap_horizon");
+
+	if (!collectionName) {
+		return horizonThemeFamily ? RegisteredIconCollection.SAPIconsV5 : RegisteredIconCollection.SAPIconsV4;
+	}
+
+	if (collectionName === "tnt") {
+		return horizonThemeFamily ? RegisteredIconCollection.SAPIconsTNTV3 : RegisteredIconCollection.SAPIconsTNTV2;
+	}
+
+	return collectionName as RegisteredIconCollection;
 };
 
 export {
 	setDefaultIconCollection,
 	getDefaultIconCollection,
-	getEffectiveDefaultIconCollection,
+	getEffectiveIconCollection,
+	RegisteredIconCollection,
+};
+
+export type {
+	IconCollection,
 };

package/src/config/RTL.ts

@@ -29,6 +29,10 @@ const impliesRTL = (language: string) => {
  * @returns {boolean} whether RTL should be used
  */
 const getRTL = (): boolean => {
+	if (typeof document === "undefined") {
+		return false;
+	}
+
 	const configurationRTL = getConfiguredRTL();
 
 	if (configurationRTL !== undefined) {

package/src/delegate/ResizeHandler.ts

@@ -1,6 +1,6 @@
 import { instanceOfUI5Element } from "../UI5Element.js";
 
-type ResizeObserverCallback = () => void;
+type ResizeObserverCallback = () => Promise<void> | void;
 
 let resizeObserver: ResizeObserver;
 const observedElements = new Map<HTMLElement, Array<ResizeObserverCallback>>();
@@ -10,7 +10,9 @@ const getResizeObserver = () => {
 		resizeObserver = new window.ResizeObserver(entries => {
 			entries.forEach(entry => {
 				const callbacks = observedElements.get(entry.target as HTMLElement);
-				callbacks?.forEach((callback: ResizeObserverCallback) => callback());
+				// Callbacks could be async and we need to handle returned promises to comply with the eslint "no-misused-promises" rule.
+				// Although Promise.all awaits all, we don't additonal task after calling the callbacks and should not make any difference.
+				callbacks && Promise.all(callbacks.map((callback: ResizeObserverCallback) => callback()));
 			});
 		});
 	}
@@ -93,3 +95,6 @@ class ResizeHandler {
 }
 
 export default ResizeHandler;
+export type {
+	ResizeObserverCallback,
+};