@haiilo/catalyst 5.3.0 → 6.0.0

package/dist/collection/components/cat-select/cat-select.js

@@ -13,6 +13,7 @@ const INIT_STATE = {
   isResolving: false,
   options: [],
   selection: [],
+  tempSelection: [],
   activeOptionIndex: -1,
   activeSelectionIndex: -1
 };
@@ -75,7 +76,7 @@ export class CatSelect {
     }
     else {
       this.errorMapSrc = Array.isArray(value)
-        ? value.reduce((acc, err) => (Object.assign(Object.assign({}, acc), { [err]: undefined })), {})
+        ? value.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
         : value === true
           ? {}
           : value || undefined;
@@ -83,13 +84,14 @@ export class CatSelect {
     }
   }
   onStateChange(newState, oldState) {
-    var _a, _b;
     const changed = (key) => newState[key] !== oldState[key];
     if (changed('isOpen')) {
       this.update();
     }
     if (changed('activeOptionIndex') && this.state.activeOptionIndex >= 0) {
-      (_b = (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.querySelector(`#select-${this.id}-option-${this.state.activeOptionIndex}`)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'nearest' });
+      this.dropdown
+        ?.querySelector(`#select-${this.id}-option-${this.state.activeOptionIndex}`)
+        ?.scrollIntoView({ block: 'nearest' });
     }
     if (changed('selection')) {
       let newValue;
@@ -151,15 +153,25 @@ export class CatSelect {
       }
     }
     this.hide();
-    this.patchState({ activeSelectionIndex: -1 });
+    if (!this.multiple && this.state.tempSelection?.length) {
+      this.patchState({
+        activeSelectionIndex: -1,
+        selection: this.state.tempSelection,
+        tempSelection: [],
+        options: [],
+        term: this.state.tempSelection[0].render.label
+      });
+    }
+    else {
+      this.patchState({ activeSelectionIndex: -1 });
+    }
     this.catBlur.emit(event);
     if (coerceBoolean(this.errorUpdate)) {
       this.showErrors();
     }
   }
   onKeyDown(event) {
-    var _a, _b, _c, _d, _e;
-    const isInputFocused = ((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.input;
+    const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;
     if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
       this.onArrowKeyDown(event);
     }
@@ -192,20 +204,23 @@ export class CatSelect {
       this.hide();
     }
     else if (event.key === 'Backspace' || event.key === 'Delete') {
-      (_b = this.input) === null || _b === void 0 ? void 0 : _b.focus();
-      if (!this.multiple || !this.state.term || (((_c = this.input) === null || _c === void 0 ? void 0 : _c.selectionStart) === 0 && event.key === 'Backspace')) {
+      this.input?.focus();
+      if (!this.multiple || !this.state.term || (this.input?.selectionStart === 0 && event.key === 'Backspace')) {
         if (this.state.activeSelectionIndex >= 0) {
           this.deselect(this.state.selection[this.state.activeSelectionIndex].item.id);
         }
         else if (this.state.selection.length) {
           const selectionClone = [...this.state.selection];
           selectionClone.pop();
-          this.patchState({ selection: selectionClone });
+          this.patchState({
+            selection: selectionClone,
+            tempSelection: this.state.term ? [...this.state.selection] : []
+          });
         }
       }
     }
     else if (event.key === 'Tab') {
-      (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.setAttribute('tabindex', '-1');
+      this.trigger?.setAttribute('tabindex', '-1');
       if (this.multiple) {
         this.patchState({ activeSelectionIndex: -1, activeOptionIndex: -1 });
       }
@@ -219,21 +234,20 @@ export class CatSelect {
       }
     }
     else if (event.key.length === 1) {
-      (_e = this.input) === null || _e === void 0 ? void 0 : _e.focus();
+      this.input?.focus();
     }
   }
   onKeyUp(event) {
-    var _a, _b, _c, _d, _e;
     if (event.key === 'Tab' && !event.shiftKey) {
-      ((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.trigger && ((_b = this.input) === null || _b === void 0 ? void 0 : _b.focus());
-      if (((_c = this.hostElement.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement) === this.input) {
+      this.hostElement.shadowRoot?.activeElement === this.trigger && this.input?.focus();
+      if (this.hostElement.shadowRoot?.activeElement === this.input) {
         this.show();
       }
     }
     else if (event.key === 'Tab' && event.shiftKey) {
-      const clearButton = (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.querySelector(`#select-clear-btn-${this.id}`);
+      const clearButton = this.trigger?.querySelector(`#select-clear-btn-${this.id}`);
       if (clearButton) {
-        ((_e = this.hostElement.shadowRoot) === null || _e === void 0 ? void 0 : _e.activeElement) === clearButton && this.show();
+        this.hostElement.shadowRoot?.activeElement === clearButton && this.show();
       }
       else {
         this.show();
@@ -246,22 +260,21 @@ export class CatSelect {
    * @param connector - The {@link CatSelectConnector} of the select.
    */
   async connect(connector) {
-    var _a;
     this.connector = connector;
     let number$;
-    (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    this.subscription?.unsubscribe();
     this.subscription = this.term$
       .asObservable()
       .pipe(debounce(term => (term ? timer(this.debounce) : of(0))), distinctUntilChanged(), tap(() => (number$ = this.more$.pipe(filter(() => !this.state.isLoading), scan(n => n + 1, 0), startWith(0)))), tap(() => this.patchState({ options: [] })), switchMap(term => number$.pipe(tap(() => this.patchState({ isLoading: true })), switchMap(number => connector.retrieve(term, number)), tap(page => this.patchState({ isLoading: false, totalElements: page.totalElements })), takeWhile(page => !page.last, true), scan((items, page) => [...items, ...page.content], []))))
       .subscribe(items => {
-      var _a;
       const options = this.toSelectItems(connector, items);
       if (this.tags &&
         this.state.term.trim().length &&
         !options.find(value1 => value1.render.label.toLowerCase() === this.state.term.toLowerCase())) {
         let label;
         if (this.isTagSelected(this.state.term)) {
-          label = (_a = this.state.selection.find(item => item.render.label.toLowerCase() === this.state.term.toLowerCase())) === null || _a === void 0 ? void 0 : _a.render.label;
+          label = this.state.selection.find(item => item.render.label.toLowerCase() === this.state.term.toLowerCase())
+            ?.render.label;
         }
         options.unshift({
           item: { id: `select-${this.id}-option-tag` },
@@ -274,24 +287,23 @@ export class CatSelect {
     });
   }
   render() {
-    var _a, _b;
     return (h(Host, null, h("div", { class: {
         'select-field': true,
         'select-horizontal': this.horizontal
       } }, h("div", { class: {
         hidden: this.labelHidden,
         'label-container': true
-      } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id }, h("span", { class: "label-wrapper", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { class: "select-container" }, h("div", { 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) }, h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => {
-      var _a;
-      return (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 ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "16-cross", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1 }))));
-    }))) : this.state.selection.length && this.state.selection[0].render.avatar ? (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, initials: (_a = this.state.selection[0].render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("input", Object.assign({}, this.nativeAttributes, { class: "select-input", 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": ((_b = this.hint) === null || _b === void 0 ? void 0 : _b.length) ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving }))), this.state.isResolving && h("cat-spinner", null), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+      } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id }, h("span", { class: "label-wrapper", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { class: "select-container" }, h("div", { 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) }, h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (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 ? (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, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, onCatClick: event => event.stopPropagation() }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (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, h("input", { ...this.nativeAttributes, class: "select-input", 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.hint?.length ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", null), this.invalid && (h("cat-icon", { 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 ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "chevron-down-outlined", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
+      this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: event => {
+        event.stopPropagation();
+        this.clear();
+      } })) : null, !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, onCatClick: event => event.stopPropagation() }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
       ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
       : !this.state.options.length &&
         !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : i18n.t('select.empty')))))))));
@@ -301,7 +313,6 @@ export class CatSelect {
   }
   get optionsList() {
     return this.state.options.map((item, i) => {
-      var _a, _b;
       const isTagOption = this.tags && item.item.id === `select-${this.id}-option-tag`;
       const isOptionSelected = this.isSelected(item.item.id) || (this.tags && this.isTagSelected(item.render.label));
       const getLabel = () => {
@@ -310,14 +321,14 @@ export class CatSelect {
         }
         return item.render.label;
       };
-      return (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": isOptionSelected ? 'true' : 'false' }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: isOptionSelected, tabIndex: -1, labelLeft: true, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onCatChange: e => {
+      return (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": isOptionSelected ? 'true' : 'false' }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: isOptionSelected, tabIndex: -1, labelLeft: true, onFocus: () => this.input?.focus(), onCatChange: e => {
           !isTagOption ? this.toggle(item) : this.toggleTag(item);
           e.stopPropagation();
-        } }, h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))) : (h("div", { class: {
+        } }, h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (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, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))) : (h("div", { class: {
           'select-option-inner': true,
           'select-option-single': true,
           'select-option-active': this.state.activeOptionIndex === i
-        }, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onClick: () => (isTagOption ? this.createTag(item.render.label) : this.select(item)), tabIndex: -1 }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_b = item.render.avatar.initials) !== null && _b !== void 0 ? _b : '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))));
+        }, onFocus: () => this.input?.focus(), onClick: () => (isTagOption ? this.createTag(item.render.label) : this.select(item)), tabIndex: -1 }, item.render.avatar ? (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, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))));
     });
   }
   resolve() {
@@ -351,17 +362,16 @@ export class CatSelect {
   }
   toSelectItems(connector, items) {
     return items.map(item => ({
-      item: Object.assign(Object.assign({}, item), { id: connector.customId ? connector.customId(item) : item.id }),
+      item: { ...item, id: connector.customId ? connector.customId(item) : item.id },
       render: connector.render(item)
     }));
   }
   show() {
-    var _a;
     if (!this.state.isOpen) {
       this.patchState({ isOpen: true });
       this.catOpen.emit();
-      this.term$.next(this.state.term);
-      (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.remove('select-input-transparent-caret');
+      this.term$.next('');
+      this.input?.classList.remove('select-input-transparent-caret');
     }
   }
   hide() {
@@ -413,29 +423,27 @@ export class CatSelect {
   }
   clear() {
     if (this.input && this.state.term) {
-      this.patchState({ selection: [], options: [], term: '', activeOptionIndex: -1 });
+      this.patchState({ selection: [], options: [], term: '', activeOptionIndex: -1, tempSelection: [] });
       this.term$.next('');
       this.input.value = '';
     }
     else {
-      this.patchState({ selection: [] });
+      this.patchState({ selection: [], tempSelection: [] });
     }
   }
   reset(connector) {
-    var _a;
-    this.connector = connector !== null && connector !== void 0 ? connector : this.connector;
-    (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    this.connector = connector ?? this.connector;
+    this.subscription?.unsubscribe();
     this.subscription = undefined;
     this.state = INIT_STATE;
   }
   onClick(event) {
-    var _a, _b;
     if (this.disabled) {
       return;
     }
     const elem = event.target;
-    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', '0');
-    (_b = this.input) === null || _b === void 0 ? void 0 : _b.focus();
+    this.trigger?.setAttribute('tabindex', '0');
+    this.input?.focus();
     if (elem === this.trigger ||
       elem === this.input ||
       elem.classList.contains('select-btn') ||
@@ -444,12 +452,16 @@ export class CatSelect {
     }
   }
   onInput() {
-    var _a;
-    this.search(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value.trim()) || '');
-    if (!this.multiple && this.state.selection.length) {
-      const selectionClone = [...this.state.selection];
-      selectionClone.pop();
-      this.patchState({ selection: selectionClone });
+    this.search(this.input?.value.trim() || '');
+    if (!this.multiple) {
+      if (this.state.selection.length) {
+        const selectionClone = [...this.state.selection];
+        selectionClone.pop();
+        this.patchState({ selection: selectionClone, tempSelection: [...this.state.selection] });
+      }
+      if (!this.input?.value.trim()) {
+        this.patchState({ tempSelection: [] });
+      }
     }
     this.show();
   }
@@ -469,7 +481,7 @@ export class CatSelect {
     }
   }
   patchState(update) {
-    this.state = Object.assign(Object.assign({}, this.state), update);
+    this.state = { ...this.state, ...update };
   }
   isPillboxActive() {
     return this.state.activeSelectionIndex >= 0;
@@ -485,9 +497,8 @@ export class CatSelect {
     return activeDescendant;
   }
   onArrowKeyDown(event) {
-    var _a, _b;
     let preventDefault = false;
-    (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+    this.input?.focus();
     switch (event.key) {
       case 'ArrowDown':
         preventDefault = true;
@@ -508,7 +519,7 @@ export class CatSelect {
           : this.hide();
         break;
       case 'ArrowLeft':
-        if (((_b = this.input) === null || _b === void 0 ? void 0 : _b.selectionStart) === 0) {
+        if (this.input?.selectionStart === 0) {
           preventDefault = true;
           let index;
           this.state.activeSelectionIndex > 0
@@ -544,7 +555,7 @@ export class CatSelect {
   createTag(term) {
     if (term.trim().length && !this.isTagSelected(term)) {
       const value = this.value;
-      const tags = value === null || value === void 0 ? void 0 : value.tags;
+      const tags = value?.tags;
       const tag = { id: `select-${this.id}-tag-${tags ? tags.length : 0}`, name: term };
       this.select({ item: tag, render: { label: tag.name } });
     }
@@ -598,10 +609,9 @@ export class CatSelect {
     return tags;
   }
   setTransparentCaret() {
-    var _a;
     if (!this.multiple) {
       this.hide();
-      (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.add('select-input-transparent-caret');
+      this.input?.classList.add('select-input-transparent-caret');
     }
   }
   showErrors() {
@@ -1083,9 +1093,13 @@ export class CatSelect {
           "text": "Emitted when the value is changed."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global"
+            }
+          }
         }
       }, {
         "method": "catBlur",