@ui5/webcomponents-base 2.16.0 → 2.17.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/.tsbuildinfobuild +1 -1
  3. package/dist/asset-registries/Illustrations.d.ts +133 -8
  4. package/dist/asset-registries/Illustrations.js +82 -1
  5. package/dist/asset-registries/Illustrations.js.map +1 -1
  6. package/dist/custom-elements-internal.json +105 -105
  7. package/dist/custom-elements.json +105 -105
  8. package/dist/generated/VersionInfo.js +4 -4
  9. package/dist/generated/VersionInfo.js.map +1 -1
  10. package/dist/prod/asset-registries/Illustrations.js +1 -1
  11. package/dist/prod/asset-registries/Illustrations.js.map +3 -3
  12. package/dist/prod/generated/VersionInfo.js +1 -1
  13. package/dist/prod/generated/VersionInfo.js.map +2 -2
  14. package/package.json +3 -3
package/dist/asset-registries/Illustrations.d.ts CHANGED
@@ -1,19 +1,144 @@
1
1
  import type { I18nText } from "../i18nBundle.js";
2
- type IllustrationLoader = (illustrationName: string) => Promise<IllustrationData>;
3
- type IllustrationProperties = {
2
+ import type { TemplateFunction } from "../renderer/executeTemplate.js";
3
+ /**
4
+ * Loader function for lazy-loading illustration data.
5
+ */
6
+ type IllustrationLoader = (illustrationName: string) => Promise<UnsafeIllustrationData>;
7
+ /**
8
+ * Database properties shared by all illustration types.
9
+ */
10
+ type IllustrationDatabase = {
11
+ /** The illustration title text (supports i18n) */
12
+ title: I18nText;
13
+ /** The illustration subtitle text (supports i18n) */
14
+ subtitle: I18nText;
15
+ };
16
+ /**
17
+ * Illustration properties using template functions (recommended).
18
+ *
19
+ * @public
20
+ */
21
+ type IllustrationProperties = IllustrationDatabase & {
22
+ /** Template function for the medium variant (M breakpoint, ≤ 681px) */
23
+ dialogTemplate?: TemplateFunction;
24
+ /** Template function for the large variant (L breakpoint, > 681px) */
25
+ sceneTemplate?: TemplateFunction;
26
+ /** Template function for the small variant (S breakpoint, ≤ 360px) */
27
+ spotTemplate?: TemplateFunction;
28
+ /** Template function for the extra small variant (XS breakpoint, ≤ 260px) */
29
+ dotTemplate?: TemplateFunction;
30
+ };
31
+ /**
32
+ * Illustration properties using raw SVG strings (unsafe).
33
+ *
34
+ * @public
35
+ */
36
+ type UnsafeIllustrationProperties = IllustrationDatabase & {
37
+ /** SVG content for the medium variant (M breakpoint, ≤ 681px) */
4
38
  dialogSvg: string;
39
+ /** SVG content for the large variant (L breakpoint, > 681px) */
5
40
  sceneSvg: string;
41
+ /** SVG content for the small variant (S breakpoint, ≤ 360px) */
6
42
  spotSvg: string;
43
+ /** SVG content for the extra small variant (XS breakpoint, ≤ 260px) */
7
44
  dotSvg: string;
8
- title: I18nText;
9
- subtitle: I18nText;
10
45
  };
46
+ /**
47
+ * Complete illustration data for registration (recommended).
48
+ *
49
+ * @public
50
+ */
11
51
  type IllustrationData = IllustrationProperties & {
52
+ /** The illustration set identifier (e.g., "custom") */
53
+ set: string;
54
+ /** Collection identifier (defaults to "V4") */
55
+ collection?: string;
56
+ };
57
+ /**
58
+ * Complete unsafe illustration data for registration.
59
+ *
60
+ * @public
61
+ */
62
+ type UnsafeIllustrationData = UnsafeIllustrationProperties & {
63
+ /** The illustration set identifier (e.g., "custom") */
12
64
  set: string;
13
- collection: string;
65
+ /** Collection identifier (defaults to "V4") */
66
+ collection?: string;
14
67
  };
68
+ /**
69
+ * Registers a custom illustration in the global registry using template functions.
70
+ *
71
+ * This is the recommended way to register illustrations as it accepts template functions
72
+ * instead of raw SVG strings, preventing XSS vulnerabilities.
73
+ *
74
+ * @param name - The name of the illustration (without set prefix)
75
+ * @param data - The illustration data (see {@link IllustrationData})
76
+ *
77
+ * @public
78
+ * @since 2.17.0
79
+ * @example
80
+ * ```js
81
+ * import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
82
+ *
83
+ * registerIllustration("EmptyCart", {
84
+ * sceneTemplate: (component) => <svg>...</svg>,
85
+ * dialogTemplate: (component) => <svg>...</svg>,
86
+ * spotTemplate: (component) => <svg>...</svg>,
87
+ * dotTemplate: (component) => <svg>...</svg>,
88
+ * title: "Your cart is empty",
89
+ * subtitle: "Add items to get started",
90
+ * set: "custom"
91
+ * });
92
+ * ```
93
+ */
15
94
  declare const registerIllustration: (name: string, data: IllustrationData) => void;
95
+ /**
96
+ * Registers a custom illustration in the global registry.
97
+ *
98
+ * <b>Note:</b> This method is unsafe as it allows the SVG content to be passed as raw strings
99
+ * through the `dialogSvg`, `sceneSvg`, `spotSvg`, and `dotSvg` properties of the `data`.
100
+ * Ensure that the SVG content is properly validated.
101
+ * Improperly sanitized SVG strings can lead to security vulnerabilities such as XSS (Cross-Site Scripting).
102
+ *
103
+ * @param name - The name of the illustration (without set prefix)
104
+ * @param data - The illustration data (see {@link UnsafeIllustrationData})
105
+ *
106
+ * @public
107
+ * @since 2.17.0
108
+ * @example
109
+ * ```js
110
+ * import { unsafeRegisterIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
111
+ *
112
+ * unsafeRegisterIllustration("EmptyCart", {
113
+ * sceneSvg: "<svg>...</svg>",
114
+ * dialogSvg: "<svg>...</svg>",
115
+ * spotSvg: "<svg>...</svg>",
116
+ * dotSvg: "<svg>...</svg>",
117
+ * title: "Your cart is empty",
118
+ * subtitle: "Add items to get started",
119
+ * set: "custom"
120
+ * });
121
+ * ```
122
+ */
123
+ declare const unsafeRegisterIllustration: (name: string, data: UnsafeIllustrationData) => void;
16
124
  declare const registerIllustrationLoader: (illustrationName: string, loader: IllustrationLoader) => void;
17
- declare const getIllustrationDataSync: (illustrationName: string) => IllustrationProperties | undefined;
18
- declare const getIllustrationData: (illustrationName: string) => Promise<IllustrationProperties | undefined>;
19
- export { getIllustrationDataSync, registerIllustration, registerIllustrationLoader, getIllustrationData, };
125
+ /**
126
+ * Synchronously retrieves illustration data from the registry.
127
+ *
128
+ * @param illustrationName - The illustration identifier in format "set/name"
129
+ * @returns The illustration properties or undefined if not available
130
+ *
131
+ * @public
132
+ */
133
+ declare const getIllustrationDataSync: (illustrationName: string) => UnsafeIllustrationProperties | IllustrationProperties | undefined;
134
+ /**
135
+ * Asynchronously retrieves illustration data, loading it if necessary.
136
+ *
137
+ * @param illustrationName - The illustration identifier in format "set/name"
138
+ * @returns Promise resolving to illustration properties or undefined
139
+ *
140
+ * @public
141
+ */
142
+ declare const getIllustrationData: (illustrationName: string) => Promise<UnsafeIllustrationProperties | IllustrationProperties | undefined>;
143
+ export { getIllustrationDataSync, registerIllustration, unsafeRegisterIllustration, registerIllustrationLoader, getIllustrationData, };
144
+ export type { IllustrationData, UnsafeIllustrationData, IllustrationProperties, UnsafeIllustrationProperties, };
package/dist/asset-registries/Illustrations.js CHANGED
@@ -38,7 +38,72 @@ const processName = (name) => {
38
38
  collection,
39
39
  };
40
40
  };
41
+ /**
42
+ * Registers a custom illustration in the global registry using template functions.
43
+ *
44
+ * This is the recommended way to register illustrations as it accepts template functions
45
+ * instead of raw SVG strings, preventing XSS vulnerabilities.
46
+ *
47
+ * @param name - The name of the illustration (without set prefix)
48
+ * @param data - The illustration data (see {@link IllustrationData})
49
+ *
50
+ * @public
51
+ * @since 2.17.0
52
+ * @example
53
+ * ```js
54
+ * import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
55
+ *
56
+ * registerIllustration("EmptyCart", {
57
+ * sceneTemplate: (component) => <svg>...</svg>,
58
+ * dialogTemplate: (component) => <svg>...</svg>,
59
+ * spotTemplate: (component) => <svg>...</svg>,
60
+ * dotTemplate: (component) => <svg>...</svg>,
61
+ * title: "Your cart is empty",
62
+ * subtitle: "Add items to get started",
63
+ * set: "custom"
64
+ * });
65
+ * ```
66
+ */
41
67
  const registerIllustration = (name, data) => {
68
+ const collection = data.collection || FALLBACK_COLLECTION;
69
+ registry.set(`${data.set}/${collection}/${name}`, {
70
+ dialogTemplate: data.dialogTemplate,
71
+ sceneTemplate: data.sceneTemplate,
72
+ spotTemplate: data.spotTemplate,
73
+ dotTemplate: data.dotTemplate,
74
+ title: data.title,
75
+ subtitle: data.subtitle,
76
+ });
77
+ };
78
+ /**
79
+ * Registers a custom illustration in the global registry.
80
+ *
81
+ * <b>Note:</b> This method is unsafe as it allows the SVG content to be passed as raw strings
82
+ * through the `dialogSvg`, `sceneSvg`, `spotSvg`, and `dotSvg` properties of the `data`.
83
+ * Ensure that the SVG content is properly validated.
84
+ * Improperly sanitized SVG strings can lead to security vulnerabilities such as XSS (Cross-Site Scripting).
85
+ *
86
+ * @param name - The name of the illustration (without set prefix)
87
+ * @param data - The illustration data (see {@link UnsafeIllustrationData})
88
+ *
89
+ * @public
90
+ * @since 2.17.0
91
+ * @example
92
+ * ```js
93
+ * import { unsafeRegisterIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
94
+ *
95
+ * unsafeRegisterIllustration("EmptyCart", {
96
+ * sceneSvg: "<svg>...</svg>",
97
+ * dialogSvg: "<svg>...</svg>",
98
+ * spotSvg: "<svg>...</svg>",
99
+ * dotSvg: "<svg>...</svg>",
100
+ * title: "Your cart is empty",
101
+ * subtitle: "Add items to get started",
102
+ * set: "custom"
103
+ * });
104
+ * ```
105
+ */
106
+ const unsafeRegisterIllustration = (name, data) => {
42
107
  const collection = data.collection || FALLBACK_COLLECTION;
43
108
  registry.set(`${data.set}/${collection}/${name}`, {
44
109
  dialogSvg: data.dialogSvg,
@@ -64,14 +129,30 @@ const _loadIllustrationOnce = (illustrationName) => {
64
129
  }
65
130
  return illustrationPromises.get(registryKey);
66
131
  };
132
+ /**
133
+ * Synchronously retrieves illustration data from the registry.
134
+ *
135
+ * @param illustrationName - The illustration identifier in format "set/name"
136
+ * @returns The illustration properties or undefined if not available
137
+ *
138
+ * @public
139
+ */
67
140
  const getIllustrationDataSync = (illustrationName) => {
68
141
  const { registryKey } = processName(illustrationName);
69
142
  return registry.get(registryKey);
70
143
  };
144
+ /**
145
+ * Asynchronously retrieves illustration data, loading it if necessary.
146
+ *
147
+ * @param illustrationName - The illustration identifier in format "set/name"
148
+ * @returns Promise resolving to illustration properties or undefined
149
+ *
150
+ * @public
151
+ */
71
152
  const getIllustrationData = async (illustrationName) => {
72
153
  const { registryKey } = processName(illustrationName);
73
154
  await _loadIllustrationOnce(illustrationName);
74
155
  return registry.get(registryKey);
75
156
  };
76
- export { getIllustrationDataSync, registerIllustration, registerIllustrationLoader, getIllustrationData, };
157
+ export { getIllustrationDataSync, registerIllustration, unsafeRegisterIllustration, registerIllustrationLoader, getIllustrationData, };
77
158
  //# sourceMappingURL=Illustrations.js.map
package/dist/asset-registries/Illustrations.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Illustrations.js","sourceRoot":"","sources":["../../src/asset-registries/Illustrations.ts"],"names":[],"mappings":"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","sourcesContent":["import getSharedResource from \"../getSharedResource.js\";\nimport type { I18nText } from \"../i18nBundle.js\";\nimport { getTheme } from \"../config/Theme.js\";\n\ntype IllustrationLoader = (illustrationName: string) => Promise<IllustrationData>;\n\ntype IllustrationProperties = {\n\tdialogSvg: string,\n\tsceneSvg: string,\n\tspotSvg: string,\n\tdotSvg: string,\n\ttitle: I18nText,\n\tsubtitle: I18nText,\n};\n\ntype IllustrationData = IllustrationProperties & {\n\tset: string,\n\tcollection: string,\n};\n\nconst IllustrationCollections = new Map([\n\t[\"sap_horizon\", \"V5\"],\n\t[\"sap_horizon_dark\", \"V5\"],\n\t[\"sap_horizon_hcb\", \"V5/HC\"],\n\t[\"sap_horizon_hcw\", \"V5/HC\"],\n]);\n\nconst FALLBACK_COLLECTION = \"V4\";\n\nconst loaders = new Map<string, IllustrationLoader>();\nconst registry = getSharedResource<Map<string, IllustrationProperties>>(\"SVGIllustration.registry\", new Map());\nconst illustrationPromises = getSharedResource<Map<string, Promise<IllustrationData>>>(\"SVGIllustration.promises\", new Map());\n\nconst getCollection = () => {\n\tconst theme = getTheme();\n\n\tif (IllustrationCollections.has(theme)) {\n\t\treturn IllustrationCollections.get(theme);\n\t}\n\n\treturn FALLBACK_COLLECTION;\n};\n\n/**\n * Processes the name of the illustration\n * The name is used to generate the registry key and the loader key\n * The registry key is used to store and get the illustration data from the registry\n * The loader key is used to store and get the illustration loader from the loaders map\n * The function generates the correct registry key and loader key based on whether an loader exists for the illustration\n * If there is no loader registered for the collection, it falls back to the default collection\n */\nconst processName = (name: string) => {\n\tlet collection = getCollection();\n\tconst [set, illustrationName] = name.split(\"/\");\n\tlet registryKey = `${set}/${collection}/${illustrationName}`;\n\n\tif (!loaders.has(registryKey) && collection !== FALLBACK_COLLECTION) {\n\t\tcollection = FALLBACK_COLLECTION;\n\t\tregistryKey = `${set}/${collection}/${illustrationName}`;\n\t}\n\n\treturn {\n\t\tregistryKey,\n\t\tcollection,\n\t};\n};\n\nconst registerIllustration = (name: string, data: IllustrationData) => {\n\tconst collection = data.collection || FALLBACK_COLLECTION;\n\tregistry.set(`${data.set}/${collection}/${name}`, {\n\t\tdialogSvg: data.dialogSvg,\n\t\tsceneSvg: data.sceneSvg,\n\t\tspotSvg: data.spotSvg,\n\t\tdotSvg: data.dotSvg,\n\t\ttitle: data.title,\n\t\tsubtitle: data.subtitle,\n\t});\n};\n\nconst registerIllustrationLoader = (illustrationName: string, loader: IllustrationLoader) => {\n\tloaders.set(illustrationName, loader);\n};\n\nconst _loadIllustrationOnce = (illustrationName: string) => {\n\tconst { registryKey } = processName(illustrationName);\n\tif (!illustrationPromises.has(registryKey)) {\n\t\tif (!loaders.has(registryKey)) {\n\t\t\tconst illustrationPath = illustrationName.startsWith(\"fiori/\") ? illustrationName.replace(\"fiori/\", \"\") : illustrationName;\n\t\t\tthrow 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.`);\n\t\t}\n\n\t\tconst loadIllustrations = loaders.get(registryKey)!;\n\t\tillustrationPromises.set(registryKey, loadIllustrations(registryKey));\n\t}\n\treturn illustrationPromises.get(registryKey);\n};\n\nconst getIllustrationDataSync = (illustrationName: string) => {\n\tconst { registryKey } = processName(illustrationName);\n\treturn registry.get(registryKey);\n};\n\nconst getIllustrationData = async (illustrationName: string) => {\n\tconst { registryKey } = processName(illustrationName);\n\n\tawait _loadIllustrationOnce(illustrationName);\n\treturn registry.get(registryKey);\n};\n\nexport {\n\tgetIllustrationDataSync,\n\tregisterIllustration,\n\tregisterIllustrationLoader,\n\tgetIllustrationData,\n};\n"]}
1
+ {"version":3,"file":"Illustrations.js","sourceRoot":"","sources":["../../src/asset-registries/Illustrations.ts"],"names":[],"mappings":"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","sourcesContent":["import getSharedResource from \"../getSharedResource.js\";\nimport type { I18nText } from \"../i18nBundle.js\";\nimport { getTheme } from \"../config/Theme.js\";\nimport type { TemplateFunction } from \"../renderer/executeTemplate.js\";\n\n/**\n * Loader function for lazy-loading illustration data.\n */\ntype IllustrationLoader = (illustrationName: string) => Promise<UnsafeIllustrationData>;\n\n/**\n * Database properties shared by all illustration types.\n */\ntype IllustrationDatabase = {\n\t/** The illustration title text (supports i18n) */\n\ttitle: I18nText,\n\t/** The illustration subtitle text (supports i18n) */\n\tsubtitle: I18nText,\n};\n\n/**\n * Illustration properties using template functions (recommended).\n *\n * @public\n */\ntype IllustrationProperties = IllustrationDatabase & {\n\t/** Template function for the medium variant (M breakpoint, ≤ 681px) */\n\tdialogTemplate?: TemplateFunction,\n\t/** Template function for the large variant (L breakpoint, > 681px) */\n\tsceneTemplate?: TemplateFunction,\n\t/** Template function for the small variant (S breakpoint, ≤ 360px) */\n\tspotTemplate?: TemplateFunction,\n\t/** Template function for the extra small variant (XS breakpoint, ≤ 260px) */\n\tdotTemplate?: TemplateFunction,\n};\n\n/**\n * Illustration properties using raw SVG strings (unsafe).\n *\n * @public\n */\ntype UnsafeIllustrationProperties = IllustrationDatabase & {\n\t/** SVG content for the medium variant (M breakpoint, ≤ 681px) */\n\tdialogSvg: string,\n\t/** SVG content for the large variant (L breakpoint, > 681px) */\n\tsceneSvg: string,\n\t/** SVG content for the small variant (S breakpoint, ≤ 360px) */\n\tspotSvg: string,\n\t/** SVG content for the extra small variant (XS breakpoint, ≤ 260px) */\n\tdotSvg: string,\n};\n\n/**\n * Complete illustration data for registration (recommended).\n *\n * @public\n */\ntype IllustrationData = IllustrationProperties & {\n\t/** The illustration set identifier (e.g., \"custom\") */\n\tset: string,\n\t/** Collection identifier (defaults to \"V4\") */\n\tcollection?: string,\n};\n\n/**\n * Complete unsafe illustration data for registration.\n *\n * @public\n */\ntype UnsafeIllustrationData = UnsafeIllustrationProperties & {\n\t/** The illustration set identifier (e.g., \"custom\") */\n\tset: string,\n\t/** Collection identifier (defaults to \"V4\") */\n\tcollection?: string,\n};\n\nconst IllustrationCollections = new Map([\n\t[\"sap_horizon\", \"V5\"],\n\t[\"sap_horizon_dark\", \"V5\"],\n\t[\"sap_horizon_hcb\", \"V5/HC\"],\n\t[\"sap_horizon_hcw\", \"V5/HC\"],\n]);\n\nconst FALLBACK_COLLECTION = \"V4\";\n\nconst loaders = new Map<string, IllustrationLoader>();\nconst registry = getSharedResource<Map<string, IllustrationProperties | UnsafeIllustrationProperties>>(\"SVGIllustration.registry\", new Map());\nconst illustrationPromises = getSharedResource<Map<string, Promise<UnsafeIllustrationData>>>(\"SVGIllustration.promises\", new Map());\n\nconst getCollection = () => {\n\tconst theme = getTheme();\n\n\tif (IllustrationCollections.has(theme)) {\n\t\treturn IllustrationCollections.get(theme);\n\t}\n\n\treturn FALLBACK_COLLECTION;\n};\n\n/**\n * Processes the name of the illustration\n * The name is used to generate the registry key and the loader key\n * The registry key is used to store and get the illustration data from the registry\n * The loader key is used to store and get the illustration loader from the loaders map\n * The function generates the correct registry key and loader key based on whether an loader exists for the illustration\n * If there is no loader registered for the collection, it falls back to the default collection\n */\nconst processName = (name: string) => {\n\tlet collection = getCollection();\n\tconst [set, illustrationName] = name.split(\"/\");\n\tlet registryKey = `${set}/${collection}/${illustrationName}`;\n\n\tif (!loaders.has(registryKey) && collection !== FALLBACK_COLLECTION) {\n\t\tcollection = FALLBACK_COLLECTION;\n\t\tregistryKey = `${set}/${collection}/${illustrationName}`;\n\t}\n\n\treturn {\n\t\tregistryKey,\n\t\tcollection,\n\t};\n};\n\n/**\n * Registers a custom illustration in the global registry using template functions.\n *\n * This is the recommended way to register illustrations as it accepts template functions\n * instead of raw SVG strings, preventing XSS vulnerabilities.\n *\n * @param name - The name of the illustration (without set prefix)\n * @param data - The illustration data (see {@link IllustrationData})\n *\n * @public\n * @since 2.17.0\n * @example\n * ```js\n * import { registerIllustration } from \"@ui5/webcomponents-base/dist/asset-registries/Illustrations.js\";\n *\n * registerIllustration(\"EmptyCart\", {\n * sceneTemplate: (component) => <svg>...</svg>,\n * dialogTemplate: (component) => <svg>...</svg>,\n * spotTemplate: (component) => <svg>...</svg>,\n * dotTemplate: (component) => <svg>...</svg>,\n * title: \"Your cart is empty\",\n * subtitle: \"Add items to get started\",\n * set: \"custom\"\n * });\n * ```\n */\nconst registerIllustration = (name: string, data: IllustrationData) => {\n\tconst collection = data.collection || FALLBACK_COLLECTION;\n\tregistry.set(`${data.set}/${collection}/${name}`, {\n\t\tdialogTemplate: data.dialogTemplate,\n\t\tsceneTemplate: data.sceneTemplate,\n\t\tspotTemplate: data.spotTemplate,\n\t\tdotTemplate: data.dotTemplate,\n\t\ttitle: data.title,\n\t\tsubtitle: data.subtitle,\n\t});\n};\n\n/**\n * Registers a custom illustration in the global registry.\n *\n * <b>Note:</b> This method is unsafe as it allows the SVG content to be passed as raw strings\n * through the `dialogSvg`, `sceneSvg`, `spotSvg`, and `dotSvg` properties of the `data`.\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 * @param name - The name of the illustration (without set prefix)\n * @param data - The illustration data (see {@link UnsafeIllustrationData})\n *\n * @public\n * @since 2.17.0\n * @example\n * ```js\n * import { unsafeRegisterIllustration } from \"@ui5/webcomponents-base/dist/asset-registries/Illustrations.js\";\n *\n * unsafeRegisterIllustration(\"EmptyCart\", {\n * sceneSvg: \"<svg>...</svg>\",\n * dialogSvg: \"<svg>...</svg>\",\n * spotSvg: \"<svg>...</svg>\",\n * dotSvg: \"<svg>...</svg>\",\n * title: \"Your cart is empty\",\n * subtitle: \"Add items to get started\",\n * set: \"custom\"\n * });\n * ```\n */\nconst unsafeRegisterIllustration = (name: string, data: UnsafeIllustrationData) => {\n\tconst collection = data.collection || FALLBACK_COLLECTION;\n\tregistry.set(`${data.set}/${collection}/${name}`, {\n\t\tdialogSvg: data.dialogSvg,\n\t\tsceneSvg: data.sceneSvg,\n\t\tspotSvg: data.spotSvg,\n\t\tdotSvg: data.dotSvg,\n\t\ttitle: data.title,\n\t\tsubtitle: data.subtitle,\n\t});\n};\n\nconst registerIllustrationLoader = (illustrationName: string, loader: IllustrationLoader) => {\n\tloaders.set(illustrationName, loader);\n};\n\nconst _loadIllustrationOnce = (illustrationName: string) => {\n\tconst { registryKey } = processName(illustrationName);\n\tif (!illustrationPromises.has(registryKey)) {\n\t\tif (!loaders.has(registryKey)) {\n\t\t\tconst illustrationPath = illustrationName.startsWith(\"fiori/\") ? illustrationName.replace(\"fiori/\", \"\") : illustrationName;\n\t\t\tthrow 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.`);\n\t\t}\n\n\t\tconst loadIllustrations = loaders.get(registryKey)!;\n\t\tillustrationPromises.set(registryKey, loadIllustrations(registryKey));\n\t}\n\treturn illustrationPromises.get(registryKey);\n};\n\n/**\n * Synchronously retrieves illustration data from the registry.\n *\n * @param illustrationName - The illustration identifier in format \"set/name\"\n * @returns The illustration properties or undefined if not available\n *\n * @public\n */\nconst getIllustrationDataSync = (illustrationName: string) => {\n\tconst { registryKey } = processName(illustrationName);\n\treturn registry.get(registryKey);\n};\n\n/**\n * Asynchronously retrieves illustration data, loading it if necessary.\n *\n * @param illustrationName - The illustration identifier in format \"set/name\"\n * @returns Promise resolving to illustration properties or undefined\n *\n * @public\n */\nconst getIllustrationData = async (illustrationName: string) => {\n\tconst { registryKey } = processName(illustrationName);\n\n\tawait _loadIllustrationOnce(illustrationName);\n\treturn registry.get(registryKey);\n};\n\nexport {\n\tgetIllustrationDataSync,\n\tregisterIllustration,\n\tunsafeRegisterIllustration,\n\tregisterIllustrationLoader,\n\tgetIllustrationData,\n};\n\nexport type {\n\tIllustrationData,\n\tUnsafeIllustrationData,\n\tIllustrationProperties,\n\tUnsafeIllustrationProperties,\n};\n"]}
package/dist/custom-elements-internal.json CHANGED
@@ -1004,6 +1004,111 @@
1004
1004
  }
1005
1005
  ]
1006
1006
  },
1007
+ {
1008
+ "kind": "javascript-module",
1009
+ "path": "dist/animations/AnimationQueue.js",
1010
+ "declarations": [],
1011
+ "exports": [
1012
+ {
1013
+ "kind": "js",
1014
+ "name": "default",
1015
+ "declaration": {
1016
+ "name": "AnimationQueue",
1017
+ "module": "dist/animations/AnimationQueue.js"
1018
+ }
1019
+ }
1020
+ ]
1021
+ },
1022
+ {
1023
+ "kind": "javascript-module",
1024
+ "path": "dist/animations/animate.js",
1025
+ "declarations": [],
1026
+ "exports": [
1027
+ {
1028
+ "kind": "js",
1029
+ "name": "default",
1030
+ "declaration": {
1031
+ "name": "animate",
1032
+ "module": "dist/animations/animate.js"
1033
+ }
1034
+ }
1035
+ ]
1036
+ },
1037
+ {
1038
+ "kind": "javascript-module",
1039
+ "path": "dist/animations/scroll.js",
1040
+ "declarations": [],
1041
+ "exports": [
1042
+ {
1043
+ "kind": "js",
1044
+ "name": "default",
1045
+ "declaration": {
1046
+ "name": "scroll",
1047
+ "module": "dist/animations/scroll.js"
1048
+ }
1049
+ }
1050
+ ]
1051
+ },
1052
+ {
1053
+ "kind": "javascript-module",
1054
+ "path": "dist/animations/slideDown.js",
1055
+ "declarations": [],
1056
+ "exports": [
1057
+ {
1058
+ "kind": "js",
1059
+ "name": "default",
1060
+ "declaration": {
1061
+ "name": "slideDown",
1062
+ "module": "dist/animations/slideDown.js"
1063
+ }
1064
+ }
1065
+ ]
1066
+ },
1067
+ {
1068
+ "kind": "javascript-module",
1069
+ "path": "dist/animations/slideUp.js",
1070
+ "declarations": [],
1071
+ "exports": [
1072
+ {
1073
+ "kind": "js",
1074
+ "name": "default",
1075
+ "declaration": {
1076
+ "name": "slideUp",
1077
+ "module": "dist/animations/slideUp.js"
1078
+ }
1079
+ }
1080
+ ]
1081
+ },
1082
+ {
1083
+ "kind": "javascript-module",
1084
+ "path": "dist/asset-registries/Icons.js",
1085
+ "declarations": [],
1086
+ "exports": []
1087
+ },
1088
+ {
1089
+ "kind": "javascript-module",
1090
+ "path": "dist/asset-registries/Illustrations.js",
1091
+ "declarations": [],
1092
+ "exports": []
1093
+ },
1094
+ {
1095
+ "kind": "javascript-module",
1096
+ "path": "dist/asset-registries/LocaleData.js",
1097
+ "declarations": [],
1098
+ "exports": []
1099
+ },
1100
+ {
1101
+ "kind": "javascript-module",
1102
+ "path": "dist/asset-registries/Themes.js",
1103
+ "declarations": [],
1104
+ "exports": []
1105
+ },
1106
+ {
1107
+ "kind": "javascript-module",
1108
+ "path": "dist/asset-registries/i18n.js",
1109
+ "declarations": [],
1110
+ "exports": []
1111
+ },
1007
1112
  {
1008
1113
  "kind": "javascript-module",
1009
1114
  "path": "dist/config/AnimationMode.js",
@@ -1226,111 +1331,6 @@
1226
1331
  }
1227
1332
  ]
1228
1333
  },
1229
- {
1230
- "kind": "javascript-module",
1231
- "path": "dist/animations/AnimationQueue.js",
1232
- "declarations": [],
1233
- "exports": [
1234
- {
1235
- "kind": "js",
1236
- "name": "default",
1237
- "declaration": {
1238
- "name": "AnimationQueue",
1239
- "module": "dist/animations/AnimationQueue.js"
1240
- }
1241
- }
1242
- ]
1243
- },
1244
- {
1245
- "kind": "javascript-module",
1246
- "path": "dist/animations/animate.js",
1247
- "declarations": [],
1248
- "exports": [
1249
- {
1250
- "kind": "js",
1251
- "name": "default",
1252
- "declaration": {
1253
- "name": "animate",
1254
- "module": "dist/animations/animate.js"
1255
- }
1256
- }
1257
- ]
1258
- },
1259
- {
1260
- "kind": "javascript-module",
1261
- "path": "dist/animations/scroll.js",
1262
- "declarations": [],
1263
- "exports": [
1264
- {
1265
- "kind": "js",
1266
- "name": "default",
1267
- "declaration": {
1268
- "name": "scroll",
1269
- "module": "dist/animations/scroll.js"
1270
- }
1271
- }
1272
- ]
1273
- },
1274
- {
1275
- "kind": "javascript-module",
1276
- "path": "dist/animations/slideDown.js",
1277
- "declarations": [],
1278
- "exports": [
1279
- {
1280
- "kind": "js",
1281
- "name": "default",
1282
- "declaration": {
1283
- "name": "slideDown",
1284
- "module": "dist/animations/slideDown.js"
1285
- }
1286
- }
1287
- ]
1288
- },
1289
- {
1290
- "kind": "javascript-module",
1291
- "path": "dist/animations/slideUp.js",
1292
- "declarations": [],
1293
- "exports": [
1294
- {
1295
- "kind": "js",
1296
- "name": "default",
1297
- "declaration": {
1298
- "name": "slideUp",
1299
- "module": "dist/animations/slideUp.js"
1300
- }
1301
- }
1302
- ]
1303
- },
1304
- {
1305
- "kind": "javascript-module",
1306
- "path": "dist/asset-registries/Icons.js",
1307
- "declarations": [],
1308
- "exports": []
1309
- },
1310
- {
1311
- "kind": "javascript-module",
1312
- "path": "dist/asset-registries/Illustrations.js",
1313
- "declarations": [],
1314
- "exports": []
1315
- },
1316
- {
1317
- "kind": "javascript-module",
1318
- "path": "dist/asset-registries/LocaleData.js",
1319
- "declarations": [],
1320
- "exports": []
1321
- },
1322
- {
1323
- "kind": "javascript-module",
1324
- "path": "dist/asset-registries/Themes.js",
1325
- "declarations": [],
1326
- "exports": []
1327
- },
1328
- {
1329
- "kind": "javascript-module",
1330
- "path": "dist/asset-registries/i18n.js",
1331
- "declarations": [],
1332
- "exports": []
1333
- },
1334
1334
  {
1335
1335
  "kind": "javascript-module",
1336
1336
  "path": "dist/delegate/ItemNavigation.js",