npm - @haiilo/catalyst - Versions diffs - 13.0.2 → 13.1.0 - Mend

@haiilo/catalyst 13.0.2 → 13.1.0

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

Files changed (69) hide show

package/dist/collection/components/cat-alert/cat-alert.js CHANGED Viewed

@@ -36,7 +36,7 @@ export class CatAlert {
         setAttributeDefault(this, 'role', this.mapRole.get(this.color));
     }
     render() {
-        return (h(Host, { key: '5cda6d92f1cf40029c2a93723999ed9e8c44baac' }, !this.noIcon && h("cat-icon", { key: '69124d111b0a62932bbd761b6cbd1dc4ab155670', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), h("div", { key: '22f6070cefa6ef5036e8b9e1ec7dcad357a69462', class: "content" }, h("slot", { key: 'e86f500e97dd688b986aa90af5db0f94819407e4' }))));
+        return (h(Host, { key: 'd642ef0422878f85d53bdc1b287ce282f9459e30' }, !this.noIcon && h("cat-icon", { key: 'c42d730501e2704466f56f3a1b9f7b1e261af00c', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), h("div", { key: '0e4cf734fb202e9da515753a057e95182c13c7a0', class: "content" }, h("slot", { key: 'a0161fefe3a228488be263421013882565f790e9' }))));
     }
     static get is() { return "cat-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cat-badge/cat-badge.js CHANGED Viewed

@@ -80,7 +80,7 @@ export class CatBadge {
         }
     }
     render() {
-        return (h(Host, { key: '61ec6bb61ee078254f1fc4277c4b5608d055acde', "data-icon-badge": this.isIconBadge ? this.size : null }, this.hasPrefixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null, this.isIconBadge ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "icon-only" })) : (h("slot", null)), this.hasSuffixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null));
+        return (h(Host, { key: 'd803d632d26891fbd4cc899a8776a54076cdf850', "data-icon-badge": this.isIconBadge ? this.size : null }, this.hasPrefixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null, this.isIconBadge ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "icon-only" })) : (h("slot", null)), this.hasSuffixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null));
     }
     static get is() { return "cat-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cat-button-group/cat-button-group.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class CatButtonGroup {
         this.buttonElements = [];
     }
     render() {
-        return (h(Host, { key: '3d43547333f73560d31ca96bdba2d2b8b9976dbd', role: "group", "aria-label": this.a11yLabel }, h("slot", { key: 'd329ea90250b161862361e907427920e8866445a', onSlotchange: this.onSlotChange.bind(this) })));
+        return (h(Host, { key: 'a5635200630e28f57a1a88797324379320d0a49e', role: "group", "aria-label": this.a11yLabel }, h("slot", { key: '7aae9852ae371bbf407df59a3de1db1624b4e9d1', onSlotchange: this.onSlotChange.bind(this) })));
     }
     onSlotChange() {
         this.buttonElements = Array.from(this.hostElement.querySelectorAll(':scope > cat-button, :scope > cat-tooltip > cat-button, :scope > cat-dropdown cat-button[slot="trigger"]'));

package/dist/collection/components/cat-card/cat-card.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class CatCard {
     render() {
-        return h("slot", { key: '6617daf8e8f9c7e854f287c49c23d4985588fc79' });
+        return h("slot", { key: '0dc3e0d280b58b480314bf10cea9ed7f954516be' });
     }
     componentDidLoad() {
         this.catLoad.emit();

package/dist/collection/components/cat-checkbox/cat-checkbox.js CHANGED Viewed

@@ -87,13 +87,13 @@ export class CatCheckbox {
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: '22986b5dd3edf4e197fad9e02e7725c80e5f9bc5' }, h("label", { key: '531252b51952b5731b4038f6ddf77a56b2ce4b4b', htmlFor: this.id, class: {
+        return (h(Host, { key: '64f3d1f023c2e8ec2d3c0a23b1f1f0c19241f41f' }, h("label", { key: 'e54c1e60a1d3aa0ce78d218b036b87d04e1a1842', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            } }, h("input", { key: '26e8943be3be357a3fdc921c36d12d0f4b7aa32a', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '4ec18b92e0d09f2f17ed7f9a5444efb4448d2bcf', class: "box", "aria-hidden": "true" }, h("svg", { key: '8e0f01f6326c0f39d0d1fece1a68eb51907194ea', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: '4c43fcff56b492108820b0f657063d80cf478284', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: 'b251c0afcef5841ed7c4e9bfd7a57c783109f897', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: 'e44721268266f5e97884678da809d47fe6375bac', points: "1.5 5 10.5 5" }))), h("span", { key: '1ae79389911efaaeac38068a97f246666d259f0b', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'b07515a03f8231ce37e8718a0416e77ef59bca5a', name: "label" })) || this.label, h("span", { key: 'c301bc1625f34f3161387f9ef06b9710f533f2cd', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'f2aa2b0ca452521dfe567d9014bbfc4f39239cf3', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '8810b908cfe30c9d4f66a5f10d15010d8a6e4a29', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))), this.hasHint && (h("div", { key: 'a095e831cbd4a8ed9c6b490205607c2188c9405a', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '9a3ad1814b1b14e57be99d3f09992813c07cb594', class: "box-placeholder" }), h(CatFormHint, { key: '0b4f2f7adb5c45f7e25ad6f29fa83036ec5a2cf7', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            } }, h("input", { key: 'd28a1d799457139337ba0c782d913ade4e74fb07', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '96d80b03df081c19d36ca9d2d56b1542637855bd', class: "box", "aria-hidden": "true" }, h("svg", { key: '268e26a8db34695467583106349ceed890168e1c', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: 'ed1ba34e9839d1e80806ca52e94f4e7a3c6b720b', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: '21eef5470b82b17868a4a591dacce708d04fb048', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: '35d61e299c39c578069e05bb4f5982b33de8ac57', points: "1.5 5 10.5 5" }))), h("span", { key: 'b78cc985ede85e0174ab7d6fd851e9bc9348fdaf', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'bcdb0ed764451d3c7c11c00b68db3b48564bc73d', name: "label" })) || this.label, h("span", { key: '0ed579dadbdb3b4c92af29b670528ca253c49f37', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '03e1b787954ba280b670b86c2cfeda5a3635bed7', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '6264f8d9517ca500c36dc75bbda936a407c5429c', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))), this.hasHint && (h("div", { key: 'e149380c00369d71c02da2dabd78447c515c52d3', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '86e662bf29c81eaf8db818500cb3aebc98fe939b', class: "box-placeholder" }), h(CatFormHint, { key: '3de67315be28edc3357bad66bcf0f1cdb64ee518', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;

package/dist/collection/components/cat-date/cat-date.js CHANGED Viewed

@@ -111,14 +111,14 @@ export class CatDate {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: '976bd5ab47f91d0fd2558da90110dfe7215708c2' }, h("cat-input", { key: 'd7fc538825bbf227cdac59594f4d9388c6f45af1', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, errors: this.errors, errorUpdate: this.errorUpdate, testId: this.testId, nativeAttributes: this.nativeAttributes, value: this.inputValue, dateMaskOptions: this.dateMaskOptions, onCatFocus: e => {
+        return (h(Host, { key: '8e61bf32ad23785d71d3d406c5233b67fd97d013' }, h("cat-input", { key: '88d0e2e74b85897d635720c38d20abde5b6c2a00', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, errors: this.errors, errorUpdate: this.errorUpdate, testId: this.testId, nativeAttributes: this.nativeAttributes, value: this.inputValue, dateMaskOptions: this.dateMaskOptions, onCatFocus: e => {
                 this.inputFocused = e.target === this.input;
                 e.stopPropagation();
                 this.catFocus.emit(e.detail);
             }, onCatBlur: e => {
                 e.stopPropagation();
                 this.onInputBlur(e.detail);
-            } }, h("span", { key: 'acde26c15c84b0313e77bb71f2cfa2c4e9e6ed0f', slot: "label" }, this.label, h("span", { key: '4c6df5b6d7e1657eb27b956a206f5edf50984b06', class: "label-aria" }, " (", this.locale.formatStr, ")")), h("cat-dropdown", { key: 'aeb4b595f4b3b76aa38e24932550424c4b079405', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, h("cat-button", { key: 'aa1a08b022ecfa45a6f891c9920279a8c396c515', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), h("div", { key: '7b975f163b67a61cfc5ed146b614ff36c79b51cd', slot: "content" }, h("cat-date-inline", { key: 'a197d8c60a92626960ade852765a29ab737725fd', ref: el => (this.dateInline = el), min: this.min, max: this.max, value: this.value, hint: true, weeks: true, noClear: true, onCatChange: this.onDateChange.bind(this) }))))));
+            } }, h("span", { key: 'ab9f44e69986f3181b34e49b30797f73cda4a76f', slot: "label" }, this.label, h("span", { key: 'd972e719de11e561a6dfc5b0d5ea04bee717df64', class: "label-aria" }, " (", this.locale.formatStr, ")")), h("cat-dropdown", { key: '8d11ecde79aab1b62b395bc6d6bed4a41e64189f', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, h("cat-button", { key: '67e4877caa735a95e6547ffc07ff7c3e91b7f5a7', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), h("div", { key: '587e5c57b4035a84658843483898a78631a822af', slot: "content" }, h("cat-date-inline", { key: '081dd6e2bf191b2a3b19b13c0d1933f8c7b1086b', ref: el => (this.dateInline = el), min: this.min, max: this.max, value: this.value, hint: true, weeks: true, noClear: true, onCatChange: this.onDateChange.bind(this) }))))));
     }
     getTriggerA11yLabel() {
         const date = this.locale.fromLocalISO(this.value);

package/dist/collection/components/cat-date-inline/cat-date-inline.js CHANGED Viewed

@@ -177,12 +177,12 @@ export class CatDateInline {
         const [minDate, maxDate] = this.getMinMaxDate();
         const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
         const [dateStart, dateEnd] = this.getValue();
-        return (h(Host, { key: 'f99536926cfa6b5cebaeee0234ef393cae7c6290', "aria-label": this.label || undefined }, h("div", { key: '75d8cc40adf407d30bb2346a76f0d88b4a3d7c6a', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '038b0c612f7fad742371cbcc42367a9539dd75eb', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, h("span", { key: 'b5d55a662eebaa50c49a8c653e2659b256b65529', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '73f85529636703818e31875059d90b334ae41f80', name: "label" })) || this.label, h("div", { key: '9f1fabf18e18a8e5ef10c0b67fc7750555769d44', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '9aeec8774b56f6216d7dc56c08a4ac300fe11c67', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '5e18a94063b8ae0844afeb3cb4ca71d14882f9e6', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: 'edecc4cf058717971710ee35b87a132b9906f5ec', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, h("div", { key: '3bd9c5313671337674b07eb35c1af4e6127a3ce2', class: "picker-head" }, h("cat-button", { key: '807e707e95bf1861952b4d53dae86ba33a9fabbe', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), h("cat-button", { key: 'cae8a861478e370cb56a2a0b0e9e03b736fd536e', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), h("h3", { key: '4e6d8580663bb496dffe13c8f03806f15003073d' }, this.getHeadline()), h("cat-button", { key: 'ba0ee1f437b48067599148c526d6d843232640a6', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), h("cat-button", { key: '15359d6e6a498f633ec5d8a47b5fc317a3fe1fa3', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), h("div", { key: '9376764766e77ed75c78403f90c6cd2f45b609ea', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: 'c4411952bf4fd12f6b14dd2d235e220eef1e0280', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
+        return (h(Host, { key: '4f88a5e30d1f61645d5aa8282216db5edaa556d0', "aria-label": this.label || undefined }, h("div", { key: '9200c341cb79bdedc0735191f4ecfda4f117b047', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '02611e74ccbabd435b93aad59f3d1fff0726a27b', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, h("span", { key: '115d1d26624922d8395fb2df8f745aa32f9cf2a9', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'eb833b75fa0e338644f72cbcb1fc5a548eb7dfc1', name: "label" })) || this.label, h("div", { key: '96c32106a48d3190bda2f4c8812c42e8c8d0fc49', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '8db39d017daa88f96ba29ca1633c0509aff20346', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'e553ac1bc15cfe07302954a54d00905b2c5bc742', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: '8f7a7b2518113c00d12329ae0ca06bf98c334866', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, h("div", { key: 'b7b0862916bdeb23d4be2438db325440f3fb0b58', class: "picker-head" }, h("cat-button", { key: '7904e2ef258bb24b6f1279dd6145295ae7db6cea', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), h("cat-button", { key: '178f7126e01234f503f4906259f69a622e0b9d18', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), h("h3", { key: '1b622bc415fa5e937bcfd2b1640b12e4e873e93f' }, this.getHeadline()), h("cat-button", { key: '033fc4f73a3e5b9588a50689dad07b8b43ef3a0f', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), h("cat-button", { key: '38a355bb323254c67fe5ed7d7d33a5ad214a1004', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), h("div", { key: 'd297630ebf2533932d7135aecb3d2166a8a2f151', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: 'ed47ea8d491e56c7907df646d742bba281750820', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
             const day = (i + this.locale.weekInfo.firstDay) % 7;
             return h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
-        })), this.weeks && (h("div", { key: 'f076b226855bb73f817c534e34cb021fb6d48a08', class: "picker-grid-weeks" }, dateGrid
+        })), this.weeks && (h("div", { key: 'b374554582d393c05beb6702ce04ad8077bc7f47', class: "picker-grid-weeks" }, dateGrid
             .filter((_, i) => i % 7 === 0)
-            .map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: '48d757568b3d8640960caadf95f297cfe1f857ee', class: "picker-grid-days" }, dateGrid.map(day => {
+            .map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: '99373d659fe800751f7a9e15ad36ae39900325b0', class: "picker-grid-days" }, dateGrid.map(day => {
             const isStartDate = isSameDay(dateStart, day);
             const isEndDate = isSameDay(dateEnd, day);
             const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
@@ -199,7 +199,7 @@ export class CatDateInline {
                     'date-focusable': this.canFocus(day),
                     'date-disabled': !this.canClick(day)
                 }, nativeAttributes: !this.canFocus(day) ? { tabindex: '-1' } : {}, variant: isStartDate || isEndDate ? 'filled' : isToday ? 'outlined' : 'text', a11yLabel: this.locale.toLocalStr(day), active: isStartDate || isEndDate || isRange, color: isStartDate || isEndDate || isToday ? 'primary' : 'secondary', disabled: !this.canClick(day), onClick: () => this.select(day), "data-date": this.locale.toLocalISO(day) }, day.getDate()));
-        }))), h("div", { key: 'b8df8f56cd18a70f241ad50a9309548355cd6437', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { key: '19b88e876f7770e6bd97134bccae479198e87992', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && h("p", { key: 'eb3a49013b64b0787b8c318e6a274900d95cf4f5', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { key: '203a7eec0e8719d4a78f1222426049213f787ba7', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: '75736aa7b9f8636432a116f82cb886fd0c99393f', class: "cursor-aria", "aria-live": "polite" })));
+        }))), h("div", { key: '20b7927695e94d38b2d3ca98357234ca349efe44', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { key: 'a23f374f39e146922f0ef26245f0ad3ddef92b52', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && h("p", { key: '897142aae96af3f1dbf8faa388546a750da32790', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { key: 'c1bfa1f3f46f56caeea23b39bd63e7c42ff6ed07', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: '5a892650df531633253d7495cd19800c3f07d572', class: "cursor-aria", "aria-live": "polite" })));
     }
     focus(date, focus = true) {
         const [minDate, maxDate] = this.getMinMaxDate();

package/dist/collection/components/cat-datepicker/cat-datepicker.js CHANGED Viewed

@@ -126,7 +126,7 @@ export class CatDatepickerFlat {
     }
     render() {
         return [
-            h("cat-input", { key: '9e47a3a8ed8daa56c7bb50d226496a90fe5a6fbe', ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
+            h("cat-input", { key: '13a6214c279fa0a80ee26003846844ab712788a6', ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
                     e.stopPropagation();
                     this.value = e.detail || undefined;
                 }, onCatFocus: e => {
@@ -135,8 +135,8 @@ export class CatDatepickerFlat {
                 }, onCatBlur: e => {
                     e.stopPropagation();
                     this.catBlur.emit(e.detail);
-                } }, this.hasSlottedLabel && (h("span", { key: '9aa4a8f3b357bd599b1c9e0c1241269205140dbc', slot: "label" }, h("slot", { key: '0e9e849371bc530561a2d538f776259b7fc3f44a', name: "label" }))), this.hasSlottedHint && (h("span", { key: 'bd1666fe3725e032ec117ad9cd860e151a89569a', slot: "hint" }, h("slot", { key: 'c75f0b32ab9019912b443205bf34b00371db9e70', name: "hint" })))),
-            h("div", { key: '9916d66043f972b18a9d33b37b79fc52cf310542', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
+                } }, this.hasSlottedLabel && (h("span", { key: 'f21cc9a20667083df413002d759719ce19bfdb7a', slot: "label" }, h("slot", { key: '8f0e1bdc5e51547188dcf6eab433bda4741e5058', name: "label" }))), this.hasSlottedHint && (h("span", { key: '59bd33499e1b4d70f554527e5ac75823c7a50a2e', slot: "hint" }, h("slot", { key: 'ecaaba4ad177832b4ced570e2802a10778dc30ae', name: "hint" })))),
+            h("div", { key: 'f20bead2effff6240291c9b2241010bfc1c88ae2', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
         ];
     }
     initDatepicker(input) {

package/dist/collection/components/cat-datepicker-inline/cat-datepicker-inline.js CHANGED Viewed

@@ -45,11 +45,11 @@ export class CatDatepickerInline {
         this.pickr = this.initDatepicker(this.input);
     }
     render() {
-        return (h(Host, { key: '6d9ecbd5cc1099ce3a8fb0c5a9cca226a62525f7' }, h("div", { key: '405b15dfbde6cf538022ed06fbca72eb4a290dc7', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
+        return (h(Host, { key: '5877c910a861b8c82e32a8b636260bfccab1c57e' }, h("div", { key: '151936c5d8db28c6c7f6f602cc867c51762217aa', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
                 'datepicker-wrapper': true,
                 'datepicker-disabled': this.disabled,
                 'datepicker-readonly': this.readonly
-            } }, h("input", { key: '4373cedb5e6c0d08631cec9c16b8c859f5f2daea', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
+            } }, h("input", { key: 'edb97330b0b6146cc6cbdefe904b59681d0296b9', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
     }
     initDatepicker(input) {
         if (!input) {

package/dist/collection/components/cat-dropdown/cat-dropdown.js CHANGED Viewed

@@ -184,7 +184,7 @@ export class CatDropdown {
         this.trap = undefined;
     }
     render() {
-        return (h(Host, { key: 'c76a5d87c676da3b2744c685f5108d390e35691b' }, h("slot", { key: 'debf796d465c97d19fdd8bfa7029ccaad0056c28', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'f6780795027087c899c0a2dd8b826c9e23bc4d2b', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '2ed88e6ea720c329b01c9d935507565a6bcbd2d9', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '686eacb75cd07a718aeb2cab2e41176116493d4a', name: "content" }))));
+        return (h(Host, { key: '4e91635ab4bc80145586164ae41f48dca6198779' }, h("slot", { key: 'dc974d5f288760ed8cca3eb3b0266a6d3b6fcec2', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'd9bf7cad85fda295ccad2fadcac8776068e9da22', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '2c2c5b04e05c28e01c3eef6d641542a39ee1554b', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '6d64a56876aa01e81759a9260c8e7f9f65c20742', name: "content" }))));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;

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

@@ -28,7 +28,7 @@ export class CatFormGroup {
         });
     }
     render() {
-        return (h(Host, { key: 'd9cf4d831edfd4ec8813ba2df5f4a4928408966d', style: { '--label-size': this.labelSize } }, h("slot", { key: 'bca4d87e0a954bc3f227dc230a66fdcc4cdd4015', onSlotchange: this.onSlotChange.bind(this) })));
+        return (h(Host, { key: '256d7b8493d24b515d9989f6c0bfa3d2af99ba67', style: { '--label-size': this.labelSize } }, h("slot", { key: '806080ce0d61ce3b64819dcb50b7bc1651b31c98', onSlotchange: this.onSlotChange.bind(this) })));
     }
     onSlotChange() {
         this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker, cat-date, cat-time'));

package/dist/collection/components/cat-icon/cat-icon.js CHANGED Viewed

@@ -14,7 +14,7 @@ export class CatIcon {
         this.size = 'm';
     }
     render() {
-        return (h("span", { key: '1e1698413feaee8ca810b50370fc44a5a9f229dc', innerHTML: this.iconSrc || (this.icon ? icons.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+        return (h("span", { key: 'b7c7a3e889ebc12349f1b8f35c227feb1992f8a8', innerHTML: this.iconSrc || (this.icon ? icons.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
                 icon: true,
                 [`icon-${this.size}`]: this.size !== 'inline'
             } }));

package/dist/collection/components/cat-input/cat-input.css CHANGED Viewed

@@ -763,6 +763,55 @@ input {
   right: 1.5rem;
 }
+/* Color picker */
+.input-inner-wrapper.has-clearable,
+.input-inner-wrapper.has-toggle-password {
+  padding-right: 2rem;
+}
+.input-inner-wrapper.has-clearable.has-toggle-password {
+  padding-right: 4rem;
+}
+input[type=color] {
+  flex: 0 0 1.5625rem;
+  width: 1.5625rem;
+  height: 1.5625rem;
+  border: 0.0625rem solid var(--cat-border-color-dark, #ccc);
+  border-radius: 0.25rem;
+  background: none;
+  cursor: pointer;
+  appearance: none;
+  box-sizing: border-box;
+  padding: 0 !important;
+}
+/* Chrome / Safari */
+input[type=color]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+input[type=color]::-webkit-color-swatch {
+  border: none;
+  border-radius: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+/* Firefox */
+input[type=color]::-moz-color-swatch {
+  border: none;
+  border-radius: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.color-value {
+  flex-grow: 1;
+}
 :host(.cat-date-input) .input-wrapper,
 :host(.cat-time-input) .input-wrapper {
   z-index: 1;

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

@@ -134,19 +134,24 @@ export class CatInput {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h("div", { key: 'ddd30568bc606187f29713b289ca98304d869ddc', class: {
+        return (h("div", { key: 'bd0a9d96c36548acd2b2f6aa1ae0744635c7b5f9', class: {
                 'input-field': true,
                 'input-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false
-            } }, h("div", { key: 'bcb68ff5f8fab8ec812ec383f31f9cc797668d31', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '22d12b04e4f7f28062bae55facbfd331242d9de0', htmlFor: this.id, part: "label" }, h("span", { key: 'e63fbff9d2158a279c43865338ae2de1f9aba035', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'efb5f9574f6d6f8c74980f3bdf12fddb9de20e56', name: "label" })) || this.label, h("div", { key: 'a31ca238ee5d5dfcaaccbbfe01ea2252f91c88a7', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '3ac66d41ca7d8ec135552d741090836e8aa49fbd', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '7c272ea28b73743254095670842e6d34d639da59', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: '6197d7494ad6fc6f35105bcb250b893491f79940', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: '524ac9cb87a9b131ae4859aa849e088f251999a6', class: "input-container" }, h("div", { key: '93d11e5954b6b89056316ec764fcffea2761b166', class: "input-outer-wrapper" }, h("div", { key: '08de200566625c6c7e50f7d7608a5d8d37a970ec', class: {
+            } }, h("div", { key: 'c45a4cefddae80927025416a097da360cdc8f7cb', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '8f25959d146092a9ba9b37f9d84740b691c353dc', htmlFor: this.id, part: "label" }, h("span", { key: '29f459cdfd4532d0e3d2050b0e3a0cb09e9c8f9c', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'c7e12022d46b55adcd4442c367e4af70c1c1c0fe', name: "label" })) || this.label, h("div", { key: 'cbb6842d97efa945dc9feeaa949e8855c9cad3a3', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '29b30cf42646acc6bc73abef9c0e8ca7366e9f92', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'f2a32d4fd9b0d92bbfc09021d7d9cce49b5fedfa', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: '8d6ad50dde9d928c9713eb366dd48bc4259174da', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: '02ecf36f09889781999bbf3362cdee344d99e7bb', class: { 'input-color': this.type === 'color', 'input-container': true } }, h("div", { key: '4c01f80a2d944755bd3289d3e574f3d4f051aaf6', class: "input-outer-wrapper" }, h("div", { key: 'a8795479b5d1a1e8b6e6ab6b91ff6862ad0b51c1', class: {
                 'input-wrapper': true,
                 'input-round': this.round,
                 'input-readonly': this.readonly,
                 'input-disabled': this.disabled,
                 'input-invalid': this.invalid
-            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: '1921d39b042c6b60748487bdb028011b00ee854b', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: '90dfdb8df272a8827238ca1ab62533cfeaed10b3', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: '7aea0b58c95e9810f8eba6318254bf535020f9b7', class: "input-inner-wrapper" }, h("input", { key: 'd141269ed21c9ce76d2357c0f657779a0826e706', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: '23036e3d4e32e1e14df1455aee10f800366d2cc9', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: 'a94c5274ecb955b50d76b9696c0a09ac27af7c58', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: '7e76549a0bd476c56bb5f5b59c1ca04ec29cfb80', class: {
+                'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
+                'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value,
+                'input-inner-wrapper': true,
+                'type-color': this.type === 'color'
+            } }, this.type === 'color' && h("span", { key: '92f9896a0a783d6a28c0fd995a2782eefa7a1f03', class: "color-value" }, this.value ?? '#000000'), h("input", { key: 'b95289c46425e9e74accaaf01b578738cc83c035', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
                 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
                 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
-            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: '3ee9ccf204a398a6c5d8076425ece0a286417f75', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: 'b6ca03467af3e3d85e3c92916ce24d58cc27a4ba', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && h("cat-spinner", { key: '269ec9cd5d09ca5b52bfe31ff5d2eff78458065e', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: '2a1fd4d65098c47cbf76a3ed9bb0ce2a10aac98b', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: '04fc1241b6955660ebe7c89a360de76363965888', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: 'ff4775e4702ada09db771375b8334562027671f2', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: 'ed13a76f3044e8b6404d8459be754ec83b122216', name: "addon" })), this.hasHint && (h(CatFormHint, { key: '5d04ffdc5dcd4af5be879046cd97acec939456c3', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
+            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: '421ad2d3c56d6e4cb59b43f95419bbaa8b1e4290', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: 'd5f9a2359b49d2dcf6d83ce7b89f598d33794753', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && h("cat-spinner", { key: '9c915c3c680533a0f51a99028b5d464f9c65c4bb', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: '6543e2b05a615956045bd5c25ba57d5822ed9f7c', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: '374fcb93191e29ac2c584bfaacbaefd3012c4318', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: '9b6db3cc2dfcfe227fca53ad4a151e3d85a908b2', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: '38a26d95427bb8a597973ea1038d7b16d7737d0a', name: "addon" })), this.hasHint && (h(CatFormHint, { key: 'f3db36c2ffd488ea7e95fb144d7986fbc4dfef23', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\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';\nimport { formatDate, formatTime } from 'cleave-zen';\n\nlet nextUniqueId = 0;\n\ntype TimeUnit = 'h' \| 'm' \| 's';\ntype TimeFormatType = '12' \| '24';\ntype DateUnit = 'Y' \| 'y' \| 'm' \| 'd';\n\nexport interface FormatTimeMaskOptions {\n timePattern?: TimeUnit[];\n timeFormat?: TimeFormatType;\n}\n\nexport interface FormatDateMaskOptions {\n delimiter?: string;\n datePattern?: DateUnit[];\n dateMin?: string;\n dateMax?: string;\n}\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 * @slot counter - Custom counter element to be displayed in the top right corner of the label.\n * @part label - The native label element.\n * @part input - The native input element.\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 formAssociated: true,\n shadow: {\n delegatesFocus: true\n }\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 \| true;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() hasSlottedCounter = false;\n\n @State() isPasswordShown = false;\n\n @State() errorMap?: ErrorMap \| true;\n\n @AttachInternals() internals!: ElementInternals;\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?: boolean;\n\n /\n If the horizontal value is not provided, this fallback value is used. Can be set by form-group.\n * @internal\n /\n @Prop() fallbackHorizontal?: boolean;\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 should show a password toggle button for password inputs.\n /\n @Prop() togglePassword = false;\n\n /\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n Displays the input in a loading state with a spinner.\n /\n @Prop() loading = 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 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 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 change with the given delay in milliseconds or immediately on blur.\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 A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n /\n @Prop() testId?: string;\n\n /\n Activates cleave-zen time mask on input\n /\n @Prop() timeMaskOptions?: FormatTimeMaskOptions;\n\n /\n Activates cleave-zen date mask on input\n /\n @Prop() dateMaskOptions?: FormatDateMaskOptions;\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 componentWillLoad(): void {\n this.onErrorsChanged(this.errors, undefined, false);\n }\n\n componentWillRender(): void {\n this.internals.setFormValue(this.value ?? null);\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n this.hasSlottedCounter = !!this.hostElement.querySelector('[slot=\"counter\"]');\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 // hack to make datepicker inputs focusable. The datepicker hides the input\n // element and dynamically creates a sibling. We need to find the new input\n // element and focus it instead.\n const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;\n 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 onErrorsChanged(newValue?: boolean \| string[] \| ErrorMap, _oldValue?: unknown, update: boolean = true) {\n if (!coerceBoolean(this.errorUpdate)) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(newValue)\n ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : newValue \|\| undefined;\n if (update) {\n this.showErrorsIfTimeout() \|\| this.showErrorsIfNoFocus();\n }\n }\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0;\n return (\n <div\n class={{\n 'input-field': true,\n 'input-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false\n }}\n >\n <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} part=\"label\">\n <span class=\"label-wrapper\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n <div class=\"label-metadata\">\n {!this.required && (this.requiredMarker ?? 'optional').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 \|\| this.hasSlottedCounter) && (\n <div class=\"label-character-count\" aria-hidden=\"true\">\n {this.hasSlottedCounter ? (\n <slot name=\"counter\"></slot>\n ) : (\n `${this.value?.length ?? 0}/${this.maxLength}`\n )}\n </div>\n )}\n </div>\n </span>\n </label>\n )}\n </div>\n <div class=\"input-container\">\n <div class=\"input-outer-wrapper\">\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-readonly': this.readonly,\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 && (\n <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n )}\n <div class=\"input-inner-wrapper\">\n <input\n data-test={this.testId}\n {...this.nativeAttributes}\n part=\"input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,\n 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value\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.isPasswordShown ? 'text' : 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.hasHint ? this.id + '-hint' : undefined}\n ></input>\n {this.clearable && !this.disabled && !this.readonly && 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 data-dropdown-no-close\n ></cat-button>\n )}\n {this.togglePassword && !this.disabled && !this.readonly && this.value && (\n <cat-button\n class=\"toggle-password\"\n icon={this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show'}\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword')}\n onClick={this.doTogglePassword.bind(this)}\n ></cat-button>\n )}\n </div>\n {this.loading && <cat-spinner size=\"m\" class=\"icon-loading\"></cat-spinner>}\n {!this.invalid && this.icon && this.iconRight && (\n <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n )}\n {this.invalid && (\n <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>\n )}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n <slot name=\"addon\"></slot>\n </div>\n {this.hasHint && (\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 hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint \|\| this.invalid;\n }\n\n private get invalid() {\n return this.errorMap === true \|\| !!Object.keys(this.errorMap \|\| {}).length;\n }\n\n private onInput() {\n let formattedValue = this.input.value;\n if (this.timeMaskOptions) {\n formattedValue = formatTime(this.input.value, this.timeMaskOptions);\n this.input.value = formattedValue;\n }\n if (this.dateMaskOptions) {\n formattedValue = formatDate(this.input.value, this.dateMaskOptions);\n this.input.value = formattedValue;\n }\n this.value = formattedValue;\n this.internals.setFormValue(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 doTogglePassword() {\n this.isPasswordShown = !this.isPasswordShown;\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 private findSiblingInput(node: Node \| null): HTMLInputElement \| undefined {\n if (node instanceof HTMLInputElement) {\n return node;\n } else if (node?.nextSibling) {\n return this.findSiblingInput(node.nextSibling);\n }\n return undefined;\n }\n}\n"]}
1	+ {"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\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';\nimport { formatDate, formatTime } from 'cleave-zen';\n\nlet nextUniqueId = 0;\n\ntype TimeUnit = 'h' \| 'm' \| 's';\ntype TimeFormatType = '12' \| '24';\ntype DateUnit = 'Y' \| 'y' \| 'm' \| 'd';\n\nexport interface FormatTimeMaskOptions {\n timePattern?: TimeUnit[];\n timeFormat?: TimeFormatType;\n}\n\nexport interface FormatDateMaskOptions {\n delimiter?: string;\n datePattern?: DateUnit[];\n dateMin?: string;\n dateMax?: string;\n}\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 * @slot counter - Custom counter element to be displayed in the top right corner of the label.\n * @part label - The native label element.\n * @part input - The native input element.\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 formAssociated: true,\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatInput {\n private readonly _id = `cat-input-${nextUniqueId++}`;\n\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n private errorMapSrc?: ErrorMap \| true;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() hasSlottedCounter = false;\n\n @State() isPasswordShown = false;\n\n @State() errorMap?: ErrorMap \| true;\n\n @AttachInternals() internals!: ElementInternals;\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?: boolean;\n\n /\n If the horizontal value is not provided, this fallback value is used. Can be set by form-group.\n * @internal\n /\n @Prop() fallbackHorizontal?: boolean;\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 should show a password toggle button for password inputs.\n /\n @Prop() togglePassword = false;\n\n /\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n Displays the input in a loading state with a spinner.\n /\n @Prop() loading = 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 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 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 change with the given delay in milliseconds or immediately on blur.\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 A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n /\n @Prop() testId?: string;\n\n /\n Activates cleave-zen time mask on input\n /\n @Prop() timeMaskOptions?: FormatTimeMaskOptions;\n\n /\n Activates cleave-zen date mask on input\n /\n @Prop() dateMaskOptions?: FormatDateMaskOptions;\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 componentWillLoad(): void {\n this.onErrorsChanged(this.errors, undefined, false);\n }\n\n componentWillRender(): void {\n this.internals.setFormValue(this.value ?? null);\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n this.hasSlottedCounter = !!this.hostElement.querySelector('[slot=\"counter\"]');\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 // hack to make datepicker inputs focusable. The datepicker hides the input\n // element and dynamically creates a sibling. We need to find the new input\n // element and focus it instead.\n const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;\n 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 onErrorsChanged(newValue?: boolean \| string[] \| ErrorMap, _oldValue?: unknown, update: boolean = true) {\n if (!coerceBoolean(this.errorUpdate)) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(newValue)\n ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n : newValue \|\| undefined;\n if (update) {\n this.showErrorsIfTimeout() \|\| this.showErrorsIfNoFocus();\n }\n }\n }\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0;\n return (\n <div\n class={{\n 'input-field': true,\n 'input-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false\n }}\n >\n <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} part=\"label\">\n <span class=\"label-wrapper\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n <div class=\"label-metadata\">\n {!this.required && (this.requiredMarker ?? 'optional').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 \|\| this.hasSlottedCounter) && (\n <div class=\"label-character-count\" aria-hidden=\"true\">\n {this.hasSlottedCounter ? (\n <slot name=\"counter\"></slot>\n ) : (\n `${this.value?.length ?? 0}/${this.maxLength}`\n )}\n </div>\n )}\n </div>\n </span>\n </label>\n )}\n </div>\n <div class={{ 'input-color': this.type === 'color', 'input-container': true }}>\n <div class=\"input-outer-wrapper\">\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-readonly': this.readonly,\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 && (\n <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n )}\n <div\n class={{\n 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,\n 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value,\n 'input-inner-wrapper': true,\n 'type-color': this.type === 'color'\n }}\n >\n {this.type === 'color' && <span class=\"color-value\">{this.value ?? '#000000'}</span>}\n <input\n data-test={this.testId}\n {...this.nativeAttributes}\n part=\"input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,\n 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value\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.isPasswordShown ? 'text' : 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.hasHint ? this.id + '-hint' : undefined}\n ></input>\n {this.clearable && !this.disabled && !this.readonly && 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 data-dropdown-no-close\n ></cat-button>\n )}\n {this.togglePassword && !this.disabled && !this.readonly && this.value && (\n <cat-button\n class=\"toggle-password\"\n icon={this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show'}\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword')}\n onClick={this.doTogglePassword.bind(this)}\n ></cat-button>\n )}\n </div>\n {this.loading && <cat-spinner size=\"m\" class=\"icon-loading\"></cat-spinner>}\n {!this.invalid && this.icon && this.iconRight && (\n <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n )}\n {this.invalid && (\n <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>\n )}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n <slot name=\"addon\"></slot>\n </div>\n {this.hasHint && (\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 hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint \|\| this.invalid;\n }\n\n private get invalid() {\n return this.errorMap === true \|\| !!Object.keys(this.errorMap \|\| {}).length;\n }\n\n private onInput() {\n let formattedValue = this.input.value;\n if (this.timeMaskOptions) {\n formattedValue = formatTime(this.input.value, this.timeMaskOptions);\n this.input.value = formattedValue;\n }\n if (this.dateMaskOptions) {\n formattedValue = formatDate(this.input.value, this.dateMaskOptions);\n this.input.value = formattedValue;\n }\n this.value = formattedValue;\n this.internals.setFormValue(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 doTogglePassword() {\n this.isPasswordShown = !this.isPasswordShown;\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 private findSiblingInput(node: Node \| null): HTMLInputElement \| undefined {\n if (node instanceof HTMLInputElement) {\n return node;\n } else if (node?.nextSibling) {\n return this.findSiblingInput(node.nextSibling);\n }\n return undefined;\n }\n}\n"]}

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

@@ -52,9 +52,9 @@ export class CatPagination {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h("nav", { key: 'ed5098e1578e2157e0f5b8c539f313e2892c5f05', role: "navigation" }, h("ol", { key: '6f63a5c0a79722913dafbf1b6391ab586a20695a', class: {
+        return (h("nav", { key: '92edf5d03bcf32e751e5a477280e4df4a48fe92d', role: "navigation" }, h("ol", { key: 'd3abfee45a341bd03c1f6d1e1f275f5714817539', class: {
                 [`cat-pagination-${this.size}`]: Boolean(this.size)
-            } }, h("li", { key: '0dd989fa017490749141ab2029546b115a34ce27' }, h("cat-button", { key: '8614e9e1ebfc2ff3aeda2cec8be07aeff6e592eb', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: i18n.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: 'b864788a70e125ae93a34e705522e537b359a12a' }, h("cat-button", { key: '93f6d89967b6f6b93b733fbcb628cf4a3663dbf0', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: i18n.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
+            } }, h("li", { key: '7d9a267ca412d15e869321b331729810cc09253c' }, h("cat-button", { key: 'da1fb4fca4ce3e34eb269fbbd3003baad95fe5da', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: i18n.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: '14237910fe38dbc5d829b804ee5fd9613a68c783' }, h("cat-button", { key: '9e7ad815b7708ec9c1200bd923fa61be5c6e9552', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: i18n.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
     }
     get isFirst() {
         return this.page === 0;

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

@@ -75,13 +75,13 @@ export class CatRadio {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: 'ca329dab3b08cf59911216e6d1d89e931d4c6836' }, h("label", { key: '0fae08dcf9b6017f1052342f22989a9218437a82', htmlFor: this.id, class: {
+        return (h(Host, { key: 'd5bdfdba836cb7f6ea32ffd9befa8e21b3681f1d' }, h("label", { key: 'a4bc5f97bc1c9313fc42ed4e6ffa4f3dcdf0b5db', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: 'eed2cf5a6e64d64770466bbfcd5fd0f6e7e329d9', class: "radio" }, h("input", { key: '02a288466717c319419f94e2f9607ab63575e9d5', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'f75aa8f50e723b8aa90b60001190638d3d56234a', class: "circle" })), h("span", { key: '52de52cc932bb531440862a04ede38cdf2b29a3a', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '3c66d88d6517721590a342001258b5375f274714', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'b86904829302d22f22ce51f42bd147504b6e387f', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: 'dcca2f05ea10d9cbf731c7b59f82e33916014327', class: "circle-placeholder" }), h(CatFormHint, { key: 'e7b29ec3c4675b1e077fc783fe90780b5794f78a', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: '26d8bda2a2d7eb9479762cde79ddcbf4ffa66c31', class: "radio" }, h("input", { key: '93aa9f8c9c6c80032806821d4a25d211351f5ae7', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'de64c16b1b208ee39173a479961c8a9c35398891', class: "circle" })), h("span", { key: '31aee49255f90b202fa24bd7e3454faef997403d', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '42fd54752399f0f598051e3b88df68111d6e5871', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'dd8ebf787f21f0b3ec2d4b3502f5ed55ffdc1828', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '2107fc47f09c98351657658066642380848711c6', class: "circle-placeholder" }), h(CatFormHint, { key: 'ff77ec0e74627dab0b823150681c8be5a3ad9d98', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;

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

@@ -70,7 +70,7 @@ export class CatRadioGroup {
         }
     }
     render() {
-        return (h("div", { key: 'af9aff52c285bb32986d27c4f062f7ca8dbe394e', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: 'e4542e17427cdd2d31e38276afe5d240f5b9e6cf' })));
+        return (h("div", { key: 'bddb6ec500cf6153286300ae20bad8925d4dcfd1', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: '55c9ce43491b01ee35183b3ba880f62e49a58f0f' })));
     }
     init() {
         this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));

package/dist/collection/components/cat-scrollable/cat-scrollable.js CHANGED Viewed

@@ -69,13 +69,13 @@ export class CatScrollable {
     }
     render() {
         return [
-            h("div", { key: '8153419d11ba30f6360acb82b87ac62727248599', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { key: '3374f51499e735a692ccd8e0f9bea23c0132b47d', class: "shadow-top" }), !this.noShadowX && h("div", { key: 'd208685280ae658baf5672003141ab9349d0feef', class: "shadow-left" }), !this.noShadowX && h("div", { key: '0404d0cd8afbaac6ac9d89947ce9fbd91c7929f6', class: "shadow-right" }), !this.noShadowY && h("div", { key: '539c15c633403f03e4fc36c1fb1d86e498c8d9cc', class: "shadow-bottom" })),
-            h("div", { key: '0ea3a47900df0689a73a5c440a8774ca04edf4ad', ref: el => (this.scrollElement = el), class: {
+            h("div", { key: 'a74da54b345c5d35e790a767112256623298fb45', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { key: 'c1210162912c663853d3693c1d390c11cc3fce15', class: "shadow-top" }), !this.noShadowX && h("div", { key: '7926685bbacaf7338667e507455ddb91e8fa716f', class: "shadow-left" }), !this.noShadowX && h("div", { key: '2b5c384ab9ea25f4cfc03e4fa96c494d29b220a3', class: "shadow-right" }), !this.noShadowY && h("div", { key: '9beefb53981be683f2fff1e3d199a5cc79f939b6', class: "shadow-bottom" })),
+            h("div", { key: '84440bc3d95ec0686ecc080b70ed763e5a140851', ref: el => (this.scrollElement = el), class: {
                     'scrollable-content': true,
                     'scroll-x': !this.noOverflowX,
                     'scroll-y': !this.noOverflowY,
                     'no-overscroll': this.noOverscroll
-                } }, h("slot", { key: '9c10382fc5f4773242738be4070af6bd5ce2e2d3' }))
+                } }, h("slot", { key: '4f001c11db1d3c8f7d23ac8187d356abe88ef190' }))
         ];
     }
     attachEmitter(from, emitter) {