@ui5/webcomponents-base 2.20.0 → 2.21.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.
- package/CHANGELOG.md +16 -0
- package/dist/.tsbuildinfobuild +1 -1
- package/dist/CustomElementsScopeUtils.d.ts +2 -2
- package/dist/CustomElementsScopeUtils.js +3 -3
- package/dist/CustomElementsScopeUtils.js.map +1 -1
- package/dist/Runtimes.d.ts +1 -0
- package/dist/Runtimes.js +1 -0
- package/dist/Runtimes.js.map +1 -1
- package/dist/createReactComponent.d.ts +26 -0
- package/dist/createReactComponent.js +51 -0
- package/dist/createReactComponent.js.map +1 -0
- package/dist/custom-elements-internal.json +15 -0
- package/dist/custom-elements.json +15 -0
- package/dist/generated/VersionInfo.js +4 -4
- package/dist/generated/VersionInfo.js.map +1 -1
- package/dist/generated/css/FontFace.css.d.ts +1 -1
- package/dist/generated/css/FontFace.css.js +36 -36
- package/dist/generated/css/FontFace.css.js.map +1 -1
- package/dist/prod/CustomElementsScopeUtils.js +1 -1
- package/dist/prod/CustomElementsScopeUtils.js.map +2 -2
- package/dist/prod/Runtimes.js +1 -1
- package/dist/prod/Runtimes.js.map +2 -2
- package/dist/prod/createReactComponent.js +2 -0
- package/dist/prod/createReactComponent.js.map +7 -0
- package/dist/prod/generated/VersionInfo.js +1 -1
- package/dist/prod/generated/VersionInfo.js.map +2 -2
- package/dist/prod/generated/css/FontFace.css.js +36 -36
- package/dist/prod/generated/css/FontFace.css.js.map +1 -1
- package/dist/react18/createReactComponent.d.ts +38 -0
- package/dist/react18/createReactComponent.js +112 -0
- package/dist/react18/createReactComponent.js.map +1 -0
- package/package.json +12 -4
- package/src/react18/createReactComponent.tsx +140 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/CustomElementsScopeUtils.ts"],
|
|
4
|
-
"sourcesContent": ["import { hasRegisteredTags } from \"./CustomElementsRegistry.js\";\nimport VersionInfo from \"./generated/VersionInfo.js\";\n\nlet suf: string;\n\ntype Rules = {\n\tinclude: Array<RegExp>,\n\texclude: Array<RegExp>,\n};\n\nlet rulesObj: Rules = {\n\tinclude: [
|
|
5
|
-
"mappings": "aAAA,OAAS,qBAAAA,MAAyB,8BAClC,OAAOC,MAAiB,6BAExB,IAAIC,EAOAC,EAAkB,CACrB,QAAS,CAAC,
|
|
4
|
+
"sourcesContent": ["import { hasRegisteredTags } from \"./CustomElementsRegistry.js\";\nimport VersionInfo from \"./generated/VersionInfo.js\";\n\nlet suf: string;\n\ntype Rules = {\n\tinclude: Array<RegExp>,\n\texclude: Array<RegExp>,\n};\n\nlet rulesObj: Rules = {\n\tinclude: [/./],\n\texclude: [],\n};\n\nconst tagsCache = new Map<string, boolean>(); // true/false means the tag should/should not be cached, undefined means not known yet.\n\n/**\n * Sets the suffix to be used for custom elements scoping, f.e. pass \"demo\" to get tags such as \"ui5-button-demo\".\n *\n * **Note:** By default all tags registered by the current runtime will be scoped, unless you change this by calling \"setCustomElementsScopingRules\"\n * **Note:** Setting the scoping suffix must be done before importing any components.\n *\n * @public\n * @param suffix The scoping suffix\n */\nconst setCustomElementsScopingSuffix = (suffix: string) => {\n\tif (!suffix.match(/^[a-zA-Z0-9_-]+$/)) {\n\t\tthrow new Error(\"Only alphanumeric characters and dashes allowed for the scoping suffix\");\n\t}\n\n\tif (hasRegisteredTags()) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\"Setting the scoping suffix must be done before importing any components. For proper usage, read the scoping section: https://github.com/UI5/webcomponents/blob/main/docs/2-advanced/06-scoping.md.\");\n\t}\n\n\tsuf = suffix;\n};\n\n/**\n * Returns the currently set scoping suffix, or undefined if not set.\n *\n * @public\n * @returns {String|undefined}\n */\nconst getCustomElementsScopingSuffix = (): string | undefined => {\n\treturn suf;\n};\n\n/**\n * Sets the rules, governing which custom element tags to scope and which not, f.e.\n * setCustomElementsScopingRules({include: [/^ui5-/]}, exclude: [/^ui5-mylib-/, /^ui5-carousel$/]);\n * will scope all elements starting with \"ui5-\" but not the ones starting with \"ui5-mylib-\" and not \"ui5-carousel\".\n *\n * @public\n * @param rules Object with \"include\" and \"exclude\" properties, both arrays of regular expressions. Note that \"include\"\n * rules are applied first and \"exclude\" rules second.\n */\nconst setCustomElementsScopingRules = (rules: Rules) => {\n\tif (!rules || !rules.include) {\n\t\tthrow new Error(`\"rules\" must be an object with at least an \"include\" property`);\n\t}\n\n\tif (!Array.isArray(rules.include) || rules.include.some(rule => !(rule instanceof RegExp))) {\n\t\tthrow new Error(`\"rules.include\" must be an array of regular expressions`);\n\t}\n\n\tif (rules.exclude && (!Array.isArray(rules.exclude) || rules.exclude.some(rule => !(rule instanceof RegExp)))) {\n\t\tthrow new Error(`\"rules.exclude\" must be an array of regular expressions`);\n\t}\n\n\trules.exclude = rules.exclude || [];\n\trulesObj = rules;\n\ttagsCache.clear(); // reset the cache upon setting new rules\n};\n\n/**\n * Returns the rules, governing which custom element tags to scope and which not. By default, all elements\n * are scoped. The default rules are: {include: [/./]}.\n *\n * @public\n * @returns {Object}\n */\nconst getCustomElementsScopingRules = () => {\n\treturn rulesObj;\n};\n\n/**\n * Determines whether custom elements with the given tag should be scoped or not.\n * The tag is first matched against the \"include\" rules and then against the \"exclude\" rules and the\n * result is cached until new rules are set.\n *\n * @public\n * @param tag\n */\nconst shouldScopeCustomElement = (tag: string) => {\n\tif (!tagsCache.has(tag)) {\n\t\tconst result = rulesObj.include.some(rule => tag.match(rule)) && !rulesObj.exclude.some(rule => tag.match(rule));\n\t\ttagsCache.set(tag, result);\n\t}\n\n\treturn tagsCache.get(tag);\n};\n\n/**\n * Returns the currently set scoping suffix, if any and if the tag should be scoped, or undefined otherwise.\n *\n * @public\n * @param tag\n * @returns {String}\n */\nconst getEffectiveScopingSuffixForTag = (tag: string) => {\n\tif (shouldScopeCustomElement(tag)) {\n\t\treturn getCustomElementsScopingSuffix();\n\t}\n};\n\n/**\n * @public\n * Used for getting a scoped name for a CSS variable using the same transformation used in the build\n * @param name the name of the css variable as written in the code\n * @param withVersion whether to include the version in the scoped name\n * @returns a variable name with the current version inserted as available at runtime\n * @deprecated As of version 2.19.0 this method is no longer required. Variables can now be defined at the component level\n * and are automatically encapsulated within each component\u2019s Shadow DOM.\n * As a result, runtime scoping logic is no longer necessary.\n *\n * It is still needed for third-party packages that have not yet migrated to the\n * component-level variable approach.\n */\nconst getScopedVarName = (name: string, withVersion: boolean = false) => {\n\tif (!withVersion) {\n\t\treturn name;\n\t}\n\n\tconst versionStr = `v${VersionInfo.version.replaceAll(\".\", \"-\")}`;\n\tconst expr = /(--_?ui5)([^,:)\\s]+)/g;\n\treturn name.replaceAll(expr, `$1-${versionStr}$2`);\n};\n\nexport {\n\tsetCustomElementsScopingSuffix,\n\tgetCustomElementsScopingSuffix,\n\tsetCustomElementsScopingRules,\n\tgetCustomElementsScopingRules,\n\tshouldScopeCustomElement,\n\tgetEffectiveScopingSuffixForTag,\n\tgetScopedVarName,\n};\n"],
|
|
5
|
+
"mappings": "aAAA,OAAS,qBAAAA,MAAyB,8BAClC,OAAOC,MAAiB,6BAExB,IAAIC,EAOAC,EAAkB,CACrB,QAAS,CAAC,GAAG,EACb,QAAS,CAAC,CACX,EAEA,MAAMC,EAAY,IAAI,IAWhBC,EAAkCC,GAAmB,CAC1D,GAAI,CAACA,EAAO,MAAM,kBAAkB,EACnC,MAAM,IAAI,MAAM,wEAAwE,EAGrFN,EAAkB,GAErB,QAAQ,KAAK,oMAAoM,EAGlNE,EAAMI,CACP,EAQMC,EAAiC,IAC/BL,EAYFM,EAAiCC,GAAiB,CACvD,GAAI,CAACA,GAAS,CAACA,EAAM,QACpB,MAAM,IAAI,MAAM,+DAA+D,EAGhF,GAAI,CAAC,MAAM,QAAQA,EAAM,OAAO,GAAKA,EAAM,QAAQ,KAAKC,GAAQ,EAAEA,aAAgB,OAAO,EACxF,MAAM,IAAI,MAAM,yDAAyD,EAG1E,GAAID,EAAM,UAAY,CAAC,MAAM,QAAQA,EAAM,OAAO,GAAKA,EAAM,QAAQ,KAAKC,GAAQ,EAAEA,aAAgB,OAAO,GAC1G,MAAM,IAAI,MAAM,yDAAyD,EAG1ED,EAAM,QAAUA,EAAM,SAAW,CAAC,EAClCN,EAAWM,EACXL,EAAU,MAAM,CACjB,EASMO,EAAgC,IAC9BR,EAWFS,EAA4BC,GAAgB,CACjD,GAAI,CAACT,EAAU,IAAIS,CAAG,EAAG,CACxB,MAAMC,EAASX,EAAS,QAAQ,KAAKO,GAAQG,EAAI,MAAMH,CAAI,CAAC,GAAK,CAACP,EAAS,QAAQ,KAAKO,GAAQG,EAAI,MAAMH,CAAI,CAAC,EAC/GN,EAAU,IAAIS,EAAKC,CAAM,CAC1B,CAEA,OAAOV,EAAU,IAAIS,CAAG,CACzB,EASME,EAAmCF,GAAgB,CACxD,GAAID,EAAyBC,CAAG,EAC/B,OAAON,EAA+B,CAExC,EAeMS,EAAmB,CAACC,EAAcC,EAAuB,KAAU,CACxE,GAAI,CAACA,EACJ,OAAOD,EAGR,MAAME,EAAa,IAAIlB,EAAY,QAAQ,WAAW,IAAK,GAAG,CAAC,GACzDmB,EAAO,wBACb,OAAOH,EAAK,WAAWG,EAAM,MAAMD,CAAU,IAAI,CAClD,EAEA,OACCd,KAAA,+BACAE,KAAA,+BACAC,KAAA,8BACAG,KAAA,8BACAC,KAAA,yBACAG,KAAA,gCACAC,KAAA",
|
|
6
6
|
"names": ["hasRegisteredTags", "VersionInfo", "suf", "rulesObj", "tagsCache", "setCustomElementsScopingSuffix", "suffix", "getCustomElementsScopingSuffix", "setCustomElementsScopingRules", "rules", "rule", "getCustomElementsScopingRules", "shouldScopeCustomElement", "tag", "result", "getEffectiveScopingSuffixForTag", "getScopedVarName", "name", "withVersion", "versionStr", "expr"]
|
|
7
7
|
}
|
package/dist/prod/Runtimes.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{getAllRegisteredTags as g}from"./CustomElementsRegistry.js";import{getCustomElementsScopingRules as p,getCustomElementsScopingSuffix as R}from"./CustomElementsScopeUtils.js";import d from"./generated/VersionInfo.js";import h from"./getSharedResource.js";let i,s="";const u=new Map,
|
|
1
|
+
"use strict";import{getAllRegisteredTags as g}from"./CustomElementsRegistry.js";import{getCustomElementsScopingRules as p,getCustomElementsScopingSuffix as R}from"./CustomElementsScopeUtils.js";import d from"./generated/VersionInfo.js";import h from"./getSharedResource.js";let i,s="";const u=new Map,n=h("Runtimes",[]),x=()=>{if(i===void 0){i=n.length;const t=d;n.push({...t,get scopingSuffix(){return R()},get registeredTags(){return g()},get scopingRules(){return p()},alias:s,description:`Runtime ${i} - ver ${t.version}${s?` (${s})`:""}`,importMetaUrl:import.meta.url})}},I=()=>i,b=(t,m)=>{const o=`${t},${m}`;if(u.has(o))return u.get(o);const e=n[t],r=n[m];if(!e||!r)throw new Error("Invalid runtime index supplied");if(e.isNext||r.isNext)return e.buildTime-r.buildTime;const c=e.major-r.major;if(c)return c;const a=e.minor-r.minor;if(a)return a;const f=e.patch-r.patch;if(f)return f;const l=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}).compare(e.suffix,r.suffix);return u.set(o,l),l},C=t=>{s=t},$=()=>n;export{I as getCurrentRuntimeIndex,x as registerCurrentRuntime,b as compareRuntimes,C as setRuntimeAlias,$ as getAllRuntimes};
|
|
2
2
|
//# sourceMappingURL=Runtimes.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Runtimes.ts"],
|
|
4
|
-
"sourcesContent": ["import { getAllRegisteredTags } from \"./CustomElementsRegistry.js\";\nimport { getCustomElementsScopingRules, getCustomElementsScopingSuffix } from \"./CustomElementsScopeUtils.js\";\nimport VersionInfo from \"./generated/VersionInfo.js\";\nimport getSharedResource from \"./getSharedResource.js\";\n\ntype RuntimeData = VersionInfo & {\n\talias: string,\n\tdescription: string,\n};\n\nlet currentRuntimeIndex: number;\nlet currentRuntimeAlias = \"\";\n\nconst compareCache = new Map<string, number>();\n\n/**\n * Central registry where all runtimes register themselves by pushing an object.\n * The index in the registry servers as an ID for the runtime.\n * @type {*}\n */\nconst Runtimes = getSharedResource<Array<RuntimeData>>(\"Runtimes\", []);\n\n/**\n * Registers the current runtime in the shared runtimes resource registry\n */\nconst registerCurrentRuntime = () => {\n\tif (currentRuntimeIndex === undefined) {\n\t\tcurrentRuntimeIndex = Runtimes.length;\n\t\tconst versionInfo = VersionInfo;\n\n\t\tRuntimes.push({\n\t\t\t...versionInfo,\n\t\t\tget scopingSuffix() {\n\t\t\t\treturn getCustomElementsScopingSuffix();\n\t\t\t},\n\t\t\tget registeredTags() {\n\t\t\t\treturn getAllRegisteredTags();\n\t\t\t},\n\t\t\tget scopingRules() {\n\t\t\t\treturn getCustomElementsScopingRules();\n\t\t\t},\n\t\t\talias: currentRuntimeAlias,\n\t\t\tdescription: `Runtime ${currentRuntimeIndex} - ver ${versionInfo.version}${currentRuntimeAlias ? ` (${currentRuntimeAlias})` : \"\"}`,\n\t\t});\n\t}\n};\n\n/**\n * Returns the index of the current runtime's object in the shared runtimes resource registry\n * @returns {*}\n */\nconst getCurrentRuntimeIndex = () => {\n\treturn currentRuntimeIndex;\n};\n\n/**\n * Compares two runtimes and returns 1 if the first is of a bigger version, -1 if the second is of a bigger version, and 0 if equal\n * @param index1 The index of the first runtime to compare\n * @param index2 The index of the second runtime to compare\n * @returns {number}\n */\nconst compareRuntimes = (index1: number, index2: number) => {\n\tconst cacheIndex = `${index1},${index2}`;\n\tif (compareCache.has(cacheIndex)) {\n\t\treturn compareCache.get(cacheIndex)!;\n\t}\n\n\tconst runtime1 = Runtimes[index1];\n\tconst runtime2 = Runtimes[index2];\n\n\tif (!runtime1 || !runtime2) {\n\t\tthrow new Error(\"Invalid runtime index supplied\");\n\t}\n\n\t// If any of the two is a next version, bigger buildTime wins\n\tif (runtime1.isNext || runtime2.isNext) {\n\t\treturn runtime1.buildTime - runtime2.buildTime;\n\t}\n\n\t// If major versions differ, bigger one wins\n\tconst majorDiff = runtime1.major - runtime2.major;\n\tif (majorDiff) {\n\t\treturn majorDiff;\n\t}\n\n\t// If minor versions differ, bigger one wins\n\tconst minorDiff = runtime1.minor - runtime2.minor;\n\tif (minorDiff) {\n\t\treturn minorDiff;\n\t}\n\n\t// If patch versions differ, bigger one wins\n\tconst patchDiff = runtime1.patch - runtime2.patch;\n\tif (patchDiff) {\n\t\treturn patchDiff;\n\t}\n\n\t// Bigger suffix wins, f.e. rc10 > rc9\n\t// Important: suffix is alphanumeric, must use natural compare\n\tconst collator = new Intl.Collator(undefined, { numeric: true, sensitivity: \"base\" });\n\tconst result = collator.compare(runtime1.suffix, runtime2.suffix);\n\n\tcompareCache.set(cacheIndex, result);\n\treturn result;\n};\n\n/**\n * Set an alias for the the current app/library/microfrontend which will appear in debug messages and console warnings\n * @param alias\n */\nconst setRuntimeAlias = (alias: string) => {\n\tcurrentRuntimeAlias = alias;\n};\n\nconst getAllRuntimes = () => {\n\treturn Runtimes;\n};\n\nexport {\n\tgetCurrentRuntimeIndex,\n\tregisterCurrentRuntime,\n\tcompareRuntimes,\n\tsetRuntimeAlias,\n\tgetAllRuntimes,\n};\n"],
|
|
5
|
-
"mappings": "aAAA,OAAS,wBAAAA,MAA4B,8BACrC,OAAS,iCAAAC,EAA+B,kCAAAC,MAAsC,gCAC9E,OAAOC,MAAiB,6BACxB,OAAOC,MAAuB,
|
|
4
|
+
"sourcesContent": ["import { getAllRegisteredTags } from \"./CustomElementsRegistry.js\";\nimport { getCustomElementsScopingRules, getCustomElementsScopingSuffix } from \"./CustomElementsScopeUtils.js\";\nimport VersionInfo from \"./generated/VersionInfo.js\";\nimport getSharedResource from \"./getSharedResource.js\";\n\ntype RuntimeData = VersionInfo & {\n\talias: string,\n\tdescription: string,\n\timportMetaUrl: string,\n};\n\nlet currentRuntimeIndex: number;\nlet currentRuntimeAlias = \"\";\n\nconst compareCache = new Map<string, number>();\n\n/**\n * Central registry where all runtimes register themselves by pushing an object.\n * The index in the registry servers as an ID for the runtime.\n * @type {*}\n */\nconst Runtimes = getSharedResource<Array<RuntimeData>>(\"Runtimes\", []);\n\n/**\n * Registers the current runtime in the shared runtimes resource registry\n */\nconst registerCurrentRuntime = () => {\n\tif (currentRuntimeIndex === undefined) {\n\t\tcurrentRuntimeIndex = Runtimes.length;\n\t\tconst versionInfo = VersionInfo;\n\n\t\tRuntimes.push({\n\t\t\t...versionInfo,\n\t\t\tget scopingSuffix() {\n\t\t\t\treturn getCustomElementsScopingSuffix();\n\t\t\t},\n\t\t\tget registeredTags() {\n\t\t\t\treturn getAllRegisteredTags();\n\t\t\t},\n\t\t\tget scopingRules() {\n\t\t\t\treturn getCustomElementsScopingRules();\n\t\t\t},\n\t\t\talias: currentRuntimeAlias,\n\t\t\tdescription: `Runtime ${currentRuntimeIndex} - ver ${versionInfo.version}${currentRuntimeAlias ? ` (${currentRuntimeAlias})` : \"\"}`,\n\t\t\timportMetaUrl: import.meta.url,\n\t\t});\n\t}\n};\n\n/**\n * Returns the index of the current runtime's object in the shared runtimes resource registry\n * @returns {*}\n */\nconst getCurrentRuntimeIndex = () => {\n\treturn currentRuntimeIndex;\n};\n\n/**\n * Compares two runtimes and returns 1 if the first is of a bigger version, -1 if the second is of a bigger version, and 0 if equal\n * @param index1 The index of the first runtime to compare\n * @param index2 The index of the second runtime to compare\n * @returns {number}\n */\nconst compareRuntimes = (index1: number, index2: number) => {\n\tconst cacheIndex = `${index1},${index2}`;\n\tif (compareCache.has(cacheIndex)) {\n\t\treturn compareCache.get(cacheIndex)!;\n\t}\n\n\tconst runtime1 = Runtimes[index1];\n\tconst runtime2 = Runtimes[index2];\n\n\tif (!runtime1 || !runtime2) {\n\t\tthrow new Error(\"Invalid runtime index supplied\");\n\t}\n\n\t// If any of the two is a next version, bigger buildTime wins\n\tif (runtime1.isNext || runtime2.isNext) {\n\t\treturn runtime1.buildTime - runtime2.buildTime;\n\t}\n\n\t// If major versions differ, bigger one wins\n\tconst majorDiff = runtime1.major - runtime2.major;\n\tif (majorDiff) {\n\t\treturn majorDiff;\n\t}\n\n\t// If minor versions differ, bigger one wins\n\tconst minorDiff = runtime1.minor - runtime2.minor;\n\tif (minorDiff) {\n\t\treturn minorDiff;\n\t}\n\n\t// If patch versions differ, bigger one wins\n\tconst patchDiff = runtime1.patch - runtime2.patch;\n\tif (patchDiff) {\n\t\treturn patchDiff;\n\t}\n\n\t// Bigger suffix wins, f.e. rc10 > rc9\n\t// Important: suffix is alphanumeric, must use natural compare\n\tconst collator = new Intl.Collator(undefined, { numeric: true, sensitivity: \"base\" });\n\tconst result = collator.compare(runtime1.suffix, runtime2.suffix);\n\n\tcompareCache.set(cacheIndex, result);\n\treturn result;\n};\n\n/**\n * Set an alias for the the current app/library/microfrontend which will appear in debug messages and console warnings\n * @param alias\n */\nconst setRuntimeAlias = (alias: string) => {\n\tcurrentRuntimeAlias = alias;\n};\n\nconst getAllRuntimes = () => {\n\treturn Runtimes;\n};\n\nexport {\n\tgetCurrentRuntimeIndex,\n\tregisterCurrentRuntime,\n\tcompareRuntimes,\n\tsetRuntimeAlias,\n\tgetAllRuntimes,\n};\n"],
|
|
5
|
+
"mappings": "aAAA,OAAS,wBAAAA,MAA4B,8BACrC,OAAS,iCAAAC,EAA+B,kCAAAC,MAAsC,gCAC9E,OAAOC,MAAiB,6BACxB,OAAOC,MAAuB,yBAQ9B,IAAIC,EACAC,EAAsB,GAE1B,MAAMC,EAAe,IAAI,IAOnBC,EAAWJ,EAAsC,WAAY,CAAC,CAAC,EAK/DK,EAAyB,IAAM,CACpC,GAAIJ,IAAwB,OAAW,CACtCA,EAAsBG,EAAS,OAC/B,MAAME,EAAcP,EAEpBK,EAAS,KAAK,CACb,GAAGE,EACH,IAAI,eAAgB,CACnB,OAAOR,EAA+B,CACvC,EACA,IAAI,gBAAiB,CACpB,OAAOF,EAAqB,CAC7B,EACA,IAAI,cAAe,CAClB,OAAOC,EAA8B,CACtC,EACA,MAAOK,EACP,YAAa,WAAWD,CAAmB,UAAUK,EAAY,OAAO,GAAGJ,EAAsB,KAAKA,CAAmB,IAAM,EAAE,GACjI,cAAe,YAAY,GAC5B,CAAC,CACF,CACD,EAMMK,EAAyB,IACvBN,EASFO,EAAkB,CAACC,EAAgBC,IAAmB,CAC3D,MAAMC,EAAa,GAAGF,CAAM,IAAIC,CAAM,GACtC,GAAIP,EAAa,IAAIQ,CAAU,EAC9B,OAAOR,EAAa,IAAIQ,CAAU,EAGnC,MAAMC,EAAWR,EAASK,CAAM,EAC1BI,EAAWT,EAASM,CAAM,EAEhC,GAAI,CAACE,GAAY,CAACC,EACjB,MAAM,IAAI,MAAM,gCAAgC,EAIjD,GAAID,EAAS,QAAUC,EAAS,OAC/B,OAAOD,EAAS,UAAYC,EAAS,UAItC,MAAMC,EAAYF,EAAS,MAAQC,EAAS,MAC5C,GAAIC,EACH,OAAOA,EAIR,MAAMC,EAAYH,EAAS,MAAQC,EAAS,MAC5C,GAAIE,EACH,OAAOA,EAIR,MAAMC,EAAYJ,EAAS,MAAQC,EAAS,MAC5C,GAAIG,EACH,OAAOA,EAMR,MAAMC,EADW,IAAI,KAAK,SAAS,OAAW,CAAE,QAAS,GAAM,YAAa,MAAO,CAAC,EAC5D,QAAQL,EAAS,OAAQC,EAAS,MAAM,EAEhE,OAAAV,EAAa,IAAIQ,EAAYM,CAAM,EAC5BA,CACR,EAMMC,EAAmBC,GAAkB,CAC1CjB,EAAsBiB,CACvB,EAEMC,EAAiB,IACfhB,EAGR,OACCG,KAAA,uBACAF,KAAA,uBACAG,KAAA,gBACAU,KAAA,gBACAE,KAAA",
|
|
6
6
|
"names": ["getAllRegisteredTags", "getCustomElementsScopingRules", "getCustomElementsScopingSuffix", "VersionInfo", "getSharedResource", "currentRuntimeIndex", "currentRuntimeAlias", "compareCache", "Runtimes", "registerCurrentRuntime", "versionInfo", "getCurrentRuntimeIndex", "compareRuntimes", "index1", "index2", "cacheIndex", "runtime1", "runtime2", "majorDiff", "minorDiff", "patchDiff", "result", "setRuntimeAlias", "alias", "getAllRuntimes"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";import{createElement as d}from"react";export default function p(i){const s=i.getMetadata().getTag();return function(r){const n={};return Object.entries(r).forEach(([t,e])=>{if(t.startsWith("on")&&typeof e=="function"){const c=e;n[t]=o=>{const a=o.nativeEvent?.detail;a!==void 0&&(o.detail=a),c(o)}}else n[t]=e}),d(s,n)}}
|
|
2
|
+
//# sourceMappingURL=createReactComponent.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/createReactComponent.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * React wrapper factory for UI5 Web Components.\n *\n * This lightweight factory creates typed React components that wrap UI5 Web Components.\n * It handles:\n * - Event prop conversion (onXxx \u2192 ui5-xxx event listeners)\n * - Ref forwarding\n * - Children handling\n *\n * Note: Supports React >=19.\n *\n * Note: This is for documentation samples only - for production React apps,\n * use the official @ui5/webcomponents-react library.\n */\n\nimport { createElement } from \"react\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n/**\n * Creates a React component wrapper for a UI5 Web Component.\n *\n * @param ComponentClass - The UI5 Web Component class (e.g., Button from \"@ui5/webcomponents/dist/Button.js\")\n * @returns A React component that renders the custom element with proper TypeScript types\n * @since 2.21.0\n * @example\n * import Button from \"@ui5/webcomponents/dist/Button.js\";\n * const ReactButton = createReactComponent(Button);\n */\nexport default function createReactComponent<T extends typeof UI5Element>(klass: T) {\n\tconst tag = klass.getMetadata().getTag();\n\n\treturn function Component(props: InstanceType<T>[\"_jsxProps\"]) {\n\t\tconst patchedProps: Record<string, unknown> = {};\n\n\t\tObject.entries(props as Record<string, unknown>).forEach(([key, value]) => {\n\t\t\tif (key.startsWith(\"on\") && typeof value === \"function\") {\n\t\t\t\t// React 19 wraps DOM events (change, click, input, etc.) in SyntheticEvent,\n\t\t\t\t// hiding CustomEvent.detail under nativeEvent.detail.\n\t\t\t\t// Patch all event handlers to restore detail from nativeEvent.\n\t\t\t\tconst originalHandler = value;\n\t\t\t\tpatchedProps[key] = (e: Event) => {\n\t\t\t\t\tconst nativeDetail = (e as unknown as { nativeEvent?: { detail: unknown } }).nativeEvent?.detail;\n\t\t\t\t\tif (nativeDetail !== undefined) {\n\t\t\t\t\t\t(e as unknown as { detail: unknown }).detail = nativeDetail;\n\t\t\t\t\t}\n\t\t\t\t\toriginalHandler(e);\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tpatchedProps[key] = value;\n\t\t\t}\n\t\t});\n\n\t\treturn createElement(tag, patchedProps);\n\t};\n}\n"],
|
|
5
|
+
"mappings": "aAeA,OAAS,iBAAAA,MAAqB,QAa9B,wBAAwBC,EAAkDC,EAAU,CACnF,MAAMC,EAAMD,EAAM,YAAY,EAAE,OAAO,EAEvC,OAAO,SAAmBE,EAAqC,CAC9D,MAAMC,EAAwC,CAAC,EAE/C,cAAO,QAAQD,CAAgC,EAAE,QAAQ,CAAC,CAACE,EAAKC,CAAK,IAAM,CAC1E,GAAID,EAAI,WAAW,IAAI,GAAK,OAAOC,GAAU,WAAY,CAIxD,MAAMC,EAAkBD,EACxBF,EAAaC,CAAG,EAAKG,GAAa,CACjC,MAAMC,EAAgBD,EAAuD,aAAa,OACtFC,IAAiB,SACnBD,EAAqC,OAASC,GAEhDF,EAAgBC,CAAC,CAClB,CACD,MACCJ,EAAaC,CAAG,EAAIC,CAEtB,CAAC,EAEMP,EAAcG,EAAKE,CAAY,CACvC,CACD",
|
|
6
|
+
"names": ["createElement", "createReactComponent", "klass", "tag", "props", "patchedProps", "key", "value", "originalHandler", "e", "nativeDetail"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e={version:"2.
|
|
1
|
+
"use strict";const e={version:"2.21.0-rc.0",major:2,minor:21,patch:0,suffix:"-rc.0",isNext:!1,buildTime:1773303236};export default e;
|
|
2
2
|
//# sourceMappingURL=VersionInfo.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/generated/VersionInfo.ts"],
|
|
4
|
-
"sourcesContent": ["const VersionInfo = {\n\tversion: \"2.
|
|
5
|
-
"mappings": "aAAA,MAAMA,EAAc,CACnB,QAAS,
|
|
4
|
+
"sourcesContent": ["const VersionInfo = {\n\tversion: \"2.21.0-rc.0\",\n\tmajor: 2,\n\tminor: 21,\n\tpatch: 0,\n\tsuffix: \"-rc.0\",\n\tisNext: false,\n\tbuildTime: 1773303236,\n};\nexport default VersionInfo;"],
|
|
5
|
+
"mappings": "aAAA,MAAMA,EAAc,CACnB,QAAS,cACT,MAAO,EACP,MAAO,GACP,MAAO,EACP,OAAQ,QACR,OAAQ,GACR,UAAW,UACZ,EACA,eAAeA",
|
|
6
6
|
"names": ["VersionInfo"]
|
|
7
7
|
}
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
"use strict";export default`@font-face{font-family:"72";font-style:normal;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
2
|
-
@font-face{font-family:"72full";font-style:normal;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
3
|
-
@font-face{font-family:"72-Bold";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
4
|
-
@font-face{font-family:"72";font-style:normal;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
5
|
-
@font-face{font-family:"72-Boldfull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
6
|
-
@font-face{font-family:"72full";font-style:normal;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
7
|
-
@font-face{font-family:"72-Semibold";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
8
|
-
@font-face{font-family:"72";font-style:normal;font-weight:600;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
9
|
-
@font-face{font-family:"72-Semiboldfull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
10
|
-
@font-face{font-family:"72full";font-style:normal;font-weight:600;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
11
|
-
@font-face{font-family:"72-SemiboldDuplex";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
12
|
-
@font-face{font-family:"72-SemiboldDuplexfull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
13
|
-
@font-face{font-family:"72-Light";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
14
|
-
@font-face{font-family:"72";font-style:normal;font-weight:300;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
15
|
-
@font-face{font-family:"72-Lightfull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
16
|
-
@font-face{font-family:"72full";font-style:normal;font-weight:300;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
17
|
-
@font-face{font-family:"72Black";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
18
|
-
@font-face{font-family:"72";font-style:normal;font-weight:900;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
19
|
-
@font-face{font-family:"72Blackfull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
20
|
-
@font-face{font-family:"72full";font-style:normal;font-weight:900;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
21
|
-
@font-face{font-family:"72-BoldItalic";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
22
|
-
@font-face{font-family:"72";font-style:italic;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
23
|
-
@font-face{font-family:"72full";font-style:italic;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
24
|
-
@font-face{font-family:"72-Condensed";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
25
|
-
@font-face{font-family:"72";font-style:normal;font-weight:400;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
26
|
-
@font-face{font-family:"72";font-style:normal;font-weight:400;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
27
|
-
@font-face{font-family:"72-CondensedBold";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
28
|
-
@font-face{font-family:"72";font-style:normal;font-weight:700;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
29
|
-
@font-face{font-family:"72full";font-style:normal;font-weight:700;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
30
|
-
@font-face{font-family:"72-Italic";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
31
|
-
@font-face{font-family:"72";font-style:italic;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
32
|
-
@font-face{font-family:"72full";font-style:italic;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
33
|
-
@font-face{font-family:"72Mono";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
34
|
-
@font-face{font-family:"72Monofull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
35
|
-
@font-face{font-family:"72Mono-Bold";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
36
|
-
@font-face{font-family:"72Mono-Boldfull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.
|
|
1
|
+
"use strict";export default`@font-face{font-family:"72";font-style:normal;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Regular.woff2) format("woff2"),local("72");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
2
|
+
@font-face{font-family:"72full";font-style:normal;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Regular-full.woff2) format("woff2")}
|
|
3
|
+
@font-face{font-family:"72-Bold";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Bold.woff2) format("woff2"),local("72-Bold");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
4
|
+
@font-face{font-family:"72";font-style:normal;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Bold.woff2) format("woff2"),local("72-Bold");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
5
|
+
@font-face{font-family:"72-Boldfull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff2) format("woff2")}
|
|
6
|
+
@font-face{font-family:"72full";font-style:normal;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff2) format("woff2")}
|
|
7
|
+
@font-face{font-family:"72-Semibold";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Semibold.woff2) format("woff2"),local("72-Semibold");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
8
|
+
@font-face{font-family:"72";font-style:normal;font-weight:600;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Semibold.woff2) format("woff2"),local("72-Semibold");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
9
|
+
@font-face{font-family:"72-Semiboldfull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Semibold-full.woff2) format("woff2")}
|
|
10
|
+
@font-face{font-family:"72full";font-style:normal;font-weight:600;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Semibold-full.woff2) format("woff2")}
|
|
11
|
+
@font-face{font-family:"72-SemiboldDuplex";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex.woff2) format("woff2"),local("72-SemiboldDuplex");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
12
|
+
@font-face{font-family:"72-SemiboldDuplexfull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex-full.woff2) format("woff2")}
|
|
13
|
+
@font-face{font-family:"72-Light";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Light.woff2) format("woff2"),local("72-Light");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
14
|
+
@font-face{font-family:"72";font-style:normal;font-weight:300;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Light.woff2) format("woff2"),local("72-Light");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
15
|
+
@font-face{font-family:"72-Lightfull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff2) format("woff2")}
|
|
16
|
+
@font-face{font-family:"72full";font-style:normal;font-weight:300;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff2) format("woff2")}
|
|
17
|
+
@font-face{font-family:"72Black";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Black.woff2) format("woff2"),local("72Black");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+160-161,U+178,U+17D-17E,U+192,U+237,U+2C6-2C7,U+2DC,U+3BC,U+1E0E,U+2013-2014,U+2018-2019,U+201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
18
|
+
@font-face{font-family:"72";font-style:normal;font-weight:900;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Black.woff2) format("woff2"),local("72Black");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+160-161,U+178,U+17D-17E,U+192,U+237,U+2C6-2C7,U+2DC,U+3BC,U+1E0E,U+2013-2014,U+2018-2019,U+201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
19
|
+
@font-face{font-family:"72Blackfull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff2) format("woff2")}
|
|
20
|
+
@font-face{font-family:"72full";font-style:normal;font-weight:900;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff2) format("woff2")}
|
|
21
|
+
@font-face{font-family:"72-BoldItalic";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-BoldItalic.woff2) format("woff2"),local("72-BoldItalic");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
22
|
+
@font-face{font-family:"72";font-style:italic;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-BoldItalic.woff2) format("woff2"),local("72-BoldItalic");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
23
|
+
@font-face{font-family:"72full";font-style:italic;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-BoldItalic-full.woff2) format("woff2")}
|
|
24
|
+
@font-face{font-family:"72-Condensed";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Condensed.woff2) format("woff2"),local("72-Condensed");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
25
|
+
@font-face{font-family:"72";font-style:normal;font-weight:400;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Condensed.woff2) format("woff2"),local("72-Condensed");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
26
|
+
@font-face{font-family:"72";font-style:normal;font-weight:400;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Condensed-full.woff2) format("woff2");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
27
|
+
@font-face{font-family:"72-CondensedBold";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-CondensedBold.woff2) format("woff2"),local("72-CondensedBold");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
28
|
+
@font-face{font-family:"72";font-style:normal;font-weight:700;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-CondensedBold.woff2) format("woff2"),local("72-CondensedBold");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
29
|
+
@font-face{font-family:"72full";font-style:normal;font-weight:700;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-CondensedBold-full.woff2) format("woff2")}
|
|
30
|
+
@font-face{font-family:"72-Italic";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Italic.woff2) format("woff2"),local("72-Italic");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
31
|
+
@font-face{font-family:"72";font-style:italic;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Italic.woff2) format("woff2"),local("72-Italic");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
32
|
+
@font-face{font-family:"72full";font-style:italic;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Italic-full.woff2) format("woff2")}
|
|
33
|
+
@font-face{font-family:"72Mono";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72Mono-Regular.woff2) format("woff2"),local("72Mono");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
34
|
+
@font-face{font-family:"72Monofull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72Mono-Regular-full.woff2) format("woff2")}
|
|
35
|
+
@font-face{font-family:"72Mono-Bold";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72Mono-Bold.woff2) format("woff2"),local("72Mono-Bold");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}
|
|
36
|
+
@font-face{font-family:"72Mono-Boldfull";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72Mono-Bold-full.woff2) format("woff2")}`;
|
|
37
37
|
//# sourceMappingURL=FontFace.css.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/generated/css/FontFace.css.ts"],
|
|
4
|
-
"sourcesContent": ["export default `@font-face{font-family:\"72\";font-style:normal;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Regular.woff2) format(\"woff2\"),local(\"72\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72full\";font-style:normal;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Regular-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-Bold\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Bold.woff2) format(\"woff2\"),local(\"72-Bold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Bold.woff2) format(\"woff2\"),local(\"72-Bold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72-Boldfull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72full\";font-style:normal;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-Semibold\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Semibold.woff2) format(\"woff2\"),local(\"72-Semibold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:600;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Semibold.woff2) format(\"woff2\"),local(\"72-Semibold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72-Semiboldfull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Semibold-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72full\";font-style:normal;font-weight:600;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Semibold-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-SemiboldDuplex\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex.woff2) format(\"woff2\"),local(\"72-SemiboldDuplex\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72-SemiboldDuplexfull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-Light\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Light.woff2) format(\"woff2\"),local(\"72-Light\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:300;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Light.woff2) format(\"woff2\"),local(\"72-Light\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72-Lightfull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72full\";font-style:normal;font-weight:300;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72Black\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Black.woff2) format(\"woff2\"),local(\"72Black\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+160-161,U+178,U+17D-17E,U+192,U+237,U+2C6-2C7,U+2DC,U+3BC,U+1E0E,U+2013-2014,U+2018-2019,U+201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:900;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Black.woff2) format(\"woff2\"),local(\"72Black\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+160-161,U+178,U+17D-17E,U+192,U+237,U+2C6-2C7,U+2DC,U+3BC,U+1E0E,U+2013-2014,U+2018-2019,U+201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72Blackfull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72full\";font-style:normal;font-weight:900;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-BoldItalic\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-BoldItalic.woff2) format(\"woff2\"),local(\"72-BoldItalic\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:italic;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-BoldItalic.woff2) format(\"woff2\"),local(\"72-BoldItalic\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72full\";font-style:italic;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-BoldItalic-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-Condensed\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Condensed.woff2) format(\"woff2\"),local(\"72-Condensed\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:400;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Condensed.woff2) format(\"woff2\"),local(\"72-Condensed\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:400;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Condensed-full.woff2) format(\"woff2\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72-CondensedBold\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-CondensedBold.woff2) format(\"woff2\"),local(\"72-CondensedBold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:700;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-CondensedBold.woff2) format(\"woff2\"),local(\"72-CondensedBold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72full\";font-style:normal;font-weight:700;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-CondensedBold-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-Italic\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Italic.woff2) format(\"woff2\"),local(\"72-Italic\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:italic;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Italic.woff2) format(\"woff2\"),local(\"72-Italic\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72full\";font-style:italic;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72-Italic-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72Mono\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72Mono-Regular.woff2) format(\"woff2\"),local(\"72Mono\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72Monofull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72Mono-Regular-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72Mono-Bold\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72Mono-Bold.woff2) format(\"woff2\"),local(\"72Mono-Bold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72Mono-Boldfull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.33.0/content/Base/baseLib/baseTheme/fonts/72Mono-Bold-full.woff2) format(\"woff2\")}`"],
|
|
4
|
+
"sourcesContent": ["export default `@font-face{font-family:\"72\";font-style:normal;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Regular.woff2) format(\"woff2\"),local(\"72\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72full\";font-style:normal;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Regular-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-Bold\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Bold.woff2) format(\"woff2\"),local(\"72-Bold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Bold.woff2) format(\"woff2\"),local(\"72-Bold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72-Boldfull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72full\";font-style:normal;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-Semibold\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Semibold.woff2) format(\"woff2\"),local(\"72-Semibold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:600;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Semibold.woff2) format(\"woff2\"),local(\"72-Semibold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72-Semiboldfull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Semibold-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72full\";font-style:normal;font-weight:600;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Semibold-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-SemiboldDuplex\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex.woff2) format(\"woff2\"),local(\"72-SemiboldDuplex\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72-SemiboldDuplexfull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-Light\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Light.woff2) format(\"woff2\"),local(\"72-Light\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:300;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Light.woff2) format(\"woff2\"),local(\"72-Light\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72-Lightfull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72full\";font-style:normal;font-weight:300;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72Black\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Black.woff2) format(\"woff2\"),local(\"72Black\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+160-161,U+178,U+17D-17E,U+192,U+237,U+2C6-2C7,U+2DC,U+3BC,U+1E0E,U+2013-2014,U+2018-2019,U+201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:900;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Black.woff2) format(\"woff2\"),local(\"72Black\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+160-161,U+178,U+17D-17E,U+192,U+237,U+2C6-2C7,U+2DC,U+3BC,U+1E0E,U+2013-2014,U+2018-2019,U+201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72Blackfull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72full\";font-style:normal;font-weight:900;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-BoldItalic\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-BoldItalic.woff2) format(\"woff2\"),local(\"72-BoldItalic\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:italic;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-BoldItalic.woff2) format(\"woff2\"),local(\"72-BoldItalic\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72full\";font-style:italic;font-weight:700;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-BoldItalic-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-Condensed\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Condensed.woff2) format(\"woff2\"),local(\"72-Condensed\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:400;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Condensed.woff2) format(\"woff2\"),local(\"72-Condensed\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:400;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Condensed-full.woff2) format(\"woff2\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72-CondensedBold\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-CondensedBold.woff2) format(\"woff2\"),local(\"72-CondensedBold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:normal;font-weight:700;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-CondensedBold.woff2) format(\"woff2\"),local(\"72-CondensedBold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72full\";font-style:normal;font-weight:700;font-stretch:condensed;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-CondensedBold-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72-Italic\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Italic.woff2) format(\"woff2\"),local(\"72-Italic\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72\";font-style:italic;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Italic.woff2) format(\"woff2\"),local(\"72-Italic\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72full\";font-style:italic;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72-Italic-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72Mono\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72Mono-Regular.woff2) format(\"woff2\"),local(\"72Mono\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72Monofull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72Mono-Regular-full.woff2) format(\"woff2\")}\n@font-face{font-family:\"72Mono-Bold\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72Mono-Bold.woff2) format(\"woff2\"),local(\"72Mono-Bold\");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}\n@font-face{font-family:\"72Mono-Boldfull\";src:url(https://cdn.jsdelivr.net/npm/@sap-theming/theming-base-content@11.34.1/content/Base/baseLib/baseTheme/fonts/72Mono-Bold-full.woff2) format(\"woff2\")}`"],
|
|
5
5
|
"mappings": "aAAA,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* React wrapper factory for UI5 Web Components.
|
|
3
|
+
*
|
|
4
|
+
* This lightweight factory creates typed React components that wrap UI5 Web Components.
|
|
5
|
+
* It handles:
|
|
6
|
+
* - Event prop conversion (onXxx → ui5-xxx event listeners)
|
|
7
|
+
* - Ref forwarding
|
|
8
|
+
* - Children handling
|
|
9
|
+
*
|
|
10
|
+
* Note: The function supports react >= 18.
|
|
11
|
+
* Note: This is for documentation samples only - for production React apps,
|
|
12
|
+
* use the official @ui5/webcomponents-react library.
|
|
13
|
+
*/
|
|
14
|
+
import * as React from "react";
|
|
15
|
+
import type { ReactNode } from "react";
|
|
16
|
+
import type UI5Element from "../UI5Element.js";
|
|
17
|
+
interface UI5ComponentClass<T extends UI5Element = UI5Element> {
|
|
18
|
+
new (): T;
|
|
19
|
+
getMetadata(): {
|
|
20
|
+
getTag(): string;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Creates a React component wrapper for a UI5 Web Component.
|
|
25
|
+
* Uses the component's _jsxProps type for full TypeScript support.
|
|
26
|
+
*
|
|
27
|
+
* @param ComponentClass - The UI5 Web Component class (e.g., Button from "@ui5/webcomponents/dist/Button.js")
|
|
28
|
+
* @returns A React component that renders the custom element with proper TypeScript types
|
|
29
|
+
* @since 2.21.0
|
|
30
|
+
* @example
|
|
31
|
+
* import Button from "@ui5/webcomponents/dist/Button.js";
|
|
32
|
+
* const ReactButton = createReactComponent(Button);
|
|
33
|
+
* // ReactButton props are typed based on Button's _jsxProps
|
|
34
|
+
*/
|
|
35
|
+
declare function createReactComponent<T extends UI5Element>(ComponentClass: UI5ComponentClass<T>): React.ForwardRefExoticComponent<React.PropsWithoutRef<T["_jsxProps"] & {
|
|
36
|
+
children?: ReactNode;
|
|
37
|
+
}> & React.RefAttributes<T>>;
|
|
38
|
+
export default createReactComponent;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* React wrapper factory for UI5 Web Components.
|
|
3
|
+
*
|
|
4
|
+
* This lightweight factory creates typed React components that wrap UI5 Web Components.
|
|
5
|
+
* It handles:
|
|
6
|
+
* - Event prop conversion (onXxx → ui5-xxx event listeners)
|
|
7
|
+
* - Ref forwarding
|
|
8
|
+
* - Children handling
|
|
9
|
+
*
|
|
10
|
+
* Note: The function supports react >= 18.
|
|
11
|
+
* Note: This is for documentation samples only - for production React apps,
|
|
12
|
+
* use the official @ui5/webcomponents-react library.
|
|
13
|
+
*/
|
|
14
|
+
import * as React from "react";
|
|
15
|
+
import { useRef, useEffect, forwardRef, } from "react";
|
|
16
|
+
// Helper to convert event name
|
|
17
|
+
const toEventName = (propName) => {
|
|
18
|
+
return propName
|
|
19
|
+
.slice(2) // Remove "on"
|
|
20
|
+
.replace(/([A-Z])/g, (match, letter, index) => {
|
|
21
|
+
return index === 0 ? letter.toLowerCase() : `-${letter.toLowerCase()}`;
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
// Helper to create cleanup function for event listener
|
|
25
|
+
const createEventCleanup = (element, eventName, handler) => {
|
|
26
|
+
element.addEventListener(eventName, handler);
|
|
27
|
+
return () => element.removeEventListener(eventName, handler);
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* Creates a React component wrapper for a UI5 Web Component.
|
|
31
|
+
* Uses the component's _jsxProps type for full TypeScript support.
|
|
32
|
+
*
|
|
33
|
+
* @param ComponentClass - The UI5 Web Component class (e.g., Button from "@ui5/webcomponents/dist/Button.js")
|
|
34
|
+
* @returns A React component that renders the custom element with proper TypeScript types
|
|
35
|
+
* @since 2.21.0
|
|
36
|
+
* @example
|
|
37
|
+
* import Button from "@ui5/webcomponents/dist/Button.js";
|
|
38
|
+
* const ReactButton = createReactComponent(Button);
|
|
39
|
+
* // ReactButton props are typed based on Button's _jsxProps
|
|
40
|
+
*/
|
|
41
|
+
function createReactComponent(ComponentClass) {
|
|
42
|
+
const tagName = ComponentClass.getMetadata().getTag();
|
|
43
|
+
const Component = forwardRef((props, ref) => {
|
|
44
|
+
const { children, ...restProps } = props;
|
|
45
|
+
const elementRef = useRef(null);
|
|
46
|
+
// Forward ref
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
if (ref) {
|
|
49
|
+
if (typeof ref === "function") {
|
|
50
|
+
ref(elementRef.current);
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
ref.current = elementRef.current;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}, [ref]);
|
|
57
|
+
// Handle event props and boolean props imperatively
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
const element = elementRef.current;
|
|
60
|
+
if (!element) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
const eventCleanups = [];
|
|
64
|
+
Object.keys(restProps).forEach(propName => {
|
|
65
|
+
const propValue = restProps[propName];
|
|
66
|
+
if (propName.startsWith("on") && typeof propValue === "function") {
|
|
67
|
+
// Convert React event naming (onClick, onSelectionChange) to DOM event naming
|
|
68
|
+
// onClick -> click, onSelectionChange -> selection-change
|
|
69
|
+
const eventName = toEventName(propName);
|
|
70
|
+
const handler = propValue;
|
|
71
|
+
eventCleanups.push(createEventCleanup(element, eventName, handler));
|
|
72
|
+
}
|
|
73
|
+
else if (typeof propValue === "boolean") {
|
|
74
|
+
// React 18 sets false booleans as empty string attributes on custom elements.
|
|
75
|
+
// Set as property directly to avoid this.
|
|
76
|
+
element[propName] = propValue;
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
return () => {
|
|
80
|
+
eventCleanups.forEach(cleanup => cleanup());
|
|
81
|
+
};
|
|
82
|
+
}, [restProps]);
|
|
83
|
+
// Filter out event handlers and booleans from DOM props
|
|
84
|
+
const domProps = {};
|
|
85
|
+
Object.keys(restProps).forEach(propName => {
|
|
86
|
+
const propValue = restProps[propName];
|
|
87
|
+
if (propName.startsWith("on") && typeof propValue === "function") {
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
if (typeof propValue === "boolean") {
|
|
91
|
+
return;
|
|
92
|
+
} // handled in useEffect
|
|
93
|
+
// className → class for React compatibility
|
|
94
|
+
if (propName === "className") {
|
|
95
|
+
// eslint-disable-next-line dot-notation
|
|
96
|
+
domProps["class"] = propValue;
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
// Convert camelCase to kebab-case for HTML attributes
|
|
100
|
+
const attrName = propName.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
101
|
+
domProps[attrName] = propValue;
|
|
102
|
+
});
|
|
103
|
+
return React.createElement(tagName, { ref: elementRef, ...domProps }, children);
|
|
104
|
+
});
|
|
105
|
+
Component.displayName = tagName
|
|
106
|
+
.split("-")
|
|
107
|
+
.map(part => part.charAt(0).toUpperCase() + part.slice(1))
|
|
108
|
+
.join("");
|
|
109
|
+
return Component;
|
|
110
|
+
}
|
|
111
|
+
export default createReactComponent;
|
|
112
|
+
//# sourceMappingURL=createReactComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createReactComponent.js","sourceRoot":"","sources":["../../src/react18/createReactComponent.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACN,MAAM,EACN,SAAS,EACT,UAAU,GACV,MAAM,OAAO,CAAC;AAaf,+BAA+B;AAC/B,MAAM,WAAW,GAAG,CAAC,QAAgB,EAAU,EAAE;IAChD,OAAO,QAAQ;SACb,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc;SACvB,OAAO,CAAC,UAAU,EAAE,CAAC,KAAa,EAAE,MAAc,EAAE,KAAa,EAAU,EAAE;QAC7E,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,WAAW,EAAE,EAAE,CAAC;IACxE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,uDAAuD;AACvD,MAAM,kBAAkB,GAAG,CAAC,OAAmB,EAAE,SAAiB,EAAE,OAAqB,EAAgB,EAAE;IAC1G,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC7C,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,SAAS,oBAAoB,CAC5B,cAAoC;IAIpC,MAAM,OAAO,GAAG,cAAc,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC;IAEtD,MAAM,SAAS,GAAG,UAAU,CAA+C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QACzF,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;QACzC,MAAM,UAAU,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;QAEnC,cAAc;QACd,SAAS,CAAC,GAAG,EAAE;YACd,IAAI,GAAG,EAAE,CAAC;gBACT,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;oBAC/B,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;gBACzB,CAAC;qBAAM,CAAC;oBACP,GAAG,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;gBAClC,CAAC;YACF,CAAC;QACF,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QAEV,oDAAoD;QACpD,SAAS,CAAC,GAAG,EAAE;YACd,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;YACnC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACd,OAAO;YACR,CAAC;YAED,MAAM,aAAa,GAAsB,EAAE,CAAC;YAE5C,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBACzC,MAAM,SAAS,GAAI,SAAqC,CAAC,QAAQ,CAAC,CAAC;gBACnE,IAAI,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE,CAAC;oBAClE,8EAA8E;oBAC9E,0DAA0D;oBAC1D,MAAM,SAAS,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;oBACxC,MAAM,OAAO,GAAG,SAAyB,CAAC;oBAC1C,aAAa,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;gBACrE,CAAC;qBAAM,IAAI,OAAO,SAAS,KAAK,SAAS,EAAE,CAAC;oBAC3C,8EAA8E;oBAC9E,0CAA0C;oBACzC,OAAe,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;gBACxC,CAAC;YACF,CAAC,CAAC,CAAC;YAEH,OAAO,GAAG,EAAE;gBACX,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;YAC7C,CAAC,CAAC;QACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;QAEhB,wDAAwD;QACxD,MAAM,QAAQ,GAA4B,EAAE,CAAC;QAC7C,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YACzC,MAAM,SAAS,GAAI,SAAqC,CAAC,QAAQ,CAAC,CAAC;YACnE,IAAI,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE,CAAC;gBAAC,OAAO;YAAC,CAAC;YAC7E,IAAI,OAAO,SAAS,KAAK,SAAS,EAAE,CAAC;gBAAC,OAAO;YAAC,CAAC,CAAC,uBAAuB;YACvE,4CAA4C;YAC5C,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;gBAC9B,wCAAwC;gBACxC,QAAQ,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;gBAC9B,OAAO;YACR,CAAC;YACD,sDAAsD;YACtD,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;YACnE,QAAQ,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;QAChC,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,EAAE,QAAQ,CAAC,CAAC;IACjF,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,WAAW,GAAG,OAAO;SAC7B,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;SACzD,IAAI,CAAC,EAAE,CAAC,CAAC;IAEX,OAAO,SAAS,CAAC;AAClB,CAAC;AAED,eAAe,oBAAoB,CAAC","sourcesContent":["/**\n * React wrapper factory for UI5 Web Components.\n *\n * This lightweight factory creates typed React components that wrap UI5 Web Components.\n * It handles:\n * - Event prop conversion (onXxx → ui5-xxx event listeners)\n * - Ref forwarding\n * - Children handling\n *\n * Note: The function supports react >= 18.\n * Note: This is for documentation samples only - for production React apps,\n * use the official @ui5/webcomponents-react library.\n */\n\nimport * as React from \"react\";\nimport type { ReactNode } from \"react\";\nimport {\n\tuseRef,\n\tuseEffect,\n\tforwardRef,\n} from \"react\";\nimport type UI5Element from \"../UI5Element.js\";\n\ntype EventHandler<E = Event> = (event: E) => void;\n\n// Interface for UI5 Web Component classes with _jsxProps support\ninterface UI5ComponentClass<T extends UI5Element = UI5Element> {\n\tnew (): T;\n\tgetMetadata(): {\n\t\tgetTag(): string;\n\t};\n}\n\n// Helper to convert event name\nconst toEventName = (propName: string): string => {\n\treturn propName\n\t\t.slice(2) // Remove \"on\"\n\t\t.replace(/([A-Z])/g, (match: string, letter: string, index: number): string => {\n\t\t\treturn index === 0 ? letter.toLowerCase() : `-${letter.toLowerCase()}`;\n\t\t});\n};\n\n// Helper to create cleanup function for event listener\nconst createEventCleanup = (element: UI5Element, eventName: string, handler: EventHandler): (() => void) => {\n\telement.addEventListener(eventName, handler);\n\treturn () => element.removeEventListener(eventName, handler);\n};\n\n/**\n * Creates a React component wrapper for a UI5 Web Component.\n * Uses the component's _jsxProps type for full TypeScript support.\n *\n * @param ComponentClass - The UI5 Web Component class (e.g., Button from \"@ui5/webcomponents/dist/Button.js\")\n * @returns A React component that renders the custom element with proper TypeScript types\n * @since 2.21.0\n * @example\n * import Button from \"@ui5/webcomponents/dist/Button.js\";\n * const ReactButton = createReactComponent(Button);\n * // ReactButton props are typed based on Button's _jsxProps\n */\nfunction createReactComponent<T extends UI5Element>(\n\tComponentClass: UI5ComponentClass<T>,\n): React.ForwardRefExoticComponent<\n\tReact.PropsWithoutRef<T[\"_jsxProps\"] & { children?: ReactNode }> & React.RefAttributes<T>\n> {\n\tconst tagName = ComponentClass.getMetadata().getTag();\n\n\tconst Component = forwardRef<T, T[\"_jsxProps\"] & { children?: ReactNode }>((props, ref) => {\n\t\tconst { children, ...restProps } = props;\n\t\tconst elementRef = useRef<T>(null);\n\n\t\t// Forward ref\n\t\tuseEffect(() => {\n\t\t\tif (ref) {\n\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\tref(elementRef.current);\n\t\t\t\t} else {\n\t\t\t\t\tref.current = elementRef.current;\n\t\t\t\t}\n\t\t\t}\n\t\t}, [ref]);\n\n\t\t// Handle event props and boolean props imperatively\n\t\tuseEffect(() => {\n\t\t\tconst element = elementRef.current;\n\t\t\tif (!element) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst eventCleanups: Array<() => void> = [];\n\n\t\t\tObject.keys(restProps).forEach(propName => {\n\t\t\t\tconst propValue = (restProps as Record<string, unknown>)[propName];\n\t\t\t\tif (propName.startsWith(\"on\") && typeof propValue === \"function\") {\n\t\t\t\t\t// Convert React event naming (onClick, onSelectionChange) to DOM event naming\n\t\t\t\t\t// onClick -> click, onSelectionChange -> selection-change\n\t\t\t\t\tconst eventName = toEventName(propName);\n\t\t\t\t\tconst handler = propValue as EventHandler;\n\t\t\t\t\teventCleanups.push(createEventCleanup(element, eventName, handler));\n\t\t\t\t} else if (typeof propValue === \"boolean\") {\n\t\t\t\t\t// React 18 sets false booleans as empty string attributes on custom elements.\n\t\t\t\t\t// Set as property directly to avoid this.\n\t\t\t\t\t(element as any)[propName] = propValue;\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn () => {\n\t\t\t\teventCleanups.forEach(cleanup => cleanup());\n\t\t\t};\n\t\t}, [restProps]);\n\n\t\t// Filter out event handlers and booleans from DOM props\n\t\tconst domProps: Record<string, unknown> = {};\n\t\tObject.keys(restProps).forEach(propName => {\n\t\t\tconst propValue = (restProps as Record<string, unknown>)[propName];\n\t\t\tif (propName.startsWith(\"on\") && typeof propValue === \"function\") { return; }\n\t\t\tif (typeof propValue === \"boolean\") { return; } // handled in useEffect\n\t\t\t// className → class for React compatibility\n\t\t\tif (propName === \"className\") {\n\t\t\t\t// eslint-disable-next-line dot-notation\n\t\t\t\tdomProps[\"class\"] = propValue;\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Convert camelCase to kebab-case for HTML attributes\n\t\t\tconst attrName = propName.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\t\t\tdomProps[attrName] = propValue;\n\t\t});\n\n\t\treturn React.createElement(tagName, { ref: elementRef, ...domProps }, children);\n\t});\n\n\tComponent.displayName = tagName\n\t\t.split(\"-\")\n\t\t.map(part => part.charAt(0).toUpperCase() + part.slice(1))\n\t\t.join(\"\");\n\n\treturn Component;\n}\n\nexport default createReactComponent;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ui5/webcomponents-base",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.21.0-rc.0",
|
|
4
4
|
"description": "UI5 Web Components: webcomponents.base",
|
|
5
5
|
"author": "SAP SE (https://www.sap.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -64,9 +64,9 @@
|
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@custom-elements-manifest/analyzer": "^0.10.10",
|
|
66
66
|
"@openui5/sap.ui.core": "1.120.17",
|
|
67
|
-
"@sap-theming/theming-base-content": "11.
|
|
67
|
+
"@sap-theming/theming-base-content": "11.34.1",
|
|
68
68
|
"@ui5/cypress-internal": "0.1.0",
|
|
69
|
-
"@ui5/webcomponents-tools": "2.
|
|
69
|
+
"@ui5/webcomponents-tools": "2.21.0-rc.0",
|
|
70
70
|
"clean-css": "^5.2.2",
|
|
71
71
|
"cypress": "15.9.0",
|
|
72
72
|
"mocha": "^11.7.2",
|
|
@@ -76,6 +76,14 @@
|
|
|
76
76
|
"typescript": "^5.6.2",
|
|
77
77
|
"vite": "5.4.21"
|
|
78
78
|
},
|
|
79
|
+
"peerDependencies": {
|
|
80
|
+
"react": ">=18"
|
|
81
|
+
},
|
|
82
|
+
"peerDependenciesMeta": {
|
|
83
|
+
"react": {
|
|
84
|
+
"optional": true
|
|
85
|
+
}
|
|
86
|
+
},
|
|
79
87
|
"customElements": "dist/custom-elements.json",
|
|
80
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "a8d2c7b4e5b3f1c64a6ff6119fe6f949df2436b0"
|
|
81
89
|
}
|