@ui5/webcomponents-base 0.0.0-4821618b2 → 0.0.0-49bade48d

package/dist/asset-registries/Icons.js

@@ -1,121 +1,180 @@
 import getSharedResource from "../getSharedResource.js";
-
+import { getIconCollectionByAlias } from "./util/IconCollectionsAlias.js";
+import { registerIconCollectionForTheme } from "./util/IconCollectionsByTheme.js";
+import getEffectiveIconCollection from "./util/getIconCollectionByTheme.js";
+import { getI18nBundle } from "../i18nBundle.js";
+const DEFAULT_THEME_FAMILY = "legacy"; // includes sap_fiori_*
 const loaders = new Map();
 const registry = getSharedResource("SVGIcons.registry", new Map());
 const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map());
-
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const DEFAULT_COLLECTION = "SAP-icons";
-
+const registerIconLoader = (collectionName, loader) => {
+    loaders.set(collectionName, loader);
+};
+const _loadIconCollectionOnce = async (collectionName) => {
+    if (!iconCollectionPromises.has(collectionName)) {
+        if (!loaders.has(collectionName)) {
+            throw new Error(`No loader registered for the ${collectionName} icons collection. Probably you forgot to import the "AllIcons.js" module for the respective package.`);
+        }
+        const loadIcons = loaders.get(collectionName);
+        iconCollectionPromises.set(collectionName, loadIcons(collectionName));
+    }
+    return iconCollectionPromises.get(collectionName);
+};
+const _fillRegistry = (bundleData) => {
+    Object.keys(bundleData.data).forEach(iconName => {
+        const iconData = bundleData.data[iconName];
+        registerIcon(iconName, {
+            pathData: (iconData.path || iconData.paths),
+            ltr: iconData.ltr,
+            viewBox: iconData.viewBox,
+            accData: iconData.acc,
+            collection: bundleData.collection,
+            packageName: bundleData.packageName,
+        });
+    });
+};
 /**
- * @deprecated
+ * Registers a SVG icon with the given name and associated icon data.
+ *
+ * This method is used to add an icon to the registry, making it available for use
+ * in the application.
+ *
+ * @public
+ * @param { string } name - The name of the icon to register.
+ * @param { IconData } iconData - The data associated with the icon: `collection`, `pathData`, `packageName`
+ * `customTemplate`, `viewBox`, `ltr`, `accData`.
+ *
+ * <b>Note:</b> Properties `pathData` and `customTemplate` are mutually exclusive.
+ * If both are set, `customTemplate` will be used.
  */
-const registerIconBundle = async (collectionName, bundleData) => {
-	throw new Error("This method has been removed. Use `registerIconLoader` instead.");
+const registerIcon = (name, iconData) => {
+    const key = `${iconData.collection}/${name}`;
+    const data = {
+        collection: iconData.collection,
+        packageName: iconData.packageName,
+        pathData: iconData.pathData,
+        viewBox: iconData.viewBox,
+        ltr: iconData.ltr,
+        accData: iconData.accData,
+        customTemplate: iconData.customTemplate,
+    };
+    registry.set(key, data);
 };
-
-const registerIconLoader = async (collectionName, loader) => {
-	loaders.set(collectionName, loader);
-};
-
-const _loadIconCollectionOnce = async collectionName => {
-	if (!iconCollectionPromises.has(collectionName)) {
-		if (!loaders.has(collectionName)) {
-			throw new Error(`No loader registered for the ${collectionName} icons collection. Probably you forgot to import the "AllIcons.js" module for the respective package.`);
-		}
-		const loadIcons = loaders.get(collectionName);
-		iconCollectionPromises.set(collectionName, loadIcons(collectionName));
-	}
-
-	return iconCollectionPromises.get(collectionName);
+/**
+ * Registers a SVG icon in the registry with the given name and icon data.
+ *
+ * <b>Note:</b> This method is unsafe as it allows the SVG content to be passed as a string
+ * through the `customTemplateAsString` property of the `iconData`.
+ * Ensure that the SVG content is properly validated.
+ * Improperly sanitized SVG strings can lead to security vulnerabilities such as XSS (Cross-Site Scripting).
+ *
+ * @public
+ * @param { string } name - The name of the icon to register.
+ * @param { UnsafeIconData } iconData - The data for the icon: `collection`, `customTemplateAsString`, `packageName`
+ * `viewBox`, `ltr` and `accData`.
+ * @since 2.14.0
+ */
+const unsafeRegisterIcon = (name, iconData) => {
+    const key = `${iconData.collection}/${name}`;
+    const data = {
+        collection: iconData.collection,
+        customTemplateAsString: iconData.customTemplateAsString,
+        packageName: iconData.packageName,
+        viewBox: iconData.viewBox,
+        ltr: iconData.ltr,
+        accData: iconData.accData,
+    };
+    registry.set(key, data);
 };
-
-const _fillRegistry = bundleData => {
-	Object.keys(bundleData.data).forEach(iconName => {
-		const iconData = bundleData.data[iconName];
-
-		registerIcon(iconName, {
-			pathData: iconData.path,
-			ltr: iconData.ltr,
-			accData: iconData.acc,
-			collection: bundleData.collection,
-			packageName: bundleData.packageName,
-		 });
-	});
+/**
+ * Processes the full icon name and splits it into - "name", "collection".
+ * - removes legacy protocol ("sap-icon://")
+ * - resolves aliases (f.e "SAP-icons-TNT/actor" => "tnt/actor")
+ *
+ * @param { string } name
+ * @return { object }
+ */
+const processName = (name) => {
+    // silently support ui5-compatible URIs
+    if (name.startsWith("sap-icon://")) {
+        name = name.replace("sap-icon://", "");
+    }
+    let collection;
+    [name, collection] = name.split("/").reverse();
+    name = name.replace("icon-", "");
+    if (collection) {
+        collection = getIconCollectionByAlias(collection);
+    }
+    return { name, collection };
 };
-
-// set
-const registerIcon = (name, { pathData, ltr, accData, collection, packageName } = {}) => { // eslint-disable-line
-	if (!collection) {
-		collection = DEFAULT_COLLECTION;
-	}
-
-	const key = `${collection}/${name}`;
-	registry.set(key, {
-		pathData,
-		ltr,
-		accData,
-		packageName,
-	});
+const getIconDataSync = (iconName) => {
+    const { name, collection } = processName(iconName);
+    return getRegisteredIconData(collection, name);
 };
-
-const _parseName = name => {
-	// silently support ui5-compatible URIs
-	if (name.startsWith("sap-icon://")) {
-		name = name.replace("sap-icon://", "");
-	}
-
-	let collection;
-	[name, collection] = name.split("/").reverse();
-	collection = collection || DEFAULT_COLLECTION;
-	// hardcoded alias in case icon explorer is used, resolve `SAP-icons-TNT` to `tnt`
-	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
-	if (collection === "SAP-icons-TNT") {
-		collection = "tnt";
-	}
-	const registryKey = `${collection}/${name}`;
-	return { name, collection, registryKey };
+const getIconData = async (iconName) => {
+    const { name, collection } = processName(iconName);
+    let iconData = ICON_NOT_FOUND;
+    try {
+        iconData = (await _loadIconCollectionOnce(getEffectiveIconCollection(collection)));
+    }
+    catch (error) {
+        const e = error;
+        console.error(e.message); /* eslint-disable-line */
+    }
+    if (iconData === ICON_NOT_FOUND) {
+        return iconData;
+    }
+    const registeredIconData = getRegisteredIconData(collection, name);
+    if (registeredIconData) {
+        return registeredIconData;
+    }
+    // not filled by another await. many getters will await on the same loader, but fill only once
+    if (Array.isArray(iconData)) {
+        iconData.forEach(data => {
+            _fillRegistry(data);
+            registerIconCollectionForTheme(collection, { [data.themeFamily || DEFAULT_THEME_FAMILY]: data.collection });
+        });
+    }
+    else {
+        _fillRegistry(iconData);
+    }
+    return getRegisteredIconData(collection, name);
 };
-
-const getIconDataSync = nameProp => {
-	const { registryKey } = _parseName(nameProp);
-	return registry.get(registryKey);
+const getRegisteredIconData = (collection, name) => {
+    const registryKey = `${getEffectiveIconCollection(collection)}/${name}`;
+    return registry.get(registryKey);
 };
-
-const getIconData = async nameProp => {
-	const { collection, registryKey } = _parseName(nameProp);
-
-	let iconData = ICON_NOT_FOUND;
-	try {
-		iconData = await _loadIconCollectionOnce(collection);
-	} catch (e) {
-		console.error(e.message); /* eslint-disable-line */
-	}
-
-	if (iconData === ICON_NOT_FOUND) {
-		return iconData;
-	}
-
-	if (!registry.has(registryKey)) {
-		// not filled by another await. many getters will await on the same loader, but fill only once
-		_fillRegistry(iconData);
-	}
-	return registry.get(registryKey);
+/**
+ * Returns the accessible name for the given icon,
+ * or undefined if accessible name is not present.
+ *
+ * @param { string } name
+ * @return { Promise }
+ */
+const getIconAccessibleName = async (name) => {
+    if (!name) {
+        return;
+    }
+    let iconData = getIconDataSync(name);
+    if (!iconData) {
+        iconData = await getIconData(name);
+    }
+    if (iconData && iconData !== ICON_NOT_FOUND && iconData.accData) {
+        if (iconData.packageName) {
+            const i18nBundle = await getI18nBundle(iconData.packageName);
+            return i18nBundle.getText(iconData.accData);
+        }
+        return iconData.accData?.defaultText || "";
+    }
 };
-
 // test page usage only
 const _getRegisteredNames = async () => {
-	// fetch one icon of each collection to trigger the bundle load
-	await getIconData("edit");
-	await getIconData("tnt/arrow");
-	return Array.from(registry.keys());
-};
-
-export {
-	registerIconBundle,
-	registerIconLoader,
-	getIconData,
-	getIconDataSync,
-	registerIcon,
-	_getRegisteredNames,
+    // fetch one icon of each collection to trigger the bundle load
+    await getIconData("edit");
+    await getIconData("tnt/arrow");
+    await getIconData("business-suite/3d");
+    return Array.from(registry.keys());
 };
+export { registerIconLoader, getIconData, getIconDataSync, getIconAccessibleName, registerIcon, unsafeRegisterIcon, _getRegisteredNames, };
+//# sourceMappingURL=Icons.js.map

package/dist/asset-registries/Icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../src/asset-registries/Icons.ts"],"names":[],"mappings":"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","sourcesContent":["import getSharedResource from \"../getSharedResource.js\";\nimport { getIconCollectionByAlias } from \"./util/IconCollectionsAlias.js\";\nimport { registerIconCollectionForTheme } from \"./util/IconCollectionsByTheme.js\";\nimport getEffectiveIconCollection from \"./util/getIconCollectionByTheme.js\";\nimport { getI18nBundle } from \"../i18nBundle.js\";\nimport type { I18nText } from \"../i18nBundle.js\";\nimport type { TemplateFunction } from \"../renderer/executeTemplate.js\";\n\nconst DEFAULT_THEME_FAMILY = \"legacy\"; // includes sap_fiori_*\n\ntype IconLoader = (collectionName: string) => Promise<CollectionData | Array<CollectionData>>;\n\ntype CollectionData = {\n\tcollection: string,\n\tpackageName: string,\n\tthemeFamily?: \"legacy\" | \"sap_horizon\",\n\tversion?: string,\n\tdata: Record<string, {\n\t\tpath?: string,\n\t\tpaths?: Array<string>,\n\t\tltr?: boolean,\n\t\tviewBox?: string,\n\t\tacc?: I18nText,\n\t}>,\n};\n\ntype IconDatabase = {\n\tcollection: string;\n\tpackageName?: string;\n\tviewBox?: string;\n\tltr?: boolean;\n\taccData?: I18nText;\n}\n\ntype IconData = IconDatabase & {\n\tpathData?: string | string[];\n\tcustomTemplate?: TemplateFunction;\n};\n\ntype UnsafeIconData = IconDatabase & {\n\tcustomTemplateAsString: string;\n};\n\nconst loaders = new Map<string, IconLoader>();\nconst registry = getSharedResource<Map<string, IconData | UnsafeIconData>>(\"SVGIcons.registry\", new Map());\nconst iconCollectionPromises = getSharedResource<Map<string, Promise<CollectionData| Array<CollectionData>>>>(\"SVGIcons.promises\", new Map());\n\nconst ICON_NOT_FOUND = \"ICON_NOT_FOUND\";\n\nconst registerIconLoader = (collectionName: string, loader: IconLoader) => {\n\tloaders.set(collectionName, loader);\n};\n\nconst _loadIconCollectionOnce = async (collectionName: string) => {\n\tif (!iconCollectionPromises.has(collectionName)) {\n\t\tif (!loaders.has(collectionName)) {\n\t\t\tthrow new Error(`No loader registered for the ${collectionName} icons collection. Probably you forgot to import the \"AllIcons.js\" module for the respective package.`);\n\t\t}\n\n\t\tconst loadIcons = loaders.get(collectionName)!;\n\t\ticonCollectionPromises.set(collectionName, loadIcons(collectionName));\n\t}\n\n\treturn iconCollectionPromises.get(collectionName);\n};\n\nconst _fillRegistry = (bundleData: CollectionData) => {\n\tObject.keys(bundleData.data).forEach(iconName => {\n\t\tconst iconData = bundleData.data[iconName];\n\n\t\tregisterIcon(iconName, {\n\t\t\tpathData: (iconData.path || iconData.paths)!,\n\t\t\tltr: iconData.ltr,\n\t\t\tviewBox: iconData.viewBox,\n\t\t\taccData: iconData.acc,\n\t\t\tcollection: bundleData.collection,\n\t\t\tpackageName: bundleData.packageName,\n\t\t});\n\t});\n};\n\n/**\n * Registers a SVG icon with the given name and associated icon data.\n *\n * This method is used to add an icon to the registry, making it available for use\n * in the application.\n *\n * @public\n * @param { string } name - The name of the icon to register.\n * @param { IconData } iconData - The data associated with the icon: `collection`, `pathData`, `packageName`\n * `customTemplate`, `viewBox`, `ltr`, `accData`.\n *\n * <b>Note:</b> Properties `pathData` and `customTemplate` are mutually exclusive.\n * If both are set, `customTemplate` will be used.\n */\nconst registerIcon = (name: string, iconData: IconData) => { // eslint-disable-line\n\tconst key = `${iconData.collection}/${name}`;\n\n\tconst data: IconData = {\n\t\tcollection: iconData.collection,\n\t\tpackageName: iconData.packageName,\n\t\tpathData: iconData.pathData,\n\t\tviewBox: iconData.viewBox,\n\t\tltr: iconData.ltr,\n\t\taccData: iconData.accData,\n\t\tcustomTemplate: iconData.customTemplate,\n\t};\n\n\tregistry.set(key, data);\n};\n\n/**\n * Registers a SVG icon in the registry with the given name and icon data.\n *\n * <b>Note:</b> This method is unsafe as it allows the SVG content to be passed as a string\n * through the `customTemplateAsString` property of the `iconData`.\n * Ensure that the SVG content is properly validated.\n * Improperly sanitized SVG strings can lead to security vulnerabilities such as XSS (Cross-Site Scripting).\n *\n * @public\n * @param { string } name - The name of the icon to register.\n * @param { UnsafeIconData } iconData - The data for the icon: `collection`, `customTemplateAsString`, `packageName`\n * `viewBox`, `ltr` and `accData`.\n * @since 2.14.0\n */\nconst unsafeRegisterIcon = (name: string, iconData: UnsafeIconData) => {\n\tconst key = `${iconData.collection}/${name}`;\n\n\tconst data: UnsafeIconData = {\n\t\tcollection: iconData.collection,\n\t\tcustomTemplateAsString: iconData.customTemplateAsString,\n\t\tpackageName: iconData.packageName,\n\t\tviewBox: iconData.viewBox,\n\t\tltr: iconData.ltr,\n\t\taccData: iconData.accData,\n\t};\n\n\tregistry.set(key, data);\n};\n\n/**\n * Processes the full icon name and splits it into - \"name\", \"collection\".\n * - removes legacy protocol (\"sap-icon://\")\n * - resolves aliases (f.e \"SAP-icons-TNT/actor\" => \"tnt/actor\")\n *\n * @param { string } name\n * @return { object }\n */\nconst processName = (name: string) => {\n\t// silently support ui5-compatible URIs\n\tif (name.startsWith(\"sap-icon://\")) {\n\t\tname = name.replace(\"sap-icon://\", \"\");\n\t}\n\n\tlet collection: string;\n\t[name, collection] = name.split(\"/\").reverse();\n\n\tname = name.replace(\"icon-\", \"\");\n\tif (collection) {\n\t\tcollection = getIconCollectionByAlias(collection);\n\t}\n\treturn { name, collection };\n};\n\nconst getIconDataSync = (iconName: string) => {\n\tconst { name, collection } = processName(iconName);\n\treturn getRegisteredIconData(collection, name);\n};\n\nconst getIconData = async (iconName: string) => {\n\tconst { name, collection } = processName(iconName);\n\n\tlet iconData: string | CollectionData | Array<CollectionData> = ICON_NOT_FOUND;\n\ttry {\n\t\ticonData = (await _loadIconCollectionOnce(getEffectiveIconCollection(collection)))!;\n\t} catch (error: unknown) {\n\t\tconst e = error as Error;\n\t\tconsole.error(e.message); /* eslint-disable-line */\n\t}\n\n\tif (iconData === ICON_NOT_FOUND) {\n\t\treturn iconData;\n\t}\n\n\tconst registeredIconData = getRegisteredIconData(collection, name);\n\n\tif (registeredIconData) {\n\t\treturn registeredIconData;\n\t}\n\n\t// not filled by another await. many getters will await on the same loader, but fill only once\n\tif (Array.isArray(iconData)) {\n\t\ticonData.forEach(data => {\n\t\t\t_fillRegistry(data);\n\t\t\tregisterIconCollectionForTheme(collection, { [data.themeFamily || DEFAULT_THEME_FAMILY]: data.collection });\n\t\t});\n\t} else {\n\t\t_fillRegistry(iconData as CollectionData);\n\t}\n\n\treturn getRegisteredIconData(collection, name);\n};\n\nconst getRegisteredIconData = (collection: string, name: string) => {\n\tconst registryKey = `${getEffectiveIconCollection(collection)}/${name}`;\n\treturn registry.get(registryKey);\n};\n\n/**\n * Returns the accessible name for the given icon,\n * or undefined if accessible name is not present.\n *\n * @param { string } name\n * @return { Promise }\n */\nconst getIconAccessibleName = async (name: string | undefined): Promise<string | undefined> => {\n\tif (!name) {\n\t\treturn;\n\t}\n\n\tlet iconData: typeof ICON_NOT_FOUND | IconData | undefined = getIconDataSync(name);\n\n\tif (!iconData) {\n\t\ticonData = await getIconData(name);\n\t}\n\n\tif (iconData && iconData !== ICON_NOT_FOUND && iconData.accData) {\n\t\tif (iconData.packageName) {\n\t\t\tconst i18nBundle = await getI18nBundle(iconData.packageName);\n\t\t\treturn i18nBundle.getText(iconData.accData);\n\t\t}\n\t\treturn iconData.accData?.defaultText || \"\";\n\t}\n};\n\n// test page usage only\nconst _getRegisteredNames = async () => {\n\t// fetch one icon of each collection to trigger the bundle load\n\tawait getIconData(\"edit\");\n\tawait getIconData(\"tnt/arrow\");\n\tawait getIconData(\"business-suite/3d\");\n\treturn Array.from(registry.keys());\n};\n\nexport {\n\tregisterIconLoader,\n\tgetIconData,\n\tgetIconDataSync,\n\tgetIconAccessibleName,\n\tregisterIcon,\n\tunsafeRegisterIcon,\n\t_getRegisteredNames,\n};\n\nexport type {\n\tIconData,\n\tUnsafeIconData,\n\tCollectionData,\n};\n"]}

package/dist/asset-registries/Illustrations.d.ts

@@ -0,0 +1,144 @@
+import type { I18nText } from "../i18nBundle.js";
+import type { TemplateFunction } from "../renderer/executeTemplate.js";
+/**
+ * Loader function for lazy-loading illustration data.
+ */
+type IllustrationLoader = (illustrationName: string) => Promise<UnsafeIllustrationData>;
+/**
+ * Database properties shared by all illustration types.
+ */
+type IllustrationDatabase = {
+    /** The illustration title text (supports i18n) */
+    title: I18nText;
+    /** The illustration subtitle text (supports i18n) */
+    subtitle: I18nText;
+};
+/**
+ * Illustration properties using template functions (recommended).
+ *
+ * @public
+ */
+type IllustrationProperties = IllustrationDatabase & {
+    /** Template function for the medium variant (M breakpoint, ≤ 681px) */
+    dialogTemplate?: TemplateFunction;
+    /** Template function for the large variant (L breakpoint, > 681px) */
+    sceneTemplate?: TemplateFunction;
+    /** Template function for the small variant (S breakpoint, ≤ 360px) */
+    spotTemplate?: TemplateFunction;
+    /** Template function for the extra small variant (XS breakpoint, ≤ 260px) */
+    dotTemplate?: TemplateFunction;
+};
+/**
+ * Illustration properties using raw SVG strings (unsafe).
+ *
+ * @public
+ */
+type UnsafeIllustrationProperties = IllustrationDatabase & {
+    /** SVG content for the medium variant (M breakpoint, ≤ 681px) */
+    dialogSvg: string;
+    /** SVG content for the large variant (L breakpoint, > 681px) */
+    sceneSvg: string;
+    /** SVG content for the small variant (S breakpoint, ≤ 360px) */
+    spotSvg: string;
+    /** SVG content for the extra small variant (XS breakpoint, ≤ 260px) */
+    dotSvg: string;
+};
+/**
+ * Complete illustration data for registration (recommended).
+ *
+ * @public
+ */
+type IllustrationData = IllustrationProperties & {
+    /** The illustration set identifier (e.g., "custom") */
+    set: string;
+    /** Collection identifier (defaults to "V4") */
+    collection?: string;
+};
+/**
+ * Complete unsafe illustration data for registration.
+ *
+ * @public
+ */
+type UnsafeIllustrationData = UnsafeIllustrationProperties & {
+    /** The illustration set identifier (e.g., "custom") */
+    set: string;
+    /** Collection identifier (defaults to "V4") */
+    collection?: string;
+};
+/**
+ * Registers a custom illustration in the global registry using template functions.
+ *
+ * This is the recommended way to register illustrations as it accepts template functions
+ * instead of raw SVG strings, preventing XSS vulnerabilities.
+ *
+ * @param name - The name of the illustration (without set prefix)
+ * @param data - The illustration data (see {@link IllustrationData})
+ *
+ * @public
+ * @since 2.17.0
+ * @example
+ * ```js
+ * import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
+ *
+ * registerIllustration("EmptyCart", {
+ *   sceneTemplate: (component) => <svg>...</svg>,
+ *   dialogTemplate: (component) => <svg>...</svg>,
+ *   spotTemplate: (component) => <svg>...</svg>,
+ *   dotTemplate: (component) => <svg>...</svg>,
+ *   title: "Your cart is empty",
+ *   subtitle: "Add items to get started",
+ *   set: "custom"
+ * });
+ * ```
+ */
+declare const registerIllustration: (name: string, data: IllustrationData) => void;
+/**
+ * Registers a custom illustration in the global registry.
+ *
+ * <b>Note:</b> This method is unsafe as it allows the SVG content to be passed as raw strings
+ * through the `dialogSvg`, `sceneSvg`, `spotSvg`, and `dotSvg` properties of the `data`.
+ * Ensure that the SVG content is properly validated.
+ * Improperly sanitized SVG strings can lead to security vulnerabilities such as XSS (Cross-Site Scripting).
+ *
+ * @param name - The name of the illustration (without set prefix)
+ * @param data - The illustration data (see {@link UnsafeIllustrationData})
+ *
+ * @public
+ * @since 2.17.0
+ * @example
+ * ```js
+ * import { unsafeRegisterIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
+ *
+ * unsafeRegisterIllustration("EmptyCart", {
+ *   sceneSvg: "<svg>...</svg>",
+ *   dialogSvg: "<svg>...</svg>",
+ *   spotSvg: "<svg>...</svg>",
+ *   dotSvg: "<svg>...</svg>",
+ *   title: "Your cart is empty",
+ *   subtitle: "Add items to get started",
+ *   set: "custom"
+ * });
+ * ```
+ */
+declare const unsafeRegisterIllustration: (name: string, data: UnsafeIllustrationData) => void;
+declare const registerIllustrationLoader: (illustrationName: string, loader: IllustrationLoader) => void;
+/**
+ * Synchronously retrieves illustration data from the registry.
+ *
+ * @param illustrationName - The illustration identifier in format "set/name"
+ * @returns The illustration properties or undefined if not available
+ *
+ * @public
+ */
+declare const getIllustrationDataSync: (illustrationName: string) => UnsafeIllustrationProperties | IllustrationProperties | undefined;
+/**
+ * Asynchronously retrieves illustration data, loading it if necessary.
+ *
+ * @param illustrationName - The illustration identifier in format "set/name"
+ * @returns Promise resolving to illustration properties or undefined
+ *
+ * @public
+ */
+declare const getIllustrationData: (illustrationName: string) => Promise<UnsafeIllustrationProperties | IllustrationProperties | undefined>;
+export { getIllustrationDataSync, registerIllustration, unsafeRegisterIllustration, registerIllustrationLoader, getIllustrationData, };
+export type { IllustrationData, UnsafeIllustrationData, IllustrationProperties, UnsafeIllustrationProperties, };

package/dist/asset-registries/Illustrations.js

@@ -1,23 +1,158 @@
 import getSharedResource from "../getSharedResource.js";
-
+import { getTheme } from "../config/Theme.js";
+const IllustrationCollections = new Map([
+    ["sap_horizon", "V5"],
+    ["sap_horizon_dark", "V5"],
+    ["sap_horizon_hcb", "V5/HC"],
+    ["sap_horizon_hcw", "V5/HC"],
+]);
+const FALLBACK_COLLECTION = "V4";
+const loaders = new Map();
 const registry = getSharedResource("SVGIllustration.registry", new Map());
-const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
-
-const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, title, subtitle } = {}) => { // eslint-disable-line
-	registry.set(name, {
-		dialogSvg,
-		sceneSvg,
-		spotSvg,
-		title,
-		subtitle,
-	});
-};
-
-const getIllustrationDataSync = nameProp => {
-	return registry.get(nameProp) || ILLUSTRATION_NOT_FOUND;
-};
-
-export {
-	getIllustrationDataSync,
-	registerIllustration,
+const illustrationPromises = getSharedResource("SVGIllustration.promises", new Map());
+const getCollection = () => {
+    const theme = getTheme();
+    if (IllustrationCollections.has(theme)) {
+        return IllustrationCollections.get(theme);
+    }
+    return FALLBACK_COLLECTION;
 };
+/**
+ * Processes the name of the illustration
+ * The name is used to generate the registry key and the loader key
+ * The registry key is used to store and get the illustration data from the registry
+ * The loader key is used to store and get the illustration loader from the loaders map
+ * The function generates the correct registry key and loader key based on whether an loader exists for the illustration
+ * If there is no loader registered for the collection, it falls back to the default collection
+ */
+const processName = (name) => {
+    let collection = getCollection();
+    const [set, illustrationName] = name.split("/");
+    let registryKey = `${set}/${collection}/${illustrationName}`;
+    if (!loaders.has(registryKey) && collection !== FALLBACK_COLLECTION) {
+        collection = FALLBACK_COLLECTION;
+        registryKey = `${set}/${collection}/${illustrationName}`;
+    }
+    return {
+        registryKey,
+        collection,
+    };
+};
+/**
+ * Registers a custom illustration in the global registry using template functions.
+ *
+ * This is the recommended way to register illustrations as it accepts template functions
+ * instead of raw SVG strings, preventing XSS vulnerabilities.
+ *
+ * @param name - The name of the illustration (without set prefix)
+ * @param data - The illustration data (see {@link IllustrationData})
+ *
+ * @public
+ * @since 2.17.0
+ * @example
+ * ```js
+ * import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
+ *
+ * registerIllustration("EmptyCart", {
+ *   sceneTemplate: (component) => <svg>...</svg>,
+ *   dialogTemplate: (component) => <svg>...</svg>,
+ *   spotTemplate: (component) => <svg>...</svg>,
+ *   dotTemplate: (component) => <svg>...</svg>,
+ *   title: "Your cart is empty",
+ *   subtitle: "Add items to get started",
+ *   set: "custom"
+ * });
+ * ```
+ */
+const registerIllustration = (name, data) => {
+    const collection = data.collection || FALLBACK_COLLECTION;
+    registry.set(`${data.set}/${collection}/${name}`, {
+        dialogTemplate: data.dialogTemplate,
+        sceneTemplate: data.sceneTemplate,
+        spotTemplate: data.spotTemplate,
+        dotTemplate: data.dotTemplate,
+        title: data.title,
+        subtitle: data.subtitle,
+    });
+};
+/**
+ * Registers a custom illustration in the global registry.
+ *
+ * <b>Note:</b> This method is unsafe as it allows the SVG content to be passed as raw strings
+ * through the `dialogSvg`, `sceneSvg`, `spotSvg`, and `dotSvg` properties of the `data`.
+ * Ensure that the SVG content is properly validated.
+ * Improperly sanitized SVG strings can lead to security vulnerabilities such as XSS (Cross-Site Scripting).
+ *
+ * @param name - The name of the illustration (without set prefix)
+ * @param data - The illustration data (see {@link UnsafeIllustrationData})
+ *
+ * @public
+ * @since 2.17.0
+ * @example
+ * ```js
+ * import { unsafeRegisterIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
+ *
+ * unsafeRegisterIllustration("EmptyCart", {
+ *   sceneSvg: "<svg>...</svg>",
+ *   dialogSvg: "<svg>...</svg>",
+ *   spotSvg: "<svg>...</svg>",
+ *   dotSvg: "<svg>...</svg>",
+ *   title: "Your cart is empty",
+ *   subtitle: "Add items to get started",
+ *   set: "custom"
+ * });
+ * ```
+ */
+const unsafeRegisterIllustration = (name, data) => {
+    const collection = data.collection || FALLBACK_COLLECTION;
+    registry.set(`${data.set}/${collection}/${name}`, {
+        dialogSvg: data.dialogSvg,
+        sceneSvg: data.sceneSvg,
+        spotSvg: data.spotSvg,
+        dotSvg: data.dotSvg,
+        title: data.title,
+        subtitle: data.subtitle,
+    });
+};
+const registerIllustrationLoader = (illustrationName, loader) => {
+    loaders.set(illustrationName, loader);
+};
+const _loadIllustrationOnce = (illustrationName) => {
+    const { registryKey } = processName(illustrationName);
+    if (!illustrationPromises.has(registryKey)) {
+        if (!loaders.has(registryKey)) {
+            const illustrationPath = illustrationName.startsWith("fiori/") ? illustrationName.replace("fiori/", "") : illustrationName;
+            throw new Error(`No loader registered for the ${illustrationName} illustration. Probably you forgot to import the "@ui5/webcomponents-fiori/dist/illustrations/${illustrationPath}.js" module. Or you can import the "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js" module that will make all illustrations available, but fetch only the ones used.`);
+        }
+        const loadIllustrations = loaders.get(registryKey);
+        illustrationPromises.set(registryKey, loadIllustrations(registryKey));
+    }
+    return illustrationPromises.get(registryKey);
+};
+/**
+ * Synchronously retrieves illustration data from the registry.
+ *
+ * @param illustrationName - The illustration identifier in format "set/name"
+ * @returns The illustration properties or undefined if not available
+ *
+ * @public
+ */
+const getIllustrationDataSync = (illustrationName) => {
+    const { registryKey } = processName(illustrationName);
+    return registry.get(registryKey);
+};
+/**
+ * Asynchronously retrieves illustration data, loading it if necessary.
+ *
+ * @param illustrationName - The illustration identifier in format "set/name"
+ * @returns Promise resolving to illustration properties or undefined
+ *
+ * @public
+ */
+const getIllustrationData = async (illustrationName) => {
+    const { registryKey } = processName(illustrationName);
+    await _loadIllustrationOnce(illustrationName);
+    return registry.get(registryKey);
+};
+export { getIllustrationDataSync, registerIllustration, unsafeRegisterIllustration, registerIllustrationLoader, getIllustrationData, };
+//# sourceMappingURL=Illustrations.js.map