npm - @haiilo/catalyst - Versions diffs - 10.4.0 → 10.7.0 - Mend

@haiilo/catalyst 10.4.0 → 10.7.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 (156) hide show

package/dist/components/cat-form-group.js CHANGED Viewed

@@ -23,7 +23,7 @@ const CatFormGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatFormGroup exten
         });
     }
     render() {
-        return (h(Host, { key: 'd9805ae9997123327fa6259d9e849dff68576b31', style: { '--label-size': this.labelSize } }, h("slot", { key: 'e7e254cf202b8ee8a219ec077e659fde18db3530', onSlotchange: this.onSlotChange.bind(this) })));
+        return (h(Host, { key: '6892a4f36f418d431b6006518c44bf2b58e70f70', style: { '--label-size': this.labelSize } }, h("slot", { key: '908b2720b504ce9dfb3a491aa3bbe092a3d2e0cf', onSlotchange: this.onSlotChange.bind(this) })));
     }
     onSlotChange() {
         this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker'));

package/dist/components/cat-form-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-form-group.js","mappings":";;AAAA,MAAM,eAAe,GAAG,sBAAsB,CAAC;AAC/C,2BAAe,eAAe;;~~MCYjBA~~,cAAY;;;;;QACf,iBAAY,GAA8B,EAAE,CAAC;8BAWe,MAAM;0BAKrD,KAAK;;;IAQ1B,uBAAuB,CAAC,iBAA4D;QAClF,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,iBAAiB,CAAC;QAC1G,IAAI,CAAC,YAAY,CAAC,OAAO,CACvB,OAAO,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC,cAAc,GAAG,YAAY,CAAC,CAC7F,CAAC;KACH;IAGD,mBAAmB,CAAC,aAAsB;QACxC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO;YAC/B,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC;SACpC,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,IAC7C,6DAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,EACP;KACH;IAEO,YAAY;QAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qDAAqD,CAAC,CAC5D,CAAC;QAC/B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C;IAEO,SAAS,CAAC,QAAmC;QACnD,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;QACxE,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;QACxD,OAAO,cAAc,IAAI,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC;KACnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatFormGroup"],"sources":["src/components/cat-form-group/cat-form-group.scss?tag=cat-form-group&encapsulation=shadow","src/components/cat-form-group/cat-form-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\ntype HTMLCatFormFieldElement =\n \| HTMLCatInputElement\n \| HTMLCatTextareaElement\n \| HTMLCatSelectElement\n \| HTMLCatDatepickerElement;\n\n@Component({\n tag: 'cat-form-group',\n styleUrl: 'cat-form-group.scss',\n shadow: true\n})\nexport class CatFormGroup {\n private formElements: HTMLCatFormFieldElement[] = [];\n\n @Element() hostElement!: HTMLElement;\n\n /*\n Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\n * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n * - If there are more required, the optional will be marked.<br />\n * - If there are less required, it will mark the required.<br /><br />\n * If a form field had \"!\", the requiredMarked of the field would not change.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'auto' = 'auto';\n\n /\n Whether the label is on top or left.\n /\n @Prop() horizontal = false;\n\n /\n The space allocated to the input label\n */\n @Prop() labelSize?: string;\n\n @Watch('requiredMarker')\n onRequiredMarkerChanged(newRequiredMarker: 'none' \| 'required' \| 'optional' \| 'auto') {\n const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;\n this.formElements.forEach(\n element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker)\n );\n }\n\n @Watch('horizontal')\n onHorizontalChanged(newHorizontal: boolean) {\n this.formElements.forEach(element => {\n element.horizontal = newHorizontal;\n });\n }\n\n render() {\n return (\n <Host style={{ '--label-size': this.labelSize }}>\n <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n </Host>\n );\n }\n\n private onSlotChange(): void {\n this.formElements = Array.from(\n this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker')\n ) as HTMLCatFormFieldElement[];\n this.onRequiredMarkerChanged(this.requiredMarker);\n this.onHorizontalChanged(this.horizontal);\n }\n\n private calculate(elements: HTMLCatFormFieldElement[]): 'optional' \| 'required' {\n const optionalFields = elements.filter(value => !value.required).length;\n const requiredFields = elements.length - optionalFields;\n return requiredFields >= optionalFields ? 'optional' : 'required';\n }\n}\n"],"version":3}
1	+ {"file":"cat-form-group.js","mappings":";;AAAA,MAAM,eAAe,GAAG,sBAAsB,CAAC;AAC/C,2BAAe,eAAe;;MCejBA,cAAY;;;;;QACf,iBAAY,GAA8B,EAAE,CAAC;8BAWe,MAAM;0BAKrD,KAAK;;;IAQ1B,uBAAuB,CAAC,iBAA4D;QAClF,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,iBAAiB,CAAC;QAC1G,IAAI,CAAC,YAAY,CAAC,OAAO,CACvB,OAAO,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC,cAAc,GAAG,YAAY,CAAC,CAC7F,CAAC;KACH;IAGD,mBAAmB,CAAC,aAAsB;QACxC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO;YAC/B,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC;SACpC,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,IAC7C,6DAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,EACP;KACH;IAEO,YAAY;QAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qDAAqD,CAAC,CAC5D,CAAC;QAC/B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C;IAEO,SAAS,CAAC,QAAmC;QACnD,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;QACxE,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;QACxD,OAAO,cAAc,IAAI,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC;KACnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatFormGroup"],"sources":["src/components/cat-form-group/cat-form-group.scss?tag=cat-form-group&encapsulation=shadow","src/components/cat-form-group/cat-form-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\ntype HTMLCatFormFieldElement =\n \| HTMLCatInputElement\n \| HTMLCatTextareaElement\n \| HTMLCatSelectElement\n \| HTMLCatDatepickerElement;\n\n/*\n A form group component to group form fields and labels.\n /\n@Component({\n tag: 'cat-form-group',\n styleUrl: 'cat-form-group.scss',\n shadow: true\n})\nexport class CatFormGroup {\n private formElements: HTMLCatFormFieldElement[] = [];\n\n @Element() hostElement!: HTMLElement;\n\n /\n Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\n * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n * - If there are more required, the optional will be marked.<br />\n * - If there are less required, it will mark the required.<br /><br />\n * If a form field had \"!\", the requiredMarked of the field would not change.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'auto' = 'auto';\n\n /\n Whether the label is on top or left.\n /\n @Prop() horizontal = false;\n\n /\n The space allocated to the input label\n */\n @Prop() labelSize?: string;\n\n @Watch('requiredMarker')\n onRequiredMarkerChanged(newRequiredMarker: 'none' \| 'required' \| 'optional' \| 'auto') {\n const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;\n this.formElements.forEach(\n element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker)\n );\n }\n\n @Watch('horizontal')\n onHorizontalChanged(newHorizontal: boolean) {\n this.formElements.forEach(element => {\n element.horizontal = newHorizontal;\n });\n }\n\n render() {\n return (\n <Host style={{ '--label-size': this.labelSize }}>\n <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n </Host>\n );\n }\n\n private onSlotChange(): void {\n this.formElements = Array.from(\n this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker')\n ) as HTMLCatFormFieldElement[];\n this.onRequiredMarkerChanged(this.requiredMarker);\n this.onHorizontalChanged(this.horizontal);\n }\n\n private calculate(elements: HTMLCatFormFieldElement[]): 'optional' \| 'required' {\n const optionalFields = elements.filter(value => !value.required).length;\n const requiredFields = elements.length - optionalFields;\n return requiredFields >= optionalFields ? 'optional' : 'required';\n }\n}\n"],"version":3}

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

@@ -1,5 +1,11 @@
 import { l as log } from './loglevel.js';
+/**
+ * A registry for lightweight internationalization (i18n) in applications using
+ * the Catalyst design system. The registry stores translations and provides
+ * methods for setting the locale, registering translations, and retrieving
+ * translated messages.
+ */
 class CatI18nRegistry {
     constructor() {
         // hide constructor

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

	@@ -1 +1 @@
1	- {"file":"cat-i18n-registry.js","mappings":";;~~MAIa~~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","names":[],"sources":["src/components/cat-i18n/cat-i18n-registry.ts"],"sourcesContent":["import log from 'loglevel';\n\nexport type CatI18nTranslationFn = (key: string, params?: unknown) => string;\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 _locale?: string;\n private _translator?: CatI18nTranslationFn;\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-setLocale', event => {\n const { detail } = (event as CustomEvent) \|\| {};\n if (detail && detail.id !== this.id) {\n this.setLocale(detail.locale, true);\n }\n });\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 getLocale(): string {\n return this._locale ?? window?.navigator?.language ?? 'en';\n }\n\n setLocale(locale: string, silent = false): void {\n try {\n this._locale = Intl.getCanonicalLocales(locale)[0];\n log.info(`[CatI18nRegistry::${this.id}] Set locale: ${this._locale}`);\n !silent && window.dispatchEvent(this.buildEvent('cat-i18n-setLocale', { locale, id: this.id }));\n } catch (err) {\n log.error(`[CatI18nRegistry::${this.id}] Invalid locale: ${locale}`);\n }\n }\n\n set(i18n: { [key: string]: string } \| CatI18nTranslationFn, silent = false): void {\n if (typeof i18n === 'function') {\n this._translator = i18n;\n log.info(`[CatI18nRegistry::${this.id}] Registered translator`);\n } else {\n const i18nEntries = Object.entries(i18n);\n i18nEntries.forEach(([key, message]) => this.i18n.set(key, message));\n log.info(`[CatI18nRegistry::${this.id}] Registered ${i18nEntries.length !== 1 ? 'messages' : 'message'}`);\n }\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::${this.id}] Cleared messages`);\n !silent && window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n }\n\n t(key: string, params?: { [key: string]: unknown }): string {\n const message =\n this._translator?.(key, params) ??\n this.i18n.get(key)?.replace(/{{\\s([-a-zA-Z._]+)\\s}}/g, (_match, key) => `${params?.[key] ?? ''}`);\n if (message === undefined) {\n log.error(`[CatI18nRegistry::${this.id}] Unknown message key: ${key}`);\n return key;\n }\n return message;\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":"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","names":[],"sources":["src/components/cat-i18n/cat-i18n-registry.ts"],"sourcesContent":["import log from 'loglevel';\n\nexport type CatI18nTranslationFn = (key: string, params?: unknown) => string;\n\n/*\n A registry for lightweight internationalization (i18n) in applications using\n * the Catalyst design system. The registry stores translations and provides\n * methods for setting the locale, registering translations, and retrieving\n * translated messages.\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 _locale?: string;\n private _translator?: CatI18nTranslationFn;\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-setLocale', event => {\n const { detail } = (event as CustomEvent) \|\| {};\n if (detail && detail.id !== this.id) {\n this.setLocale(detail.locale, true);\n }\n });\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 getLocale(): string {\n return this._locale ?? window?.navigator?.language ?? 'en';\n }\n\n setLocale(locale: string, silent = false): void {\n try {\n this._locale = Intl.getCanonicalLocales(locale)[0];\n log.info(`[CatI18nRegistry::${this.id}] Set locale: ${this._locale}`);\n !silent && window.dispatchEvent(this.buildEvent('cat-i18n-setLocale', { locale, id: this.id }));\n } catch (err) {\n log.error(`[CatI18nRegistry::${this.id}] Invalid locale: ${locale}`);\n }\n }\n\n set(i18n: { [key: string]: string } \| CatI18nTranslationFn, silent = false): void {\n if (typeof i18n === 'function') {\n this._translator = i18n;\n log.info(`[CatI18nRegistry::${this.id}] Registered translator`);\n } else {\n const i18nEntries = Object.entries(i18n);\n i18nEntries.forEach(([key, message]) => this.i18n.set(key, message));\n log.info(`[CatI18nRegistry::${this.id}] Registered ${i18nEntries.length !== 1 ? 'messages' : 'message'}`);\n }\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::${this.id}] Cleared messages`);\n !silent && window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n }\n\n t(key: string, params?: { [key: string]: unknown }): string {\n const message =\n this._translator?.(key, params) ??\n this.i18n.get(key)?.replace(/{{\\s([-a-zA-Z._]+)\\s*}}/g, (_match, key) => `${params?.[key] ?? ''}`);\n if (message === undefined) {\n log.error(`[CatI18nRegistry::${this.id}] Unknown message key: ${key}`);\n return key;\n }\n return message;\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-icon-registry.js CHANGED Viewed

@@ -47,6 +47,8 @@ class CatIconRegistry {
         // hide constructor
         this.id = (Math.random() + 1).toString(36).substring(2);
         this.icons = new Map();
+        // ignore syncing in backwards compatible manner
+        this.syncIcons = true;
         // register default icons that are used in the framework by other components
         this.addIcons({
             'alert-primary': starCircleFilled,
@@ -81,13 +83,13 @@ class CatIconRegistry {
         // this registry.
         window.addEventListener('cat-icons-added', event => {
             const { detail } = event || {};
-            if (detail && detail.id !== this.id) {
+            if (this.syncIcons && 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) {
+            if (this.syncIcons && detail && detail.id !== this.id) {
                 this.removeIcons(detail.names, detail.setName, true);
             }
         });

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

	@@ -1 +1 @@
1	- {"file":"cat-icon-registry.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAuBa,eAAe;~~IAM1B~~;;~~QAHiB~~,OAAE,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QACnD,UAAK,GAAwB,IAAI,GAAG,EAAE,CAAC;;~~QAMtD~~,IAAI,CAAC,QAAQ,CACX;YACE,eAAe,EAAE,gBAAgB;YACjC,iBAAiB,EAAE,WAAW;YAC9B,YAAY,EAAE,gBAAgB;YAC9B,eAAe,EAAE,iBAAiB;YAClC,eAAe,EAAE,YAAY;YAC7B,cAAc,EAAE,iBAAiB;YACjC,uBAAuB,EAAE,aAAa;YACtC,uBAAuB,EAAE,cAAc;YACvC,sBAAsB,EAAE,mBAAmB;YAC3C,sBAAsB,EAAE,oBAAoB;YAC5C,qBAAqB,EAAE,gBAAgB;YACvC,kBAAkB,EAAE,aAAa;YACjC,cAAc,EAAE,aAAa;YAC7B,aAAa,EAAE,mBAAmB;YAClC,aAAa,EAAE,mBAAmB;YAClC,qBAAqB,EAAE,eAAe;YACtC,qBAAqB,EAAE,iBAAiB;YACxC,oBAAoB,EAAE,mBAAmB;YACzC,iBAAiB,EAAE,mBAAmB;YACtC,kBAAkB,EAAE,oBAAoB;YACxC,cAAc,EAAE,OAAO;YACvB,aAAa,EAAE,mBAAmB;SACnC,EACD,MAAM,EACN,IAAI,CACL,CAAC;;;;;;;;QASF,MAAM,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,KAAK;YAC9C,MAAM,EAAE,MAAM,EAAE,GAAI,KAAqB,IAAI,EAAE,CAAC;YAChD,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;~~gBACnC~~,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;aACnD;SACF,CAAC,CAAC;QACH,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,KAAK;YAChD,MAAM,EAAE,MAAM,EAAE,GAAI,KAAqB,IAAI,EAAE,CAAC;YAChD,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;~~gBACnC~~,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;aACtD;SACF,CAAC,CAAC;KACJ;IAED,OAAO,WAAW;QAChB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE;YAC7B,eAAe,CAAC,QAAQ,GAAG,IAAI,eAAe,EAAE,CAAC;SAClD;QACD,OAAO,eAAe,CAAC,QAAQ,CAAC;KACjC;IAED,OAAO,CAAC,IAAY,EAAE,OAAgB;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;QAC3D,IAAI,CAAC,IAAI,EAAE;YACT,GAAG,CAAC,KAAK,CAAC,qBAAqB,IAAI,CAAC,EAAE,iBAAiB,OAAO,GAAG,WAAW,OAAO,EAAE,GAAG,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;SACxG;QACD,OAAO,IAAI,CAAC;KACb;IAED,QAAQ,CAAC,KAAiC,EAAE,OAAgB,EAAE,MAAM,GAAG,KAAK;QAC1E,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC1C,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC;QACpC,WAAW,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;QAC3F,GAAG,CAAC,IAAI,CACN,qBAAqB,IAAI,CAAC,EAAE,WAAW,QAAQ,KAAK,CAAC,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,OAAO,EAAE,GAAG,EAAE,EAAE,CACjH,CAAC;QACF,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QACrG,OAAO,IAAI,CAAC;KACb;IAED,WAAW,CAAC,KAAe,EAAE,OAAgB,EAAE,MAAM,GAAG,KAAK;QAC3D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;QAC9B,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;QACxE,GAAG,CAAC,IAAI,CACN,qBAAqB,IAAI,CAAC,EAAE,aAAa,QAAQ,KAAK,CAAC,GAAG,OAAO,GAAG,MAAM,GACxE,OAAO,GAAG,aAAa,OAAO,EAAE,GAAG,EACrC,EAAE,CACH,CAAC;QACF,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,mBAAmB,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QACvG,OAAO,IAAI,CAAC;KACb;IAEO,SAAS,CAAC,IAAY,EAAE,OAAgB;QAC9C,OAAO,OAAO,GAAG,GAAG,OAAO,IAAI,IAAI,EAAE,GAAG,IAAI,CAAC;KAC9C;IAEO,UAAU,CAAI,IAAY,EAAE,MAAU;QAC5C,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;YAC3B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM;SACP,CAAC,CAAC;KACJ;CACF;MAEY,eAAe,GAAG,eAAe,CAAC,WAAW;;;;","names":[],"sources":["src/components/cat-icon/cat-icon-registry.ts"],"sourcesContent":["import chevronDoubleLeft16 from '@haiilo/catalyst-icons/src/16-chevron-double-left.svg';\nimport chevronDoubleRight16 from '@haiilo/catalyst-icons/src/16-chevron-double-right.svg';\nimport chevronLeft16 from '@haiilo/catalyst-icons/src/16-chevron-left.svg';\nimport chevronRight16 from '@haiilo/catalyst-icons/src/16-chevron-right.svg';\nimport cross16 from '@haiilo/catalyst-icons/src/16-cross.svg';\nimport alertCircleOutlined from '@haiilo/catalyst-icons/src/alert-circle-outlined.svg';\nimport calendarOutlined from '@haiilo/catalyst-icons/src/calendar-outlined.svg';\nimport checkCircleFilled from '@haiilo/catalyst-icons/src/check-circle-filled.svg';\nimport chevronDownOutlined from '@haiilo/catalyst-icons/src/chevron-down-outlined.svg';\nimport chevronLeftOutlined from '@haiilo/catalyst-icons/src/chevron-left-outlined.svg';\nimport chevronRightOutlined from '@haiilo/catalyst-icons/src/chevron-right-outlined.svg';\nimport clockFilled from '@haiilo/catalyst-icons/src/clock-filled.svg';\nimport clockOutlined from '@haiilo/catalyst-icons/src/clock-outlined.svg';\nimport crossCircleFilled from '@haiilo/catalyst-icons/src/cross-circle-filled.svg';\nimport crossCircleOutlined from '@haiilo/catalyst-icons/src/cross-circle-outlined.svg';\nimport crossOutlined from '@haiilo/catalyst-icons/src/cross-outlined.svg';\nimport dangerFilled from '@haiilo/catalyst-icons/src/danger-filled.svg';\nimport eyeClosedOutlined from '@haiilo/catalyst-icons/src/eye-closed-outlined.svg';\nimport eyeOpenOutlined from '@haiilo/catalyst-icons/src/eye-open-outlined.svg';\nimport infoCircleFilled from '@haiilo/catalyst-icons/src/info-circle-filled.svg';\nimport starCircleFilled from '@haiilo/catalyst-icons/src/star-circle-filled.svg';\nimport 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 // register default icons that are used in the framework by other components\n this.addIcons(\n {\n 'alert-primary': starCircleFilled,\n 'alert-secondary': clockFilled,\n 'alert-info': infoCircleFilled,\n 'alert-success': checkCircleFilled,\n 'alert-warning': dangerFilled,\n 'alert-danger': crossCircleFilled,\n 'datepicker-month-prev': chevronLeft16,\n 'datepicker-month-next': chevronRight16,\n 'datepicker-year-prev': chevronDoubleLeft16,\n 'datepicker-year-next': chevronDoubleRight16,\n 'datepicker-calendar': calendarOutlined,\n 'timepicker-clock': clockOutlined,\n 'dialog-close': crossOutlined,\n 'input-close': crossCircleOutlined,\n 'input-error': alertCircleOutlined,\n 'input-password-show': eyeOpenOutlined,\n 'input-password-hide': eyeClosedOutlined,\n 'notification-close': crossCircleOutlined,\n 'pagination-left': chevronLeftOutlined,\n 'pagination-right': chevronRightOutlined,\n 'select-clear': cross16,\n 'select-open': chevronDownOutlined\n },\n '$cat',\n true\n );\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::${this.id}] 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(\n `[CatIconRegistry::${this.id}] Added ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` to set ${setName}` : ''}`\n );\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(\n `[CatIconRegistry::${this.id}] Removed ${iconSize !== 1 ? 'icons' : 'icon'}${\n setName ? ` from set ${setName}` : ''\n }`\n );\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"],"version":3}
1	+ {"file":"cat-icon-registry.js","mappings":"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","names":[],"sources":["src/components/cat-icon/cat-icon-registry.ts"],"sourcesContent":["import chevronDoubleLeft16 from '@haiilo/catalyst-icons/src/16-chevron-double-left.svg';\nimport chevronDoubleRight16 from '@haiilo/catalyst-icons/src/16-chevron-double-right.svg';\nimport chevronLeft16 from '@haiilo/catalyst-icons/src/16-chevron-left.svg';\nimport chevronRight16 from '@haiilo/catalyst-icons/src/16-chevron-right.svg';\nimport cross16 from '@haiilo/catalyst-icons/src/16-cross.svg';\nimport alertCircleOutlined from '@haiilo/catalyst-icons/src/alert-circle-outlined.svg';\nimport calendarOutlined from '@haiilo/catalyst-icons/src/calendar-outlined.svg';\nimport checkCircleFilled from '@haiilo/catalyst-icons/src/check-circle-filled.svg';\nimport chevronDownOutlined from '@haiilo/catalyst-icons/src/chevron-down-outlined.svg';\nimport chevronLeftOutlined from '@haiilo/catalyst-icons/src/chevron-left-outlined.svg';\nimport chevronRightOutlined from '@haiilo/catalyst-icons/src/chevron-right-outlined.svg';\nimport clockFilled from '@haiilo/catalyst-icons/src/clock-filled.svg';\nimport clockOutlined from '@haiilo/catalyst-icons/src/clock-outlined.svg';\nimport crossCircleFilled from '@haiilo/catalyst-icons/src/cross-circle-filled.svg';\nimport crossCircleOutlined from '@haiilo/catalyst-icons/src/cross-circle-outlined.svg';\nimport crossOutlined from '@haiilo/catalyst-icons/src/cross-outlined.svg';\nimport dangerFilled from '@haiilo/catalyst-icons/src/danger-filled.svg';\nimport eyeClosedOutlined from '@haiilo/catalyst-icons/src/eye-closed-outlined.svg';\nimport eyeOpenOutlined from '@haiilo/catalyst-icons/src/eye-open-outlined.svg';\nimport infoCircleFilled from '@haiilo/catalyst-icons/src/info-circle-filled.svg';\nimport starCircleFilled from '@haiilo/catalyst-icons/src/star-circle-filled.svg';\nimport 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 // ignore syncing in backwards compatible manner\n syncIcons: boolean = true;\n\n private constructor() {\n // hide constructor\n\n // register default icons that are used in the framework by other components\n this.addIcons(\n {\n 'alert-primary': starCircleFilled,\n 'alert-secondary': clockFilled,\n 'alert-info': infoCircleFilled,\n 'alert-success': checkCircleFilled,\n 'alert-warning': dangerFilled,\n 'alert-danger': crossCircleFilled,\n 'datepicker-month-prev': chevronLeft16,\n 'datepicker-month-next': chevronRight16,\n 'datepicker-year-prev': chevronDoubleLeft16,\n 'datepicker-year-next': chevronDoubleRight16,\n 'datepicker-calendar': calendarOutlined,\n 'timepicker-clock': clockOutlined,\n 'dialog-close': crossOutlined,\n 'input-close': crossCircleOutlined,\n 'input-error': alertCircleOutlined,\n 'input-password-show': eyeOpenOutlined,\n 'input-password-hide': eyeClosedOutlined,\n 'notification-close': crossCircleOutlined,\n 'pagination-left': chevronLeftOutlined,\n 'pagination-right': chevronRightOutlined,\n 'select-clear': cross16,\n 'select-open': chevronDownOutlined\n },\n '$cat',\n true\n );\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 (this.syncIcons && 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 (this.syncIcons && 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::${this.id}] 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(\n `[CatIconRegistry::${this.id}] Added ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` to set ${setName}` : ''}`\n );\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(\n `[CatIconRegistry::${this.id}] Removed ${iconSize !== 1 ? 'icons' : 'icon'}${\n setName ? ` from set ${setName}` : ''\n }`\n );\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"],"version":3}

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

@@ -15,7 +15,7 @@ const CatIcon = /*@__PURE__*/ proxyCustomElement(class CatIcon extends HTMLEleme
         this.a11yLabel = undefined;
     }
     render() {
-        return (h("span", { key: 'ace2ec39a623d9c8168269a5b4c46c4efef2fbc7', innerHTML: this.iconSrc || (this.icon ? catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+        return (h("span", { key: '66938702e645f5bc12ca9a4592af24ac46b40c52', innerHTML: this.iconSrc || (this.icon ? 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-input2.js CHANGED Viewed

@@ -1671,19 +1671,19 @@ const CatInput = /*@__PURE__*/ proxyCustomElement(class CatInput extends HTMLEle
         }
     }
     render() {
-        return (h("div", { key: 'aab57f9704562874b2dee392630c473fc31a33cb', class: {
+        return (h("div", { key: '34152d1627e62e4852531f9afdb2b0abc3894a78', class: {
                 'input-field': true,
                 'input-horizontal': this.horizontal
-            } }, h("div", { key: 'f599b443389362d9eb3ee72d496d225ca2a8bf8d', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, part: "label" }, h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), h("div", { key: 'ddce0aaa854e32ae4b8a8686a3886089beac6300', class: "input-container" }, h("div", { key: '25eb9aa776ba2cee97fb2bf79bc52d5c44c54b55', class: "input-outer-wrapper" }, h("div", { key: '7cd420c3525b8e15a7c0f2d8405cdd70f2e5291c', class: {
+            } }, h("div", { key: '89c3e91d9d041a68389e776f38647aa6360e5ea5', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, part: "label" }, h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), this.maxLength && (h("div", { class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), h("div", { key: 'ceed5e06d5bfb6eaf425c562422a6cb470c3dea4', class: "input-container" }, h("div", { key: 'bbd90f6b705d2e9213a45f5f7839370fce830c89', class: "input-outer-wrapper" }, h("div", { key: '7fa315fbb8421e0466d7bceba57c9f158d08c476', class: {
                 'input-wrapper': true,
                 'input-round': this.round,
                 'input-readonly': this.readonly,
                 'input-disabled': this.disabled,
                 'input-invalid': this.invalid
-            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: '7f0c24c572ddfb4a1f76457955b28c111c1b444a', class: "input-inner-wrapper" }, h("input", { key: 'fcef418a1eb7c5d54f47e239f8db0cf52f23d3f7', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: 'd8db1f7ab01afe94166fc4f6a6d37a595941c0e5', class: "input-inner-wrapper" }, h("input", { key: 'af383fe0a04ca8a41e9d9595ee4f422cebb5d99d', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
                 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
                 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
-            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: '3c3ff6368c631ae0634a7d0b875cb0d6a69edcba', name: "addon" })), this.hasHint && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
+            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: '5d318f9d6eeeebcef42b5d7abb000f0e51375303', name: "addon" })), this.hasHint && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;

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

@@ -25,9 +25,9 @@ const CatPagination$1 = /*@__PURE__*/ proxyCustomElement(class CatPagination ext
         this.iconNext = '$cat:pagination-right';
     }
     render() {
-        return (h("nav", { key: '113d4e757e003c8351efe53f8baeaffe28428c8f', role: "navigation" }, h("ol", { key: '15d86b0fd427abdd7f1af9ababb324806a746d05', class: {
+        return (h("nav", { key: 'ede4b30a483fb729428b8d2bfdd4d67b1b5f1022', role: "navigation" }, h("ol", { key: '04fd80b91e33c55a23d010e5fa108b10a08e2bdb', class: {
                 [`cat-pagination-${this.size}`]: Boolean(this.size)
-            } }, h("li", { key: 'b6e6dad6d903b65850cd33c15327386a61fde3d4' }, h("cat-button", { key: 'd32aa4a3af4aaae84b5d2de695deadf0852f4ae0', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: '19567f748e4f3976576ea1c894c2524865d6201a' }, h("cat-button", { key: '6170034891849aef2e248a1f531d86806aa4f4c1', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
+            } }, h("li", { key: 'cd98373b4a9a69b25e9df8185b808561336c9a75' }, h("cat-button", { key: 'ec601998cd4ba8a2007e1f1dcecad86f36633095', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: '8ff7654e0087ece5cb4f81205083ea8f13af7112' }, h("cat-button", { key: '3ca4cf8fa48d650472e20efc09cbed49b55d33bf', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
     }
     get isFirst() {
         return this.page === 0;

package/dist/components/cat-radio-group.js CHANGED Viewed

@@ -74,7 +74,7 @@ const CatRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatRadioGroup ext
         }
     }
     render() {
-        return (h("div", { key: '05f0e3dddf696ecc2de0ea7491011e9ce6cf7ce4', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: 'f67dc6e9f7e8410104626a1c5e54587d4cae51b0' })));
+        return (h("div", { key: '5608e54b1bb857a4068a6287b072bd71081d51d2', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: '8e62283745589e94e99650f7fe85afeea39fa253' })));
     }
     init() {
         this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { l as log } from './loglevel.js';
 import { C as CatFormHint } from './cat-form-hint.js';
-const catRadioCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}:host{display:flex;flex-direction:column;gap:0.5rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle-placeholder{width:calc(1.25rem + 1px);flex-shrink:0}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden;pointer-events:none}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 0, 129, 148))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host(.cat-error) input{border-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .circle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.is-disabled input{background-color:#f2f4f7}.is-disabled input:checked{border-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}.is-disabled .circle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}";
+const catRadioCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}:host{display:flex;flex-direction:column;gap:0.25rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle-placeholder{width:calc(1.25rem + 1px);flex-shrink:0}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden;pointer-events:none}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 0, 129, 148))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host(.cat-error) input{border-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .circle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.is-disabled input{background-color:#f2f4f7}.is-disabled input:checked{border-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}.is-disabled .circle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}";
 const CatRadioStyle0 = catRadioCss;
 let nextUniqueId = 0;
@@ -57,7 +57,7 @@ const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class CatRadio extends HTMLE
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: '9e3d983eeda3b42a67db73775cafcb9a5d98953a' }, h("label", { key: 'e2c5919edf0540000622a239b4acaa7704b2b3a8', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: '1f8d95c1728e910305c6ef827b6779b4642102d8', class: "radio" }, h("input", { key: 'd0217cd454023eb440ef4c2481899f30c15c340f', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '83a85842c187adf508cba7497d9e2a545163967b', class: "circle" })), h("span", { key: 'de6ed4d4a62b894406ec53380ac4949a265fe74b', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hasHint && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "circle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+        return (h(Host, { key: '1f5432c0800e82741e2786146b728403157eb874' }, h("label", { key: 'cac427f0f10635bd03a799d25ac0160b721cfcdb', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: '6a8598e54d46eb976717faf125c58a675b79ad99', class: "radio" }, h("input", { key: '7b5dea2ce070d83a1a1f16375d3d782f8b3d1459', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'e6f1802e164c2b74f84f413fd351ea6a9f10c9a2', class: "circle" })), h("span", { key: '95e951a221d6b36d980a6619fa501a409555e981', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hasHint && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "circle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;

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

	@@ -1 +1 @@
1	- {"file":"cat-radio.js","mappings":"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","names":["CatRadio"],"sources":["src/components/cat-radio/cat-radio.scss?tag=cat-radio&encapsulation=shadow","src/components/cat-radio/cat-radio.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$radio-width: 1.25rem;\n$radio-height: 1.25rem;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n display: flex;\n gap: 0.5rem;\n @include cat-body('m');\n cursor: pointer;\n}\n\n.label-left {\n flex-direction: row-reverse;\n}\n\n.radio {\n display: flex;\n position: relative;\n align-self: flex-start;\n}\n\n.circle-placeholder {\n width: calc($radio-width + 1px);\n flex-shrink: 0;\n}\n\n.circle {\n position: absolute;\n width: 0.75rem;\n height: 0.75rem;\n background-color: cat-token('color.theme.primary.bg');\n border-radius: 10rem;\n top: calc(50% - 0.375rem);\n left: calc(50% - 0.375rem);\n visibility: hidden;\n pointer-events: none;\n}\n\ninput {\n margin: 0;\n width: $radio-width;\n height: $radio-height;\n appearance: none;\n background-color: cat-token('color.ui.background.input');\n border: 1px solid cat-token('color.ui.border.dark');\n border-radius: 10rem;\n cursor: inherit;\n\n &:checked {\n border-color: cat-token('color.theme.primary.bg');\n\n + .circle {\n visibility: visible;\n }\n }\n\n &:focus-visible {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n}\n\n:host(.cat-error) {\n input {\n border-color: cat-token('color.theme.danger.bg');\n }\n\n .circle {\n background-color: cat-token('color.theme.danger.bg');\n }\n}\n\n.label {\n flex: 1 1 auto;\n\n .is-hidden & {\n @include cat-visually-hidden;\n }\n}\n\n.is-disabled {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n\n input {\n background-color: cat-token('color.ui.background.muted');\n\n &:checked {\n border-color: cat-token('color.ui.border.dark');\n }\n }\n\n .circle {\n background-color: cat-token('color.ui.border.dark');\n }\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';\n\nlet nextUniqueId = 0;\n\n/*\n Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n \n @slot hint - Optional hint element to be displayed with the radio.\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 input - The native input element.\n /\n@Component({\n tag: 'cat-radio',\n styleUrl: 'cat-radio.scss',\n shadow: true\n})\nexport class CatRadio {\n private readonly _id = `cat-radio-${++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 @State() hasSlottedHint = false;\n\n /\n Whether this radio is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Whether this radio is disabled.\n /\n @Prop() disabled = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label of the radio that is visible.\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 The name of the radio component.\n /\n @Prop() name?: string;\n\n /\n Whether the radio is required.\n /\n @Prop() required = false;\n\n /\n The value of the radio component.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop() value: any = '';\n\n /\n Optional hint text(s) to be displayed with the radio.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the radio component.\n /\n @Prop() labelLeft = false;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the radio is changed.\n /\n @Event() catChange!: EventEmitter<boolean \| string>;\n\n /\n Emitted when the radio received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the radio loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on radio', this);\n }\n }\n\n /\n Programmatically move focus to the radio button. 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 radio button. Use this method\n * instead of `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n render() {\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n >\n <span class=\"radio\">\n <input\n {...this.nativeAttributes}\n part=\"input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.identifier \|\| this.id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n />\n <span class=\"circle\"></span>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hasHint && (\n <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n <div class=\"circle-placeholder\"></div>\n <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n </div>\n )}\n </Host>\n );\n }\n\n private get hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint;\n }\n\n private onInput() {\n this.checked = true;\n this.catChange.emit(this.value);\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-radio.js","mappings":"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","names":["CatRadio"],"sources":["src/components/cat-radio/cat-radio.scss?tag=cat-radio&encapsulation=shadow","src/components/cat-radio/cat-radio.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$radio-width: 1.25rem;\n$radio-height: 1.25rem;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n display: flex;\n gap: 0.5rem;\n @include cat-body('m');\n cursor: pointer;\n}\n\n.label-left {\n flex-direction: row-reverse;\n}\n\n.radio {\n display: flex;\n position: relative;\n align-self: flex-start;\n}\n\n.circle-placeholder {\n width: calc($radio-width + 1px);\n flex-shrink: 0;\n}\n\n.circle {\n position: absolute;\n width: 0.75rem;\n height: 0.75rem;\n background-color: cat-token('color.theme.primary.bg');\n border-radius: 10rem;\n top: calc(50% - 0.375rem);\n left: calc(50% - 0.375rem);\n visibility: hidden;\n pointer-events: none;\n}\n\ninput {\n margin: 0;\n width: $radio-width;\n height: $radio-height;\n appearance: none;\n background-color: cat-token('color.ui.background.input');\n border: 1px solid cat-token('color.ui.border.dark');\n border-radius: 10rem;\n cursor: inherit;\n\n &:checked {\n border-color: cat-token('color.theme.primary.bg');\n\n + .circle {\n visibility: visible;\n }\n }\n\n &:focus-visible {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n}\n\n:host(.cat-error) {\n input {\n border-color: cat-token('color.theme.danger.bg');\n }\n\n .circle {\n background-color: cat-token('color.theme.danger.bg');\n }\n}\n\n.label {\n flex: 1 1 auto;\n\n .is-hidden & {\n @include cat-visually-hidden;\n }\n}\n\n.is-disabled {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n\n input {\n background-color: cat-token('color.ui.background.muted');\n\n &:checked {\n border-color: cat-token('color.ui.border.dark');\n }\n }\n\n .circle {\n background-color: cat-token('color.ui.border.dark');\n }\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';\n\nlet nextUniqueId = 0;\n\n/*\n Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n \n @slot hint - Optional hint element to be displayed with the radio.\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 input - The native input element.\n /\n@Component({\n tag: 'cat-radio',\n styleUrl: 'cat-radio.scss',\n shadow: true\n})\nexport class CatRadio {\n private readonly _id = `cat-radio-${++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 @State() hasSlottedHint = false;\n\n /\n Whether this radio is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Whether this radio is disabled.\n /\n @Prop() disabled = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label of the radio that is visible.\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 The name of the radio component.\n /\n @Prop() name?: string;\n\n /\n Whether the radio is required.\n /\n @Prop() required = false;\n\n /\n The value of the radio component.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop() value: any = '';\n\n /\n Optional hint text(s) to be displayed with the radio.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the radio component.\n /\n @Prop() labelLeft = false;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the radio is changed.\n /\n @Event() catChange!: EventEmitter<boolean \| string>;\n\n /\n Emitted when the radio received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the radio loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on radio', this);\n }\n }\n\n /\n Programmatically move focus to the radio button. 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 radio button. Use this method\n * instead of `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n render() {\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n >\n <span class=\"radio\">\n <input\n {...this.nativeAttributes}\n part=\"input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.identifier \|\| this.id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n />\n <span class=\"circle\"></span>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hasHint && (\n <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n <div class=\"circle-placeholder\"></div>\n <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n </div>\n )}\n </Host>\n );\n }\n\n private get hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint;\n }\n\n private onInput() {\n this.checked = true;\n this.catChange.emit(this.value);\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-scrollable2.js CHANGED Viewed

@@ -175,6 +175,7 @@ class AsyncAction extends Action {
         this.pending = false;
     }
     schedule(state, delay = 0) {
+        var _a;
         if (this.closed) {
             return this;
         }
@@ -186,7 +187,7 @@ class AsyncAction extends Action {
         }
         this.pending = true;
         this.delay = delay;
-        this.id = this.id || this.requestAsyncId(scheduler, this.id, delay);
+        this.id = (_a = this.id) !== null && _a !== void 0 ? _a : this.requestAsyncId(scheduler, this.id, delay);
         return this;
     }
     requestAsyncId(scheduler, _id, delay = 0) {
@@ -196,7 +197,9 @@ class AsyncAction extends Action {
         if (delay != null && this.delay === delay && this.pending === false) {
             return id;
         }
-        intervalProvider.clearInterval(id);
+        if (id != null) {
+            intervalProvider.clearInterval(id);
+        }
         return undefined;
     }
     execute(state, delay) {
@@ -259,7 +262,6 @@ class AsyncScheduler extends Scheduler {
         super(SchedulerAction, now);
         this.actions = [];
         this._active = false;
-        this._scheduled = undefined;
     }
     flush(action) {
         const { actions } = this;
@@ -603,13 +605,13 @@ const CatScrollable = /*@__PURE__*/ proxyCustomElement(class CatScrollable exten
     }
     render() {
         return [
-            h("div", { key: 'a665d0c5a252ffb60c451b47b19e58d720aa7cc5', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { class: "shadow-top" }), !this.noShadowX && h("div", { class: "shadow-left" }), !this.noShadowX && h("div", { class: "shadow-right" }), !this.noShadowY && h("div", { class: "shadow-bottom" })),
-            h("div", { key: 'b5148d1b4d36da8f58dfd1a9f5ee4f8281e7bf48', ref: el => (this.scrollElement = el), class: {
+            h("div", { key: 'b8d4abf49b6747e516f23bc4e16bbc1b7b9e2efe', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { class: "shadow-top" }), !this.noShadowX && h("div", { class: "shadow-left" }), !this.noShadowX && h("div", { class: "shadow-right" }), !this.noShadowY && h("div", { class: "shadow-bottom" })),
+            h("div", { key: '9552a4a4a86713effab40df3f95310dae5863f78', ref: el => (this.scrollElement = el), class: {
                     'scrollable-content': true,
                     'scroll-x': !this.noOverflowX,
                     'scroll-y': !this.noOverflowY,
                     'no-overscroll': this.noOverscroll
-                } }, h("slot", { key: '58770dc6389091b4fcd010b0ef867098bbdbd324' }))
+                } }, h("slot", { key: 'acc0afcb95539ad6db29c6a96b2673892f2d9153' }))
         ];
     }
     attachEmitter(from, emitter) {