npm - @haiilo/catalyst - Versions diffs - 2.4.8 → 2.5.0 - Mend

@haiilo/catalyst 2.4.8 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/dist/components/cat-i18n-registry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-i18n-registry.js","mappings":";;MAEa,eAAe;~~EAK1B~~;~~IAFiB~~,SAAI,GAAwB,IAAI,GAAG,EAAE,CAAC~~;;GAItD~~;EAED,OAAO,WAAW;IAChB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE;MAC7B,eAAe,CAAC,QAAQ,GAAG,IAAI,eAAe,EAAE,CAAC;KAClD;IACD,OAAO,eAAe,CAAC,QAAQ,CAAC;GACjC;EAED,GAAG,CAAC,IAA+B;~~IACjC~~,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;~~IAC9EA~~,QAAG,CAAC,IAAI,CAAC,~~uCAAuC~~,~~EAAE~~,~~IAAI~~,CAAC,CAAC;~~IACxD~~,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,EAAE,~~QAAQ~~,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;~~GAC3E~~;EAED,KAAK;~~IACH~~,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IAClBA,QAAG,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAC/C,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC;~~GACzD~~;EAED,CAAC,CAAC,GAAW,EAAE,MAA2C;IACxD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC,IAAI,OAAO,KAAK,SAAS,EAAE;MACzBA,QAAG,CAAC,KAAK,CAAC,0CAA0C,GAAG,EAAE,CAAC,CAAC;MAC3D,OAAO,GAAG,CAAC;KACZ;IACD,OAAO,OAAO,CAAC,OAAO,CAAC,2BAA2B,EAAE,CAAC,MAAM,EAAE,GAAG,eAAK,OAAA,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,GAAG,CAAC,mCAAI,EAAE,EAAE,CAAA,EAAA,CAAC,CAAC;GAChG;EAEO,UAAU,CAAI,IAAY,EAAE,MAAU;IAC5C,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;MAC3B,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,IAAI;MACd,MAAM;KACP,CAAC,CAAC;GACJ;CACF;MAEY,eAAe,GAAG,eAAe,CAAC,WAAW;;;;","names":["log"],"sources":["./src/components/cat-i18n/cat-i18n-registry.ts"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n private static instance: CatI18nRegistry;\n\n private readonly i18n: Map<string, string> = new Map();\n\n private constructor() {\n // hide constructor\n }\n\n static getInstance(): CatI18nRegistry {\n if (!CatI18nRegistry.instance) {\n CatI18nRegistry.instance = new CatI18nRegistry();\n }\n return CatI18nRegistry.instance;\n }\n\n set(i18n: { [key: string]: string }): void {\n Object.entries(i18n).forEach(([key, message]) => this.i18n.set(key, message));\n log.info(`[CatI18nRegistry] Registered messages`, ~~i18n~~);\n window.dispatchEvent(this.buildEvent('cat-i18n-set', { ~~messages~~: ~~i18n~~ }));\n }\n\n clear(): void {\n this.i18n.clear();\n log.info(`[CatI18nRegistry] Cleared messages`);\n window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n }\n\n t(key: string, params?: { [key: string]: string \| number }): string {\n const message = this.i18n.get(key);\n if (message === undefined) {\n log.error(`[CatI18nRegistry] Unknown message key: ${key}`);\n return key;\n }\n return message.replace(/{{\\s([-a-zA-Z._]+)\\s}}/g, (_match, key) => `${params?.[key] ?? ''}`);\n }\n\n private buildEvent<T>(name: string, detail?: T) {\n return new CustomEvent(name, {\n bubbles: true,\n composed: true,\n detail\n });\n }\n}\n\nexport const catI18nRegistry = CatI18nRegistry.getInstance();\n"],"version":3}
1	+ {"file":"cat-i18n-registry.js","mappings":";;MAEa,eAAe;EAM1B;;IAHiB,OAAE,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACnD,SAAI,GAAwB,IAAI,GAAG,EAAE,CAAC;;;;;;;;IAYrD,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,KAAK;MAC3C,MAAM,EAAE,MAAM,EAAE,GAAI,KAAqB,IAAI,EAAE,CAAC;MAChD,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;QACnC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;OAC7B;KACF,CAAC,CAAC;IACH,MAAM,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,KAAK;MAC7C,MAAM,EAAE,MAAM,EAAE,GAAI,KAAqB,IAAI,EAAE,CAAC;MAChD,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;QACnC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;OAClB;KACF,CAAC,CAAC;GACJ;EAED,OAAO,WAAW;IAChB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE;MAC7B,eAAe,CAAC,QAAQ,GAAG,IAAI,eAAe,EAAE,CAAC;KAClD;IACD,OAAO,eAAe,CAAC,QAAQ,CAAC;GACjC;EAED,GAAG,CAAC,IAA+B,EAAE,MAAM,GAAG,KAAK;IACjD,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IACrEA,QAAG,CAAC,IAAI,CAAC,gCAAgC,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,UAAU,GAAG,SAAS,EAAE,CAAC,CAAC;IAC9F,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;GACzF;EAED,KAAK,CAAC,MAAM,GAAG,KAAK;IAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IAClBA,QAAG,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAC/C,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC;GACpE;EAED,CAAC,CAAC,GAAW,EAAE,MAA2C;IACxD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC,IAAI,OAAO,KAAK,SAAS,EAAE;MACzBA,QAAG,CAAC,KAAK,CAAC,0CAA0C,GAAG,EAAE,CAAC,CAAC;MAC3D,OAAO,GAAG,CAAC;KACZ;IACD,OAAO,OAAO,CAAC,OAAO,CAAC,2BAA2B,EAAE,CAAC,MAAM,EAAE,GAAG,eAAK,OAAA,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,GAAG,CAAC,mCAAI,EAAE,EAAE,CAAA,EAAA,CAAC,CAAC;GAChG;EAEO,UAAU,CAAI,IAAY,EAAE,MAAU;IAC5C,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;MAC3B,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,IAAI;MACd,MAAM;KACP,CAAC,CAAC;GACJ;CACF;MAEY,eAAe,GAAG,eAAe,CAAC,WAAW;;;;","names":["log"],"sources":["./src/components/cat-i18n/cat-i18n-registry.ts"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n private static instance: CatI18nRegistry;\n\n private readonly id = (Math.random() + 1).toString(36).substring(2);\n private readonly i18n: Map<string, string> = new Map();\n\n private constructor() {\n // hide constructor\n\n // In rare cases, the registry can be initialized twice. This can happen in\n // a micro frontend architecture where the registry is initialized in the\n // host application and in the micro frontend. To prevent the registry in\n // one application from overwriting the registry in the other, we listen for\n // events that are dispatched when messages are added or removed in other\n // applications and add or remove messages if the event was not dispatched\n // by this registry.\n window.addEventListener('cat-i18n-set', event => {\n const { detail } = (event as CustomEvent) \|\| {};\n if (detail && detail.id !== this.id) {\n this.set(detail.i18n, true);\n }\n });\n window.addEventListener('cat-i18n-clear', event => {\n const { detail } = (event as CustomEvent) \|\| {};\n if (detail && detail.id !== this.id) {\n this.clear(true);\n }\n });\n }\n\n static getInstance(): CatI18nRegistry {\n if (!CatI18nRegistry.instance) {\n CatI18nRegistry.instance = new CatI18nRegistry();\n }\n return CatI18nRegistry.instance;\n }\n\n set(i18n: { [key: string]: string }, silent = false): void {\n const i18nEntries = Object.entries(i18n);\n i18nEntries.forEach(([key, message]) => this.i18n.set(key, message));\n log.info(`[CatI18nRegistry] Registered ${i18nEntries.length !== 1 ? 'messages' : 'message'}`);\n !silent && window.dispatchEvent(this.buildEvent('cat-i18n-set', { i18n, id: this.id }));\n }\n\n clear(silent = false): void {\n this.i18n.clear();\n log.info(`[CatI18nRegistry] Cleared messages`);\n !silent && window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n }\n\n t(key: string, params?: { [key: string]: string \| number }): string {\n const message = this.i18n.get(key);\n if (message === undefined) {\n log.error(`[CatI18nRegistry] Unknown message key: ${key}`);\n return key;\n }\n return message.replace(/{{\\s([-a-zA-Z._]+)\\s}}/g, (_match, key) => `${params?.[key] ?? ''}`);\n }\n\n private buildEvent<T>(name: string, detail?: T) {\n return new CustomEvent(name, {\n bubbles: true,\n composed: true,\n detail\n });\n }\n}\n\nexport const catI18nRegistry = CatI18nRegistry.getInstance();\n"],"version":3}

package/dist/components/cat-icon2.js CHANGED Viewed

@@ -3,16 +3,33 @@ import { l as loglevel } from './loglevel.js';
 class CatIconRegistry {
   constructor() {
-    this.icons = new Map();
-    this.id = (Math.random() + 1).toString(36).substring(2);
-    console.log('CatIconRegistry created', this.id);
     // hide constructor
+    this.id = (Math.random() + 1).toString(36).substring(2);
+    this.icons = new Map();
+    // In rare cases, the registry can be initialized twice. This can happen in
+    // a micro frontend architecture where the registry is initialized in the
+    // host application and in the micro frontend. To prevent the registry in
+    // one application from overwriting the registry in the other, we listen for
+    // events that are dispatched when icons are added or removed in other
+    // applications and add or remove icons if the event was not dispatched by
+    // this registry.
+    window.addEventListener('cat-icons-added', event => {
+      const { detail } = event || {};
+      if (detail && detail.id !== this.id) {
+        this.addIcons(detail.icons, detail.setName, true);
+      }
+    });
+    window.addEventListener('cat-icons-removed', event => {
+      const { detail } = event || {};
+      if (detail && detail.id !== this.id) {
+        this.removeIcons(detail.names, detail.setName, true);
+      }
+    });
   }
   static getInstance() {
     if (!CatIconRegistry.instance) {
       CatIconRegistry.instance = new CatIconRegistry();
     }
-    console.log('getInstance', CatIconRegistry.instance);
     return CatIconRegistry.instance;
   }
   getIcon(name, setName) {
@@ -22,29 +39,19 @@ class CatIconRegistry {
     }
     return icon;
   }
-  addIcon(name, data, setName) {
-    this.icons.set(this.buildName(name, setName), data);
-    loglevel.info(`[CatIconRegistry] Added icon${setName ? ` to set ${setName}` : ''}: ${name}`);
-    window.dispatchEvent(this.buildEvent('cat-icon-added', { name, setName }));
-    return this;
-  }
-  addIcons(icons, setName) {
-    console.log('addIcons', setName, icons);
-    Object.entries(icons).forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));
-    loglevel.info(`[CatIconRegistry] Added icons${setName ? ` to set ${setName}` : ''}: ${Object.keys(icons).concat(', ')}`);
-    window.dispatchEvent(this.buildEvent('cat-icons-added', { names: Object.keys(icons), setName }));
-    return this;
-  }
-  removeIcon(name, setName) {
-    this.icons.delete(this.buildName(name, setName));
-    loglevel.info(`[CatIconRegistry] Removed icon${setName ? ` from set ${setName}` : ''}: ${name}`);
-    window.dispatchEvent(this.buildEvent('cat-icon-removed', { name, setName }));
+  addIcons(icons, setName, silent = false) {
+    const iconEntries = Object.entries(icons);
+    const iconSize = iconEntries.length;
+    iconEntries.forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));
+    loglevel.info(`[CatIconRegistry] Added ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` to set ${setName}` : ''}`);
+    !silent && window.dispatchEvent(this.buildEvent('cat-icons-added', { id: this.id, icons, setName }));
     return this;
   }
-  removeIcons(names, setName) {
+  removeIcons(names, setName, silent = false) {
+    const iconSize = names.length;
     names.forEach(name => this.icons.delete(this.buildName(name, setName)));
-    loglevel.info(`[CatIconRegistry] Removed icons${setName ? ` from set ${setName}` : ''}: ${names.concat(', ')}`);
-    window.dispatchEvent(this.buildEvent('cat-icons-removed', { names, setName }));
+    loglevel.info(`[CatIconRegistry] Removed ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` from set ${setName}` : ''}`);
+    !silent && window.dispatchEvent(this.buildEvent('cat-icons-removed', { id: this.id, names, setName }));
     return this;
   }
   buildName(name, setName) {
@@ -67,7 +74,6 @@ const CatIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.iconRegistry = CatIconRegistry.getInstance();
     /**
      * The name of the icon.
      */
@@ -78,7 +84,7 @@ const CatIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.size = 'm';
   }
   render() {
-    return (h("span", { innerHTML: this.iconRegistry.getIcon(this.icon), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+    return (h("span", { innerHTML: catIconRegistry.getIcon(this.icon), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
         icon: true,
         [`icon-${this.size}`]: this.size !== 'inline'
       } }));

package/dist/components/cat-icon2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-icon2.js","mappings":";;;MAEa,eAAe;~~EAO1B;IAJiB~~,~~UAAK~~,~~GAAwB,IAAI,~~GAAG,~~EAAE,~~CAAC~~;IAKtD~~,IAAI,CAAC,~~EAAE,GAAG,CAAC,IAAI,CAAC,~~MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;~~IACxD~~,~~OAAO~~,~~CAAC~~,GAAG,CAAC,~~yBAAyB~~,~~EAAE~~,~~IAAI~~,CAAC,EAAE,~~CAAC,CAAC;;GAEjD~~;~~EAED~~,~~OAAO~~,~~WAAW;IAChB~~,~~IAAI~~,~~CAAC~~,~~eAAe~~,~~CAAC~~,~~QAAQ~~,EAAE;~~MAC7B~~,~~eAAe~~,CAAC,~~QAAQ~~,~~GAAG~~,IAAI,~~eAAe~~,EAAE,~~CAAC~~;~~KAClD;IACD~~,~~OAAO~~,CAAC,~~GAAG~~,CAAC,~~aAAa~~,EAAE,~~eAAe~~,CAAC,~~QAAQ~~,CAAC,CAAC;~~IACrD~~,~~OAAO~~,~~eAAe,~~CAAC,~~QAAQ~~,CAAC~~;GACjC;EAED~~,~~OAAO~~,CAAC,~~IAAY~~,EAAE,~~OAAgB~~;~~IACpC~~,MAAM,IAAI,~~GAAG~~,IAAI,CAAC,KAAK,CAAC,~~GAAG~~,~~CAAC~~,IAAI,CAAC,~~SAAS~~,CAAC,~~IAAI~~,EAAE,~~OAAO~~,CAAC,CAAC,CAAC;~~IAC3D~~,~~IAAI~~,CAAC,~~IAAI~~,~~EAAE~~;~~MACTA~~,~~QAAG~~,CAAC,~~KAAK~~,CAAC,~~iCAAiC~~,~~OAAO~~,~~GAAG~~,~~WAAW~~,~~OAAO~~,~~EAAE,~~GAAG,~~EAAE~~,~~KAAK~~,~~IAAI,~~EAAE,CAAC~~,CAAC~~;~~KAC5F~~;IACD,OAAO,~~IAAI~~,CAAC;~~GACb~~;EAED,OAAO,CAAC,IAAY,EAAE,~~IAAY,EAAE,~~OAAgB;~~IAClD~~,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,~~EAAE~~,IAAI,CAAC,~~CAAC~~;~~IACpDA~~,QAAG,CAAC,~~IAAI~~,CAAC~~,+BAA+B~~,OAAO,GAAG,WAAW,OAAO,EAAE,GAAG,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;~~IACxF,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC~~;~~IAC3E~~,OAAO,IAAI,CAAC;GACb;EAED,QAAQ,CAAC,KAAiC,EAAE,OAAgB;~~IAC1D~~,~~OAAO~~,~~CAAC~~,GAAG,CAAC,~~UAAU,EAAE,~~OAAO,~~EAAE~~,KAAK,CAAC,CAAC;~~IACxC~~,MAAM,~~CAAC~~,~~OAAO~~,CAAC,~~KAAK~~,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;~~IACrGA~~,QAAG,CAAC,IAAI,CAAC,~~gCAAgC~~,OAAO,GAAG,WAAW,OAAO,EAAE,GAAG,EAAE,~~KAAK~~,~~MAAM,~~CAAC,~~IAAI,~~CAAC,~~KAAK,~~CAAC,~~CAAC,~~MAAM,~~CAAC,~~IAAI,~~CAAC,EAAE,CAAC,CAAC;IACpH,~~MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,EAAE,~~KAAK~~,EAAE,~~MAAM~~,CAAC,~~IAAI~~,~~CAAC~~,KAAK,~~CAAC,~~EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;~~IACjG~~,OAAO,IAAI,CAAC;GACb;EAED,~~UAAU~~,CAAC,~~IAAY~~,EAAE,OAAgB~~;IACvC~~,~~IAAI~~,~~CAAC,KAAK,CAAC,~~MAAM,~~CAAC~~,~~IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC~~;~~IACjDA~~,~~QAAG~~,~~CAAC~~,~~IAAI,CAAC,iCAAiC,OAAO,~~GAAG,~~aAAa,OAAO,EAAE,GAAG,EAAE,~~KAAK,~~IAAI,EAAE,~~CAAC,~~CAAC;IAC5F,~~MAAM,CAAC~~,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC~~;~~IAC7E~~,~~OAAO,IAAI,CAAC;GACb;EAED,WAAW,CAAC,KAAe,EAAE,OAAgB;IAC3C,~~KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACxEA,QAAG,CAAC,IAAI,CAAC,~~kCAAkC~~,OAAO,GAAG,aAAa,OAAO,EAAE,GAAG,EAAE,~~KAAK~~,~~KAAK,~~CAAC,~~MAAM,~~CAAC,~~IAAI,~~CAAC,~~EAAE~~,~~CAAC~~,~~CAAC;IAC3G,~~MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;~~IAC/E~~,OAAO,IAAI,CAAC;GACb;EAEO,SAAS,CAAC,IAAY,EAAE,OAAgB;IAC9C,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,IAAI,CAAC;GAC3C;EAEO,UAAU,CAAI,IAAY,EAAE,MAAU;IAC5C,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;MAC3B,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,IAAI;MACd,MAAM;KACP,CAAC,CAAC;GACJ;CACF;MAEY,eAAe,GAAG,eAAe,CAAC,WAAW;;~~ACzE1D~~,MAAM,UAAU,GAAG,mbAAmb;;MCczb,OAAO;EALpB~~;;;;IAMmB~~,~~iBAAY,GAAG,eAAe,CAAC,WAAW,EAAE,CAAC;;;;IAKtD,~~SAAI,GAAG,EAAE,CAAC;;;;IAKV,SAAI,GAA6C,GAAG,CAAC;GAsB9D;EAdC,MAAM;IACJ,QACE,YACE,SAAS,~~EAAE~~,~~IAAI~~,CAAC,~~YAAY,CAAC,~~OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,~~gBACnC~~,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,EAC3C,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ;OAC9C,GACK,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["log"],"sources":["./src/components/cat-icon/cat-icon-registry.ts","./src/components/cat-icon/cat-icon.scss?tag=cat-icon&encapsulation=shadow","./src/components/cat-icon/cat-icon.tsx"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatIconRegistry {\n private static instance: CatIconRegistry;\n\n private readonly icons: Map<string, string> = new Map();\n\n ~~readonly id: string;\n\n~~ private constructor() {\n this.id = (~~Math.random(~~) + 1).~~toString~~(~~36)~~.~~substring(2~~);\n ~~console~~.~~log~~('~~CatIconRegistry created~~', this.id);\n // ~~hide~~ ~~constructor~~\n }\n\n static getInstance(): CatIconRegistry {\n if (!CatIconRegistry.instance) {\n CatIconRegistry.instance = new CatIconRegistry();\n }\n ~~console.log('getInstance', CatIconRegistry.instance);\n~~ return CatIconRegistry.instance;\n }\n\n getIcon(name: string, setName?: string): string \| undefined {\n const icon = this.icons.get(this.buildName(name, setName));\n if (!icon) {\n log.error(`[CatIconRegistry] Unknown icon${setName ? ` in set ${setName}` : ''}: ${name}`);\n }\n return icon;\n }\n\n addIcon(name: string, data: string, setName?: string): CatIconRegistry {\n this.icons.set(this.buildName(name, setName), data);\n log.info(`[CatIconRegistry] Added icon${setName ? ` to set ${setName}` : ''}: ${name}`);\n window.dispatchEvent(this.buildEvent('cat-icon-added', { name, setName }));\n return this;\n }\n\n addIcons(icons: { [name: string]: string }, setName?: string): CatIconRegistry {\n ~~console.log('addIcons',~~ ~~setName,~~ ~~icons);\n~~ Object.entries(icons).forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));\n log.info(`[CatIconRegistry] Added ~~icons~~${~~setName~~ ? ` to ~~set ${setName}` :~~ ''}: ~~${Object.keys(icons).concat(~~', ')}`);\n window.dispatchEvent(this.buildEvent('cat-icons-added', { names: Object.keys(icons), setName }));\n return this;\n }\n\n removeIcon(name: string, setName?: string): CatIconRegistry {\n this.icons.delete(this.buildName(name, setName));\n log.info(`[CatIconRegistry] Removed icon${setName ? ` ~~from~~ set ${setName}` : ''}~~: ${name}~~`);\n window.dispatchEvent(this.buildEvent('cat-~~icon~~-~~removed~~', { ~~name~~, setName }));\n return this;\n }\n\n removeIcons(names: string[], setName?: string): CatIconRegistry {\n names.forEach(name => this.icons.delete(this.buildName(name, setName)));\n log.info(`[CatIconRegistry] Removed icons${setName ? ` from set ${setName}` : ''}~~: ${names.concat(', ')}~~`);\n window.dispatchEvent(this.buildEvent('cat-icons-removed', { names, setName }));\n return this;\n }\n\n private buildName(name: string, setName?: string) {\n return setName ? `${setName}:name` : name;\n }\n\n private buildEvent<T>(name: string, detail?: T) {\n return new CustomEvent(name, {\n bubbles: true,\n composed: true,\n detail\n });\n }\n}\n\nexport const catIconRegistry = CatIconRegistry.getInstance();\n","@use 'variables' as ;\n@use 'mixins' as ;\n@use 'sass:map';\n\n$icon-sizes: (\n 'xl': 1.75rem,\n 'l': 1.5rem,\n 'm': 1.25rem,\n 's': 1rem,\n 'xs': 0.75rem\n);\n\n:host {\n /*\n @prop --cat-icon-ratio: The aspect ratio of the avatar.\n /\n display: inline-flex;\n vertical-align: middle;\n @include cat-select(none);\n}\n\n:host([hidden]) {\n display: none;\n}\n\nspan {\n display: inline-flex;\n}\n\nsvg {\n fill: currentColor;\n stroke: none;\n transform-origin: center center;\n height: 1em;\n width: calc(var(--cat-icon-ratio, 1) 1em);\n}\n\n// ----- size\n\n@mixin size($size) {\n .icon-#{$size} svg {\n font-size: map.get($icon-sizes, $size);\n }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n","import { Component, h, Prop } from '@stencil/core';\nimport { ~~CatIconRegistry~~ } from './cat-icon-registry';\n\n/*\n Icons are used to provide additional meaning or in places where text label\n * doesn't fit.\n \n @part icon - The span element wrapping the SVG icon.\n /\n@Component({\n tag: 'cat-icon',\n styleUrl: 'cat-icon.scss',\n shadow: true\n})\nexport class CatIcon {\n ~~private readonly iconRegistry = CatIconRegistry.getInstance();\n\n~~ /\n The name of the icon.\n /\n @Prop() icon = '';\n\n /\n The size of the icon.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'inline' = 'm';\n\n /\n Adds accessible label for the icon that is only shown for screen\n * readers. The `aria-hidden` attribute will be set if no label is present.\n */\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n render() {\n return (\n <span\n innerHTML={~~this~~.~~iconRegistry.~~getIcon(this.icon)}\n aria-label={this.a11yLabel}\n aria-hidden={this.a11yLabel ? null : 'true'}\n part=\"icon\"\n class={{\n icon: true,\n [`icon-${this.size}`]: this.size !== 'inline'\n }}\n ></span>\n );\n }\n}\n"],"version":3}
1	+ {"file":"cat-icon2.js","mappings":"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","names":["log","icons"],"sources":["./src/components/cat-icon/cat-icon-registry.ts","./src/components/cat-icon/cat-icon.scss?tag=cat-icon&encapsulation=shadow","./src/components/cat-icon/cat-icon.tsx"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatIconRegistry {\n private static instance: CatIconRegistry;\n\n private readonly id = (Math.random() + 1).toString(36).substring(2);\n private readonly icons: Map<string, string> = new Map();\n\n private constructor() {\n // hide constructor\n\n // In rare cases, the registry can be initialized twice. This can happen in\n // a micro frontend architecture where the registry is initialized in the\n // host application and in the micro frontend. To prevent the registry in\n // one application from overwriting the registry in the other, we listen for\n // events that are dispatched when icons are added or removed in other\n // applications and add or remove icons if the event was not dispatched by\n // this registry.\n window.addEventListener('cat-icons-added', event => {\n const { detail } = (event as CustomEvent) \|\| {};\n if (detail && detail.id !== this.id) {\n this.addIcons(detail.icons, detail.setName, true);\n }\n });\n window.addEventListener('cat-icons-removed', event => {\n const { detail } = (event as CustomEvent) \|\| {};\n if (detail && detail.id !== this.id) {\n this.removeIcons(detail.names, detail.setName, true);\n }\n });\n }\n\n static getInstance(): CatIconRegistry {\n if (!CatIconRegistry.instance) {\n CatIconRegistry.instance = new CatIconRegistry();\n }\n return CatIconRegistry.instance;\n }\n\n getIcon(name: string, setName?: string): string \| undefined {\n const icon = this.icons.get(this.buildName(name, setName));\n if (!icon) {\n log.error(`[CatIconRegistry] Unknown icon${setName ? ` in set ${setName}` : ''}: ${name}`);\n }\n return icon;\n }\n\n addIcons(icons: { [name: string]: string }, setName?: string, silent = false): CatIconRegistry {\n const iconEntries = Object.entries(icons);\n const iconSize = iconEntries.length;\n iconEntries.forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));\n log.info(`[CatIconRegistry] Added ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` to set ${setName}` : ''}`);\n !silent && window.dispatchEvent(this.buildEvent('cat-icons-added', { id: this.id, icons, setName }));\n return this;\n }\n\n removeIcons(names: string[], setName?: string, silent = false): CatIconRegistry {\n const iconSize = names.length;\n names.forEach(name => this.icons.delete(this.buildName(name, setName)));\n log.info(`[CatIconRegistry] Removed ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` from set ${setName}` : ''}`);\n !silent && window.dispatchEvent(this.buildEvent('cat-icons-removed', { id: this.id, names, setName }));\n return this;\n }\n\n private buildName(name: string, setName?: string) {\n return setName ? `${setName}:name` : name;\n }\n\n private buildEvent<T>(name: string, detail?: T) {\n return new CustomEvent(name, {\n bubbles: true,\n composed: true,\n detail\n });\n }\n}\n\nexport const catIconRegistry = CatIconRegistry.getInstance();\n","@use 'variables' as ;\n@use 'mixins' as ;\n@use 'sass:map';\n\n$icon-sizes: (\n 'xl': 1.75rem,\n 'l': 1.5rem,\n 'm': 1.25rem,\n 's': 1rem,\n 'xs': 0.75rem\n);\n\n:host {\n /*\n @prop --cat-icon-ratio: The aspect ratio of the avatar.\n /\n display: inline-flex;\n vertical-align: middle;\n @include cat-select(none);\n}\n\n:host([hidden]) {\n display: none;\n}\n\nspan {\n display: inline-flex;\n}\n\nsvg {\n fill: currentColor;\n stroke: none;\n transform-origin: center center;\n height: 1em;\n width: calc(var(--cat-icon-ratio, 1) 1em);\n}\n\n// ----- size\n\n@mixin size($size) {\n .icon-#{$size} svg {\n font-size: map.get($icon-sizes, $size);\n }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n","import { Component, h, Prop } from '@stencil/core';\nimport { catIconRegistry as icons } from './cat-icon-registry';\n\n/*\n Icons are used to provide additional meaning or in places where text label\n * doesn't fit.\n \n @part icon - The span element wrapping the SVG icon.\n /\n@Component({\n tag: 'cat-icon',\n styleUrl: 'cat-icon.scss',\n shadow: true\n})\nexport class CatIcon {\n /\n The name of the icon.\n /\n @Prop() icon = '';\n\n /\n The size of the icon.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'inline' = 'm';\n\n /\n Adds accessible label for the icon that is only shown for screen\n * readers. The `aria-hidden` attribute will be set if no label is present.\n */\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n render() {\n return (\n <span\n innerHTML={icons.getIcon(this.icon)}\n aria-label={this.a11yLabel}\n aria-hidden={this.a11yLabel ? null : 'true'}\n part=\"icon\"\n class={{\n icon: true,\n [`icon-${this.size}`]: this.size !== 'inline'\n }}\n ></span>\n );\n }\n}\n"],"version":3}

package/dist/components/cat-input.js CHANGED Viewed

@@ -19,6 +19,10 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.catBlur = createEvent(this, "catBlur", 7);
     this._id = `cat-input-${nextUniqueId++}`;
     this.hasSlottedLabel = false;
+    /**
+     * Whether the label need a marker to shown if the input is required or optional.
+     */
+    this.requiredMarker = 'optional';
     /**
      * Whether the input should show a clear button.
      */
@@ -95,7 +99,7 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.value = '';
   }
   render() {
-    return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")"))))), h("div", { class: {
+    return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), h("div", { class: {
         'input-wrapper': true,
         'input-round': this.round,
         'input-disabled': this.disabled
@@ -120,6 +124,7 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get hostElement() { return this; }
   static get style() { return catInputCss; }
 }, [1, "cat-input", {
+    "requiredMarker": [1, "required-marker"],
     "autoComplete": [1, "auto-complete"],
     "clearable": [4],
     "disabled": [4],

package/dist/components/cat-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-input.js","mappings":"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","names":["CatInput","log","i18n"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n @include cat-body('m');\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-wrapper {\n display: flex;\n align-items: stretch;\n gap: 0.75rem;\n padding: 0 0.75rem;\n height: 2.5rem;\n overflow: hidden;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: 0 0 0 1px cat-token('color.ui.border.dark');\n transition: box-shadow cat-token('time.transition.s') linear;\n\n &.input-round {\n border-radius: 10rem;\n }\n\n &.input-disabled {\n background: cat-token('color.ui.background.muted');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &:not(.input-disabled) {\n &:hover {\n box-shadow: 0 0 0 2px cat-token('color.ui.border.dark');\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n }\n }\n}\n\n:host(.cat-error) {\n .input-wrapper {\n box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg');\n\n &:not(.input-disabled):hover {\n box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg');\n }\n }\n}\n\nlabel {\n align-self: flex-start;\n\n &.hidden {\n @include cat-visually-hidden;\n }\n}\n\n.input-optional {\n margin-left: 0.25rem;\n @include cat-body('xs');\n color: cat-token('color.ui.font.muted');\n}\n\n.text-prefix,\n.text-suffix {\n display: inline-flex;\n align-items: center;\n @include cat-select(none);\n}\n\n.text-prefix {\n border-right: 1px solid cat-token('color.ui.border.dark');\n padding-right: 0.75rem;\n}\n\n.text-suffix {\n border-left: 1px solid cat-token('color.ui.border.dark');\n padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n align-self: center;\n}\n\n.input-inner-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n flex: 1 1 auto;\n}\n\ninput {\n font: inherit;\n margin: 0;\n padding: 0;\n width: 100%;\n min-width: 0;\n border: none;\n outline: none;\n background: none;\n\n .input-disabled & {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &.has-clearable {\n padding-right: 1.5rem;\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n }\n}\n\n.clearable {\n position: absolute;\n top: calc(50% - 1rem);\n right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/*\n Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n \n @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n /\n@Component({\n tag: 'cat-input',\n styleUrl: 'cat-input.scss',\n shadow: true\n})\nexport class CatInput {\n private readonly _id = `cat-input-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /\n Hint for form autofill feature.\n /\n @Prop() autoComplete?: string;\n\n /\n Whether the input should show a clear button.\n /\n @Prop() clearable = false;\n\n /\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n Optional hint text(s) to be displayed with the input.\n /\n @Prop() hint?: string \| string[];\n\n /\n The name of an icon to be displayed in the input.\n /\n @Prop() icon?: string;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label for the input.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n A maximum value for date, time and numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for date, time and numeric values.\n /\n @Prop() min?: number \| string;\n\n /\n A minimum length (number of characters) for textual values.\n /\n @Prop() minLength?: number;\n\n /\n The name of the form control. Submitted with the form as part of a name/value pair.\n /\n @Prop() name?: string;\n\n /\n The placeholder text to display within the input.\n /\n @Prop() placeholder?: string;\n\n /\n A textual prefix to be displayed in the input.\n /\n @Prop() textPrefix?: string;\n\n /\n A textual suffix to be displayed in the input.\n /\n @Prop() textSuffix?: string;\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n A value is required or must be check for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Use round input edges.\n /\n @Prop() round = false;\n\n /\n Type of form control.\n /\n @Prop() type: InputType = 'text';\n\n /\n The value of the control.\n /\n @Prop({ mutable: true }) value?: string \| number;\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the input received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on input', this);\n }\n }\n\n /\n Programmatically move focus to the input. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /\n Programmatically remove focus from the input. Use this method instead of\n * `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the input.\n /\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\n }\n\n /\n Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n }\n\n render() {\n return (\n <Host>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n <span part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n {!this.required && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n </span>\n </label>\n )}\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-disabled': this.disabled\n }}\n onClick={() => this.input.focus()}\n >\n {this.textPrefix && (\n <span class=\"text-prefix\" part=\"prefix\">\n {this.textPrefix}\n </span>\n )}\n {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n <div class=\"input-inner-wrapper\">\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled\n }}\n autocomplete={this.autoComplete}\n disabled={this.disabled}\n max={this.max}\n maxlength={this.maxLength}\n min={this.min}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n ></input>\n {this.clearable && !this.disabled && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"cross-circle-outlined\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n ></cat-button>\n )}\n </div>\n {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n {this.hintSection}\n </Host>\n );\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint \|\| hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onInput(event: Event) {\n this.value = this.input.value;\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"],"version":3}
1	+ {"file":"cat-input.js","mappings":"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","names":["CatInput","log","i18n"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n @include cat-body('m');\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-wrapper {\n display: flex;\n align-items: stretch;\n gap: 0.75rem;\n padding: 0 0.75rem;\n height: 2.5rem;\n overflow: hidden;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: 0 0 0 1px cat-token('color.ui.border.dark');\n transition: box-shadow cat-token('time.transition.s') linear;\n\n &.input-round {\n border-radius: 10rem;\n }\n\n &.input-disabled {\n background: cat-token('color.ui.background.muted');\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &:not(.input-disabled) {\n &:hover {\n box-shadow: 0 0 0 2px cat-token('color.ui.border.dark');\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n }\n }\n}\n\n:host(.cat-error) {\n .input-wrapper {\n box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg');\n\n &:not(.input-disabled):hover {\n box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg');\n }\n }\n}\n\nlabel {\n align-self: flex-start;\n\n &.hidden {\n @include cat-visually-hidden;\n }\n}\n\n.input-optional {\n margin-left: 0.25rem;\n @include cat-body('xs');\n color: cat-token('color.ui.font.muted');\n}\n\n.text-prefix,\n.text-suffix {\n display: inline-flex;\n align-items: center;\n @include cat-select(none);\n}\n\n.text-prefix {\n border-right: 1px solid cat-token('color.ui.border.dark');\n padding-right: 0.75rem;\n}\n\n.text-suffix {\n border-left: 1px solid cat-token('color.ui.border.dark');\n padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n align-self: center;\n}\n\n.input-inner-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n flex: 1 1 auto;\n}\n\ninput {\n font: inherit;\n margin: 0;\n padding: 0;\n width: 100%;\n min-width: 0;\n border: none;\n outline: none;\n background: none;\n\n .input-disabled & {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n }\n\n &.has-clearable {\n padding-right: 1.5rem;\n }\n\n &::placeholder {\n color: cat-token('color.ui.font.muted');\n }\n}\n\n.clearable {\n position: absolute;\n top: calc(50% - 1rem);\n right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/*\n Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n \n @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n /\n@Component({\n tag: 'cat-input',\n styleUrl: 'cat-input.scss',\n shadow: true\n})\nexport class CatInput {\n private readonly _id = `cat-input-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Hint for form autofill feature.\n /\n @Prop() autoComplete?: string;\n\n /\n Whether the input should show a clear button.\n /\n @Prop() clearable = false;\n\n /\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n Optional hint text(s) to be displayed with the input.\n /\n @Prop() hint?: string \| string[];\n\n /\n The name of an icon to be displayed in the input.\n /\n @Prop() icon?: string;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label for the input.\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n A maximum value for date, time and numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for date, time and numeric values.\n /\n @Prop() min?: number \| string;\n\n /\n A minimum length (number of characters) for textual values.\n /\n @Prop() minLength?: number;\n\n /\n The name of the form control. Submitted with the form as part of a name/value pair.\n /\n @Prop() name?: string;\n\n /\n The placeholder text to display within the input.\n /\n @Prop() placeholder?: string;\n\n /\n A textual prefix to be displayed in the input.\n /\n @Prop() textPrefix?: string;\n\n /\n A textual suffix to be displayed in the input.\n /\n @Prop() textSuffix?: string;\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n A value is required or must be check for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Use round input edges.\n /\n @Prop() round = false;\n\n /\n Type of form control.\n /\n @Prop() type: InputType = 'text';\n\n /\n The value of the control.\n /\n @Prop({ mutable: true }) value?: string \| number;\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the input received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on input', this);\n }\n }\n\n /\n Programmatically move focus to the input. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /\n Programmatically remove focus from the input. Use this method instead of\n * `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the input.\n /\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\n }\n\n /\n Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n }\n\n render() {\n return (\n <Host>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n <span part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </span>\n </label>\n )}\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-disabled': this.disabled\n }}\n onClick={() => this.input.focus()}\n >\n {this.textPrefix && (\n <span class=\"text-prefix\" part=\"prefix\">\n {this.textPrefix}\n </span>\n )}\n {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n <div class=\"input-inner-wrapper\">\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled\n }}\n autocomplete={this.autoComplete}\n disabled={this.disabled}\n max={this.max}\n maxlength={this.maxLength}\n min={this.min}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n ></input>\n {this.clearable && !this.disabled && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"cross-circle-outlined\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n ></cat-button>\n )}\n </div>\n {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n {this.hintSection}\n </Host>\n );\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint \|\| hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onInput(event: Event) {\n this.value = this.input.value;\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"],"version":3}

package/dist/components/cat-label.js CHANGED Viewed

@@ -8,6 +8,10 @@ const CatLabel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
+    /**
+     * Whether the label need a marker to shown if the input is required or optional.
+     */
+    this.requiredMarker = 'optional';
     /**
      * A value is required or must be check for the form to be submittable.
      */
@@ -21,7 +25,7 @@ const CatLabel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.for, onClick: this.onClick.bind(this) }, h("slot", null), !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")))));
+    return (h(Host, null, h("label", { htmlFor: this.for, onClick: this.onClick.bind(this) }, h("slot", null), !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")))));
   }
   findShadowTarget(id) {
     var _a;
@@ -38,6 +42,7 @@ const CatLabel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   static get style() { return catLabelCss; }
 }, [1, "cat-label", {
+    "requiredMarker": [1, "required-marker"],
     "for": [1],
     "required": [4]
   }]);

package/dist/components/cat-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-label.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,wQAAwQ;;MCW/QA,UAAQ;EALrB;;;;;;;~~IAuBU~~,aAAQ,GAAG,KAAK,CAAC;~~GAoC1B~~;~~EAlCC~~,OAAO;;IACL,IAAI,IAAI,CAAC,GAAG,EAAE;;MAEZ,OAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;KACjF;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IACxD,eAAa,EACZ,CAAC,IAAI,CAAC,QAAQ,~~KACb~~,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM,SAC3CC,eAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,MACrB,CACR,CACK,CACH,EACP;GACH;EAEO,gBAAgB,CAAC,EAAU;;IACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAGD,UAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAACA,UAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;MACxE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,0CAAE,cAAc,CAAC,EAAE,CAAC,CAAC;QACvD,IAAI,MAAM,EAAE;UACV,OAAO,MAAM,CAAC;SACf;OACF;KACF;IACD,OAAO,IAAI,CAAC;GACb~~;;;;;;AApDuBA~~,yBAAc,GAAG;EACvC,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,WAAW;EACX,YAAY;CACZ,CAAA;;;;;;;;;;;;;;;;;;;;","names":["CatLabel","i18n"],"sources":["./src/components/cat-label/cat-label.scss?tag=cat-label&encapsulation=shadow","./src/components/cat-label/cat-label.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n\n:host {\n display: inline-flex;\n align-items: center;\n min-height: 2.5rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-optional {\n margin-left: 0.25rem;\n @include cat-body('xs');\n color: cat-token('color.ui.font.muted');\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/*\n Labels are used to provide a short description of an input or form element.\n /\n@Component({\n tag: 'cat-label',\n styleUrl: 'cat-label.scss',\n shadow: true\n})\nexport class CatLabel {\n private static readonly SHADOW_TARGETS = [\n 'CAT-INPUT',\n 'CAT-TEXTAREA',\n 'CAT-CHECKBOX',\n 'CAT-TOGGLE',\n 'CAT-RADIO',\n 'CAT-SELECT'\n ];\n\n /\n The unique identifier for a referenced input.\n /\n @Prop() for?: string;\n\n /\n A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n onClick() {\n if (this.for) {\n // focus target that is possibly hidden inside a shadow root\n (document.getElementById(this.for) \|\| this.findShadowTarget(this.for))?.focus();\n }\n }\n\n render() {\n return (\n <Host>\n <label htmlFor={this.for} onClick={this.onClick.bind(this)}>\n <slot></slot>\n {!this.required && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n </label>\n </Host>\n );\n }\n\n private findShadowTarget(id: string): HTMLElement \| null {\n for (let i = 0; i < CatLabel.SHADOW_TARGETS.length; i++) {\n const elems = document.getElementsByTagName(CatLabel.SHADOW_TARGETS[i]);\n for (let i = 0; i < elems.length; i++) {\n const target = elems[i].shadowRoot?.getElementById(id);\n if (target) {\n return target;\n }\n }\n }\n return null;\n }\n}\n"],"version":3}
1	+ {"file":"cat-label.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,wQAAwQ;;MCW/QA,UAAQ;EALrB;;;;;;;IAkBU,mBAAc,GAA2E,UAAU,CAAC;;;;IAUpG,aAAQ,GAAG,KAAK,CAAC;GAyC1B;EAvCC,OAAO;;IACL,IAAI,IAAI,CAAC,GAAG,EAAE;;MAEZ,OAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;KACjF;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IACxD,eAAa,EACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,KAC3D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM,SAC3CC,eAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,MACrB,CACR,EACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,KAC1D,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM,SAC3CA,eAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,MACrB,CACR,CACK,CACH,EACP;GACH;EAEO,gBAAgB,CAAC,EAAU;;IACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAGD,UAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAACA,UAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;MACxE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,0CAAE,cAAc,CAAC,EAAE,CAAC,CAAC;QACvD,IAAI,MAAM,EAAE;UACV,OAAO,MAAM,CAAC;SACf;OACF;KACF;IACD,OAAO,IAAI,CAAC;GACb;;;;;;;AA9DuBA,yBAAc,GAAG;EACvC,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,WAAW;EACX,YAAY;CACZ,CAAA;;;;;;;;;;;;;;;;;;;;","names":["CatLabel","i18n"],"sources":["./src/components/cat-label/cat-label.scss?tag=cat-label&encapsulation=shadow","./src/components/cat-label/cat-label.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n\n:host {\n display: inline-flex;\n align-items: center;\n min-height: 2.5rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-optional {\n margin-left: 0.25rem;\n @include cat-body('xs');\n color: cat-token('color.ui.font.muted');\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/*\n Labels are used to provide a short description of an input or form element.\n /\n@Component({\n tag: 'cat-label',\n styleUrl: 'cat-label.scss',\n shadow: true\n})\nexport class CatLabel {\n private static readonly SHADOW_TARGETS = [\n 'CAT-INPUT',\n 'CAT-TEXTAREA',\n 'CAT-CHECKBOX',\n 'CAT-TOGGLE',\n 'CAT-RADIO',\n 'CAT-SELECT'\n ];\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n The unique identifier for a referenced input.\n /\n @Prop() for?: string;\n\n /\n A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n onClick() {\n if (this.for) {\n // focus target that is possibly hidden inside a shadow root\n (document.getElementById(this.for) \|\| this.findShadowTarget(this.for))?.focus();\n }\n }\n\n render() {\n return (\n <Host>\n <label htmlFor={this.for} onClick={this.onClick.bind(this)}>\n <slot></slot>\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </label>\n </Host>\n );\n }\n\n private findShadowTarget(id: string): HTMLElement \| null {\n for (let i = 0; i < CatLabel.SHADOW_TARGETS.length; i++) {\n const elems = document.getElementsByTagName(CatLabel.SHADOW_TARGETS[i]);\n for (let i = 0; i < elems.length; i++) {\n const target = elems[i].shadowRoot?.getElementById(id);\n if (target) {\n return target;\n }\n }\n }\n return null;\n }\n}\n"],"version":3}

package/dist/components/cat-select-demo.js CHANGED Viewed

@@ -139,7 +139,7 @@ const CatSelectTest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
   }
   render() {
-    return (h(Host, { style: { display: 'flex', flexDirection: 'column' } }, h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), h("cat-dropdown", { overflow: true, noAutoClose: true }, h("cat-button", { slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { slot: "content", style: { width: '400px' } }, h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true, style: { width: '90%' } })))));
+    return (h(Host, { style: { display: 'flex', flexDirection: 'column' } }, h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true }, h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), h("cat-dropdown", { overflow: true, noAutoClose: true }, h("cat-button", { slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { slot: "content", style: { width: '400px' } }, h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true, style: { width: '90%' } })))));
   }
   get countryConnector() {
     return {