@ui5/webcomponents-base 0.0.0-4a28ecb24 → 0.0.0-4b9b0ab7c

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,
@@ -67,8 +77,6 @@ function _invalidate(this: UI5Element, changeInfo: ChangeInfo) {
 	this._eventProvider.fireEvent("invalidate", { ...changeInfo, target: this });
 }
 
-let metadata = {} as Metadata;
-
 /**
  * Base class for all UI5 Web Components
  *
@@ -99,7 +107,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();
@@ -831,8 +844,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>;
 	}
 
 	/**
@@ -1014,17 +1027,7 @@ abstract class UI5Element extends HTMLElement {
 	 * Returns the metadata object for this UI5 Web Component Class
 	 * @protected
 	 */
-	static get metadata() {
-		return metadata;
-	}
-
-	/**
-	 * Sets a new metadata object for this UI5 Web Component Class
-	 * @protected
-	 */
-	static set metadata(newMetadata) {
-		metadata = newMetadata;
-	}
+	static metadata: Metadata = {};
 
 	/**
 	 * Returns the CSS for this UI5 Web Component Class
@@ -1126,21 +1129,17 @@ abstract class UI5Element extends HTMLElement {
 			return this._metadata;
 		}
 
-		const effectiveMetadata = Object.keys(this.metadata).length ? this.metadata : this.decoratorMetadata;
-		const metadataObjects = [effectiveMetadata];
+		const metadataObjects = [this.metadata];
 		let klass = this; // eslint-disable-line
 		while (klass !== UI5Element) {
 			klass = Object.getPrototypeOf(klass);
-			const effectiveKlassMetadata = Object.keys(klass.metadata).length ? klass.metadata : klass.decoratorMetadata;
-			metadataObjects.unshift(effectiveKlassMetadata);
+			metadataObjects.unshift(klass.metadata);
 		}
 		const mergedMetadata = merge({}, ...metadataObjects) as Metadata;
 
 		this._metadata = new UI5ElementMetadata(mergedMetadata);
 		return this._metadata;
 	}
-
-	static decoratorMetadata: Metadata = {};
 }
 
 /**
@@ -1153,4 +1152,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

@@ -1,5 +1,6 @@
 import { DEFAULT_THEME } from "../generated/AssetParameters.js";
 import { StyleData, StyleDataCSP } from "../types.js";
+import { fireThemeRegistered } from "../theming/ThemeRegistered.js";
 
 type ThemeData = {_: StyleDataCSP } | StyleDataCSP | string;
 type ThemeLoader = (themeName: string) => Promise<ThemeData>;
@@ -13,6 +14,7 @@ const registerThemePropertiesLoader = (packageName: string, themeName: string, l
 	loaders.set(`${packageName}/${themeName}`, loader);
 	registeredPackages.add(packageName);
 	registeredThemes.add(themeName);
+	fireThemeRegistered(`${packageName}/${themeName}`);
 };
 
 const getThemeProperties = async (packageName: string, themeName: string) => {
@@ -65,3 +67,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 };