npm - @haiilo/catalyst - Versions diffs - 6.0.3 → 6.1.1 - Mend

@haiilo/catalyst 6.0.3 → 6.1.1

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 (256) hide show

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const catFormGroupCss = ":host{display:block}";
-const CatFormGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const CatFormGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatFormGroup extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

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

	@@ -1 +1 @@
1	- {"file":"cat-form-group.js","mappings":";;AAAA,MAAM,eAAe,GAAG,sBAAsB;;MCajCA,cAAY;;;;;IACf,iBAAY,GAA8B,EAAE,CAAC;0BAWe,MAAM;sBAKrD,KAAK;;;EAQ1B,gBAAgB,CAAC,iBAA4D;IAC3E,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,iBAAiB,CAAC;IAC1G,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;GACH;EAGD,YAAY,CAAC,aAAsB;IACjC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO;MAC/B,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC;KACpC,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,IAC7C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,EACP;GACH;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qDAAqD,CAAC,CAC5D,CAAC;IAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;GACpC;EAEO,SAAS,CAAC,QAAmC;IACnD,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IACxE,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;IACxD,OAAO,cAAc,IAAI,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC;GACnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 onRequiredMarker(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 onHorizontal(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.onRequiredMarker(this.requiredMarker);\n this.onHorizontal(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;;MCajCA,cAAY;;;;;IACf,iBAAY,GAA8B,EAAE,CAAC;0BAWe,MAAM;sBAKrD,KAAK;;;EAQ1B,gBAAgB,CAAC,iBAA4D;IAC3E,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,iBAAiB,CAAC;IAC1G,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;GACH;EAGD,YAAY,CAAC,aAAsB;IACjC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO;MAC/B,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC;KACpC,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,IAC7C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,EACP;GACH;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qDAAqD,CAAC,CAC5D,CAAC;IAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;GACpC;EAEO,SAAS,CAAC,QAAmC;IACnD,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IACxE,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;IACxD,OAAO,cAAc,IAAI,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC;GACnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 onRequiredMarker(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 onHorizontal(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.onRequiredMarker(this.requiredMarker);\n this.onHorizontal(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-form-hint.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-form-hint.js","mappings":";;;AAoBA;;;;;;MAMa,WAAW,GAA0C,KAAK;EACrE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;EAClD,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;EAC9C,QACE,WAAK,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,KAAK,EAAC,cAAc,IACxC,MAAM,CAAC,MAAM;MACV,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,MACvB,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,IAAI,6BAA6B,IAAGA,eAAI,CAAC,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,MAAM,CAAC,CAAK,CACpG,CAAC;MACF;MACE,IAAI;SACD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAClB,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,IAAI,aAAa,IAAG,IAAI,CAAK,CAAC,KAE3E,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,IAAI,aAAa,IAAG,IAAI,CAAK,CAC1D,CAAC;MACJ,WAAW;KACZ,CACD,EACN;AACJ;;;;","names":["i18n"],"sources":["./src/components/cat-form-hint/cat-form-hint.tsx"],"sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ErrorMap = { [key: string]: any };\n\n/*\n Properties of CatFormHint.\n \n @property hint - Optional hint text(s) of the form field.\n * @property slottedHint - Optional hint element of the form field.\n /\ninterface CatFormHintProps {\n id: string;\n hint?: string \| string[];\n slottedHint?: HTMLSlotElement;\n class?: string;\n errorMap?: ErrorMap;\n}\n\n/\n CatFormHint is a functional component that represents the hint area of form elements.\n \n @param props - {@link CatFormHintProps}\n * @return a JSX.Element\n */\nexport const CatFormHint: FunctionalComponent<CatFormHintProps> = props => {\n const { id, hint, slottedHint, errorMap } = props;\n const errors = Object.entries(errorMap \|\| {});\n return (\n <div id={id + '-hint'} class=\"hint-section\">\n {errors.length\n ? errors.map(([key, params]) => (\n <p class={(props.class ?? '') + ' input-hint cat-text-danger'}>{i18n.t(`error.${key}`, params)}</p>\n ))\n : [\n hint &&\n (Array.isArray(hint) ? (\n hint.map(item => <p class={(props.class ?? '') + ' input-hint'}>{item}</p>)\n ) : (\n <p class={(props.class ?? '') + ' input-hint'}>{hint}</p>\n )),\n slottedHint\n ]}\n </div>\n );\n};\n"],"version":3}
1	+ {"file":"cat-form-hint.js","mappings":";;;AAoBA;;;;;;MAMa,WAAW,GAA0C,KAAK;EACrE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;EAClD,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;EAC9C,QACE,WAAK,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,KAAK,EAAC,cAAc,IACxC,MAAM,CAAC,MAAM;MACV,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,MACvB,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,IAAI,6BAA6B,IAAGA,eAAI,CAAC,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,MAAM,CAAC,CAAK,CACpG,CAAC;MACF;MACE,IAAI;SACD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAClB,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,IAAI,aAAa,IAAG,IAAI,CAAK,CAAC,KAE3E,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,IAAI,aAAa,IAAG,IAAI,CAAK,CAC1D,CAAC;MACJ,WAAW;KACZ,CACD,EACN;AACJ;;;;","names":["i18n"],"sources":["src/components/cat-form-hint/cat-form-hint.tsx"],"sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ErrorMap = { [key: string]: any };\n\n/*\n Properties of CatFormHint.\n \n @property hint - Optional hint text(s) of the form field.\n * @property slottedHint - Optional hint element of the form field.\n /\ninterface CatFormHintProps {\n id: string;\n hint?: string \| string[];\n slottedHint?: HTMLSlotElement;\n class?: string;\n errorMap?: ErrorMap;\n}\n\n/\n CatFormHint is a functional component that represents the hint area of form elements.\n \n @param props - {@link CatFormHintProps}\n * @return a JSX.Element\n */\nexport const CatFormHint: FunctionalComponent<CatFormHintProps> = props => {\n const { id, hint, slottedHint, errorMap } = props;\n const errors = Object.entries(errorMap \|\| {});\n return (\n <div id={id + '-hint'} class=\"hint-section\">\n {errors.length\n ? errors.map(([key, params]) => (\n <p class={(props.class ?? '') + ' input-hint cat-text-danger'}>{i18n.t(`error.${key}`, params)}</p>\n ))\n : [\n hint &&\n (Array.isArray(hint) ? (\n hint.map(item => <p class={(props.class ?? '') + ' input-hint'}>{item}</p>)\n ) : (\n <p class={(props.class ?? '') + ' input-hint'}>{hint}</p>\n )),\n slottedHint\n ]}\n </div>\n );\n};\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"file":"cat-i18n-registry.js","mappings":"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","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 private _locale?: string;\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 getLocale(): string {\n return this._locale ?? window?.navigator?.language ?? 'en';\n }\n\n setLocale(locale: string): void {\n try {\n this._locale = Intl.getCanonicalLocales(locale)[0];\n log.info(`[CatI18nRegistry] Set locale: ${this._locale}`);\n } catch (err) {\n log.error(`[CatI18nRegistry] Invalid locale: ${locale}`);\n }\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]: unknown }): 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":"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","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 private _locale?: string;\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 getLocale(): string {\n return this._locale ?? window?.navigator?.language ?? 'en';\n }\n\n setLocale(locale: string): void {\n try {\n this._locale = Intl.getCanonicalLocales(locale)[0];\n log.info(`[CatI18nRegistry] Set locale: ${this._locale}`);\n } catch (err) {\n log.error(`[CatI18nRegistry] Invalid locale: ${locale}`);\n }\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]: unknown }): 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-icon-registry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-icon-registry.js","mappings":"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","names":["log"],"sources":["./src/components/cat-icon/cat-icon-registry.ts"],"sourcesContent":["import cross16 from '@haiilo/catalyst-icons/tmp/assets/16-cross.svg';\nimport alertCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/alert-circle-outlined.svg';\nimport checkCircleFilled from '@haiilo/catalyst-icons/tmp/assets/check-circle-filled.svg';\nimport chevronDownOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-down-outlined.svg';\nimport chevronLeftOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-left-outlined.svg';\nimport chevronRightOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-right-outlined.svg';\nimport clockFilled from '@haiilo/catalyst-icons/tmp/assets/clock-filled.svg';\nimport crossCircleFilled from '@haiilo/catalyst-icons/tmp/assets/cross-circle-filled.svg';\nimport crossCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-circle-outlined.svg';\nimport crossOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-outlined.svg';\nimport dangerFilled from '@haiilo/catalyst-icons/tmp/assets/danger-filled.svg';\nimport starCircleFilled from '@haiilo/catalyst-icons/tmp/assets/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-danger': crossCircleFilled,\n 'alert-primary': starCircleFilled,\n 'alert-secondary': clockFilled,\n 'alert-success': checkCircleFilled,\n 'alert-warning': dangerFilled,\n 'dialog-close': crossOutlined,\n 'input-close': crossCircleOutlined,\n 'input-error': alertCircleOutlined,\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] 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"],"version":3}
1	+ {"file":"cat-icon-registry.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;MAca,eAAe;EAM1B;;IAHiB,OAAE,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACnD,UAAK,GAAwB,IAAI,GAAG,EAAE,CAAC;;IAMtD,IAAI,CAAC,QAAQ,CACX;MACE,cAAc,EAAE,iBAAiB;MACjC,eAAe,EAAE,gBAAgB;MACjC,iBAAiB,EAAE,WAAW;MAC9B,eAAe,EAAE,iBAAiB;MAClC,eAAe,EAAE,YAAY;MAC7B,cAAc,EAAE,aAAa;MAC7B,aAAa,EAAE,mBAAmB;MAClC,aAAa,EAAE,mBAAmB;MAClC,oBAAoB,EAAE,mBAAmB;MACzC,iBAAiB,EAAE,mBAAmB;MACtC,kBAAkB,EAAE,oBAAoB;MACxC,cAAc,EAAE,OAAO;MACvB,aAAa,EAAE,mBAAmB;KACnC,EACD,MAAM,EACN,IAAI,CACL,CAAC;;;;;;;;IASF,MAAM,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,KAAK;MAC9C,MAAM,EAAE,MAAM,EAAE,GAAI,KAAqB,IAAI,EAAE,CAAC;MAChD,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;QACnC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;OACnD;KACF,CAAC,CAAC;IACH,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,KAAK;MAChD,MAAM,EAAE,MAAM,EAAE,GAAI,KAAqB,IAAI,EAAE,CAAC;MAChD,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;QACnC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;OACtD;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,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,QAAQ,CAAC,KAAiC,EAAE,OAAgB,EAAE,MAAM,GAAG,KAAK;IAC1E,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC;IACpC,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;IAC3FA,QAAG,CAAC,IAAI,CAAC,2BAA2B,QAAQ,KAAK,CAAC,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC;IAC/G,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;IACrG,OAAO,IAAI,CAAC;GACb;EAED,WAAW,CAAC,KAAe,EAAE,OAAgB,EAAE,MAAM,GAAG,KAAK;IAC3D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;IAC9B,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,6BAA6B,QAAQ,KAAK,CAAC,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC;IACnH,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;IACvG,OAAO,IAAI,CAAC;GACb;EAEO,SAAS,CAAC,IAAY,EAAE,OAAgB;IAC9C,OAAO,OAAO,GAAG,GAAG,OAAO,IAAI,IAAI,EAAE,GAAG,IAAI,CAAC;GAC9C;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-icon/cat-icon-registry.ts"],"sourcesContent":["import cross16 from '@haiilo/catalyst-icons/tmp/assets/16-cross.svg';\nimport alertCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/alert-circle-outlined.svg';\nimport checkCircleFilled from '@haiilo/catalyst-icons/tmp/assets/check-circle-filled.svg';\nimport chevronDownOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-down-outlined.svg';\nimport chevronLeftOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-left-outlined.svg';\nimport chevronRightOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-right-outlined.svg';\nimport clockFilled from '@haiilo/catalyst-icons/tmp/assets/clock-filled.svg';\nimport crossCircleFilled from '@haiilo/catalyst-icons/tmp/assets/cross-circle-filled.svg';\nimport crossCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-circle-outlined.svg';\nimport crossOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-outlined.svg';\nimport dangerFilled from '@haiilo/catalyst-icons/tmp/assets/danger-filled.svg';\nimport starCircleFilled from '@haiilo/catalyst-icons/tmp/assets/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-danger': crossCircleFilled,\n 'alert-primary': starCircleFilled,\n 'alert-secondary': clockFilled,\n 'alert-success': checkCircleFilled,\n 'alert-warning': dangerFilled,\n 'dialog-close': crossOutlined,\n 'input-close': crossCircleOutlined,\n 'input-error': alertCircleOutlined,\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] 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"],"version":3}

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

@@ -3,7 +3,7 @@ import { c as catIconRegistry } from './cat-icon-registry.js';
 const catIconCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}span{display:inline-flex}svg{fill:currentColor;stroke:none;transform-origin:center center;height:1em;width:calc(var(--cat-icon-ratio, 1) * 1em)}.icon-xs svg{font-size:0.75rem}.icon-s svg{font-size:1rem}.icon-m svg{font-size:1.25rem}.icon-l svg{font-size:1.5rem}.icon-xl svg{font-size:1.75rem}";
-const CatIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const CatIcon = /*@__PURE__*/ proxyCustomElement(class CatIcon extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

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

	@@ -1 +1 @@
1	- {"file":"cat-icon2.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,mbAAmb;;MCczb,OAAO;;;;;;;gBAcuC,GAAG;;;EAQ5D,MAAM;IACJ,QACE,YACE,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,GAAGA,eAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,gBAC1D,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":["icons"],"sources":["./src/components/cat-icon/cat-icon.scss?tag=cat-icon&encapsulation=shadow","./src/components/cat-icon/cat-icon.tsx"],"sourcesContent":["@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?: string;\n\n /\n The SVG source of the icon. This takes precenedence over the `icon` name.\n /\n @Prop() iconSrc?: string;\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.iconSrc \|\| (this.icon ? 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}
1	+ {"file":"cat-icon2.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,mbAAmb;;MCczb,OAAO;;;;;;;gBAcuC,GAAG;;;EAQ5D,MAAM;IACJ,QACE,YACE,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,GAAGA,eAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,gBAC1D,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":["icons"],"sources":["src/components/cat-icon/cat-icon.scss?tag=cat-icon&encapsulation=shadow","src/components/cat-icon/cat-icon.tsx"],"sourcesContent":["@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?: string;\n\n /\n The SVG source of the icon. This takes precenedence over the `icon` name.\n /\n @Prop() iconSrc?: string;\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.iconSrc \|\| (this.icon ? 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-input2.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { d as defineCustomElement$1 } from './cat-spinner2.js';
 const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container.hidden{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}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem}.label-optional{display:flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-character-count{display:flex;align-items:center;margin-left:auto;max-height:1.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}:host{display:flex;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:inset 0 0 0 1px rgb(var(--border-color));transition:box-shadow 0.13s linear;--border-color:var(--cat-border-color-dark, 215, 219, 224);}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-wrapper:not(.input-disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}.input-wrapper:focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.input-wrapper.input-invalid{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
 let nextUniqueId = 0;
-const CatInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const CatInput = /*@__PURE__*/ proxyCustomElement(class CatInput extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

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

	@@ -1 +1 @@
1	- {"file":"cat-input2.js","mappings":";;;;;;;;;AAAA,MAAM,WAAW,GAAG,2uSAA2uS;;ACO/vS,IAAI,YAAY,GAAG,CAAC,CAAC;MAkBR,QAAQ;;;;;;;;IACF,QAAG,GAAG,aAAa,YAAY,EAAE,EAAE,CAAC;2BAU1B,KAAK;0BAEN,KAAK;;0BAOkE,UAAU;sBAKtF,KAAK;;qBAUN,KAAK;oBAKN,KAAK;;;qBAeJ,KAAK;;iBAUT,EAAE;uBAKI,KAAK;;;;;;;;;oBA6CR,KAAK;oBAKL,KAAK;iBAKR,KAAK;gBAKK,MAAM;;;uBAsBQ,CAAC;;;EAtJzC,IAAY,EAAE;IACZ,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC;GACpC;EA0KD,mBAAmB;IACjB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1E,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACxE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACxCA,QAAG,CAAC,IAAI,CAAC,oCAAoC,EAAE,IAAI,CAAC,CAAC;KACtD;GACF;;;;;;;;EAUD,MAAM,OAAO,CAAC,OAAsB;IAClC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;GAC3B;;;;;EAOD,MAAM,MAAM;IACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;GACnB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAChB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACjC;EAGD,kBAAkB,CAAC,KAAqC;IACtD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;MACpC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;KAC3B;SAAM;MACL,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;UAClC,KAAkB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC;UAC5E,KAAK,KAAK,IAAI;YACd,EAAE;YACF,KAAK,IAAI,SAAS,CAAC;MACvB,IAAI,CAAC,mBAAmB,EAAE,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC1D;GACF;EAED,MAAM;IACJ,QACE,WACE,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,kBAAkB,EAAE,IAAI,CAAC,UAAU;OACpC,IAED,WACE,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,WAAW;QACxB,iBAAiB,EAAE,IAAI;OACxB,IAEA,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,MAClC,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,IACrB,YAAM,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,IACrC,CAAC,IAAI,CAAC,eAAe,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,KAAK,IAAI,CAAC,KAAK,EACnE,WAAK,KAAK,EAAC,gBAAgB,IACxB,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,EACA,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,uBAAuB,iBAAa,MAAM,IAClD,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,OAAG,IAAI,CAAC,SAAS,CAChD,CACP,CACG,CACD,CACD,CACT,CACG,EACN,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,gBAAgB,EAAE,IAAI,CAAC,QAAQ;QAC/B,eAAe,EAAE,IAAI,CAAC,OAAO;OAC9B,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAEhC,IAAI,CAAC,UAAU,KACd,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,IACpC,IAAI,CAAC,UAAU,CACX,CACR,EACA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,GAAY,EACpG,WAAK,KAAK,EAAC,qBAAqB,IAC9B,gBACM,IAAI,CAAC,gBAAgB,EACzB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE;QACL,eAAe,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;OAClD,EACD,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,kBAChB,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,sBAC7B,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,OAAO,GAAG,SAAS,GAC5D,EACR,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAC7C,kBACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,kBAAkB,eACb,MAAM,EAChB,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,MAAM,gBACFA,eAAI,CAAC,CAAC,CAAC,aAAa,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAClB,CACf,CACG,EACL,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,KAC3C,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,GAAG,GAAY,CACpE,EACA,IAAI,CAAC,OAAO,IAAI,gBAAU,IAAI,EAAC,kBAAkB,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,GAAG,GAAY,EAC1G,IAAI,CAAC,UAAU,KACd,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,IACpC,IAAI,CAAC,UAAU,CACX,CACR,CACG,EACL,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,MAC7E,EAAC,WAAW,IACV,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,EAC7D,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACH,CACG,CACF,EACN;GACH;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;GACxB;EAEO,OAAO;IACb,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAEO,MAAM,CAAC,KAAiB;IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzB,IAAI,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;MACnC,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;GACF;EAEO,UAAU;IAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC;GAClC;EAGO,mBAAmB;IACzB,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IACzD,IAAI,WAAW,KAAK,IAAI,EAAE;MACxB,OAAO,IAAI,CAAC,oBAAoB,KAAK,QAAQ,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;MAChG,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,EAAE,WAAW,CAAC,CAAC;MACpF,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;GACd;EAEO,mBAAmB;IACzB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,WAAW,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,KAAK,CAAC;IACtG,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["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@use 'utils/color';\n@use '_snippets/form-label';\n\n:host {\n display: flex;\n @include cat-body('m');\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-field,\n.input-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n flex: 1 1 auto;\n}\n\n.input-field.input-horizontal {\n flex-direction: row;\n gap: 1rem;\n}\n\n.input-wrapper {\n display: flex;\n align-items: stretch;\n gap: 0.75rem;\n padding: 0 0.75rem;\n height: form-label.$cat-input-height;\n overflow: hidden;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: inset 0 0 0 1px rgb(var(--border-color));\n transition: box-shadow cat-token('time.transition.s') linear;\n --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\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):hover {\n box-shadow: inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color));\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: -1px;\n }\n\n &.input-invalid {\n --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\n }\n\n /* stylelint-disable property-no-vendor-prefix /\n &:has(input:-webkit-autofill) {\n &,\n &:hover,\n &:focus {\n background-color: cat-token('color.ui.background.inputAutofill');\n }\n }\n / stylelint-enable property-no-vendor-prefix /\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 / stylelint-disable property-no-vendor-prefix /\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n }\n }\n / stylelint-enable property-no-vendor-prefix /\n}\n\n.clearable {\n position: absolute;\n top: calc(50% - 1rem);\n right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } 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 private errorMapSrc?: ErrorMap;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() errorMap?: ErrorMap;\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 Whether the label is on top or left.\n /\n @Prop() horizontal = 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;\n\n /\n The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n /\n @Prop() errors?: boolean \| string[] \| ErrorMap;\n\n /\n Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors on change with the given delay in milliseconds.\n /\n @Prop() errorUpdate: boolean \| number = 0;\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 value is changed.\n /\n @Event() catChange!: EventEmitter<string>;\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.watchErrorsHandler(this.errors);\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 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 Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n this.catChange.emit(this.value);\n }\n\n @Watch('errors')\n watchErrorsHandler(value?: boolean \| string[] \| ErrorMap) {\n if (!coerceBoolean(this.errorUpdate)) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(value)\n ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : value === true\n ? {}\n : value \|\| undefined;\n this.showErrorsIfTimeout() \|\| this.showErrorsIfNoFocus();\n }\n }\n\n render() {\n return (\n <div\n class={{\n 'input-field': true,\n 'input-horizontal': this.horizontal\n }}\n >\n <div\n class={{\n hidden: this.labelHidden,\n 'label-container': true\n }}\n >\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id}>\n <span class=\"label-wrapper\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n <div class=\"label-metadata\">\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n {this.maxLength && (\n <div class=\"label-character-count\" aria-hidden=\"true\">\n {this.value?.toString().length ?? 0}/{this.maxLength}\n </div>\n )}\n </div>\n </span>\n </label>\n )}\n </div>\n <div class=\"input-container\">\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-disabled': this.disabled,\n 'input-invalid': this.invalid\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 {...this.nativeAttributes}\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 aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hint?.length ? this.id + '-hint' : undefined}\n ></input>\n {this.clearable && !this.disabled && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"$cat:input-close\"\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.invalid && this.icon && this.iconRight && (\n <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>\n )}\n {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n {(this.hint \|\| this.hasSlottedHint \|\| !!Object.keys(this.errorMap \|\| {}).length) && (\n <CatFormHint\n id={this.id}\n hint={this.hint}\n slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n errorMap={this.errorMap}\n />\n )}\n </div>\n </div>\n );\n }\n\n private get invalid() {\n return !!this.errorMap;\n }\n\n private onInput() {\n this.value = this.input.value;\n this.catChange.emit(this.value);\n this.showErrorsIfTimeout();\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 if (coerceBoolean(this.errorUpdate)) {\n this.showErrors();\n }\n }\n\n private showErrors() {\n this.errorMap = this.errorMapSrc;\n }\n\n private errorUpdateTimeoutId?: number;\n private showErrorsIfTimeout() {\n const errorUpdate = coerceNumber(this.errorUpdate, null);\n if (errorUpdate !== null) {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n return true;\n }\n return false;\n }\n\n private showErrorsIfNoFocus() {\n const hasFocus = document.activeElement === this.hostElement \|\| document.activeElement === this.input;\n if (!hasFocus) {\n this.showErrors();\n }\n }\n}\n"],"version":3}
1	+ {"file":"cat-input2.js","mappings":"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","names":["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@use 'utils/color';\n@use '_snippets/form-label';\n\n:host {\n display: flex;\n @include cat-body('m');\n margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.input-field,\n.input-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n flex: 1 1 auto;\n}\n\n.input-field.input-horizontal {\n flex-direction: row;\n gap: 1rem;\n}\n\n.input-wrapper {\n display: flex;\n align-items: stretch;\n gap: 0.75rem;\n padding: 0 0.75rem;\n height: form-label.$cat-input-height;\n overflow: hidden;\n background: cat-token('color.ui.background.input');\n border-radius: cat-border-radius('m');\n box-shadow: inset 0 0 0 1px rgb(var(--border-color));\n transition: box-shadow cat-token('time.transition.s') linear;\n --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\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):hover {\n box-shadow: inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color));\n }\n\n &:focus-within {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: -1px;\n }\n\n &.input-invalid {\n --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\n }\n\n /* stylelint-disable property-no-vendor-prefix /\n &:has(input:-webkit-autofill) {\n &,\n &:hover,\n &:focus {\n background-color: cat-token('color.ui.background.inputAutofill');\n }\n }\n / stylelint-enable property-no-vendor-prefix /\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 / stylelint-disable property-no-vendor-prefix /\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n }\n }\n / stylelint-enable property-no-vendor-prefix /\n}\n\n.clearable {\n position: absolute;\n top: calc(50% - 1rem);\n right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } 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 private errorMapSrc?: ErrorMap;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() errorMap?: ErrorMap;\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 Whether the label is on top or left.\n /\n @Prop() horizontal = 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;\n\n /\n The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n /\n @Prop() errors?: boolean \| string[] \| ErrorMap;\n\n /\n Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors on change with the given delay in milliseconds.\n /\n @Prop() errorUpdate: boolean \| number = 0;\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 value is changed.\n /\n @Event() catChange!: EventEmitter<string>;\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.watchErrorsHandler(this.errors);\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 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 Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n this.catChange.emit(this.value);\n }\n\n @Watch('errors')\n watchErrorsHandler(value?: boolean \| string[] \| ErrorMap) {\n if (!coerceBoolean(this.errorUpdate)) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(value)\n ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : value === true\n ? {}\n : value \|\| undefined;\n this.showErrorsIfTimeout() \|\| this.showErrorsIfNoFocus();\n }\n }\n\n render() {\n return (\n <div\n class={{\n 'input-field': true,\n 'input-horizontal': this.horizontal\n }}\n >\n <div\n class={{\n hidden: this.labelHidden,\n 'label-container': true\n }}\n >\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id}>\n <span class=\"label-wrapper\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n <div class=\"label-metadata\">\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n {this.maxLength && (\n <div class=\"label-character-count\" aria-hidden=\"true\">\n {this.value?.toString().length ?? 0}/{this.maxLength}\n </div>\n )}\n </div>\n </span>\n </label>\n )}\n </div>\n <div class=\"input-container\">\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-disabled': this.disabled,\n 'input-invalid': this.invalid\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 {...this.nativeAttributes}\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 aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hint?.length ? this.id + '-hint' : undefined}\n ></input>\n {this.clearable && !this.disabled && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"$cat:input-close\"\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.invalid && this.icon && this.iconRight && (\n <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>\n )}\n {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n {(this.hint \|\| this.hasSlottedHint \|\| !!Object.keys(this.errorMap \|\| {}).length) && (\n <CatFormHint\n id={this.id}\n hint={this.hint}\n slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n errorMap={this.errorMap}\n />\n )}\n </div>\n </div>\n );\n }\n\n private get invalid() {\n return !!this.errorMap;\n }\n\n private onInput() {\n this.value = this.input.value;\n this.catChange.emit(this.value);\n this.showErrorsIfTimeout();\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 if (coerceBoolean(this.errorUpdate)) {\n this.showErrors();\n }\n }\n\n private showErrors() {\n this.errorMap = this.errorMapSrc;\n }\n\n private errorUpdateTimeoutId?: number;\n private showErrorsIfTimeout() {\n const errorUpdate = coerceNumber(this.errorUpdate, null);\n if (errorUpdate !== null) {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n return true;\n }\n return false;\n }\n\n private showErrorsIfNoFocus() {\n const hasFocus = document.activeElement === this.hostElement \|\| document.activeElement === this.input;\n if (!hasFocus) {\n this.showErrors();\n }\n }\n}\n"],"version":3}

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

@@ -6,7 +6,7 @@ import { d as defineCustomElement$2 } from './cat-spinner2.js';
 const catPaginationCss = ":host{display:inline-block}:host([hidden]){display:none}ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}li{display:inline-flex;justify-content:center}li.dots{-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([variant=outlined]) ol{gap:0.75rem}.cat-pagination-xs li.dots,.cat-pagination-xs li.text{height:1.5rem;line-height:1.5rem;font-size:0.875rem}.cat-pagination-xs li.dots{width:1.5rem}:host([variant=outlined]) .cat-pagination-xs{gap:0.375rem}.cat-pagination-s li.dots,.cat-pagination-s li.text{height:2rem;line-height:2rem;font-size:0.9375rem}.cat-pagination-s li.dots{width:2rem}:host([variant=outlined]) .cat-pagination-s{gap:0.5rem}.cat-pagination-m li.dots,.cat-pagination-m li.text{height:2.5rem;line-height:2.5rem;font-size:0.9375rem}.cat-pagination-m li.dots{width:2.5rem}:host([variant=outlined]) .cat-pagination-m{gap:0.625rem}.cat-pagination-l li.dots,.cat-pagination-l li.text{height:3rem;line-height:3rem;font-size:0.9375rem}.cat-pagination-l li.dots{width:3rem}:host([variant=outlined]) .cat-pagination-l{gap:0.75rem}.cat-pagination-xl li.dots,.cat-pagination-xl li.text{height:3.5rem;line-height:3.5rem;font-size:1.125rem}.cat-pagination-xl li.dots{width:3.5rem}:host([variant=outlined]) .cat-pagination-xl{gap:0.875rem}";
-const CatPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const CatPagination$1 = /*@__PURE__*/ proxyCustomElement(class CatPagination extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

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

	@@ -1 +1 @@
1	- {"file":"cat-pagination.js","mappings":"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","names":["CatPagination","i18n"],"sources":["./src/components/cat-pagination/cat-pagination.scss?tag=cat-pagination&encapsulation=shadow","./src/components/cat-pagination/cat-pagination.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'sass:map';\n\n$button-sizes: (\n 'xl': 3.5rem,\n 'l': 3rem,\n 'm': 2.5rem,\n 's': 2rem,\n 'xs': 1.5rem\n);\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nol {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nli {\n display: inline-flex;\n justify-content: center;\n\n &.dots {\n @include cat-select(none);\n }\n}\n\n// ----- variant\n\n:host([variant='outlined']) {\n ol {\n gap: 0.75rem;\n }\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n .cat-pagination-#{$size} {\n li.dots,\n li.text {\n height: map.get($button-sizes, $size);\n line-height: map.get($button-sizes, $size);\n font-size: cat-body-font-size($fontSize);\n }\n\n li.dots {\n width: map.get($button-sizes, $size);\n }\n }\n\n :host([variant='outlined']) {\n .cat-pagination-#{$size} {\n gap: map.get($button-sizes, $size) * 0.25;\n }\n }\n}\n\n@include size('xs', 's');\n@include size('s', 'm');\n@include size('m', 'm');\n@include size('l', 'm');\n@include size('xl', 'l');\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/*\n A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n /\n@Component({\n tag: 'cat-pagination',\n styleUrl: 'cat-pagination.scss',\n shadow: true\n})\nexport class CatPagination {\n /\n The current page.\n /\n @Prop({ mutable: true }) page = 0;\n\n /\n The total number of pages.\n /\n @Prop() pageCount = 1;\n\n /\n The number of pages to be shown around the current page.\n /\n @Prop() activePadding = 1;\n\n /\n The number of pages to be shown at the edges.\n /\n @Prop() sidePadding = 1;\n\n /\n The size of the buttons.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n The rendering style of the buttons.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' = 'text';\n\n /\n Use round button edges.\n /\n @Prop() round = false;\n\n /\n Use compact pagination mode.\n /\n @Prop() compact = false;\n\n /\n The icon of the \"previous\" button.\n /\n @Prop() iconPrev = '$cat:pagination-left';\n\n /\n The icon of the \"next\" button.\n /\n @Prop() iconNext = '$cat:pagination-right';\n\n /\n Emitted when the page of the pagination has changed.\n /\n @Event() catChange!: EventEmitter<number>;\n\n render() {\n return (\n <nav role=\"navigation\">\n <ol\n class={{\n [`cat-pagination-${this.size}`]: Boolean(this.size)\n }}\n >\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isFirst}\n a11yLabel={i18n.t('pagination.prev')}\n icon={this.iconPrev}\n iconOnly\n onClick={() => this.setPage(this.page - 1)}\n ></cat-button>\n </li>\n {this.content}\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isLast}\n a11yLabel={i18n.t('pagination.next')}\n icon={this.iconNext}\n iconOnly\n onClick={() => this.setPage(this.page + 1)}\n ></cat-button>\n </li>\n </ol>\n </nav>\n );\n }\n\n get isFirst() {\n return this.page === 0;\n }\n\n get isLast() {\n return this.page === this.pageCount - 1;\n }\n\n private setPage(value: number) {\n this.page = value;\n this.catChange.emit(this.page);\n }\n\n get pages() {\n if (!this.sidePadding && !this.activePadding) {\n return [this.page];\n }\n\n const result = new Set<number>();\n const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n const minActivepage = minPage ? this.sidePadding + 2 this.activePadding + 2 : this.sidePadding;\n const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n const maxActivepage = maxPage\n ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n : this.pageCount - this.sidePadding;\n\n this.addSeq(result, 0, minActivepage);\n if (!minPage && !maxPage) {\n this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n }\n this.addSeq(result, maxActivepage, this.pageCount);\n\n return [...result];\n }\n\n private addSeq(set: Set<number>, start: number, end: number) {\n const _start = this.clamp(start, 0, this.pageCount);\n const _end = this.clamp(end, 0, this.pageCount);\n Array(_end - _start)\n .fill(0)\n .forEach((_, i) => set.add(_start + i));\n }\n\n private clamp(num: number, min: number, max: number) {\n return Math.min(Math.max(num, min), max);\n }\n\n private get content() {\n if (this.compact) {\n return (\n <li class=\"text\">\n {this.page + 1}/{this.pageCount}\n </li>\n );\n }\n\n return this.pages.map((page, i) => [\n i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n color={this.page === page ? 'primary' : undefined}\n active={this.page === page}\n a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n a11yCurrent={this.page === page ? 'step' : undefined}\n onClick={() => this.setPage(page)}\n >\n {page + 1}\n </cat-button>\n </li>\n ]);\n }\n}\n"],"version":3}
1	+ {"file":"cat-pagination.js","mappings":"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","names":["CatPagination","i18n"],"sources":["src/components/cat-pagination/cat-pagination.scss?tag=cat-pagination&encapsulation=shadow","src/components/cat-pagination/cat-pagination.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'sass:map';\n\n$button-sizes: (\n 'xl': 3.5rem,\n 'l': 3rem,\n 'm': 2.5rem,\n 's': 2rem,\n 'xs': 1.5rem\n);\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nol {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nli {\n display: inline-flex;\n justify-content: center;\n\n &.dots {\n @include cat-select(none);\n }\n}\n\n// ----- variant\n\n:host([variant='outlined']) {\n ol {\n gap: 0.75rem;\n }\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n .cat-pagination-#{$size} {\n li.dots,\n li.text {\n height: map.get($button-sizes, $size);\n line-height: map.get($button-sizes, $size);\n font-size: cat-body-font-size($fontSize);\n }\n\n li.dots {\n width: map.get($button-sizes, $size);\n }\n }\n\n :host([variant='outlined']) {\n .cat-pagination-#{$size} {\n gap: map.get($button-sizes, $size) * 0.25;\n }\n }\n}\n\n@include size('xs', 's');\n@include size('s', 'm');\n@include size('m', 'm');\n@include size('l', 'm');\n@include size('xl', 'l');\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/*\n A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n /\n@Component({\n tag: 'cat-pagination',\n styleUrl: 'cat-pagination.scss',\n shadow: true\n})\nexport class CatPagination {\n /\n The current page.\n /\n @Prop({ mutable: true }) page = 0;\n\n /\n The total number of pages.\n /\n @Prop() pageCount = 1;\n\n /\n The number of pages to be shown around the current page.\n /\n @Prop() activePadding = 1;\n\n /\n The number of pages to be shown at the edges.\n /\n @Prop() sidePadding = 1;\n\n /\n The size of the buttons.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n The rendering style of the buttons.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' = 'text';\n\n /\n Use round button edges.\n /\n @Prop() round = false;\n\n /\n Use compact pagination mode.\n /\n @Prop() compact = false;\n\n /\n The icon of the \"previous\" button.\n /\n @Prop() iconPrev = '$cat:pagination-left';\n\n /\n The icon of the \"next\" button.\n /\n @Prop() iconNext = '$cat:pagination-right';\n\n /\n Emitted when the page of the pagination has changed.\n /\n @Event() catChange!: EventEmitter<number>;\n\n render() {\n return (\n <nav role=\"navigation\">\n <ol\n class={{\n [`cat-pagination-${this.size}`]: Boolean(this.size)\n }}\n >\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isFirst}\n a11yLabel={i18n.t('pagination.prev')}\n icon={this.iconPrev}\n iconOnly\n onClick={() => this.setPage(this.page - 1)}\n ></cat-button>\n </li>\n {this.content}\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isLast}\n a11yLabel={i18n.t('pagination.next')}\n icon={this.iconNext}\n iconOnly\n onClick={() => this.setPage(this.page + 1)}\n ></cat-button>\n </li>\n </ol>\n </nav>\n );\n }\n\n get isFirst() {\n return this.page === 0;\n }\n\n get isLast() {\n return this.page === this.pageCount - 1;\n }\n\n private setPage(value: number) {\n this.page = value;\n this.catChange.emit(this.page);\n }\n\n get pages() {\n if (!this.sidePadding && !this.activePadding) {\n return [this.page];\n }\n\n const result = new Set<number>();\n const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n const minActivepage = minPage ? this.sidePadding + 2 this.activePadding + 2 : this.sidePadding;\n const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n const maxActivepage = maxPage\n ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n : this.pageCount - this.sidePadding;\n\n this.addSeq(result, 0, minActivepage);\n if (!minPage && !maxPage) {\n this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n }\n this.addSeq(result, maxActivepage, this.pageCount);\n\n return [...result];\n }\n\n private addSeq(set: Set<number>, start: number, end: number) {\n const _start = this.clamp(start, 0, this.pageCount);\n const _end = this.clamp(end, 0, this.pageCount);\n Array(_end - _start)\n .fill(0)\n .forEach((_, i) => set.add(_start + i));\n }\n\n private clamp(num: number, min: number, max: number) {\n return Math.min(Math.max(num, min), max);\n }\n\n private get content() {\n if (this.compact) {\n return (\n <li class=\"text\">\n {this.page + 1}/{this.pageCount}\n </li>\n );\n }\n\n return this.pages.map((page, i) => [\n i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n color={this.page === page ? 'primary' : undefined}\n active={this.page === page}\n a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n a11yCurrent={this.page === page ? 'step' : undefined}\n onClick={() => this.setPage(page)}\n >\n {page + 1}\n </cat-button>\n </li>\n ]);\n }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 const catRadioGroupCss = ":host{display:block}:host([hidden]){display:none}";
-const CatRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const CatRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatRadioGroup extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

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

	@@ -1 +1 @@
1	- {"file":"cat-radio-group.js","mappings":"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","names":["CatRadioGroup"],"sources":["./src/components/cat-radio-group/cat-radio-group.scss?tag=cat-radio-group&encapsulation=shadow","./src/components/cat-radio-group/cat-radio-group.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/*\n A group of radio buttons.\n /\n@Component({\n tag: 'cat-radio-group',\n styleUrl: 'cat-radio-group.scss',\n shadow: true\n})\nexport class CatRadioGroup {\n private catRadioGroup: HTMLCatRadioElement[] = [];\n\n @Element() hostElement!: HTMLElement;\n\n /\n The name of the radio group component.\n /\n @Prop() name?: string;\n\n /\n The value of the radio group.\n /\n @Prop({ mutable: true }) value?: string;\n\n /\n Whether this radio group is disabled.\n /\n @Prop() disabled = false;\n\n /\n Adds an accessible label for the radio group that\n * it is only shown in assistive technologies, like screen readers.\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Whether the label of the radios should appear to the left of them.\n /\n @Prop() labelLeft = false;\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter<boolean \| string>;\n\n /\n Emitted when the radio group received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the radio group loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n @Watch('name')\n onNameChanged(newName?: string) {\n this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));\n }\n\n @Watch('value')\n onValueChanged(newValue?: string) {\n this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));\n this.updateTabIndex();\n }\n\n @Watch('disabled')\n onDisabledChanged(disabled: boolean) {\n this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));\n }\n\n @Watch('labelLeft')\n onLabelLeftChanged(labelLeft: boolean) {\n this.catRadioGroup.forEach(catRadio => {\n if (labelLeft) {\n catRadio.labelLeft = labelLeft;\n }\n });\n }\n\n componentDidLoad(): void {\n this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n this.onNameChanged(this.name);\n this.onValueChanged(this.value);\n this.onDisabledChanged(this.disabled);\n this.onLabelLeftChanged(this.labelLeft);\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n const activeElement = document.activeElement as HTMLCatRadioElement;\n const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n this.updateTabIndex();\n event.preventDefault();\n }\n }\n\n @Listen('input')\n onInput(event: MouseEvent): void {\n const radio = this.catRadioGroup.find(radio => radio === event.target);\n this.value = radio?.checked ? radio?.value : undefined;\n this.catChange.emit(this.value);\n }\n\n @Listen('focus', { capture: true })\n onFocus(event: FocusEvent): void {\n if (!event.relatedTarget) {\n this.catBlur.emit(event);\n }\n }\n\n @Listen('blur', { capture: true })\n onBlur(event: FocusEvent): void {\n if (!event.relatedTarget) {\n this.catBlur.emit(event);\n }\n }\n\n render() {\n return (\n <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n <slot></slot>\n </div>\n );\n }\n\n private updateTabIndex() {\n if (this.catRadioGroup.length) {\n this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n ?.querySelector('input')\n ?.setAttribute('tabindex', '0');\n }\n }\n}\n"],"version":3}
1	+ {"file":"cat-radio-group.js","mappings":"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","names":["CatRadioGroup"],"sources":["src/components/cat-radio-group/cat-radio-group.scss?tag=cat-radio-group&encapsulation=shadow","src/components/cat-radio-group/cat-radio-group.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/*\n A group of radio buttons.\n /\n@Component({\n tag: 'cat-radio-group',\n styleUrl: 'cat-radio-group.scss',\n shadow: true\n})\nexport class CatRadioGroup {\n private catRadioGroup: HTMLCatRadioElement[] = [];\n\n @Element() hostElement!: HTMLElement;\n\n /\n The name of the radio group component.\n /\n @Prop() name?: string;\n\n /\n The value of the radio group.\n /\n @Prop({ mutable: true }) value?: string;\n\n /\n Whether this radio group is disabled.\n /\n @Prop() disabled = false;\n\n /\n Adds an accessible label for the radio group that\n * it is only shown in assistive technologies, like screen readers.\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Whether the label of the radios should appear to the left of them.\n /\n @Prop() labelLeft = false;\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter<boolean \| string>;\n\n /\n Emitted when the radio group received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the radio group loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n @Watch('name')\n onNameChanged(newName?: string) {\n this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));\n }\n\n @Watch('value')\n onValueChanged(newValue?: string) {\n this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));\n this.updateTabIndex();\n }\n\n @Watch('disabled')\n onDisabledChanged(disabled: boolean) {\n this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));\n }\n\n @Watch('labelLeft')\n onLabelLeftChanged(labelLeft: boolean) {\n this.catRadioGroup.forEach(catRadio => {\n if (labelLeft) {\n catRadio.labelLeft = labelLeft;\n }\n });\n }\n\n componentDidLoad(): void {\n this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n this.onNameChanged(this.name);\n this.onValueChanged(this.value);\n this.onDisabledChanged(this.disabled);\n this.onLabelLeftChanged(this.labelLeft);\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n const activeElement = document.activeElement as HTMLCatRadioElement;\n const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n this.updateTabIndex();\n event.preventDefault();\n }\n }\n\n @Listen('input')\n onInput(event: MouseEvent): void {\n const radio = this.catRadioGroup.find(radio => radio === event.target);\n this.value = radio?.checked ? radio?.value : undefined;\n this.catChange.emit(this.value);\n }\n\n @Listen('focus', { capture: true })\n onFocus(event: FocusEvent): void {\n if (!event.relatedTarget) {\n this.catBlur.emit(event);\n }\n }\n\n @Listen('blur', { capture: true })\n onBlur(event: FocusEvent): void {\n if (!event.relatedTarget) {\n this.catBlur.emit(event);\n }\n }\n\n render() {\n return (\n <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n <slot></slot>\n </div>\n );\n }\n\n private updateTabIndex() {\n if (this.catRadioGroup.length) {\n this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n ?.querySelector('input')\n ?.setAttribute('tabindex', '0');\n }\n }\n}\n"],"version":3}

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

@@ -5,7 +5,7 @@ import { C as CatFormHint } from './cat-form-hint.js';
 const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;min-width:0}.input-hint,::slotted([slot=hint]){color:rgb(var(--cat-font-color-muted, 81, 92, 108));line-height:1.5;flex:1 1 auto;min-width:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}: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)}.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))}";
 let nextUniqueId = 0;
-const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class CatRadio extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

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

	@@ -1 +1 @@
1	- {"file":"cat-radio.js","mappings":"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","names":["CatRadio","log"],"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@use '_snippets/checkbox-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 margin-bottom: $cat-body-margin-bottom;\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}\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 /\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 @Prop() value = '';\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 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 />\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.hint \|\| this.hasSlottedHint) && (\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 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","log"],"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@use '_snippets/checkbox-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 margin-bottom: $cat-body-margin-bottom;\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}\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 /\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 @Prop() value = '';\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 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 />\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.hint \|\| this.hasSlottedHint) && (\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 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

@@ -1452,7 +1452,7 @@ function takeUntil(notifier) {
 const catScrollableCss = ":host{overflow:hidden;position:relative;display:flex}:host([hidden]){display:none}.shadow-bottom,.shadow-right,.shadow-left,.shadow-top{position:absolute;transition:box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)}.shadow-top{z-index:2;width:100%;top:0}.shadow-left{z-index:4;height:100%;left:0}.shadow-right{z-index:4;height:100%;right:0}.shadow-bottom{z-index:2;width:100%;bottom:0}.scrollable-wrapper{position:absolute;inset:0;pointer-events:none}.scrollable-wrapper.cat-scrollable-top .shadow-top,.scrollable-wrapper.cat-scrollable-bottom .shadow-bottom,.scrollable-wrapper.cat-scrollable-left .shadow-left,.scrollable-wrapper.cat-scrollable-right .shadow-right{box-shadow:0 0 4px 1px rgba(16, 29, 48, 0.2)}.scrollable-content{width:100%;overflow:hidden}.scrollable-content.scroll-x{overflow-x:auto}.scrollable-content.scroll-y{overflow-y:auto}.scrollable-content.no-overscroll{overscroll-behavior:contain}";
-const CatScrollable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const CatScrollable = /*@__PURE__*/ proxyCustomElement(class CatScrollable extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();