@haiilo/catalyst 13.2.0 → 13.3.1

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

@@ -7982,6 +7982,7 @@ const CatInput = class {
         this.catChange = index.createEvent(this, "catChange");
         this.catFocus = index.createEvent(this, "catFocus");
         this.catBlur = index.createEvent(this, "catBlur");
+        this.catChangeFiles = index.createEvent(this, "catChangeFiles");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -8088,6 +8089,9 @@ const CatInput = class {
     async clear() {
         this.value = '';
         this.catChange.emit(this.value);
+        if (this.type === 'file') {
+            this.catChangeFiles.emit(null);
+        }
     }
     onErrorsChanged(newValue, _oldValue, update = true) {
         if (!coerceBoolean(this.errorUpdate)) {
@@ -8104,24 +8108,24 @@ const CatInput = class {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (index.h("div", { key: '50c440a0998694c006b5a6cad4125bc395a159f1', class: {
+        return (index.h("div", { key: 'ffc4412a1f7c10431da8c4b6380fd8218298ac5a', class: {
                 'input-field': true,
                 'input-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false
-            } }, index.h("div", { key: 'daa77827a09a7a06a5984498ad5537c1e7b07605', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'a39c7bd5557d03d0cb92713229da76fcf9c2e4f4', htmlFor: this.id, part: "label" }, index.h("span", { key: 'bddb726ce5a13891f316cd6961f2313103ffaa06', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '9d9b6db604192d7da651e84c786eaab140faa951', name: "label" })) || this.label, index.h("div", { key: 'f59ccad528690950b12a582df7bc3580e40f3a84', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'f8d8b6ddd9a3056986bfc9bc2cbc3196c3241891', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '93034a970baf7e474934ba6b5327550678abd096', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: '458caee7098e89168d779b776030e24be1c8fce0', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: 'c8583c36bf7cef298d1d0f50c942f43dbc8d9cab', class: { 'input-color': this.type === 'color', 'input-container': true } }, index.h("div", { key: '937aacc0c048c44ca710f3b14e71b436ac3d0039', class: "input-outer-wrapper" }, index.h("div", { key: '02d657ad1dad507dfcd63863a12da02c46ceeb20', class: {
+            } }, index.h("div", { key: '212806d23ea27c6bcfd8850ee3da759014ca78ad', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '78072a1cba66307777885eb284c8e1bdd58e16a1', htmlFor: this.id, part: "label" }, index.h("span", { key: '8418283fde42db3445d5ca9b10559684c8bcd7d7', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '6676d6381311ed2d171cb807598de2c408d017bf', name: "label" })) || this.label, index.h("div", { key: '5ae2d177c55c34663304c8d844e232fda8378067', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '21f4e5a75faa4753f75a5a08de6cad4fdcf685fd', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'ea4c178c57d407e09bb8b10f14016c4987db4874', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: '43e04d882ca31ad03a66fbc148594cbcdb9ee313', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: '06b53fdb4df82aeb736ae19d73b2a11d1c4e9af0', class: { 'input-color': this.type === 'color', 'input-container': true } }, index.h("div", { key: 'edb77ce73acff3cbcc0f4228a3c9ac95dbaca2d8', class: "input-outer-wrapper" }, index.h("div", { key: 'b39ccf857a38b31e2f15885f11c6d5f75f335aa3', 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: 'fa5b35337dda6e3132f392133a914ae43e70c94e', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: '4d06684dc073e4dcc2b1703fa56e7e386901a632', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: 'e839a75201951e435a88fd6b740d1143d912c13b', class: {
+            }, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { key: 'f075bb5d4a81c2ccf35d7c50fd3ec65a6b9ab37e', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: '12013d6b78cd440b99982c12aef4af31dcd91246', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: '6d339cfe079f7926b4263b161ff08f4c6b9a4a43', class: {
                 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
                 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value,
                 'input-inner-wrapper': true,
                 'type-color': this.type === 'color'
-            } }, this.type === 'color' && index.h("span", { key: '1ba9f12990e0ec1ac114186d9784dbcc9dd57644', class: "color-value" }, this.value ?? '#000000'), index.h("input", { key: '6e089b3f68e7deb4912f16dd68a49f31821d0bfc', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            } }, this.type === 'color' && index.h("span", { key: 'cf422632d44d234e7a9aef52572665a9a28ecc9d', class: "color-value" }, this.value ?? '#000000'), index.h("input", { key: 'ebc4a025956a028f1f73958486fa7e37dcd585a3', "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, accept: this.type === 'file' ? this.accept : undefined, multiple: this.type === 'file' ? this.multiple : undefined, 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: '5462cce12644d0ba36763e3a477c5953283fb884', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": index$1.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: 'd45bc4743ba06802ddf4cfbbd413cad94611bcae', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": index$1.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && index.h("cat-spinner", { key: '63ab5d0a0dd36ef44ec8952dbeb09e336af3f231', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: '977d45f4d87510f41642566856fabc36db0727b9', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: '4a71c080f96ab75de98624d553f159ec19155880', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: 'cdf4a92c9de5e483b914e7a1f33fab72db57ab0d', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: 'c8e42694679b3d1f0fecbfcaba6fccc9ef18eff0', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: 'a5690f41eec951c3d88db93bf5c8527c53756945', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
+            }, autocomplete: this.autoComplete, disabled: this.disabled, accept: this.type === 'file' ? this.accept : undefined, multiple: this.type === 'file' ? this.multiple : undefined, 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: 'c60b67e4b261a08d91180a92618fdfc692d239bf', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": index$1.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: 'db6c218c74a241f626e5c2fdc767fa8f63d33a86', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": index$1.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && index.h("cat-spinner", { key: 'b2179d6109246c579189f0911faeb95168b96016', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: '52487c6ce3219d9b60f4af4f3360691bd7c34ace', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: '18a27e11f4c4501d17758af16953ee2e23a1f0b9', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '670348803c9828e4cf0587dd24de55273611f3a1', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: '31969e55553baa41f18f60af3f81add74dafc6a7', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: '3a240f0af4686de4c2fc66c267e0e8c6b5f26157', 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;
@@ -8142,6 +8146,9 @@ const CatInput = class {
         this.value = formattedValue;
         this.internals.setFormValue(this.input.value);
         this.catChange.emit(this.value);
+        if (this.type === 'file') {
+            this.catChangeFiles.emit(this.input.files);
+        }
         this.showErrorsIfTimeout();
     }
     onFocus(event) {
@@ -9168,8 +9175,8 @@ const CatSelect = class {
             if (!oldState.isResolving) {
                 this.valueChangedBySelection = true;
                 this.value = newValue;
+                this.catChange.emit();
             }
-            this.catChange.emit();
             this.showErrorsIfTimeout();
         }
     }
@@ -9370,18 +9377,18 @@ const CatSelect = class {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (index.h(index.Host, { key: '93b8cc474d53cf5c950a5ee2ee9b51cf5956288e' }, index.h("div", { key: 'ce1bc0a70b577af3926a459aa1734bbc6200b2bd', class: {
+        return (index.h(index.Host, { key: 'cce259c5f7b06306c1f336635c270de82e98064e' }, index.h("div", { key: 'a2949af92f006706e687564718aa20338b3e0f63', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false,
                 'select-multiple': this.multiple
-            } }, index.h("div", { key: '49dd5bf7a639d1c44ccc5a35eb9efcbc362dfc71', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '9fdb7777067c530a46d920ce49eba63ec890bf57', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: 'ed19b3d78c7d9c0f610884a824cd90f4b4a7f1cb', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '39b9b19d3505885c873825b939b9f5334cadf351', name: "label" })) || this.label, index.h("div", { key: '8db9f030a2278e733e2186d8d386a3bc5e94702b', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '5f3196c0a8c55b6dc55031e958cd30193858500f', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '8434806d6d457a85ee342cecf75e3d8cd4453bb2', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '294b26a82988b0d35e98eb75e0d64227aa92bf7f', class: "select-container" }, index.h("div", { key: 'bc97d26c6da84a26e90897384895ede9b2091fc0', 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: 'e6c2dd7b1e3053501ab9c84a7c651c87bc1367c0', 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: 'eee1e60b3e1e09135935a0f7e7a093ba0ff6ee41', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '94948c264228e044642651a0d560457703e5a983', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: 'bd5ba65749fac9293d3209793f081fa9ac4a162f', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'fca2150e151340e5ef5c10616c8e8c20654adca7', name: "label" })) || this.label, index.h("div", { key: '37d9af2e26316942d92c89380393a21f824c6e68', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'a692a243a43360edb4787c19ce375d2b7ef2f633', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'f38a61c19e758801fc64441c574b5dc886d92b43', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '847171f206e167b9ac20d5865b5751d057c6093c', class: "select-container" }, index.h("div", { key: 'ae8c24288e33761373fc40aaf4092d8fe4ad6d8e', 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: 'cb17665af425a0172bb204adf6d24cc76a4bcf79', 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: index$1.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: '59735a765001238dddda82e9c12b9e76ba099684', "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: 'e43f723bd8149aea563ab01453bc47aefb2d4771' }), this.invalid && (index.h("cat-icon", { key: '602808e09ac23bf6b1f2690c50b538c47a376a6c', 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: index$1.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: '9dcca82150b5b32cfd38968fc21e78b1702e58ac', "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: 'b270d73c72c3ca14cd74c07dd9ab62b248297c40' }), this.invalid && (index.h("cat-icon", { key: '928306a8eb51531aca26ad0f340c3862aef3ac26', 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: index$1.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: 'b84edc71dde76b9f65fa019d698cd91b97db2390', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? index$1.catI18nRegistry.t('select.close') : index$1.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: 'a7d9d8e2a0a4333d9320d987c51792e9d8b13184', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: '6542000b357d4084d202af29010dd8a85dff5350', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: 'e449f1d397d1140e546b8e473b0649d9e8e2dbd7', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { key: 'c3c172ebe62fa6a08b1a4f7254b863efc83e8247', 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: index$1.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: 'ab86beed53c22a5fc93ecc3c075a872fd050a173', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? index$1.catI18nRegistry.t('select.close') : index$1.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: '61657538dcaa5bfed0854ccb6a30e62d6d0b3d8a', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: 'b126aaa05a2491aaa0acd854f11aa3062b8cbafd', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: 'dc897d6566fd5bf491f11f328c2574046fddf708', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { key: '998a9ee7eca7f9d75d4f41b5aacc4ea4ea42251c', 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 : index$1.catI18nRegistry.t('select.empty')))))))));