@haiilo/catalyst 10.36.1 → 11.0.0

package/dist/cjs/cat-alert_30.cjs.entry.js

@@ -823,7 +823,7 @@ const CatAlert = class {
         setAttributeDefault(this, 'role', this.mapRole.get(this.color));
     }
     render() {
-        return (index.h(index.Host, { key: 'c02988c259d20cfb381b69a43cd9800a075f9c97' }, !this.noIcon && index.h("cat-icon", { key: 'fee7a2b021437de0c7617187e48c3e436218b50f', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), index.h("div", { key: '4bb19866ff246d7ec956c213e39f8d09080f02da', class: "content" }, index.h("slot", { key: 'a3356a8b51747570f01c33cd77106156aed5c404' }))));
+        return (index.h(index.Host, { key: '5cda6d92f1cf40029c2a93723999ed9e8c44baac' }, !this.noIcon && index.h("cat-icon", { key: '69124d111b0a62932bbd761b6cbd1dc4ab155670', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), index.h("div", { key: '22f6070cefa6ef5036e8b9e1ec7dcad357a69462', class: "content" }, index.h("slot", { key: 'e86f500e97dd688b986aa90af5db0f94819407e4' }))));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -1084,7 +1084,7 @@ const CatBadge = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2c10a8da896b2fe6b7637ec871386da6ee9dc132', "data-icon-badge": this.isIconBadge ? this.size : null }, this.hasPrefixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null, this.isIconBadge ? (index.h("cat-icon", { icon: this.icon, size: this.iconSize, class: "icon-only" })) : (index.h("slot", null)), this.hasSuffixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null));
+        return (index.h(index.Host, { key: '61ec6bb61ee078254f1fc4277c4b5608d055acde', "data-icon-badge": this.isIconBadge ? this.size : null }, this.hasPrefixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null, this.isIconBadge ? (index.h("cat-icon", { icon: this.icon, size: this.iconSize, class: "icon-only" })) : (index.h("slot", null)), this.hasSuffixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -1296,7 +1296,7 @@ const CatButtonGroup = class {
         this.a11yLabel = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '2b9aeb09c4290a27751f568e596a3de21f8deeb3', role: "group", "aria-label": this.a11yLabel }, index.h("slot", { key: '5a6afa70513843b8c201a649ed0edb30fea9b7fc', onSlotchange: this.onSlotChange.bind(this) })));
+        return (index.h(index.Host, { key: '3d43547333f73560d31ca96bdba2d2b8b9976dbd', role: "group", "aria-label": this.a11yLabel }, index.h("slot", { key: 'd329ea90250b161862361e907427920e8866445a', 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"]'));
@@ -1318,7 +1318,7 @@ const CatCard = class {
         this.catLoad = index.createEvent(this, "catLoad", 7);
     }
     render() {
-        return index.h("slot", { key: '4d88ab8e5cf1e13a3242b646314f034f5fa0fdfe' });
+        return index.h("slot", { key: '6617daf8e8f9c7e854f287c49c23d4985588fc79' });
     }
     componentDidLoad() {
         this.catLoad.emit();
@@ -1411,13 +1411,13 @@ const CatCheckbox = class {
         this.input.blur();
     }
     render() {
-        return (index.h(index.Host, { key: '05b68d962533497b453115b800e3ea303158212c' }, index.h("label", { key: 'd15945284e20c6d58cf2df7688b036b2e5425f0f', htmlFor: this.id, class: {
+        return (index.h(index.Host, { key: '22986b5dd3edf4e197fad9e02e7725c80e5f9bc5' }, index.h("label", { key: '531252b51952b5731b4038f6ddf77a56b2ce4b4b', 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'
-            } }, index.h("input", { key: 'a5d6f3093e75db63e7c300253518e42106760a52', "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 }), index.h("span", { key: '0c65b6e371a36520133fd172be153df28196491d', class: "box", "aria-hidden": "true" }, index.h("svg", { key: '044cab34d712b243c9329922482df42694950cfc', class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { key: 'a573d56014dc292b1f41cb1b01f28d814b4a5516', points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { key: 'f09647dc93bfb204ce076dc77ec32ca9d024ea65', class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { key: '9cb83216b18ba26d53936911c73e2f3de67916c3', points: "1.5 5 10.5 5" }))), index.h("span", { key: '84c1bee050ca233c8fdda98ceace71de343a350d', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '61a771b1bad26a055baed80e762c0aaac09bc3f4', name: "label" })) || this.label, index.h("span", { key: '5a330f42046052f38bb46e149fc029daa8fb8f3e', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '4579818c0b721db3e9f177c9510072eaef451dba', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'a5ca8a8bc0753aef66d36f86f6c61c31ec4a4069', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (index.h("div", { key: '15312bf5c2d948928fb70e6055b28ae996ffdd1b', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: 'f1bf992ec81de9aa642093aafa8bd8da73d237f8', class: "box-placeholder" }), index.h(CatFormHint, { key: '66354c340d274a802a21eac6d95b1e4390cfde71', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
+            } }, index.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 }), index.h("span", { key: '4ec18b92e0d09f2f17ed7f9a5444efb4448d2bcf', class: "box", "aria-hidden": "true" }, index.h("svg", { key: '8e0f01f6326c0f39d0d1fece1a68eb51907194ea', class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { key: '4c43fcff56b492108820b0f657063d80cf478284', points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { key: 'b251c0afcef5841ed7c4e9bfd7a57c783109f897', class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { key: 'e44721268266f5e97884678da809d47fe6375bac', points: "1.5 5 10.5 5" }))), index.h("span", { key: '1ae79389911efaaeac38068a97f246666d259f0b', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: 'b07515a03f8231ce37e8718a0416e77ef59bca5a', name: "label" })) || this.label, index.h("span", { key: 'c301bc1625f34f3161387f9ef06b9710f533f2cd', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'f2aa2b0ca452521dfe567d9014bbfc4f39239cf3', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '8810b908cfe30c9d4f66a5f10d15010d8a6e4a29', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (index.h("div", { key: 'a095e831cbd4a8ed9c6b490205607c2188c9405a', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '9a3ad1814b1b14e57be99d3f09992813c07cb594', class: "box-placeholder" }), index.h(CatFormHint, { key: '0b4f2f7adb5c45f7e25ad6f29fa83036ec5a2cf7', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -1554,6 +1554,7 @@ const CatDate = class {
         this.language = of.catI18nRegistry.getLocale();
         this.locale = getLocale$2(this.language);
         this.inputFocused = false;
+        this.dateMaskOptions = undefined;
         this.requiredMarker = 'optional';
         this.horizontal = false;
         this.autoComplete = 'off';
@@ -1602,13 +1603,12 @@ const CatDate = class {
     componentDidLoad() {
         const format = this.locale.formatStr.replace('YYYY', 'Y').replace('YY', 'y').replace('MM', 'm').replace('DD', 'd');
         const [, p1, d1, p2, p3] = /(\w+)([^\w]+)(\w+)[^\w]+(\w+)/.exec(format) || [];
-        this.input?.mask({
-            date: true,
+        this.dateMaskOptions = {
             dateMin: this.min,
             dateMax: this.max,
             delimiter: d1,
             datePattern: [p1, p2, p3]
-        });
+        };
     }
     /**
      * Programmatically move focus to the input. Use this method instead of
@@ -1635,14 +1635,14 @@ const CatDate = class {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (index.h(index.Host, { key: 'c5d22adcdcc4e7a1c27b5613b952f37a6ad3b85c' }, index.h("cat-input", { key: '1be6acf0b3e7c40bfc6705f26ae57f76b790c636', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, 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, onCatFocus: e => {
+        return (index.h(index.Host, { key: '446b89d959955840787f93b304c60c14610f19a3' }, index.h("cat-input", { key: 'd1a7ac9cac5bbfaf53ad06c7604503658a378bdd', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, 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);
-            } }, index.h("span", { key: '11dfc57ae496dda334707e09fb1cdc1f55a57a5f', slot: "label" }, this.label, index.h("span", { key: '97dc78369c99254d3bb5d1e8cf5b0c65a0b08aac', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: 'cebca16517e4117352b6366feb6b882fdb58e4f0', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: '410d6d2238bfc5f361d404fdfc679779318ce74e', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: '2f72d4abc68e97c009a0b7a04aaf82569282bdce', slot: "content" }, index.h("cat-date-inline", { key: '4ed60377ffa0ae6de697be7eb5b447f5625e94e4', 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) }))))));
+            } }, index.h("span", { key: '04cf706a258dd0a8f45bbd938ac9cd0feb663044', slot: "label" }, this.label, index.h("span", { key: '87cb203b21f42eca664a06bf0363158f577248a7', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: '7bfa57a6f2758e8299f49ce9d7d114368c088084', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: 'e5fce006dccc245f98800c21adbe00354813f008', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: '20896aaf3e536510c0c8ca1e354989ab9afc42e0', slot: "content" }, index.h("cat-date-inline", { key: '6b3d8c5cdf01af45926ef3593d72a6625bb022cb', 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);
@@ -2445,12 +2445,12 @@ const CatDateInline = class {
         const [minDate, maxDate] = this.getMinMaxDate();
         const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
         const [dateStart, dateEnd] = this.getValue();
-        return (index.h(index.Host, { key: '8b11e245fdd1d392e545692b68ea449dd19f13c8', "aria-label": this.label || undefined }, index.h("div", { key: 'bf1bd1923e220e9f209ae115eb8e6fb23b3c4b46', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'e3bfbf624e94f894c38fa97a35a0d5ad7c01915c', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, index.h("span", { key: 'd946093505f4a9092632b17bc035390a663d4e7f', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'aa9da48764a90c7d5db185e0472700465627d7c1', name: "label" })) || this.label, index.h("div", { key: 'd5d8c5c50de0578f96ffb3c80853a06e9bab9821', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '30b1b1149e7e07798e9786e2de260e07d2dad19a', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '6d02133a159884bc9951894390f7d7d98a5bc1c9', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'd114855977b1fcdaf0baa77e9cbef1250bfa03be', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, index.h("div", { key: '49ec46a464d223340dc74d4152c0048db1087ac6', class: "picker-head" }, index.h("cat-button", { key: '270b297b4a0f577f1ce3c1b8444781f77b089cab', 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 }), index.h("cat-button", { key: 'b07427c2c6609b88f4cbbfc6ce14fdf029e22681', 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 }), index.h("h3", { key: '72c71e36794070a1e2916b6296e453b4314ddf45' }, this.getHeadline()), index.h("cat-button", { key: '764278977f0b7c5a8e06ac03d395d7f4fcf0cd88', 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 }), index.h("cat-button", { key: 'd19e69146ba96cece2a8e14d6463e2974840d905', 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 })), index.h("div", { key: '68f854f2e92f054517091e5667204bdf79b0f57c', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: '238564020faf306eadbe5e0178d1e4b1d4590f5c', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
+        return (index.h(index.Host, { key: 'f99536926cfa6b5cebaeee0234ef393cae7c6290', "aria-label": this.label || undefined }, index.h("div", { key: '75d8cc40adf407d30bb2346a76f0d88b4a3d7c6a', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '038b0c612f7fad742371cbcc42367a9539dd75eb', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, index.h("span", { key: 'b5d55a662eebaa50c49a8c653e2659b256b65529', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '73f85529636703818e31875059d90b334ae41f80', name: "label" })) || this.label, index.h("div", { key: '9f1fabf18e18a8e5ef10c0b67fc7750555769d44', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '9aeec8774b56f6216d7dc56c08a4ac300fe11c67', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '5e18a94063b8ae0844afeb3cb4ca71d14882f9e6', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'edecc4cf058717971710ee35b87a132b9906f5ec', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, index.h("div", { key: '3bd9c5313671337674b07eb35c1af4e6127a3ce2', class: "picker-head" }, index.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 }), index.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 }), index.h("h3", { key: '4e6d8580663bb496dffe13c8f03806f15003073d' }, this.getHeadline()), index.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 }), index.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 })), index.h("div", { key: '9376764766e77ed75c78403f90c6cd2f45b609ea', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: 'c4411952bf4fd12f6b14dd2d235e220eef1e0280', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
             const day = (i + this.locale.weekInfo.firstDay) % 7;
             return index.h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
-        })), this.weeks && (index.h("div", { key: 'c59e9879cd8eacb4197a327a1f3c5e6d109c21b3', class: "picker-grid-weeks" }, dateGrid
+        })), this.weeks && (index.h("div", { key: 'f076b226855bb73f817c534e34cb021fb6d48a08', class: "picker-grid-weeks" }, dateGrid
             .filter((_, i) => i % 7 === 0)
-            .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '3751aa8b4744cb6686a5badf2f76bb5a27460dd7', class: "picker-grid-days" }, dateGrid.map(day => {
+            .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '48d757568b3d8640960caadf95f297cfe1f857ee', 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;
@@ -2467,7 +2467,7 @@ const CatDateInline = class {
                     '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()));
-        }))), index.h("div", { key: '7dabe502931e5a831423e368500a04577241253f', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { key: '6da0e2075e109a248a2bb2b6ab67d9ddf96206f1', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { key: '8b3599454323e064ba22ebd3c16168f99600a64b', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { key: '596d9b14c74f482098d5d5c3684fea633b43baa2', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: 'dd14d9dbec2061f1d55bf628fafadd3a4aa73460', class: "cursor-aria", "aria-live": "polite" })));
+        }))), index.h("div", { key: 'b8df8f56cd18a70f241ad50a9309548355cd6437', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { key: '19b88e876f7770e6bd97134bccae479198e87992', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { key: 'eb3a49013b64b0787b8c318e6a274900d95cf4f5', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { key: '203a7eec0e8719d4a78f1222426049213f787ba7', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: '75736aa7b9f8636432a116f82cb886fd0c99393f', class: "cursor-aria", "aria-live": "polite" })));
     }
     focus(date, focus = true) {
         const [minDate, maxDate] = this.getMinMaxDate();
@@ -8671,7 +8671,55 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   return trap;
 };
 
-const catDropdownCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding:0.25rem;min-width:8rem;max-width:16rem}.content{position:fixed;background:white;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));z-index:calc(var(--cat-z-index, 1000) + 100);display:none;opacity:0;transform:scale(0.9);transition:transform 125ms cubic-bezier(0.3, 0, 0.8, 0.15), opacity 125ms cubic-bezier(0.3, 0, 0.8, 0.15)}.content[data-placement^=top]{transform-origin:bottom}.content[data-placement^=top-start]{transform-origin:bottom left}.content[data-placement^=top-end]{transform-origin:bottom right}.content[data-placement^=left]{transform-origin:right}.content[data-placement^=left-start]{transform-origin:right top}.content[data-placement^=left-end]{transform-origin:right bottom}.content[data-placement^=right]{transform-origin:left}.content[data-placement^=right-start]{transform-origin:left top}.content[data-placement^=right-end]{transform-origin:left bottom}.content[data-placement^=bottom]{transform-origin:top}.content[data-placement^=bottom-start]{transform-origin:top left}.content[data-placement^=bottom-end]{transform-origin:top right}.content.show{opacity:1;transform:scale(1);transition:transform 250ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 250ms cubic-bezier(0.05, 0.7, 0.1, 1)}.content.overflow-auto{overflow:auto}";
+const focusableSelectors = [
+    'input',
+    'select',
+    'textarea',
+    'button',
+    'a[href]',
+    '[tabindex]',
+    'iframe',
+    '[contenteditable]',
+    'audio[controls]',
+    'video[controls]'
+];
+const findFirstTabbableIncludeHidden = (element) => {
+    if (element instanceof HTMLElement) {
+        const potentiallyTabbableElement = getPotentiallyTabbable(element);
+        if (potentiallyTabbableElement) {
+            return potentiallyTabbableElement;
+        }
+    }
+    const children = Array.from(element.querySelectorAll('*'));
+    for (const child of children) {
+        const potentiallyTabbableElement = getPotentiallyTabbable(child);
+        if (potentiallyTabbableElement) {
+            return potentiallyTabbableElement;
+        }
+    }
+    return undefined;
+};
+function couldBeTabbable(value) {
+    if (!value.matches(focusableSelectors.join(','))) {
+        return false;
+    }
+    const tabindex = value.getAttribute('tabindex');
+    return tabindex === null || Number(tabindex) >= 0;
+}
+function getPotentiallyTabbable(element) {
+    if (couldBeTabbable(element)) {
+        return element;
+    }
+    if (element.shadowRoot) {
+        const shadowTabbable = findFirstTabbableIncludeHidden(element.shadowRoot);
+        if (shadowTabbable) {
+            return shadowTabbable;
+        }
+    }
+    return undefined;
+}
+
+const catDropdownCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding:0.25rem}.aligned ::slotted(nav){min-width:8rem;max-width:16rem}.justified ::slotted(nav){width:100%}.content{position:fixed;background:white;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));z-index:calc(var(--cat-z-index, 1000) + 100);display:none;opacity:0;transform:scale(0.9);transition:transform 125ms cubic-bezier(0.3, 0, 0.8, 0.15), opacity 125ms cubic-bezier(0.3, 0, 0.8, 0.15)}.content[data-placement^=top]{transform-origin:bottom}.content[data-placement^=top-start]{transform-origin:bottom left}.content[data-placement^=top-end]{transform-origin:bottom right}.content[data-placement^=left]{transform-origin:right}.content[data-placement^=left-start]{transform-origin:right top}.content[data-placement^=left-end]{transform-origin:right bottom}.content[data-placement^=right]{transform-origin:left}.content[data-placement^=right-start]{transform-origin:left top}.content[data-placement^=right-end]{transform-origin:left bottom}.content[data-placement^=bottom]{transform-origin:top}.content[data-placement^=bottom-start]{transform-origin:top left}.content[data-placement^=bottom-end]{transform-origin:top right}.content.show{opacity:1;transform:scale(1);transition:transform 250ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 250ms cubic-bezier(0.05, 0.7, 0.1, 1)}.content.overflow-auto{overflow:auto}";
 const CatDropdownStyle0 = catDropdownCss;
 
 let nextUniqueId$8 = 0;
@@ -8689,6 +8737,7 @@ const CatDropdown = class {
          */
         this.hasInitialFocus = false;
         this.placement = 'bottom-start';
+        this.justify = false;
         this.noAutoClose = false;
         this.arrowNavigation = 'vertical';
         this.noResize = false;
@@ -8697,14 +8746,6 @@ const CatDropdown = class {
         this.noReturnFocus = false;
     }
     clickHandler(event) {
-        // we need to delay the initialization of the trigger until first
-        // interaction because the element might still be hidden (and thus not
-        // tabbable) if contained in another Stencil web component
-        if (!this.trigger) {
-            this.hasInitialFocus = this.isEventOriginFromKeyboard(event.detail);
-            this.initTrigger();
-            this.toggle();
-        }
         // hide dropdown on button clicks inside the dropdown content
         const path = event.composedPath();
         if (!this.noAutoClose &&
@@ -8728,12 +8769,6 @@ const CatDropdown = class {
      * @param isFocusVisible is dropdown should receive visible focus when it's opened.
      */
     async open(isFocusVisible) {
-        // we need to delay the initialization of the trigger until first
-        // interaction because the element might still be hidden (and thus not
-        // tabbable) if contained in another Stencil web component
-        if (!this.trigger) {
-            this.initTrigger();
-        }
         if (this.isOpen === null || this.isOpen) {
             return; // busy or open
         }
@@ -8802,11 +8837,12 @@ const CatDropdown = class {
             this.catClose.emit();
         }, timeTransitionS);
     }
-    render() {
-        return (index.h(index.Host, { key: '8dd26958b3df631a6186f54e27214690b20e7349' }, index.h("slot", { key: '955019546e467a7e4a91ae4f2523ca920bc9b64c', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: '858ba852906f7646e69501d49eba1e8ad8964c2e', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '3a78c9967f6e38396d7bb399ecef05de74e55b78', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: '4b229c663a5ba4caee5c258b7ee8a92b7e5618d0', name: "content" }))));
-    }
     componentDidLoad() {
         this.initAnchor();
+        this.initTrigger();
+    }
+    render() {
+        return (index.h(index.Host, { key: '05019873f2b9ae46bfbe4c34c1c9b7349dddeb92' }, index.h("slot", { key: '0760052c1d65818b5a4f8c8bf8dc587da27ec5b3', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: '1ab727c6bc362c9a0d233fd1c0d3db76e04b2f1c', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '02c216317f4140217578020d83fb853194993d96', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, index.h("slot", { key: '8c31f2d7b16bbdfdc528938b5dd09fa84eeb80c3', name: "content" }))));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -8836,7 +8872,7 @@ const CatDropdown = class {
     }
     findTrigger() {
         let trigger;
-        const elems = this.triggerSlot?.assignedElements?.() || [];
+        let elems = this.triggerSlot?.assignedElements?.() || [];
         while (!trigger && elems.length) {
             const elem = elems.shift();
             trigger = elem?.hasAttribute('data-trigger')
@@ -8846,23 +8882,41 @@ const CatDropdown = class {
         if (!trigger) {
             trigger = firstTabbable(this.triggerSlot);
         }
+        // if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles
+        // which stencil assigns to component in prehydration state
+        if (!trigger) {
+            elems = this.triggerSlot?.assignedElements?.() || [];
+            while (!trigger && elems.length) {
+                const elem = elems.shift();
+                trigger = findFirstTabbableIncludeHidden(elem);
+            }
+        }
         if (!trigger) {
             throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');
         }
         return trigger;
     }
-    update(anchorElement) {
+    update(anchorElement, justify = this.justify) {
         if (anchorElement) {
             const resize = this.noResize
                 ? []
                 : [
                     size({
                         padding: CatDropdown.OFFSET,
-                        apply({ availableWidth, availableHeight, elements }) {
-                            Object.assign(elements.floating.style, {
-                                maxWidth: `${availableWidth}px`,
-                                maxHeight: `${availableHeight}px`
-                            });
+                        apply({ rects, availableWidth, availableHeight, elements }) {
+                            if (justify) {
+                                Object.assign(elements.floating.style, {
+                                    minWidth: `${rects.reference.width}px`,
+                                    maxWidth: `${rects.reference.width}px`,
+                                    maxHeight: `${availableHeight}px`
+                                });
+                            }
+                            else {
+                                Object.assign(elements.floating.style, {
+                                    maxWidth: `${availableWidth}px`,
+                                    maxHeight: `${availableHeight}px`
+                                });
+                            }
                         }
                     })
                 ];
@@ -8947,1767 +9001,214 @@ const CatIcon = class {
 };
 CatIcon.style = CatIconStyle0;
 
-var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-var NumeralFormatter = function (numeralDecimalMark,
-                                 numeralIntegerScale,
-                                 numeralDecimalScale,
-                                 numeralThousandsGroupStyle,
-                                 numeralPositiveOnly,
-                                 stripLeadingZeroes,
-                                 prefix,
-                                 signBeforePrefix,
-                                 tailPrefix,
-                                 delimiter) {
-    var owner = this;
-
-    owner.numeralDecimalMark = numeralDecimalMark || '.';
-    owner.numeralIntegerScale = numeralIntegerScale > 0 ? numeralIntegerScale : 0;
-    owner.numeralDecimalScale = numeralDecimalScale >= 0 ? numeralDecimalScale : 2;
-    owner.numeralThousandsGroupStyle = numeralThousandsGroupStyle || NumeralFormatter.groupStyle.thousand;
-    owner.numeralPositiveOnly = !!numeralPositiveOnly;
-    owner.stripLeadingZeroes = stripLeadingZeroes !== false;
-    owner.prefix = (prefix || prefix === '') ? prefix : '';
-    owner.signBeforePrefix = !!signBeforePrefix;
-    owner.tailPrefix = !!tailPrefix;
-    owner.delimiter = (delimiter || delimiter === '') ? delimiter : ',';
-    owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : '';
-};
-
-NumeralFormatter.groupStyle = {
-    thousand: 'thousand',
-    lakh:     'lakh',
-    wan:      'wan',
-    none:     'none'    
-};
-
-NumeralFormatter.prototype = {
-    getRawValue: function (value) {
-        return value.replace(this.delimiterRE, '').replace(this.numeralDecimalMark, '.');
-    },
-
-    format: function (value) {
-        var owner = this, parts, partSign, partSignAndPrefix, partInteger, partDecimal = '';
-
-        // strip alphabet letters
-        value = value.replace(/[A-Za-z]/g, '')
-            // replace the first decimal mark with reserved placeholder
-            .replace(owner.numeralDecimalMark, 'M')
-
-            // strip non numeric letters except minus and "M"
-            // this is to ensure prefix has been stripped
-            .replace(/[^\dM-]/g, '')
-
-            // replace the leading minus with reserved placeholder
-            .replace(/^\-/, 'N')
-
-            // strip the other minus sign (if present)
-            .replace(/\-/g, '')
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function coerceBoolean(value) {
+    return value != null && `${value}` !== 'false';
+}
+function coerceNumber(value, fallbackValue = 0) {
+    return isNumberValue(value) ? Number(value) : fallbackValue;
+}
+function isNumberValue(value) {
+    return !isNaN(parseFloat(value)) && !isNaN(Number(value));
+}
 
-            // replace the minus sign (if present)
-            .replace('N', owner.numeralPositiveOnly ? '' : '-')
+var e$1,r$1,t$1,i=function(e){return e.replace(/[^\d]/g,"")},n$1=function(e){return e.reduce(function(e,r){return e+r},0)},a=function(e,r){return e.slice(0,r)},l=function(e){var r=e.value;return e.delimiters.forEach(function(e){e.split("").forEach(function(e){r=r.replace(new RegExp(e.replace(/([.?*+^$[\]\\(){}|-])/g,"\\$1"),"g"),"");});}),r},u=function(e){var r=e.blocks,t=e.delimiter,i=void 0===t?"":t,n=e.delimiters,a=void 0===n?[]:n,l=e.delimiterLazyShow,u=void 0!==l&&l,c="",s=e.value,o="";return r.forEach(function(e,t){if(s.length>0){var n,l=s.slice(0,e),d=s.slice(e);o=a.length>0?null!=(n=a[u?t-1:t])?n:o:i,u?(t>0&&(c+=o),c+=l):(c+=l,l.length===e&&t<r.length-1&&(c+=o)),s=d;}}),c};!function(e){e.UATP="uatp",e.AMEX="amex",e.DINERS="diners",e.DISCOVER="discover",e.MASTERCARD="mastercard",e.DANKORT="dankort",e.INSTAPAYMENT="instapayment",e.JCB15="jcb15",e.JCB="jcb",e.MAESTRO="maestro",e.VISA="visa",e.MIR="mir",e.UNIONPAY="unionpay",e.GENERAL="general";}(t$1||(t$1={}));var v;((e$1={})[t$1.UATP]=[4,5,6],e$1[t$1.AMEX]=[4,6,5],e$1[t$1.DINERS]=[4,6,4],e$1[t$1.DISCOVER]=[4,4,4,4],e$1[t$1.MASTERCARD]=[4,4,4,4],e$1[t$1.DANKORT]=[4,4,4,4],e$1[t$1.INSTAPAYMENT]=[4,4,4,4],e$1[t$1.JCB15]=[4,6,5],e$1[t$1.JCB]=[4,4,4,4],e$1[t$1.MAESTRO]=[4,4,4,4],e$1[t$1.VISA]=[4,4,4,4],e$1[t$1.MIR]=[4,4,4,4],e$1[t$1.UNIONPAY]=[4,4,4,4],e$1[t$1.GENERAL]=[4,4,4,4],e$1);((r$1={})[t$1.UATP]=/^(?!1800)1\d{0,14}/,r$1[t$1.AMEX]=/^3[47]\d{0,13}/,r$1[t$1.DISCOVER]=/^(?:6011|65\d{0,2}|64[4-9]\d?)\d{0,12}/,r$1[t$1.DINERS]=/^3(?:0([0-5]|9)|[689]\d?)\d{0,11}/,r$1[t$1.MASTERCARD]=/^(5[1-5]\d{0,2}|22[2-9]\d{0,1}|2[3-7]\d{0,2})\d{0,12}/,r$1[t$1.DANKORT]=/^(5019|4175|4571)\d{0,12}/,r$1[t$1.INSTAPAYMENT]=/^63[7-9]\d{0,13}/,r$1[t$1.JCB15]=/^(?:2131|1800)\d{0,11}/,r$1[t$1.JCB]=/^(?:35\d{0,2})\d{0,12}/,r$1[t$1.MAESTRO]=/^(?:5[0678]\d{0,2}|6304|67\d{0,2})\d{0,12}/,r$1[t$1.MIR]=/^220[0-4]\d{0,12}/,r$1[t$1.VISA]=/^4\d{0,15}/,r$1[t$1.UNIONPAY]=/^(62|81)\d{0,14}/,r$1);!function(e){e.THOUSAND="thousand",e.LAKH="lakh",e.WAN="wan",e.NONE="none";}(v||(v={}));var k=["d","m","Y"],C=function(e,r){return r?(e<10?"000":e<100?"00":e<1e3?"0":"")+e:(e<10?"0":"")+e},L=function(e){return (e<10?"0":"")+e},P=function(e,r,t){var i;return e=Math.min(e,31),t=null!=(i=t)?i:0,((r=Math.min(r,12))<7&&r%2==0||r>8&&r%2==1)&&(e=Math.min(e,2===r?function(e){return e%4==0&&e%100!=0||e%400==0}(t)?29:28:30)),[e,r,t]},y=function(e,r){var t=null!=r?r:{},c=t.delimiterLazyShow,s=void 0!==c&&c,o=t.delimiter,d=void 0===o?"/":o,v=t.datePattern,m=void 0===v?k:v,f=t.dateMax,p=void 0===f?"":f,h=t.dateMin,E=void 0===h?"":h;e=i(e);var g=function(e){var r=[];return e.forEach(function(e){r.push("Y"===e?4:2);}),r}(m),I=function(e){var r=e.dateMax,t=e.dateMin.split("-").reverse().map(function(e){return parseInt(e,10)});2===t.length&&t.unshift(0);var i=r.split("-").reverse().map(function(e){return parseInt(e,10)});return 2===i.length&&i.unshift(0),{min:t,max:i}}({dateMax:p,dateMin:E});e=function(e){var r=e.value,t=void 0===r?"":r,i=e.blocks,n=e.datePattern,a=e.min,l=e.max,u="";return (void 0===i?[]:i).forEach(function(e,r){if(t.length>0){var i=t.slice(0,e),a=i.slice(0,1),l=t.slice(e);switch(n[r]){case"d":"00"===i?i="01":parseInt(a,10)>3?i="0"+a:parseInt(i,10)>31&&(i="31");break;case"m":"00"===i?i="01":parseInt(a,10)>1?i="0"+a:parseInt(i,10)>12&&(i="12");}u+=i,t=l;}}),function(e){var r,t,i,n=e.value,a=void 0===n?"":n,l=e.datePattern,u=e.min,c=e.max,s=[],o=0,d=0,v=0,m=0,f=0,p=0,h=!1;return 4===a.length&&"y"!==l[0].toLowerCase()&&"y"!==l[1].toLowerCase()&&(f=2-(m="d"===l[0]?0:2),r=parseInt(a.slice(m,m+2),10),t=parseInt(a.slice(f,f+2),10),s=P(r,t,0)),8===a.length&&(l.forEach(function(e,r){switch(e){case"d":o=r;break;case"m":d=r;break;default:v=r;}}),p=2*v,m=o<=v?2*o:2*o+2,f=d<=v?2*d:2*d+2,r=parseInt(a.slice(m,m+2),10),t=parseInt(a.slice(f,f+2),10),i=parseInt(a.slice(p,p+4),10),h=4===a.slice(p,p+4).length,s=P(r,t,i)),4!==a.length||"y"!==l[0]&&"y"!==l[1]||(p=2-(f="m"===l[0]?0:2),t=parseInt(a.slice(f,f+2),10),i=parseInt(a.slice(p,p+2),10),h=2===a.slice(p,p+2).length,s=[0,t,i]),6!==a.length||"Y"!==l[0]&&"Y"!==l[1]||(p=2-.5*(f="m"===l[0]?0:4),t=parseInt(a.slice(f,f+2),10),i=parseInt(a.slice(p,p+4),10),h=4===a.slice(p,p+4).length,s=[0,t,i]),0===(s=function(e){var r=e.date,t=void 0===r?[]:r,i=e.min,n=e.max;return 0===t.length||i.length<3&&n.length<3||e.datePattern.filter(function(e){return "y"===e.toLowerCase()}).length>0&&0===t[2]?t:n.length>0&&(n[2]<t[2]||n[2]===t[2]&&(n[1]<t[1]||n[1]===t[1]&&n[0]<t[0]))?n:i.length>0&&(i[2]>t[2]||i[2]===t[2]&&(i[1]>t[1]||i[1]===t[1]&&i[0]>t[0]))?i:t}({date:s,datePattern:l,min:u,max:c})).length?a:l.reduce(function(e,r){switch(r){case"d":return e+(0===s[0]?"":L(s[0]));case"m":return e+(0===s[1]?"":L(s[1]));case"y":return e+(h?C(s[2],!1):"");case"Y":return e+(h?C(s[2],!0):"")}return e},"")}({value:u,datePattern:n,min:a,max:l})}({value:e,blocks:g,datePattern:m,min:I.min,max:I.max}),e=l({value:e,delimiters:[d]});var A=n$1(g);return e=a(e,A),u({value:e,blocks:g,delimiter:d,delimiterLazyShow:s})},R=["h","m","s"],T=function(e){return (e<10?"0":"")+e},b=function(e,r,t){return t=Math.min(t,60),r=Math.min(r,60),[e=Math.min(e,60),r,t]},w=function(e,r){var t=null!=r?r:{},c=t.delimiterLazyShow,s=void 0!==c&&c,o=t.delimiter,d=void 0===o?":":o,v=t.timePattern,m=void 0===v?R:v,f=t.timeFormat,p=void 0===f?"24":f;e=i(e);var h=function(e){var r=[];return e.forEach(function(){r.push(2);}),r}(m);e=function(e){var r=e.value,t=e.timePattern,i="",n="12"===e.timeFormat?{maxHourFirstDigit:1,maxHours:12,maxMinutesFirstDigit:5,maxMinutes:60}:{maxHourFirstDigit:2,maxHours:23,maxMinutesFirstDigit:5,maxMinutes:60};return e.blocks.forEach(function(e,a){if(r.length>0){var l=r.slice(0,e),u=l.slice(0,1),c=r.slice(e);switch(t[a]){case"h":parseInt(u,10)>n.maxHourFirstDigit?l="0"+u:parseInt(l,10)>n.maxHours&&(l=n.maxHours+"");break;case"m":case"s":parseInt(u,10)>n.maxMinutesFirstDigit?l="0"+u:parseInt(l,10)>n.maxMinutes&&(l=n.maxMinutes+"");}i+=l,r=c;}}),function(e){var r,t,i,n=e.value,a=e.timePattern,l=[],u=0,c=0,s=0,o=0,d=0,v=0;return 6===n.length&&(a.forEach(function(e,r){switch(e){case"s":u=2*r;break;case"m":c=2*r;break;case"h":s=2*r;}}),v=s,d=c,o=u,r=parseInt(n.slice(o,o+2),10),t=parseInt(n.slice(d,d+2),10),i=parseInt(n.slice(v,v+2),10),l=b(i,t,r)),4!==n.length||a.includes("s")||(a.forEach(function(e,r){switch(e){case"m":c=2*r;break;case"h":s=2*r;}}),v=s,d=c,r=0,t=parseInt(n.slice(d,d+2),10),i=parseInt(n.slice(v,v+2),10),l=b(i,t,r)),0===l.length?n:a.reduce(function(e,r){switch(r){case"s":return e+T(l[2]);case"m":return e+T(l[1]);case"h":return e+T(l[0])}return e},"")}({value:i,timePattern:t})}({value:e,blocks:h,timePattern:m,timeFormat:p}),e=l({value:e,delimiters:[d]});var E=n$1(h);return e=a(e,E),u({value:e,blocks:h,delimiter:d,delimiterLazyShow:s})};
 
-            // replace decimal mark
-            .replace('M', owner.numeralDecimalMark);
+const catInputCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}.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-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-primary-hover{transition:background-color 125ms, color 125ms}.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-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}button.cat-text-primary,button.cat-link-primary{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-primary:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-primary:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-primary,.cat-text-primary-hover{transition:color 125ms}.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-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-primaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}button.cat-text-primaryInverted,button.cat-link-primaryInverted{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-primaryInverted:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-primaryInverted:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 125ms}.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-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-secondary-hover{transition:background-color 125ms, color 125ms}.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-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}button.cat-text-secondary,button.cat-link-secondary{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-secondary:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-secondary:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-secondary,.cat-text-secondary-hover{transition:color 125ms}.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-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-secondaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}button.cat-text-secondaryInverted,button.cat-link-secondaryInverted{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-secondaryInverted:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-secondaryInverted:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 125ms}.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-info{background-color:rgb(var(--cat-info-bg, 0, 115, 230)) !important;color:rgb(var(--cat-info-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-info-hover{transition:background-color 125ms, color 125ms}.cat-bg-info-hover:hover{background-color:rgb(var(--cat-info-bg-hover, 0, 107, 227)) !important;color:rgb(var(--cat-info-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-info,.cat-link-info{color:rgb(var(--cat-info-text, 0, 115, 230)) !important}button.cat-text-info,button.cat-link-info{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-info:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-info:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-info,.cat-text-info-hover{transition:color 125ms}.cat-link-info:hover,.cat-text-info-hover:hover{color:rgb(var(--cat-info-text-hover, 0, 107, 227)) !important}.cat-link-info:active,.cat-text-info-hover:active{color:rgb(var(--cat-info-text-active, 0, 96, 223)) !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-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-success-hover{transition:background-color 125ms, color 125ms}.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-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}button.cat-text-success,button.cat-link-success{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-success:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-success:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-success,.cat-text-success-hover{transition:color 125ms}.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-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-bg-warning-hover{transition:background-color 125ms, color 125ms}.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-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}button.cat-text-warning,button.cat-link-warning{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-warning:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-warning:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-warning,.cat-text-warning-hover{transition:color 125ms}.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-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-danger-hover{transition:background-color 125ms, color 125ms}.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-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}button.cat-text-danger,button.cat-link-danger{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-danger:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-danger:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-danger,.cat-text-danger-hover{transition:color 125ms}.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-text-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-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-bg-muted{background-color:#f2f4f7 !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}.input-field:not(.input-horizontal) .label-container.hidden,.textarea-field:not(.textarea-horizontal) .label-container.hidden,.select-field:not(.select-horizontal) .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{flex-basis:var(--label-size, 33.33%)}.label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-optional,.label-character-count{display:inline-flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem}.label-character-count{margin-left:auto}.input-horizontal .label-container.hidden label,.textarea-horizontal .label-container.hidden label,.select-horizontal .label-container.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}.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}: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{flex:1 1 auto;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 125ms linear;--border-color:var(--cat-border-color-dark, 215, 219, 224);}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-readonly{pointer-events:none}.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:focus-within:has(.clearable:focus){outline:none}.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;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.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-loading,.icon-prefix,.icon-suffix{align-self:center}.input-outer-wrapper{display:flex}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input.has-clearable,input.has-toggle-password{padding-right:1.5rem}input.has-clearable.has-toggle-password{padding-right:3.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}.toggle-password{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.has-clearable~.toggle-password{right:1.5rem}:host(.cat-date-input) .input-wrapper,:host(.cat-time-input) .input-wrapper{z-index:1;border-top-right-radius:0;border-bottom-right-radius:0}";
+const CatInputStyle0 = catInputCss;
 
-        // strip any leading zeros
-        if (owner.stripLeadingZeroes) {
-            value = value.replace(/^(-)?0+(?=\d)/, '$1');
+let nextUniqueId$7 = 0;
+const CatInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.catChange = index.createEvent(this, "catChange", 7);
+        this.catFocus = index.createEvent(this, "catFocus", 7);
+        this.catBlur = index.createEvent(this, "catBlur", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
         }
-
-        partSign = value.slice(0, 1) === '-' ? '-' : '';
-        if (typeof owner.prefix != 'undefined') {
-            if (owner.signBeforePrefix) {
-                partSignAndPrefix = partSign + owner.prefix;
-            } else {
-                partSignAndPrefix = owner.prefix + partSign;
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this._id = `cat-input-${nextUniqueId$7++}`;
+        this.hasSlottedLabel = false;
+        this.hasSlottedHint = false;
+        this.hasSlottedCounter = false;
+        this.isPasswordShown = false;
+        this.errorMap = undefined;
+        this.requiredMarker = 'optional';
+        this.horizontal = false;
+        this.autoComplete = undefined;
+        this.clearable = false;
+        this.togglePassword = false;
+        this.disabled = false;
+        this.loading = false;
+        this.hint = undefined;
+        this.icon = undefined;
+        this.iconRight = false;
+        this.identifier = undefined;
+        this.label = '';
+        this.labelHidden = false;
+        this.max = undefined;
+        this.maxLength = undefined;
+        this.min = undefined;
+        this.minLength = undefined;
+        this.name = undefined;
+        this.placeholder = undefined;
+        this.textPrefix = undefined;
+        this.textSuffix = undefined;
+        this.readonly = false;
+        this.required = false;
+        this.round = false;
+        this.type = 'text';
+        this.value = undefined;
+        this.errors = undefined;
+        this.errorUpdate = 0;
+        this.nativeAttributes = undefined;
+        this.testId = undefined;
+        this.timeMaskOptions = undefined;
+        this.dateMaskOptions = undefined;
+    }
+    get id() {
+        return this.identifier || this._id;
+    }
+    componentWillLoad() {
+        this.onErrorsChanged(this.errors, undefined, false);
+    }
+    componentWillRender() {
+        this.internals.setFormValue(this.value ?? null);
+        this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+        this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+        this.hasSlottedCounter = !!this.hostElement.querySelector('[slot="counter"]');
+    }
+    /**
+     * Programmatically move focus to the input. Use this method instead of
+     * `input.focus()`.
+     *
+     * @param options An optional object providing options to control aspects of
+     * the focusing process.
+     */
+    async doFocus(options) {
+        // hack to make datepicker inputs focusable. The datepicker hides the input
+        // element and dynamically creates a sibling. We need to find the new input
+        // element and focus it instead.
+        const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;
+        input?.focus(options);
+    }
+    /**
+     * Programmatically remove focus from the input. Use this method instead of
+     * `input.blur()`.
+     */
+    async doBlur() {
+        this.input.blur();
+    }
+    /**
+     * Clear the input.
+     */
+    async clear() {
+        this.value = '';
+        this.catChange.emit(this.value);
+    }
+    onErrorsChanged(newValue, _oldValue, update = true) {
+        if (!coerceBoolean(this.errorUpdate)) {
+            this.errorMap = undefined;
+        }
+        else {
+            this.errorMapSrc = Array.isArray(newValue)
+                ? newValue.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
+                : newValue || undefined;
+            if (update) {
+                this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
             }
-        } else {
-            partSignAndPrefix = partSign;
         }
-        
-        partInteger = value;
-
-        if (value.indexOf(owner.numeralDecimalMark) >= 0) {
-            parts = value.split(owner.numeralDecimalMark);
-            partInteger = parts[0];
-            partDecimal = owner.numeralDecimalMark + parts[1].slice(0, owner.numeralDecimalScale);
+    }
+    render() {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (index.h("div", { key: '2d1470e5fcbc444187c35b52a977ae919f5441f5', class: {
+                'input-field': true,
+                'input-horizontal': this.horizontal
+            } }, index.h("div", { key: 'f78abacd75b12bccab406da85e6d77866e271dae', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '5985d170af91fc174a28fa102f2a7e33475aaa93', htmlFor: this.id, part: "label" }, index.h("span", { key: '49c82004f681bd34acae7b3f7aef95278a975cb3', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '3c2b12e5bf2af34487569f346b48123d9d633618', name: "label" })) || this.label, index.h("div", { key: 'a0a12f7f406845bf49efcee8e3afc0dbcb20ec66', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'c3076888f346793dcd35b40efbe023e1b77a13af', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'a55f8332f32fe7b42062ef726ea6148c6cec72a1', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: 'a7178393a4e61a6fa1a7548caeb2622561156499', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: '5be7d2b3f4630cbc98ff2f2370e58c3e02158e82', class: "input-container" }, index.h("div", { key: 'ffe47bed961517990aea7115fd48090cea7973f7', class: "input-outer-wrapper" }, index.h("div", { key: '8054a1dead8ec0f04ec09c42afa64304e1eeab73', 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 && (index.h("span", { key: '679c04bcdf71a18281c57d8b894bb2d09db04c61', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: '9676f80f87886585bd1e66dc36d79f73d8dcbc1d', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: '63d68df805f010fd43cabbb2a926b15d38cbac02', class: "input-inner-wrapper" }, index.h("input", { key: 'c647bb48d0ce78bfdd32738293d48a6fd0decebd', "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 && (index.h("cat-button", { key: 'b55760f57d4e2a614ffb52e603a909002953023a', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: '09fb349df1ab00b7260a290bc3aa2fc7fae6ba55', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && index.h("cat-spinner", { key: '5afe2fb200dee5e83b0502db4dddb4609d2ff8c5', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: '4aa4fbef3cd5c6de7819ebaf8b7fd9df86a33656', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: 'ead450e2a1aad0bd0ae939610bdd25555d487955', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '54b5f3a403ef48046f4a2ce077195e256e68cfaf', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: '60f90528fa403d432bd930819961f41adbdffd64', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: 'de40c1cc2308e00089a6515d95faa3252ec2ec49', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
+    }
+    get hasHint() {
+        return !!this.hint || !!this.hasSlottedHint || this.invalid;
+    }
+    get invalid() {
+        return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;
+    }
+    onInput() {
+        let formattedValue = this.input.value;
+        if (this.timeMaskOptions) {
+            formattedValue = w(this.input.value, this.timeMaskOptions);
         }
-
-        if(partSign === '-') {
-            partInteger = partInteger.slice(1);
+        if (this.dateMaskOptions) {
+            formattedValue = y(this.input.value, this.dateMaskOptions);
         }
-
-        if (owner.numeralIntegerScale > 0) {
-          partInteger = partInteger.slice(0, owner.numeralIntegerScale);
+        this.value = formattedValue;
+        this.input.value = formattedValue;
+        this.internals.setFormValue(this.input.value);
+        this.catChange.emit(this.value);
+        this.showErrorsIfTimeout();
+    }
+    onFocus(event) {
+        this.catFocus.emit(event);
+    }
+    onBlur(event) {
+        this.catBlur.emit(event);
+        if (coerceBoolean(this.errorUpdate)) {
+            this.showErrors();
         }
-
-        switch (owner.numeralThousandsGroupStyle) {
-        case NumeralFormatter.groupStyle.lakh:
-            partInteger = partInteger.replace(/(\d)(?=(\d\d)+\d$)/g, '$1' + owner.delimiter);
-
-            break;
-
-        case NumeralFormatter.groupStyle.wan:
-            partInteger = partInteger.replace(/(\d)(?=(\d{4})+$)/g, '$1' + owner.delimiter);
-
-            break;
-
-        case NumeralFormatter.groupStyle.thousand:
-            partInteger = partInteger.replace(/(\d)(?=(\d{3})+$)/g, '$1' + owner.delimiter);
-
-            break;
+    }
+    doTogglePassword() {
+        this.isPasswordShown = !this.isPasswordShown;
+    }
+    showErrors() {
+        this.errorMap = this.errorMapSrc;
+    }
+    showErrorsIfTimeout() {
+        const errorUpdate = coerceNumber(this.errorUpdate, null);
+        if (errorUpdate !== null) {
+            typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
+            this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);
+            return true;
         }
-
-        if (owner.tailPrefix) {
-            return partSign + partInteger.toString() + (owner.numeralDecimalScale > 0 ? partDecimal.toString() : '') + owner.prefix;
+        return false;
+    }
+    showErrorsIfNoFocus() {
+        const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
+        if (!hasFocus) {
+            this.showErrors();
         }
-
-        return partSignAndPrefix + partInteger.toString() + (owner.numeralDecimalScale > 0 ? partDecimal.toString() : '');
     }
+    findSiblingInput(node) {
+        if (node instanceof HTMLInputElement) {
+            return node;
+        }
+        else if (node?.nextSibling) {
+            return this.findSiblingInput(node.nextSibling);
+        }
+        return undefined;
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "errors": ["onErrorsChanged"]
+    }; }
 };
+CatInput.style = CatInputStyle0;
 
-var NumeralFormatter_1 = NumeralFormatter;
-
-var DateFormatter = function (datePattern, dateMin, dateMax) {
-    var owner = this;
-
-    owner.date = [];
-    owner.blocks = [];
-    owner.datePattern = datePattern;
-    owner.dateMin = dateMin
-      .split('-')
-      .reverse()
-      .map(function(x) {
-        return parseInt(x, 10);
-      });
-    if (owner.dateMin.length === 2) owner.dateMin.unshift(0);
-
-    owner.dateMax = dateMax
-      .split('-')
-      .reverse()
-      .map(function(x) {
-        return parseInt(x, 10);
-      });
-    if (owner.dateMax.length === 2) owner.dateMax.unshift(0);
-    
-    owner.initBlocks();
-};
-
-DateFormatter.prototype = {
-    initBlocks: function () {
-        var owner = this;
-        owner.datePattern.forEach(function (value) {
-            if (value === 'Y') {
-                owner.blocks.push(4);
-            } else {
-                owner.blocks.push(2);
-            }
-        });
-    },
-
-    getISOFormatDate: function () {
-        var owner = this,
-            date = owner.date;
-
-        return date[2] ? (
-            date[2] + '-' + owner.addLeadingZero(date[1]) + '-' + owner.addLeadingZero(date[0])
-        ) : '';
-    },
-
-    getBlocks: function () {
-        return this.blocks;
-    },
-
-    getValidatedDate: function (value) {
-        var owner = this, result = '';
-
-        value = value.replace(/[^\d]/g, '');
-
-        owner.blocks.forEach(function (length, index) {
-            if (value.length > 0) {
-                var sub = value.slice(0, length),
-                    sub0 = sub.slice(0, 1),
-                    rest = value.slice(length);
-
-                switch (owner.datePattern[index]) {
-                case 'd':
-                    if (sub === '00') {
-                        sub = '01';
-                    } else if (parseInt(sub0, 10) > 3) {
-                        sub = '0' + sub0;
-                    } else if (parseInt(sub, 10) > 31) {
-                        sub = '31';
-                    }
-
-                    break;
-
-                case 'm':
-                    if (sub === '00') {
-                        sub = '01';
-                    } else if (parseInt(sub0, 10) > 1) {
-                        sub = '0' + sub0;
-                    } else if (parseInt(sub, 10) > 12) {
-                        sub = '12';
-                    }
-
-                    break;
-                }
-
-                result += sub;
-
-                // update remaining string
-                value = rest;
-            }
-        });
-
-        return this.getFixedDateString(result);
-    },
-
-    getFixedDateString: function (value) {
-        var owner = this, datePattern = owner.datePattern, date = [],
-            dayIndex = 0, monthIndex = 0, yearIndex = 0,
-            dayStartIndex = 0, monthStartIndex = 0, yearStartIndex = 0,
-            day, month, year, fullYearDone = false;
-
-        // mm-dd || dd-mm
-        if (value.length === 4 && datePattern[0].toLowerCase() !== 'y' && datePattern[1].toLowerCase() !== 'y') {
-            dayStartIndex = datePattern[0] === 'd' ? 0 : 2;
-            monthStartIndex = 2 - dayStartIndex;
-            day = parseInt(value.slice(dayStartIndex, dayStartIndex + 2), 10);
-            month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10);
-
-            date = this.getFixedDate(day, month, 0);
-        }
-
-        // yyyy-mm-dd || yyyy-dd-mm || mm-dd-yyyy || dd-mm-yyyy || dd-yyyy-mm || mm-yyyy-dd
-        if (value.length === 8) {
-            datePattern.forEach(function (type, index) {
-                switch (type) {
-                case 'd':
-                    dayIndex = index;
-                    break;
-                case 'm':
-                    monthIndex = index;
-                    break;
-                default:
-                    yearIndex = index;
-                    break;
-                }
-            });
-
-            yearStartIndex = yearIndex * 2;
-            dayStartIndex = (dayIndex <= yearIndex) ? dayIndex * 2 : (dayIndex * 2 + 2);
-            monthStartIndex = (monthIndex <= yearIndex) ? monthIndex * 2 : (monthIndex * 2 + 2);
-
-            day = parseInt(value.slice(dayStartIndex, dayStartIndex + 2), 10);
-            month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10);
-            year = parseInt(value.slice(yearStartIndex, yearStartIndex + 4), 10);
-
-            fullYearDone = value.slice(yearStartIndex, yearStartIndex + 4).length === 4;
-
-            date = this.getFixedDate(day, month, year);
-        }
-
-        // mm-yy || yy-mm
-        if (value.length === 4 && (datePattern[0] === 'y' || datePattern[1] === 'y')) {
-            monthStartIndex = datePattern[0] === 'm' ? 0 : 2;
-            yearStartIndex = 2 - monthStartIndex;
-            month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10);
-            year = parseInt(value.slice(yearStartIndex, yearStartIndex + 2), 10);
-
-            fullYearDone = value.slice(yearStartIndex, yearStartIndex + 2).length === 2;
-
-            date = [0, month, year];
-        }
-
-        // mm-yyyy || yyyy-mm
-        if (value.length === 6 && (datePattern[0] === 'Y' || datePattern[1] === 'Y')) {
-            monthStartIndex = datePattern[0] === 'm' ? 0 : 4;
-            yearStartIndex = 2 - 0.5 * monthStartIndex;
-            month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10);
-            year = parseInt(value.slice(yearStartIndex, yearStartIndex + 4), 10);
-
-            fullYearDone = value.slice(yearStartIndex, yearStartIndex + 4).length === 4;
-
-            date = [0, month, year];
-        }
-
-        date = owner.getRangeFixedDate(date);
-        owner.date = date;
-
-        var result = date.length === 0 ? value : datePattern.reduce(function (previous, current) {
-            switch (current) {
-            case 'd':
-                return previous + (date[0] === 0 ? '' : owner.addLeadingZero(date[0]));
-            case 'm':
-                return previous + (date[1] === 0 ? '' : owner.addLeadingZero(date[1]));
-            case 'y':
-                return previous + (fullYearDone ? owner.addLeadingZeroForYear(date[2], false) : '');
-            case 'Y':
-                return previous + (fullYearDone ? owner.addLeadingZeroForYear(date[2], true) : '');
-            }
-        }, '');
-
-        return result;
-    },
-
-    getRangeFixedDate: function (date) {
-        var owner = this,
-            datePattern = owner.datePattern,
-            dateMin = owner.dateMin || [],
-            dateMax = owner.dateMax || [];
-
-        if (!date.length || (dateMin.length < 3 && dateMax.length < 3)) return date;
-
-        if (
-          datePattern.find(function(x) {
-            return x.toLowerCase() === 'y';
-          }) &&
-          date[2] === 0
-        ) return date;
-
-        if (dateMax.length && (dateMax[2] < date[2] || (
-          dateMax[2] === date[2] && (dateMax[1] < date[1] || (
-            dateMax[1] === date[1] && dateMax[0] < date[0]
-          ))
-        ))) return dateMax;
-
-        if (dateMin.length && (dateMin[2] > date[2] || (
-          dateMin[2] === date[2] && (dateMin[1] > date[1] || (
-            dateMin[1] === date[1] && dateMin[0] > date[0]
-          ))
-        ))) return dateMin;
-
-        return date;
-    },
-
-    getFixedDate: function (day, month, year) {
-        day = Math.min(day, 31);
-        month = Math.min(month, 12);
-        year = parseInt((year || 0), 10);
-
-        if ((month < 7 && month % 2 === 0) || (month > 8 && month % 2 === 1)) {
-            day = Math.min(day, month === 2 ? (this.isLeapYear(year) ? 29 : 28) : 30);
-        }
-
-        return [day, month, year];
-    },
-
-    isLeapYear: function (year) {
-        return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
-    },
-
-    addLeadingZero: function (number) {
-        return (number < 10 ? '0' : '') + number;
-    },
-
-    addLeadingZeroForYear: function (number, fullYearMode) {
-        if (fullYearMode) {
-            return (number < 10 ? '000' : (number < 100 ? '00' : (number < 1000 ? '0' : ''))) + number;
-        }
-
-        return (number < 10 ? '0' : '') + number;
-    }
-};
-
-var DateFormatter_1 = DateFormatter;
-
-var TimeFormatter = function (timePattern, timeFormat) {
-    var owner = this;
-
-    owner.time = [];
-    owner.blocks = [];
-    owner.timePattern = timePattern;
-    owner.timeFormat = timeFormat;
-    owner.initBlocks();
-};
-
-TimeFormatter.prototype = {
-    initBlocks: function () {
-        var owner = this;
-        owner.timePattern.forEach(function () {
-            owner.blocks.push(2);
-        });
-    },
-
-    getISOFormatTime: function () {
-        var owner = this,
-            time = owner.time;
-
-        return time[2] ? (
-            owner.addLeadingZero(time[0]) + ':' + owner.addLeadingZero(time[1]) + ':' + owner.addLeadingZero(time[2])
-        ) : '';
-    },
-
-    getBlocks: function () {
-        return this.blocks;
-    },
-
-    getTimeFormatOptions: function () {
-        var owner = this;
-        if (String(owner.timeFormat) === '12') {
-            return {
-                maxHourFirstDigit: 1,
-                maxHours: 12,
-                maxMinutesFirstDigit: 5,
-                maxMinutes: 60
-            };
-        }
-
-        return {
-            maxHourFirstDigit: 2,
-            maxHours: 23,
-            maxMinutesFirstDigit: 5,
-            maxMinutes: 60
-        };
-    },
-
-    getValidatedTime: function (value) {
-        var owner = this, result = '';
-
-        value = value.replace(/[^\d]/g, '');
-
-        var timeFormatOptions = owner.getTimeFormatOptions();
-
-        owner.blocks.forEach(function (length, index) {
-            if (value.length > 0) {
-                var sub = value.slice(0, length),
-                    sub0 = sub.slice(0, 1),
-                    rest = value.slice(length);
-
-                switch (owner.timePattern[index]) {
-
-                case 'h':
-                    if (parseInt(sub0, 10) > timeFormatOptions.maxHourFirstDigit) {
-                        sub = '0' + sub0;
-                    } else if (parseInt(sub, 10) > timeFormatOptions.maxHours) {
-                        sub = timeFormatOptions.maxHours + '';
-                    }
-
-                    break;
-
-                case 'm':
-                case 's':
-                    if (parseInt(sub0, 10) > timeFormatOptions.maxMinutesFirstDigit) {
-                        sub = '0' + sub0;
-                    } else if (parseInt(sub, 10) > timeFormatOptions.maxMinutes) {
-                        sub = timeFormatOptions.maxMinutes + '';
-                    }
-                    break;
-                }
-
-                result += sub;
-
-                // update remaining string
-                value = rest;
-            }
-        });
-
-        return this.getFixedTimeString(result);
-    },
-
-    getFixedTimeString: function (value) {
-        var owner = this, timePattern = owner.timePattern, time = [],
-            secondIndex = 0, minuteIndex = 0, hourIndex = 0,
-            secondStartIndex = 0, minuteStartIndex = 0, hourStartIndex = 0,
-            second, minute, hour;
-
-        if (value.length === 6) {
-            timePattern.forEach(function (type, index) {
-                switch (type) {
-                case 's':
-                    secondIndex = index * 2;
-                    break;
-                case 'm':
-                    minuteIndex = index * 2;
-                    break;
-                case 'h':
-                    hourIndex = index * 2;
-                    break;
-                }
-            });
-
-            hourStartIndex = hourIndex;
-            minuteStartIndex = minuteIndex;
-            secondStartIndex = secondIndex;
-
-            second = parseInt(value.slice(secondStartIndex, secondStartIndex + 2), 10);
-            minute = parseInt(value.slice(minuteStartIndex, minuteStartIndex + 2), 10);
-            hour = parseInt(value.slice(hourStartIndex, hourStartIndex + 2), 10);
-
-            time = this.getFixedTime(hour, minute, second);
-        }
-
-        if (value.length === 4 && owner.timePattern.indexOf('s') < 0) {
-            timePattern.forEach(function (type, index) {
-                switch (type) {
-                case 'm':
-                    minuteIndex = index * 2;
-                    break;
-                case 'h':
-                    hourIndex = index * 2;
-                    break;
-                }
-            });
-
-            hourStartIndex = hourIndex;
-            minuteStartIndex = minuteIndex;
-
-            second = 0;
-            minute = parseInt(value.slice(minuteStartIndex, minuteStartIndex + 2), 10);
-            hour = parseInt(value.slice(hourStartIndex, hourStartIndex + 2), 10);
-
-            time = this.getFixedTime(hour, minute, second);
-        }
-
-        owner.time = time;
-
-        return time.length === 0 ? value : timePattern.reduce(function (previous, current) {
-            switch (current) {
-            case 's':
-                return previous + owner.addLeadingZero(time[2]);
-            case 'm':
-                return previous + owner.addLeadingZero(time[1]);
-            case 'h':
-                return previous + owner.addLeadingZero(time[0]);
-            }
-        }, '');
-    },
-
-    getFixedTime: function (hour, minute, second) {
-        second = Math.min(parseInt(second || 0, 10), 60);
-        minute = Math.min(minute, 60);
-        hour = Math.min(hour, 60);
-
-        return [hour, minute, second];
-    },
-
-    addLeadingZero: function (number) {
-        return (number < 10 ? '0' : '') + number;
-    }
-};
-
-var TimeFormatter_1 = TimeFormatter;
-
-var PhoneFormatter = function (formatter, delimiter) {
-    var owner = this;
-
-    owner.delimiter = (delimiter || delimiter === '') ? delimiter : ' ';
-    owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : '';
-
-    owner.formatter = formatter;
-};
-
-PhoneFormatter.prototype = {
-    setFormatter: function (formatter) {
-        this.formatter = formatter;
-    },
-
-    format: function (phoneNumber) {
-        var owner = this;
-
-        owner.formatter.clear();
-
-        // only keep number and +
-        phoneNumber = phoneNumber.replace(/[^\d+]/g, '');
-
-        // strip non-leading +
-        phoneNumber = phoneNumber.replace(/^\+/, 'B').replace(/\+/g, '').replace('B', '+');
-
-        // strip delimiter
-        phoneNumber = phoneNumber.replace(owner.delimiterRE, '');
-
-        var result = '', current, validated = false;
-
-        for (var i = 0, iMax = phoneNumber.length; i < iMax; i++) {
-            current = owner.formatter.inputDigit(phoneNumber.charAt(i));
-
-            // has ()- or space inside
-            if (/[\s()-]/g.test(current)) {
-                result = current;
-
-                validated = true;
-            } else {
-                if (!validated) {
-                    result = current;
-                }
-                // else: over length input
-                // it turns to invalid number again
-            }
-        }
-
-        // strip ()
-        // e.g. US: 7161234567 returns (716) 123-4567
-        result = result.replace(/[()]/g, '');
-        // replace library delimiter with user customized delimiter
-        result = result.replace(/[\s-]/g, owner.delimiter);
-
-        return result;
-    }
-};
-
-var PhoneFormatter_1 = PhoneFormatter;
-
-var CreditCardDetector = {
-    blocks: {
-        uatp:          [4, 5, 6],
-        amex:          [4, 6, 5],
-        diners:        [4, 6, 4],
-        discover:      [4, 4, 4, 4],
-        mastercard:    [4, 4, 4, 4],
-        dankort:       [4, 4, 4, 4],
-        instapayment:  [4, 4, 4, 4],
-        jcb15:         [4, 6, 5],
-        jcb:           [4, 4, 4, 4],
-        maestro:       [4, 4, 4, 4],
-        visa:          [4, 4, 4, 4],
-        mir:           [4, 4, 4, 4],
-        unionPay:      [4, 4, 4, 4],
-        general:       [4, 4, 4, 4]
-    },
-
-    re: {
-        // starts with 1; 15 digits, not starts with 1800 (jcb card)
-        uatp: /^(?!1800)1\d{0,14}/,
-
-        // starts with 34/37; 15 digits
-        amex: /^3[47]\d{0,13}/,
-
-        // starts with 6011/65/644-649; 16 digits
-        discover: /^(?:6011|65\d{0,2}|64[4-9]\d?)\d{0,12}/,
-
-        // starts with 300-305/309 or 36/38/39; 14 digits
-        diners: /^3(?:0([0-5]|9)|[689]\d?)\d{0,11}/,
-
-        // starts with 51-55/2221–2720; 16 digits
-        mastercard: /^(5[1-5]\d{0,2}|22[2-9]\d{0,1}|2[3-7]\d{0,2})\d{0,12}/,
-
-        // starts with 5019/4175/4571; 16 digits
-        dankort: /^(5019|4175|4571)\d{0,12}/,
-
-        // starts with 637-639; 16 digits
-        instapayment: /^63[7-9]\d{0,13}/,
-
-        // starts with 2131/1800; 15 digits
-        jcb15: /^(?:2131|1800)\d{0,11}/,
-
-        // starts with 2131/1800/35; 16 digits
-        jcb: /^(?:35\d{0,2})\d{0,12}/,
-
-        // starts with 50/56-58/6304/67; 16 digits
-        maestro: /^(?:5[0678]\d{0,2}|6304|67\d{0,2})\d{0,12}/,
-
-        // starts with 22; 16 digits
-        mir: /^220[0-4]\d{0,12}/,
-
-        // starts with 4; 16 digits
-        visa: /^4\d{0,15}/,
-
-        // starts with 62/81; 16 digits
-        unionPay: /^(62|81)\d{0,14}/
-    },
-
-    getStrictBlocks: function (block) {
-      var total = block.reduce(function (prev, current) {
-        return prev + current;
-      }, 0);
-
-      return block.concat(19 - total);
-    },
-
-    getInfo: function (value, strictMode) {
-        var blocks = CreditCardDetector.blocks,
-            re = CreditCardDetector.re;
-
-        // Some credit card can have up to 19 digits number.
-        // Set strictMode to true will remove the 16 max-length restrain,
-        // however, I never found any website validate card number like
-        // this, hence probably you don't want to enable this option.
-        strictMode = !!strictMode;
-
-        for (var key in re) {
-            if (re[key].test(value)) {
-                var matchedBlocks = blocks[key];
-                return {
-                    type: key,
-                    blocks: strictMode ? this.getStrictBlocks(matchedBlocks) : matchedBlocks
-                };
-            }
-        }
-
-        return {
-            type: 'unknown',
-            blocks: strictMode ? this.getStrictBlocks(blocks.general) : blocks.general
-        };
-    }
-};
-
-var CreditCardDetector_1 = CreditCardDetector;
-
-var Util = {
-    noop: function () {
-    },
-
-    strip: function (value, re) {
-        return value.replace(re, '');
-    },
-
-    getPostDelimiter: function (value, delimiter, delimiters) {
-        // single delimiter
-        if (delimiters.length === 0) {
-            return value.slice(-delimiter.length) === delimiter ? delimiter : '';
-        }
-
-        // multiple delimiters
-        var matchedDelimiter = '';
-        delimiters.forEach(function (current) {
-            if (value.slice(-current.length) === current) {
-                matchedDelimiter = current;
-            }
-        });
-
-        return matchedDelimiter;
-    },
-
-    getDelimiterREByDelimiter: function (delimiter) {
-        return new RegExp(delimiter.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'g');
-    },
-
-    getNextCursorPosition: function (prevPos, oldValue, newValue, delimiter, delimiters) {
-      // If cursor was at the end of value, just place it back.
-      // Because new value could contain additional chars.
-      if (oldValue.length === prevPos) {
-          return newValue.length;
-      }
-
-      return prevPos + this.getPositionOffset(prevPos, oldValue, newValue, delimiter ,delimiters);
-    },
-
-    getPositionOffset: function (prevPos, oldValue, newValue, delimiter, delimiters) {
-        var oldRawValue, newRawValue, lengthOffset;
-
-        oldRawValue = this.stripDelimiters(oldValue.slice(0, prevPos), delimiter, delimiters);
-        newRawValue = this.stripDelimiters(newValue.slice(0, prevPos), delimiter, delimiters);
-        lengthOffset = oldRawValue.length - newRawValue.length;
-
-        return (lengthOffset !== 0) ? (lengthOffset / Math.abs(lengthOffset)) : 0;
-    },
-
-    stripDelimiters: function (value, delimiter, delimiters) {
-        var owner = this;
-
-        // single delimiter
-        if (delimiters.length === 0) {
-            var delimiterRE = delimiter ? owner.getDelimiterREByDelimiter(delimiter) : '';
-
-            return value.replace(delimiterRE, '');
-        }
-
-        // multiple delimiters
-        delimiters.forEach(function (current) {
-            current.split('').forEach(function (letter) {
-                value = value.replace(owner.getDelimiterREByDelimiter(letter), '');
-            });
-        });
-
-        return value;
-    },
-
-    headStr: function (str, length) {
-        return str.slice(0, length);
-    },
-
-    getMaxLength: function (blocks) {
-        return blocks.reduce(function (previous, current) {
-            return previous + current;
-        }, 0);
-    },
-
-    // strip prefix
-    // Before type  |   After type    |     Return value
-    // PEFIX-...    |   PEFIX-...     |     ''
-    // PREFIX-123   |   PEFIX-123     |     123
-    // PREFIX-123   |   PREFIX-23     |     23
-    // PREFIX-123   |   PREFIX-1234   |     1234
-    getPrefixStrippedValue: function (value, prefix, prefixLength, prevResult, delimiter, delimiters, noImmediatePrefix, tailPrefix, signBeforePrefix) {
-        // No prefix
-        if (prefixLength === 0) {
-          return value;
-        }
-
-        // Value is prefix
-        if (value === prefix && value !== '') {
-          return '';
-        }
-
-        if (signBeforePrefix && (value.slice(0, 1) == '-')) {
-            var prev = (prevResult.slice(0, 1) == '-') ? prevResult.slice(1) : prevResult;
-            return '-' + this.getPrefixStrippedValue(value.slice(1), prefix, prefixLength, prev, delimiter, delimiters, noImmediatePrefix, tailPrefix, signBeforePrefix);
-        }
-
-        // Pre result prefix string does not match pre-defined prefix
-        if (prevResult.slice(0, prefixLength) !== prefix && !tailPrefix) {
-            // Check if the first time user entered something
-            if (noImmediatePrefix && !prevResult && value) return value;
-            return '';
-        } else if (prevResult.slice(-prefixLength) !== prefix && tailPrefix) {
-            // Check if the first time user entered something
-            if (noImmediatePrefix && !prevResult && value) return value;
-            return '';
-        }
-
-        var prevValue = this.stripDelimiters(prevResult, delimiter, delimiters);
-
-        // New value has issue, someone typed in between prefix letters
-        // Revert to pre value
-        if (value.slice(0, prefixLength) !== prefix && !tailPrefix) {
-            return prevValue.slice(prefixLength);
-        } else if (value.slice(-prefixLength) !== prefix && tailPrefix) {
-            return prevValue.slice(0, -prefixLength - 1);
-        }
-
-        // No issue, strip prefix for new value
-        return tailPrefix ? value.slice(0, -prefixLength) : value.slice(prefixLength);
-    },
-
-    getFirstDiffIndex: function (prev, current) {
-        var index = 0;
-
-        while (prev.charAt(index) === current.charAt(index)) {
-            if (prev.charAt(index++) === '') {
-                return -1;
-            }
-        }
-
-        return index;
-    },
-
-    getFormattedValue: function (value, blocks, blocksLength, delimiter, delimiters, delimiterLazyShow) {
-        var result = '',
-            multipleDelimiters = delimiters.length > 0,
-            currentDelimiter = '';
-
-        // no options, normal input
-        if (blocksLength === 0) {
-            return value;
-        }
-
-        blocks.forEach(function (length, index) {
-            if (value.length > 0) {
-                var sub = value.slice(0, length),
-                    rest = value.slice(length);
-
-                if (multipleDelimiters) {
-                    currentDelimiter = delimiters[delimiterLazyShow ? (index - 1) : index] || currentDelimiter;
-                } else {
-                    currentDelimiter = delimiter;
-                }
-
-                if (delimiterLazyShow) {
-                    if (index > 0) {
-                        result += currentDelimiter;
-                    }
-
-                    result += sub;
-                } else {
-                    result += sub;
-
-                    if (sub.length === length && index < blocksLength - 1) {
-                        result += currentDelimiter;
-                    }
-                }
-
-                // update remaining string
-                value = rest;
-            }
-        });
-
-        return result;
-    },
-
-    // move cursor to the end
-    // the first time user focuses on an input with prefix
-    fixPrefixCursor: function (el, prefix, delimiter, delimiters) {
-        if (!el) {
-            return;
-        }
-
-        var val = el.value,
-            appendix = delimiter || (delimiters[0] || ' ');
-
-        if (!el.setSelectionRange || !prefix || (prefix.length + appendix.length) <= val.length) {
-            return;
-        }
-
-        var len = val.length * 2;
-
-        // set timeout to avoid blink
-        setTimeout(function () {
-            el.setSelectionRange(len, len);
-        }, 1);
-    },
-
-    // Check if input field is fully selected
-    checkFullSelection: function(value) {
-      try {
-        var selection = window.getSelection() || document.getSelection() || {};
-        return selection.toString().length === value.length;
-      } catch (ex) {
-        // Ignore
-      }
-
-      return false;
-    },
-
-    setSelection: function (element, position, doc) {
-        if (element !== this.getActiveElement(doc)) {
-            return;
-        }
-
-        // cursor is already in the end
-        if (element && element.value.length <= position) {
-          return;
-        }
-
-        if (element.createTextRange) {
-            var range = element.createTextRange();
-
-            range.move('character', position);
-            range.select();
-        } else {
-            try {
-                element.setSelectionRange(position, position);
-            } catch (e) {
-                // eslint-disable-next-line
-                console.warn('The input element type does not support selection');
-            }
-        }
-    },
-
-    getActiveElement: function(parent) {
-        var activeElement = parent.activeElement;
-        if (activeElement && activeElement.shadowRoot) {
-            return this.getActiveElement(activeElement.shadowRoot);
-        }
-        return activeElement;
-    },
-
-    isAndroid: function () {
-        return navigator && /android/i.test(navigator.userAgent);
-    },
-
-    // On Android chrome, the keyup and keydown events
-    // always return key code 229 as a composition that
-    // buffers the user’s keystrokes
-    // see https://github.com/nosir/cleave.js/issues/147
-    isAndroidBackspaceKeydown: function (lastInputValue, currentInputValue) {
-        if (!this.isAndroid() || !lastInputValue || !currentInputValue) {
-            return false;
-        }
-
-        return currentInputValue === lastInputValue.slice(0, -1);
-    }
-};
-
-var Util_1 = Util;
-
-/**
- * Props Assignment
- *
- * Separate this, so react module can share the usage
- */
-var DefaultProperties = {
-    // Maybe change to object-assign
-    // for now just keep it as simple
-    assign: function (target, opts) {
-        target = target || {};
-        opts = opts || {};
-
-        // credit card
-        target.creditCard = !!opts.creditCard;
-        target.creditCardStrictMode = !!opts.creditCardStrictMode;
-        target.creditCardType = '';
-        target.onCreditCardTypeChanged = opts.onCreditCardTypeChanged || (function () {});
-
-        // phone
-        target.phone = !!opts.phone;
-        target.phoneRegionCode = opts.phoneRegionCode || 'AU';
-        target.phoneFormatter = {};
-
-        // time
-        target.time = !!opts.time;
-        target.timePattern = opts.timePattern || ['h', 'm', 's'];
-        target.timeFormat = opts.timeFormat || '24';
-        target.timeFormatter = {};
-
-        // date
-        target.date = !!opts.date;
-        target.datePattern = opts.datePattern || ['d', 'm', 'Y'];
-        target.dateMin = opts.dateMin || '';
-        target.dateMax = opts.dateMax || '';
-        target.dateFormatter = {};
-
-        // numeral
-        target.numeral = !!opts.numeral;
-        target.numeralIntegerScale = opts.numeralIntegerScale > 0 ? opts.numeralIntegerScale : 0;
-        target.numeralDecimalScale = opts.numeralDecimalScale >= 0 ? opts.numeralDecimalScale : 2;
-        target.numeralDecimalMark = opts.numeralDecimalMark || '.';
-        target.numeralThousandsGroupStyle = opts.numeralThousandsGroupStyle || 'thousand';
-        target.numeralPositiveOnly = !!opts.numeralPositiveOnly;
-        target.stripLeadingZeroes = opts.stripLeadingZeroes !== false;
-        target.signBeforePrefix = !!opts.signBeforePrefix;
-        target.tailPrefix = !!opts.tailPrefix;
-
-        // others
-        target.swapHiddenInput = !!opts.swapHiddenInput;
-        
-        target.numericOnly = target.creditCard || target.date || !!opts.numericOnly;
-
-        target.uppercase = !!opts.uppercase;
-        target.lowercase = !!opts.lowercase;
-
-        target.prefix = (target.creditCard || target.date) ? '' : (opts.prefix || '');
-        target.noImmediatePrefix = !!opts.noImmediatePrefix;
-        target.prefixLength = target.prefix.length;
-        target.rawValueTrimPrefix = !!opts.rawValueTrimPrefix;
-        target.copyDelimiter = !!opts.copyDelimiter;
-
-        target.initValue = (opts.initValue !== undefined && opts.initValue !== null) ? opts.initValue.toString() : '';
-
-        target.delimiter =
-            (opts.delimiter || opts.delimiter === '') ? opts.delimiter :
-                (opts.date ? '/' :
-                    (opts.time ? ':' :
-                        (opts.numeral ? ',' :
-                            (opts.phone ? ' ' :
-                                ' '))));
-        target.delimiterLength = target.delimiter.length;
-        target.delimiterLazyShow = !!opts.delimiterLazyShow;
-        target.delimiters = opts.delimiters || [];
-
-        target.blocks = opts.blocks || [];
-        target.blocksLength = target.blocks.length;
-
-        target.root = (typeof commonjsGlobal === 'object' && commonjsGlobal) ? commonjsGlobal : window;
-        target.document = opts.document || target.root.document;
-
-        target.maxLength = 0;
-
-        target.backspace = false;
-        target.result = '';
-
-        target.onValueChanged = opts.onValueChanged || (function () {});
-
-        return target;
-    }
-};
-
-var DefaultProperties_1 = DefaultProperties;
-
-/**
- * Construct a new Cleave instance by passing the configuration object
- *
- * @param {String | HTMLElement} element
- * @param {Object} opts
- */
-var Cleave = function (element, opts) {
-    var owner = this;
-    var hasMultipleElements = false;
-
-    if (typeof element === 'string') {
-        owner.element = document.querySelector(element);
-        hasMultipleElements = document.querySelectorAll(element).length > 1;
-    } else {
-      if (typeof element.length !== 'undefined' && element.length > 0) {
-        owner.element = element[0];
-        hasMultipleElements = element.length > 1;
-      } else {
-        owner.element = element;
-      }
-    }
-
-    if (!owner.element) {
-        throw new Error('[cleave.js] Please check the element');
-    }
-
-    if (hasMultipleElements) {
-      try {
-        // eslint-disable-next-line
-        console.warn('[cleave.js] Multiple input fields matched, cleave.js will only take the first one.');
-      } catch (e) {
-        // Old IE
-      }
-    }
-
-    opts.initValue = owner.element.value;
-
-    owner.properties = Cleave.DefaultProperties.assign({}, opts);
-
-    owner.init();
-};
-
-Cleave.prototype = {
-    init: function () {
-        var owner = this, pps = owner.properties;
-
-        // no need to use this lib
-        if (!pps.numeral && !pps.phone && !pps.creditCard && !pps.time && !pps.date && (pps.blocksLength === 0 && !pps.prefix)) {
-            owner.onInput(pps.initValue);
-
-            return;
-        }
-
-        pps.maxLength = Cleave.Util.getMaxLength(pps.blocks);
-
-        owner.isAndroid = Cleave.Util.isAndroid();
-        owner.lastInputValue = '';
-        owner.isBackward = '';
-
-        owner.onChangeListener = owner.onChange.bind(owner);
-        owner.onKeyDownListener = owner.onKeyDown.bind(owner);
-        owner.onFocusListener = owner.onFocus.bind(owner);
-        owner.onCutListener = owner.onCut.bind(owner);
-        owner.onCopyListener = owner.onCopy.bind(owner);
-
-        owner.initSwapHiddenInput();
-
-        owner.element.addEventListener('input', owner.onChangeListener);
-        owner.element.addEventListener('keydown', owner.onKeyDownListener);
-        owner.element.addEventListener('focus', owner.onFocusListener);
-        owner.element.addEventListener('cut', owner.onCutListener);
-        owner.element.addEventListener('copy', owner.onCopyListener);
-
-
-        owner.initPhoneFormatter();
-        owner.initDateFormatter();
-        owner.initTimeFormatter();
-        owner.initNumeralFormatter();
-
-        // avoid touch input field if value is null
-        // otherwise Firefox will add red box-shadow for <input required />
-        if (pps.initValue || (pps.prefix && !pps.noImmediatePrefix)) {
-            owner.onInput(pps.initValue);
-        }
-    },
-
-    initSwapHiddenInput: function () {
-        var owner = this, pps = owner.properties;
-        if (!pps.swapHiddenInput) return;
-
-        var inputFormatter = owner.element.cloneNode(true);
-        owner.element.parentNode.insertBefore(inputFormatter, owner.element);
-
-        owner.elementSwapHidden = owner.element;
-        owner.elementSwapHidden.type = 'hidden';
-
-        owner.element = inputFormatter;
-        owner.element.id = '';
-    },
-
-    initNumeralFormatter: function () {
-        var owner = this, pps = owner.properties;
-
-        if (!pps.numeral) {
-            return;
-        }
-
-        pps.numeralFormatter = new Cleave.NumeralFormatter(
-            pps.numeralDecimalMark,
-            pps.numeralIntegerScale,
-            pps.numeralDecimalScale,
-            pps.numeralThousandsGroupStyle,
-            pps.numeralPositiveOnly,
-            pps.stripLeadingZeroes,
-            pps.prefix,
-            pps.signBeforePrefix,
-            pps.tailPrefix,
-            pps.delimiter
-        );
-    },
-
-    initTimeFormatter: function() {
-        var owner = this, pps = owner.properties;
-
-        if (!pps.time) {
-            return;
-        }
-
-        pps.timeFormatter = new Cleave.TimeFormatter(pps.timePattern, pps.timeFormat);
-        pps.blocks = pps.timeFormatter.getBlocks();
-        pps.blocksLength = pps.blocks.length;
-        pps.maxLength = Cleave.Util.getMaxLength(pps.blocks);
-    },
-
-    initDateFormatter: function () {
-        var owner = this, pps = owner.properties;
-
-        if (!pps.date) {
-            return;
-        }
-
-        pps.dateFormatter = new Cleave.DateFormatter(pps.datePattern, pps.dateMin, pps.dateMax);
-        pps.blocks = pps.dateFormatter.getBlocks();
-        pps.blocksLength = pps.blocks.length;
-        pps.maxLength = Cleave.Util.getMaxLength(pps.blocks);
-    },
-
-    initPhoneFormatter: function () {
-        var owner = this, pps = owner.properties;
-
-        if (!pps.phone) {
-            return;
-        }
-
-        // Cleave.AsYouTypeFormatter should be provided by
-        // external google closure lib
-        try {
-            pps.phoneFormatter = new Cleave.PhoneFormatter(
-                new pps.root.Cleave.AsYouTypeFormatter(pps.phoneRegionCode),
-                pps.delimiter
-            );
-        } catch (ex) {
-            throw new Error('[cleave.js] Please include phone-type-formatter.{country}.js lib');
-        }
-    },
-
-    onKeyDown: function (event) {
-        var owner = this,
-            charCode = event.which || event.keyCode;
-
-        owner.lastInputValue = owner.element.value;
-        owner.isBackward = charCode === 8;
-    },
-
-    onChange: function (event) {
-        var owner = this, pps = owner.properties,
-            Util = Cleave.Util;
-
-        owner.isBackward = owner.isBackward || event.inputType === 'deleteContentBackward';
-
-        var postDelimiter = Util.getPostDelimiter(owner.lastInputValue, pps.delimiter, pps.delimiters);
-
-        if (owner.isBackward && postDelimiter) {
-            pps.postDelimiterBackspace = postDelimiter;
-        } else {
-            pps.postDelimiterBackspace = false;
-        }
-
-        this.onInput(this.element.value);
-    },
-
-    onFocus: function () {
-        var owner = this,
-            pps = owner.properties;
-        owner.lastInputValue = owner.element.value;
-
-        if (pps.prefix && pps.noImmediatePrefix && !owner.element.value) {
-            this.onInput(pps.prefix);
-        }
-
-        Cleave.Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters);
-    },
-
-    onCut: function (e) {
-        if (!Cleave.Util.checkFullSelection(this.element.value)) return;
-        this.copyClipboardData(e);
-        this.onInput('');
-    },
-
-    onCopy: function (e) {
-        if (!Cleave.Util.checkFullSelection(this.element.value)) return;
-        this.copyClipboardData(e);
-    },
-
-    copyClipboardData: function (e) {
-        var owner = this,
-            pps = owner.properties,
-            Util = Cleave.Util,
-            inputValue = owner.element.value,
-            textToCopy = '';
-
-        if (!pps.copyDelimiter) {
-            textToCopy = Util.stripDelimiters(inputValue, pps.delimiter, pps.delimiters);
-        } else {
-            textToCopy = inputValue;
-        }
-
-        try {
-            if (e.clipboardData) {
-                e.clipboardData.setData('Text', textToCopy);
-            } else {
-                window.clipboardData.setData('Text', textToCopy);
-            }
-
-            e.preventDefault();
-        } catch (ex) {
-            //  empty
-        }
-    },
-
-    onInput: function (value) {
-        var owner = this, pps = owner.properties,
-            Util = Cleave.Util;
-
-        // case 1: delete one more character "4"
-        // 1234*| -> hit backspace -> 123|
-        // case 2: last character is not delimiter which is:
-        // 12|34* -> hit backspace -> 1|34*
-        // note: no need to apply this for numeral mode
-        var postDelimiterAfter = Util.getPostDelimiter(value, pps.delimiter, pps.delimiters);
-        if (!pps.numeral && pps.postDelimiterBackspace && !postDelimiterAfter) {
-            value = Util.headStr(value, value.length - pps.postDelimiterBackspace.length);
-        }
-
-        // phone formatter
-        if (pps.phone) {
-            if (pps.prefix && (!pps.noImmediatePrefix || value.length)) {
-                pps.result = pps.prefix + pps.phoneFormatter.format(value).slice(pps.prefix.length);
-            } else {
-                pps.result = pps.phoneFormatter.format(value);
-            }
-            owner.updateValueState();
-
-            return;
-        }
-
-        // numeral formatter
-        if (pps.numeral) {
-            // Do not show prefix when noImmediatePrefix is specified
-            // This mostly because we need to show user the native input placeholder
-            if (pps.prefix && pps.noImmediatePrefix && value.length === 0) {
-                pps.result = '';
-            } else {
-                pps.result = pps.numeralFormatter.format(value);
-            }
-            owner.updateValueState();
-
-            return;
-        }
-
-        // date
-        if (pps.date) {
-            value = pps.dateFormatter.getValidatedDate(value);
-        }
-
-        // time
-        if (pps.time) {
-            value = pps.timeFormatter.getValidatedTime(value);
-        }
-
-        // strip delimiters
-        value = Util.stripDelimiters(value, pps.delimiter, pps.delimiters);
-
-        // strip prefix
-        value = Util.getPrefixStrippedValue(value, pps.prefix, pps.prefixLength, pps.result, pps.delimiter, pps.delimiters, pps.noImmediatePrefix, pps.tailPrefix, pps.signBeforePrefix);
-
-        // strip non-numeric characters
-        value = pps.numericOnly ? Util.strip(value, /[^\d]/g) : value;
-
-        // convert case
-        value = pps.uppercase ? value.toUpperCase() : value;
-        value = pps.lowercase ? value.toLowerCase() : value;
-
-        // prevent from showing prefix when no immediate option enabled with empty input value
-        if (pps.prefix) {
-            if (pps.tailPrefix) {
-                value = value + pps.prefix;
-            } else {
-                value = pps.prefix + value;
-            }
-
-
-            // no blocks specified, no need to do formatting
-            if (pps.blocksLength === 0) {
-                pps.result = value;
-                owner.updateValueState();
-
-                return;
-            }
-        }
-
-        // update credit card props
-        if (pps.creditCard) {
-            owner.updateCreditCardPropsByValue(value);
-        }
-
-        // strip over length characters
-        value = Util.headStr(value, pps.maxLength);
-
-        // apply blocks
-        pps.result = Util.getFormattedValue(
-            value,
-            pps.blocks, pps.blocksLength,
-            pps.delimiter, pps.delimiters, pps.delimiterLazyShow
-        );
-
-        owner.updateValueState();
-    },
-
-    updateCreditCardPropsByValue: function (value) {
-        var owner = this, pps = owner.properties,
-            Util = Cleave.Util,
-            creditCardInfo;
-
-        // At least one of the first 4 characters has changed
-        if (Util.headStr(pps.result, 4) === Util.headStr(value, 4)) {
-            return;
-        }
-
-        creditCardInfo = Cleave.CreditCardDetector.getInfo(value, pps.creditCardStrictMode);
-
-        pps.blocks = creditCardInfo.blocks;
-        pps.blocksLength = pps.blocks.length;
-        pps.maxLength = Util.getMaxLength(pps.blocks);
-
-        // credit card type changed
-        if (pps.creditCardType !== creditCardInfo.type) {
-            pps.creditCardType = creditCardInfo.type;
-
-            pps.onCreditCardTypeChanged.call(owner, pps.creditCardType);
-        }
-    },
-
-    updateValueState: function () {
-        var owner = this,
-            Util = Cleave.Util,
-            pps = owner.properties;
-
-        if (!owner.element) {
-            return;
-        }
-
-        var endPos = owner.element.selectionEnd;
-        var oldValue = owner.element.value;
-        var newValue = pps.result;
-
-        endPos = Util.getNextCursorPosition(endPos, oldValue, newValue, pps.delimiter, pps.delimiters);
-
-        // fix Android browser type="text" input field
-        // cursor not jumping issue
-        if (owner.isAndroid) {
-            window.setTimeout(function () {
-                owner.element.value = newValue;
-                Util.setSelection(owner.element, endPos, pps.document, false);
-                owner.callOnValueChanged();
-            }, 1);
-
-            return;
-        }
-
-        owner.element.value = newValue;
-        if (pps.swapHiddenInput) owner.elementSwapHidden.value = owner.getRawValue();
-
-        Util.setSelection(owner.element, endPos, pps.document, false);
-        owner.callOnValueChanged();
-    },
-
-    callOnValueChanged: function () {
-        var owner = this,
-            pps = owner.properties;
-
-        pps.onValueChanged.call(owner, {
-            target: {
-                name: owner.element.name,
-                value: pps.result,
-                rawValue: owner.getRawValue()
-            }
-        });
-    },
-
-    setPhoneRegionCode: function (phoneRegionCode) {
-        var owner = this, pps = owner.properties;
-
-        pps.phoneRegionCode = phoneRegionCode;
-        owner.initPhoneFormatter();
-        owner.onChange();
-    },
-
-    setRawValue: function (value) {
-        var owner = this, pps = owner.properties;
-
-        value = value !== undefined && value !== null ? value.toString() : '';
-
-        if (pps.numeral) {
-            value = value.replace('.', pps.numeralDecimalMark);
-        }
-
-        pps.postDelimiterBackspace = false;
-
-        owner.element.value = value;
-        owner.onInput(value);
-    },
-
-    getRawValue: function () {
-        var owner = this,
-            pps = owner.properties,
-            Util = Cleave.Util,
-            rawValue = owner.element.value;
-
-        if (pps.rawValueTrimPrefix) {
-            rawValue = Util.getPrefixStrippedValue(rawValue, pps.prefix, pps.prefixLength, pps.result, pps.delimiter, pps.delimiters, pps.noImmediatePrefix, pps.tailPrefix, pps.signBeforePrefix);
-        }
-
-        if (pps.numeral) {
-            rawValue = pps.numeralFormatter.getRawValue(rawValue);
-        } else {
-            rawValue = Util.stripDelimiters(rawValue, pps.delimiter, pps.delimiters);
-        }
-
-        return rawValue;
-    },
-
-    getISOFormatDate: function () {
-        var owner = this,
-            pps = owner.properties;
-
-        return pps.date ? pps.dateFormatter.getISOFormatDate() : '';
-    },
-
-    getISOFormatTime: function () {
-        var owner = this,
-            pps = owner.properties;
-
-        return pps.time ? pps.timeFormatter.getISOFormatTime() : '';
-    },
-
-    getFormattedValue: function () {
-        return this.element.value;
-    },
-
-    destroy: function () {
-        var owner = this;
-
-        owner.element.removeEventListener('input', owner.onChangeListener);
-        owner.element.removeEventListener('keydown', owner.onKeyDownListener);
-        owner.element.removeEventListener('focus', owner.onFocusListener);
-        owner.element.removeEventListener('cut', owner.onCutListener);
-        owner.element.removeEventListener('copy', owner.onCopyListener);
-    },
-
-    toString: function () {
-        return '[Cleave Object]';
-    }
-};
-
-Cleave.NumeralFormatter = NumeralFormatter_1;
-Cleave.DateFormatter = DateFormatter_1;
-Cleave.TimeFormatter = TimeFormatter_1;
-Cleave.PhoneFormatter = PhoneFormatter_1;
-Cleave.CreditCardDetector = CreditCardDetector_1;
-Cleave.Util = Util_1;
-Cleave.DefaultProperties = DefaultProperties_1;
-
-// for angular directive
-((typeof commonjsGlobal === 'object' && commonjsGlobal) ? commonjsGlobal : window)['Cleave'] = Cleave;
-
-// CommonJS
-var Cleave_1 = Cleave;
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-function coerceBoolean(value) {
-    return value != null && `${value}` !== 'false';
-}
-function coerceNumber(value, fallbackValue = 0) {
-    return isNumberValue(value) ? Number(value) : fallbackValue;
-}
-function isNumberValue(value) {
-    return !isNaN(parseFloat(value)) && !isNaN(Number(value));
-}
-
-const catInputCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}.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-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-primary-hover{transition:background-color 125ms, color 125ms}.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-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}button.cat-text-primary,button.cat-link-primary{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-primary:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-primary:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-primary,.cat-text-primary-hover{transition:color 125ms}.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-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-primaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}button.cat-text-primaryInverted,button.cat-link-primaryInverted{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-primaryInverted:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-primaryInverted:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 125ms}.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-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-secondary-hover{transition:background-color 125ms, color 125ms}.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-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}button.cat-text-secondary,button.cat-link-secondary{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-secondary:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-secondary:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-secondary,.cat-text-secondary-hover{transition:color 125ms}.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-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-secondaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}button.cat-text-secondaryInverted,button.cat-link-secondaryInverted{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-secondaryInverted:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-secondaryInverted:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 125ms}.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-info{background-color:rgb(var(--cat-info-bg, 0, 115, 230)) !important;color:rgb(var(--cat-info-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-info-hover{transition:background-color 125ms, color 125ms}.cat-bg-info-hover:hover{background-color:rgb(var(--cat-info-bg-hover, 0, 107, 227)) !important;color:rgb(var(--cat-info-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-info,.cat-link-info{color:rgb(var(--cat-info-text, 0, 115, 230)) !important}button.cat-text-info,button.cat-link-info{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-info:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-info:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-info,.cat-text-info-hover{transition:color 125ms}.cat-link-info:hover,.cat-text-info-hover:hover{color:rgb(var(--cat-info-text-hover, 0, 107, 227)) !important}.cat-link-info:active,.cat-text-info-hover:active{color:rgb(var(--cat-info-text-active, 0, 96, 223)) !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-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-success-hover{transition:background-color 125ms, color 125ms}.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-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}button.cat-text-success,button.cat-link-success{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-success:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-success:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-success,.cat-text-success-hover{transition:color 125ms}.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-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-bg-warning-hover{transition:background-color 125ms, color 125ms}.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-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}button.cat-text-warning,button.cat-link-warning{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-warning:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-warning:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-warning,.cat-text-warning-hover{transition:color 125ms}.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-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-danger-hover{transition:background-color 125ms, color 125ms}.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-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}button.cat-text-danger,button.cat-link-danger{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-danger:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-danger:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-danger,.cat-text-danger-hover{transition:color 125ms}.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-text-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-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-bg-muted{background-color:#f2f4f7 !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}.input-field:not(.input-horizontal) .label-container.hidden,.textarea-field:not(.textarea-horizontal) .label-container.hidden,.select-field:not(.select-horizontal) .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{flex-basis:var(--label-size, 33.33%)}.label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-optional,.label-character-count{display:inline-flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem}.label-character-count{margin-left:auto}.input-horizontal .label-container.hidden label,.textarea-horizontal .label-container.hidden label,.select-horizontal .label-container.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}.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}: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{flex:1 1 auto;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 125ms linear;--border-color:var(--cat-border-color-dark, 215, 219, 224);}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-readonly{pointer-events:none}.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:focus-within:has(.clearable:focus){outline:none}.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;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.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-loading,.icon-prefix,.icon-suffix{align-self:center}.input-outer-wrapper{display:flex}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input.has-clearable,input.has-toggle-password{padding-right:1.5rem}input.has-clearable.has-toggle-password{padding-right:3.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}.toggle-password{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.has-clearable~.toggle-password{right:1.5rem}:host(.cat-date-input) .input-wrapper,:host(.cat-time-input) .input-wrapper{z-index:1;border-top-right-radius:0;border-bottom-right-radius:0}";
-const CatInputStyle0 = catInputCss;
-
-let nextUniqueId$7 = 0;
-const CatInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.catChange = index.createEvent(this, "catChange", 7);
-        this.catFocus = index.createEvent(this, "catFocus", 7);
-        this.catBlur = index.createEvent(this, "catBlur", 7);
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-        this._id = `cat-input-${nextUniqueId$7++}`;
-        this.hasSlottedLabel = false;
-        this.hasSlottedHint = false;
-        this.hasSlottedCounter = false;
-        this.isPasswordShown = false;
-        this.errorMap = undefined;
-        this.requiredMarker = 'optional';
-        this.horizontal = false;
-        this.autoComplete = undefined;
-        this.clearable = false;
-        this.togglePassword = false;
-        this.disabled = false;
-        this.loading = false;
-        this.hint = undefined;
-        this.icon = undefined;
-        this.iconRight = false;
-        this.identifier = undefined;
-        this.label = '';
-        this.labelHidden = false;
-        this.max = undefined;
-        this.maxLength = undefined;
-        this.min = undefined;
-        this.minLength = undefined;
-        this.name = undefined;
-        this.placeholder = undefined;
-        this.textPrefix = undefined;
-        this.textSuffix = undefined;
-        this.readonly = false;
-        this.required = false;
-        this.round = false;
-        this.type = 'text';
-        this.value = undefined;
-        this.errors = undefined;
-        this.errorUpdate = 0;
-        this.nativeAttributes = undefined;
-        this.testId = undefined;
-    }
-    get id() {
-        return this.identifier || this._id;
-    }
-    componentWillLoad() {
-        this.onErrorsChanged(this.errors, undefined, false);
-    }
-    componentWillRender() {
-        this.internals.setFormValue(this.value ?? null);
-        this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-        this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-        this.hasSlottedCounter = !!this.hostElement.querySelector('[slot="counter"]');
-    }
-    /**
-     * Programmatically move focus to the input. Use this method instead of
-     * `input.focus()`.
-     *
-     * @param options An optional object providing options to control aspects of
-     * the focusing process.
-     */
-    async doFocus(options) {
-        // hack to make datepicker inputs focusable. The datepicker hides the input
-        // element and dynamically creates a sibling. We need to find the new input
-        // element and focus it instead.
-        const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;
-        input?.focus(options);
-    }
-    /**
-     * Programmatically remove focus from the input. Use this method instead of
-     * `input.blur()`.
-     */
-    async doBlur() {
-        this.input.blur();
-    }
-    /**
-     * Clear the input.
-     */
-    async clear() {
-        this.value = '';
-        this.catChange.emit(this.value);
-    }
-    /**
-     * Adds a Cleave.js mask to the input.
-     *
-     * @param options The Cleave.js options.
-     */
-    async mask(options) {
-        new Cleave_1(this.input, options);
-    }
-    onErrorsChanged(newValue, _oldValue, update = true) {
-        if (!coerceBoolean(this.errorUpdate)) {
-            this.errorMap = undefined;
-        }
-        else {
-            this.errorMapSrc = Array.isArray(newValue)
-                ? newValue.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
-                : newValue || undefined;
-            if (update) {
-                this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
-            }
-        }
-    }
-    render() {
-        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (index.h("div", { key: '72c7cf2c86831c1aca03467ec92149fa0a58b05a', class: {
-                'input-field': true,
-                'input-horizontal': this.horizontal
-            } }, index.h("div", { key: '7cc76563550305d886b1a18d2344bf59b27f6fc2', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '247ad3243e98e5ecf1002e59a84f8f2d1b4f17f4', htmlFor: this.id, part: "label" }, index.h("span", { key: '0d5f489a87735fc11c9dbacf9acded6d7523926a', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '3ade7278530f2b79a3dda8db8923392b84629feb', name: "label" })) || this.label, index.h("div", { key: '0c1bea5d04c65ceace3ba7a10f7d513301709f86', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '437f7c224b323514b2a4dcca8ffd6cdc83d3c384', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'cbc29c60d0f624bcceb1b5e55ba6bc38afc8d514', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: 'f00cdace4e8f842019d7ffae484aca11925e2bc2', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: '8c961aaf1d0451118d9f5ae583a228be54b320eb', class: "input-container" }, index.h("div", { key: '6e9e98caaabea18e4a71b8b09baea5355f2eac7b', class: "input-outer-wrapper" }, index.h("div", { key: '38a5db004dbee08ce542dd36bf0da13156887e26', 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 && (index.h("span", { key: '350c53ffd8b59df4aa63d23c44213425df9add95', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: '5f4794dac4ded82db99a395f1fe34fa9d393498f', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: '5514838423e9ecfed27f877edc2bedaeeebb1584', class: "input-inner-wrapper" }, index.h("input", { key: '2dd5de3d46df35470caf488d3f48b5339081c537', "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 && (index.h("cat-button", { key: '0392b61e401ad12bcc32fe6de7f2acdf49184093', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: 'c33c6b188af0d2ccbf67b4a3527d7dc53af8a1fb', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && index.h("cat-spinner", { key: '3c51656392e532a3a16efcc5dbf181c40b96ed32', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: 'f3a527250b2ab0ae5bb56217366cabe00c5e7bee', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: '063104b3c65eceb1260109c0f55944ca39c5c2ac', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '0508e322d57cc28a245a8e1fe2f16e02af04679b', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: 'b5ea42f17934631b97c05c0ccfbadd8a1554d779', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: '549e082c4e1ff946d2d26ce3843db26af96333d3', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
-    }
-    get hasHint() {
-        return !!this.hint || !!this.hasSlottedHint || this.invalid;
-    }
-    get invalid() {
-        return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;
-    }
-    onInput() {
-        this.value = this.input.value;
-        this.internals.setFormValue(this.input.value);
-        this.catChange.emit(this.value);
-        this.showErrorsIfTimeout();
-    }
-    onFocus(event) {
-        this.catFocus.emit(event);
-    }
-    onBlur(event) {
-        this.catBlur.emit(event);
-        if (coerceBoolean(this.errorUpdate)) {
-            this.showErrors();
-        }
-    }
-    doTogglePassword() {
-        this.isPasswordShown = !this.isPasswordShown;
-    }
-    showErrors() {
-        this.errorMap = this.errorMapSrc;
-    }
-    showErrorsIfTimeout() {
-        const errorUpdate = coerceNumber(this.errorUpdate, null);
-        if (errorUpdate !== null) {
-            typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
-            this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);
-            return true;
-        }
-        return false;
-    }
-    showErrorsIfNoFocus() {
-        const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
-        if (!hasFocus) {
-            this.showErrors();
-        }
-    }
-    findSiblingInput(node) {
-        if (node instanceof HTMLInputElement) {
-            return node;
-        }
-        else if (node?.nextSibling) {
-            return this.findSiblingInput(node.nextSibling);
-        }
-        return undefined;
-    }
-    static get delegatesFocus() { return true; }
-    static get formAssociated() { return true; }
-    get hostElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "errors": ["onErrorsChanged"]
-    }; }
-};
-CatInput.style = CatInputStyle0;
-
-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 CatPaginationStyle0 = catPaginationCss;
+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 CatPaginationStyle0 = catPaginationCss;
 
 const CatPagination = class {
     constructor(hostRef) {
@@ -11482,18 +9983,18 @@ const CatSelect = class {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (index.h(index.Host, { key: '4ffaec1ec7c59635d3e923912e5bb5b554661973' }, index.h("div", { key: 'ad9ad59ff47ab4fe9c9485da344b0be8f030f824', class: {
+        return (index.h(index.Host, { key: 'c26f4f1d90648ae5bdc7d15f6c112adafb2e4f78' }, index.h("div", { key: '15d47938edbc1226d59bc8f921178424dccf7999', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal,
                 'select-multiple': this.multiple
-            } }, index.h("div", { key: 'd87e3451ded9630ef471c6a0d0230f73bf2001f0', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '0eb6bd92232da327fd11a5b8fa5108064216b98d', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: '29b3bc2a6300cf116e85b598c43bc3d590bfca40', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '105d69c1c4ebce966d207248d0919713402775fc', name: "label" })) || this.label, index.h("div", { key: '60d737d4bc621e64c4d60a4454c81d5cd2f14036', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '3ff4fc174c6769300fecde9b4f3785e7f510b3c5', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '44beff5fb235a6ecfe4d3bde6173309ab9374b7d', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'ca853307f93adc14b4ebe5de1f0b5cd255d438d7', class: "select-container" }, index.h("div", { key: 'fc56c44f4d6b27ca4d7d1c3f344bef6c5495ae84', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { key: '77d3a48ea7ad111136fb1513aaeb6c3b15533436', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
+            } }, index.h("div", { key: '3ac28917d6f6ea995142803bbc74f381c540775d', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'f0a54b4dd57db2771b216408313fb289eedd27a2', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: '024573bca075cd84d08349af763d96ed9b53c8c4', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '8e7d2ef38e100add967d3c369cda2cccf7c3f334', name: "label" })) || this.label, index.h("div", { key: 'b9abce3cd81828a3e9dadf6d3c9fc551043cc927', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '3d55ace4e034fcc81c56c887649846ff330d25c4', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'ca265e7b81572037f80e78c167622680ae7ba74e', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '2941249432c643a7aca2887edb76c9503a93fdca', class: "select-container" }, index.h("div", { key: 'eaeccdc2e8305a9937bf5c646ae03798bda777ff', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { key: '6f17f7a17ab914a3430e5dccc84fe6fcd1b22166', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
                 pill: true,
                 'select-no-open': true,
                 'select-option-active': this.state.activeSelectionIndex === i
-            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, index.h("input", { key: 'a4e438192ecee41d5acf77de45a1526876409a0f', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && index.h("cat-spinner", { key: '04d53d0d39bc429a6ac9a479c46f42c6b03a9283' }), this.invalid && (index.h("cat-icon", { key: 'd21136d141632914fc176ea1939164a4d40dc446', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, index.h("input", { key: '364215d3ab64ccaf43edfefa6bc1b9bbb4cbd176', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && index.h("cat-spinner", { key: '1350abe2789adba0e65931358e2637a4a6be2b8f' }), this.invalid && (index.h("cat-icon", { key: 'af9025ce007880906410bc6047ebbb7dab7e5f8c', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
             !this.disabled &&
             !this.state.isResolving &&
-            this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: of.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: 'cd5c84bbc7b04b28acda86d656b2ea9835cbb439', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? of.catI18nRegistry.t('select.close') : of.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (index.h(CatFormHint, { key: 'd0f3f4f080abf2136e681161802f0b332591a30a', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: '1fb0555801f6793b6351dbc19f2eba12c7292593', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: '8eea85eea2b000f29d690aafc7fbae106bf275e5', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { key: 'fa0415a3459967bc8a8591c94e3227c8fb99443d', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
+            this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: of.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: '253cd4626cd0c2503f2f6d832656d091b1b1db83', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? of.catI18nRegistry.t('select.close') : of.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (index.h(CatFormHint, { key: 'f5403e4f52632c7e69c781d3b5f2fe5dd476d086', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: 'f72b057e941d0a8abc535314e83339a59c09416b', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: '2a9a17d9a9e2e931e15296c504735c6d77ba2a9f', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { key: 'af6c9b9152eff975198123219f19b840feddac92', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
             ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (index.h("li", { class: "select-option-loading" }, index.h("cat-skeleton", { variant: "body", lines: 1 }), index.h("cat-skeleton", { variant: "body", lines: 1 }))))
             : !this.state.options.length &&
                 !this.tags && (index.h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : of.catI18nRegistry.t('select.empty')))))))));
@@ -13789,6 +12290,7 @@ const CatTime = class {
         this.catBlur = index.createEvent(this, "catBlur", 7);
         this.language = of.catI18nRegistry.getLocale();
         this.locale = getLocale(this.language);
+        this.timeMaskOptions = { timeFormat: this.locale.timeFormat, timePattern: ['h', 'm'] };
         this.hasSlottedLabel = false;
         this.hasSlottedHint = false;
         this.selectionTime = null;
@@ -13848,13 +12350,6 @@ const CatTime = class {
         this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
         this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
     }
-    componentDidLoad() {
-        this.input?.mask({
-            time: true,
-            timeFormat: this.locale.timeFormat,
-            timePattern: ['h', 'm']
-        });
-    }
     onOpen() {
         const query = (selector) => this.hostElement.shadowRoot?.querySelector(selector);
         const time = clampTime(this.min ?? null, this.selectionTime ?? new Date(2000, 5, 1, 8), this.max ?? null);
@@ -13923,14 +12418,14 @@ const CatTime = class {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (index.h(index.Host, { key: 'a9ea5c301a387ca17e5a1b9db11e986cf5f12415' }, index.h("cat-input", { key: '09ffc2451c3b0e3fb433147ffa3b5f32dbdc5a61', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, 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.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, testId: this.testId, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: 'f5752625a27dea2745aaf7954a52dafa85c93373', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: 'e1fe6b9b959a5e86883cd86522636293eb20f5bb', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: '7fd59e9221a853d26b134be94c0270d1999fbfbf', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '6ac6825380182fadcfbfb008e62cdd72fed515b9', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: '1635dd498b5680294c693cb2d9052eb6d0b6277b', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: '6b85cedb852413d70a322449f5ac609fe85b379b', slot: "addon", placement: this.placement }, index.h("cat-button", { key: 'f2eef3e696a3424e44285a5d2edcb54bbf88606c', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: 'e75f5f46f632632ead917d431eb431bba1c27d95', slot: "content", class: "cat-nav" }, index.h("ul", { key: '26fcb756ebd85196d3abbd70ab63c73d32d14c4b' }, this.timeArray().map(time => {
+        return (index.h(index.Host, { key: 'e0c2114b16b85916f3dce9dfad94d03c12239605' }, index.h("cat-input", { key: '5efacf81af8c646cfd374a67890052c8456c7427', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, 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.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, testId: this.testId, nativeAttributes: this.nativeAttributes, timeMaskOptions: this.timeMaskOptions, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: '3a6975d2d679c3b115cd4d56793f0754d78a01b9', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: 'ba3b9a395737599e0f69df407e310acce9ef43f0', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: 'f8f19c73c24d62d890d37d817dedbfb362f5f423', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '8bd9f5e3599e9cca6c2a9d8e76882c0c939427e8', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: 'b17a3bb5aba864ca5a9beced56c9e7f5618c0758', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: '164d26eb81e3645806b31f61086ac08a0ff2a034', slot: "addon", placement: this.placement }, index.h("cat-button", { key: '47a1f42ae5edb4c074f57e0fca7b06d42084be2f', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: '7d8479f2d343202ba7f582420687b42747a7267e', slot: "content", class: "cat-nav" }, index.h("ul", { key: '54bd4225780e10d7e9abb0f31e0fc6a6e58672a7' }, this.timeArray().map(time => {
             const isoTime = formatIso(time);
             const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
             return (index.h("li", null, index.h("cat-button", { class: {
                     'cat-nav-item': true,
                     'time-disabled': disabled
                 }, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
-        }))))), this.hasSlottedHint && (index.h("span", { key: 'c67a2df1b05ba6772695b0103347750e3d1e8f04', slot: "hint" }, index.h("slot", { key: '147946f77422d6cdd48f4a469c40889835a9f5a9', name: "hint" }))))));
+        }))))), this.hasSlottedHint && (index.h("span", { key: '395d2ed324e51c1899004acad59072e47377c29a', slot: "hint" }, index.h("slot", { key: '4f07ebff747ac5cf97239150875daa8cd5295f2f', name: "hint" }))))));
     }
     timeArray() {
         const result = [];
@@ -14163,12 +12658,12 @@ const CatTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '340e9ed5613717d88fc8dde858d16716d0d100e8' }, index.h("slot", { key: 'af044aaa5e320540463d1318ba8cf8ed1b02b7e4' }), index.h("div", { key: '117ed1ce275f03f879aa2f320d9c0b28bfc953bd', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
+        return (index.h(index.Host, { key: 'a4d508bd463b29935745236c388f31b4bc01516f' }, index.h("slot", { key: 'b1992e73fa0e53b58493b8253c10823d562dac05' }), index.h("div", { key: 'd33515016f4d31548d9628f23d778acde69be531', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
                 tooltip: true,
                 'tooltip-hidden': this.inactive,
                 'tooltip-round': this.round,
                 [`tooltip-${this.size}`]: Boolean(this.size)
-            } }, index.h("slot", { key: 'af0986e70f3d6ba0ad2f791cfa327ae9ebf768f5', name: "content" }, index.h("p", { key: 'bfcca7d936fa6e05719a88ace8bacf806b8f423b' }, this.content)))));
+            } }, index.h("slot", { key: '58c5455be822bf8bc9476c2e5086e0299805791f', name: "content" }, index.h("p", { key: '56d35f4ec8846ad8928c72a269fd5ed19bf087e1' }, this.content)))));
     }
     async update() {
         if (this.trigger && this.tooltip) {