diff --git a/packages/base/src/asset-registries/Illustrations.ts b/packages/base/src/asset-registries/Illustrations.ts index 33877c453630..0b5663352044 100644 --- a/packages/base/src/asset-registries/Illustrations.ts +++ b/packages/base/src/asset-registries/Illustrations.ts @@ -1,5 +1,6 @@ import getSharedResource from "../getSharedResource.js"; import type { I18nText } from "../i18nBundle.js"; +import { getTheme } from "../config/Theme.js"; type IllustrationLoader = (illustrationName: string) => Promise; @@ -13,14 +14,68 @@ type IllustrationProperties = { type IllustrationData = IllustrationProperties & { set: string, + collection: string, }; +enum IllustrationCollections { + "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 illustrationPromises = getSharedResource>>("SVGIllustration.promises", new Map()); +const getCollection = () => { + const theme = getTheme() as keyof typeof IllustrationCollections; + + if (IllustrationCollections[theme]) { + return IllustrationCollections[theme]; + } + + return "V4"; +}; + +/** + * 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: string) => { + let collection = getCollection(); + const isTnt = name.startsWith("Tnt"); + const set = isTnt ? "tnt" : "fiori"; + + let registryKey = `${set}/${collection}/${name}`; + let loaderKey = `${collection}/${name}`; + + if (!loaders.has(loaderKey) && collection !== FALLBACK_COLLECTION) { + collection = FALLBACK_COLLECTION; + loaderKey = `${collection}/${name}`; + registryKey = `${set}/${collection}/${name}`; + } + + if (isTnt) { + name = name.replace(/^Tnt/, ""); + registryKey = `${set}/${collection}/${name}`; + } + + return { + registryKey, + loaderKey, + collection, + }; +}; + const registerIllustration = (name: string, data: IllustrationData) => { - registry.set(`${data.set}/${name}`, { + registry.set(`${data.set}/${data.collection}/${name}`, { dialogSvg: data.dialogSvg, sceneSvg: data.sceneSvg, spotSvg: data.spotSvg, @@ -33,38 +88,31 @@ const registerIllustrationLoader = (illustrationName: string, loader: Illustrati loaders.set(illustrationName, loader); }; -const _loadIllustrationOnce = async (illustrationName: string) => { - if (!illustrationPromises.has(illustrationName)) { - if (!loaders.has(illustrationName)) { +const _loadIllustrationOnce = (illustrationName: string) => { + const { loaderKey } = processName(illustrationName); + + if (!illustrationPromises.has(loaderKey)) { + if (!loaders.has(loaderKey)) { const illustrationPath = illustrationName.startsWith("Tnt") ? `tnt/${illustrationName.replace(/^Tnt/, "")}` : 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(illustrationName)!; - illustrationPromises.set(illustrationName, loadIllustrations(illustrationName)); + const loadIllustrations = loaders.get(loaderKey)!; + illustrationPromises.set(loaderKey, loadIllustrations(loaderKey)); } - return illustrationPromises.get(illustrationName); + return illustrationPromises.get(loaderKey); }; const getIllustrationDataSync = (illustrationName: string) => { - let set = "fiori"; - - if (illustrationName.startsWith("Tnt")) { - set = "tnt"; - illustrationName = illustrationName.replace(/^Tnt/, ""); - } - return registry.get(`${set}/${illustrationName}`); + const { registryKey } = processName(illustrationName); + return registry.get(registryKey); }; const getIllustrationData = async (illustrationName: string) => { - let set = "fiori"; + const { registryKey } = processName(illustrationName); await _loadIllustrationOnce(illustrationName); - if (illustrationName.startsWith("Tnt")) { - set = "tnt"; - illustrationName = illustrationName.replace(/^Tnt/, ""); - } - return registry.get(`${set}/${illustrationName}`); + return registry.get(registryKey); }; export { diff --git a/packages/fiori/package-scripts.cjs b/packages/fiori/package-scripts.cjs index 6bb0c4ea2a66..64a45bba3330 100644 --- a/packages/fiori/package-scripts.cjs +++ b/packages/fiori/package-scripts.cjs @@ -1,5 +1,17 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js"); +const filterOut = [ + "sapIllus-Dot", + "sapIllus-Dialog", + "sapIllus-Scene", + "sapIllus-Spot", + "tnt-Dot", + "tnt-Dialog", + "tnt-Scene", + "tnt-Spot", + "AllIllustrations", +]; + const options = { port: 8081, portStep: 2, @@ -11,14 +23,56 @@ const options = { defaultText: true, illustrationsPrefix: "sapIllus", set: "fiori", + collection: "V4", destinationPath: "dist/illustrations", + dynamicImports: { + outputFile: "dist/generated/js-imports/Illustrations.js", + location: '../../illustrations', + prefix: "", + filterOut + } }, { path: "src/illustrations/tnt", defaultText: false, illustrationsPrefix: "tnt", set: "tnt", + collection: "V4", destinationPath: "dist/illustrations/tnt", + dynamicImports: { + outputFile: "dist/generated/js-imports/IllustrationsTNT.js", + location: '../../illustrations/tnt', + prefix: "Tnt", + filterOut + } + }, + { + path: "src/illustrations-v5/tnt", + defaultText: false, + illustrationsPrefix: "tnt", + set: "tnt", + collection: "V5", + destinationPath: "dist/illustrations-v5/tnt", + dynamicImports: { + outputFile: "dist/generated/js-imports/IllustrationsV5TNT.js", + location: '../../illustrations-v5/tnt', + prefix: "Tnt", + filterOut + } + }, + { + path: "src/illustrations-v5/tnt/hc", + defaultText: false, + illustrationsPrefix: "tnt", + set: "tnt", + collection: "V5/HC", + destinationPath: "dist/illustrations-v5/tnt/hc", + dynamicImports: { + outputFile: "dist/generated/js-imports/IllustrationsV5TNTHC.js", + location: '../../illustrations-v5/tnt/hc', + prefix: "Tnt", + filterOut + } }, ] }; diff --git a/packages/fiori/src/IllustratedMessage.ts b/packages/fiori/src/IllustratedMessage.ts index f88e1bf7cb34..203ea2fb90ec 100644 --- a/packages/fiori/src/IllustratedMessage.ts +++ b/packages/fiori/src/IllustratedMessage.ts @@ -71,6 +71,7 @@ import IllustratedMessageTemplate from "./generated/templates/IllustratedMessage @customElement({ tag: "ui5-illustrated-message", languageAware: true, + themeAware: true, renderer: litRender, styles: IllustratedMessageCss, template: IllustratedMessageTemplate, diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-ChartArea.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-ChartArea.svg new file mode 100644 index 000000000000..ae04a1d91c17 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-ChartArea.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-ChartArea.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-ChartArea.svg new file mode 100644 index 000000000000..6cea25162b27 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-ChartArea.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-ChartArea.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-ChartArea.svg new file mode 100644 index 000000000000..4919d5f9c821 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-ChartArea.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-ChartArea.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-ChartArea.svg new file mode 100644 index 000000000000..51ec37da2392 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-ChartArea.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-ChartArea.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-ChartArea.svg new file mode 100644 index 000000000000..25291416130c --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-ChartArea.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-ChartArea2.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-ChartArea2.svg new file mode 100644 index 000000000000..8f88750ea177 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-ChartArea2.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-ChartArea.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-ChartArea.svg new file mode 100644 index 000000000000..2d4c99652ad7 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-ChartArea.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-ChartArea2.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-ChartArea2.svg new file mode 100644 index 000000000000..1f31c3347b99 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-ChartArea2.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-ChartArea.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-ChartArea.svg new file mode 100644 index 000000000000..f60962671900 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-ChartArea.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-ChartArea2.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-ChartArea2.svg new file mode 100644 index 000000000000..cc7fad7d24c0 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-ChartArea2.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Spot-ChartArea.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Spot-ChartArea.svg new file mode 100644 index 000000000000..f501b7610582 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Spot-ChartArea.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Spot-ChartArea2.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Spot-ChartArea2.svg new file mode 100644 index 000000000000..5f88c5d6bf98 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Spot-ChartArea2.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/AllIllustrations.ts b/packages/fiori/src/illustrations/AllIllustrations.ts index a68491ce0b47..881995d4d189 100644 --- a/packages/fiori/src/illustrations/AllIllustrations.ts +++ b/packages/fiori/src/illustrations/AllIllustrations.ts @@ -1 +1,4 @@ import "../generated/js-imports/Illustrations.js"; +import "../generated/js-imports/IllustrationsTNT.js"; +import "../generated/js-imports/IllustrationsV5TNT.js"; +import "../generated/js-imports/IllustrationsV5TNTHC.js"; diff --git a/packages/fiori/test/pages/IllustratedMessage.html b/packages/fiori/test/pages/IllustratedMessage.html index dfae84d4b9f7..4be25f4f10be 100644 --- a/packages/fiori/test/pages/IllustratedMessage.html +++ b/packages/fiori/test/pages/IllustratedMessage.html @@ -131,29 +131,6 @@ - -
Please try again or contact us at example@example.com
- Try again - - - - This is a slotted title - - - - - -
- Expandable panel title -
- - - -