@haiilo/catalyst 0.15.2 → 1.0.1

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

@@ -1,23 +1,23 @@
-import { Component, Element, Event, h, Host, Prop, State, Watch, Listen } from '@stencil/core';
-import Choices from 'choices.js';
+import { autoUpdate, computePosition, offset } from '@floating-ui/dom';
+import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import autosizeInput from 'autosize-input';
+import { catchError, debounce, distinctUntilChanged, filter, first, of, scan, startWith, Subject, switchMap, takeWhile, tap, timer } from 'rxjs';
+import { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';
 import log from 'loglevel';
 import { CatFormHint } from '../cat-form-hint/cat-form-hint';
-import { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';
-let nextUniqueId = 0;
-const getOptionTemplate = (data) => {
-  var _a;
-  if ((_a = data.customProperties) === null || _a === void 0 ? void 0 : _a.imageUrl) {
-    return `
-    <div class="d-flex align-items-center">
-      <img class="choices-option-icon" src="${data.customProperties.imageUrl}" style="margin-right: 0.5rem" />
-      ${data.label}
-    </div>
-    `;
-  }
-  return `<cat-checkbox label="${data.label}" checked="${data.selected}"></cat-checkbox>`;
+const INIT_STATE = {
+  term: '',
+  isOpen: false,
+  isLoading: false,
+  isResolving: false,
+  options: [],
+  selection: [],
+  activeOptionIndex: -1,
+  activeSelectionIndex: -1
 };
+let nextUniqueId = 0;
 /**
- * Select lets user choose one option from an options menu. Consider using
+ * Select lets user choose one option from an options' menu. Consider using
  * select when you have 6 or more options. Select component supports any content
  * type.
  *
@@ -28,81 +28,82 @@ const getOptionTemplate = (data) => {
 export class CatSelect {
   constructor() {
     this.i18n = CatI18nRegistry.getInstance();
-    this.id = `cat-select-${nextUniqueId++}`;
-    this.resetItemsOnNextValueChange = true;
+    this.id = `cat-input-${nextUniqueId++}`;
+    this.term$ = new Subject();
+    this.more$ = new Subject();
+    this.state = INIT_STATE;
     this.hasSlottedLabel = false;
     /**
-     * The label for the select.
+     * Enable multiple selection.
      */
-    this.label = '';
+    this.multiple = false;
     /**
-     * Visually hide the label, but still show it to assistive technologies like screen readers.
+     * The debounce time for the search.
      */
-    this.labelHidden = false;
+    this.debounce = 250;
     /**
-     * A value is required or must be check for the form to be submittable.
+     * The placement of the select.
      */
-    this.required = false;
+    this.placement = 'bottom-start';
     /**
-     * The available options for the input.
+     * Whether the select is disabled.
      */
-    this.items = [];
+    this.disabled = false;
     /**
-     * Disable the select.
+     * The label for the select.
      */
-    this.disabled = false;
+    this.label = '';
     /**
-     * Enable multiple selection.
+     * The name of the form control. Submitted with the form as part of a name/value pair.
      */
-    this.multiple = false;
+    this.name = '';
     /**
-     * The placeholder for the select.
+     * Visually hide the label, but still show it to assistive technologies like screen readers.
      */
-    this.placeholder = '';
+    this.labelHidden = false;
     /**
-     * Whether the dropdown should appear above `(top)` or below `(bottom)` the
-     * input. By default, if there is not enough space within the window the
-     * dropdown will appear above the input, otherwise below it.
+     * A value is required or must be checked for the form to be submittable.
      */
-    this.position = 'auto';
+    this.required = false;
     /**
-     * Enable search for the select.
+     * Whether the select should show a clear button.
      */
-    this.search = false;
+    this.clearable = false;
   }
-  setChoicesHandler(items) {
-    var _a, _b, _c, _d;
-    const isSelected = (item) => { var _a; return (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item.value); };
-    const choices = items.map(item => (Object.assign(Object.assign({}, item), { selected: isSelected(item) })));
-    (_a = this.choice) === null || _a === void 0 ? void 0 : _a.setChoices(choices, 'value', 'label', true);
-    const vItems = ((_b = this.choice) === null || _b === void 0 ? void 0 : _b.getValue()) || [];
-    const vItemsArray = (Array.isArray(vItems) ? vItems : [vItems]);
-    const value = this.value || [];
-    const vItemValues = [...value];
-    // remove duplicate items
-    (_c = this.choice) === null || _c === void 0 ? void 0 : _c.unhighlightAll();
-    vItemsArray.forEach(vItem => {
-      var _a;
-      const index = vItemValues.indexOf(vItem.value);
-      if (index > -1) {
-        vItemValues.splice(index, 1);
+  onConnectorChange(connector) {
+    this.reset(connector);
+    this.resolve();
+  }
+  onStateChange(newState, oldState) {
+    var _a;
+    const changed = (key) => newState[key] !== oldState[key];
+    if (changed('activeOptionIndex')) {
+      if (this.state.activeOptionIndex >= 0) {
+        const option = (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.querySelector(`#select-${this.id}-option-${this.state.activeOptionIndex}`);
+        option === null || option === void 0 ? void 0 : option.scrollIntoView({ block: 'nearest' });
+      }
+    }
+    if (changed('selection')) {
+      if (!this.multiple && this.state.selection.length) {
+        this.hide();
+      }
+      const idsSelected = this.state.selection.map(item => item.item.id);
+      if (this.multiple) {
+        this.value = idsSelected;
       }
       else {
-        vItem.choiceId = -1; // disconnect item from choice
-        (_a = this.choice) === null || _a === void 0 ? void 0 : _a.highlightItem(vItem, false);
+        this.value = idsSelected.length ? idsSelected[0] : '';
       }
-    });
-    (_d = this.choice) === null || _d === void 0 ? void 0 : _d.removeHighlightedItems(false);
+      this.catChange.emit();
+    }
   }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  setValueHandler(value) {
-    var _a, _b;
-    if (this.resetItemsOnNextValueChange) {
-      (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
+  componentDidLoad() {
+    if (this.input) {
+      autosizeInput(this.input);
+    }
+    if (this.trigger && this.dropdown) {
+      autoUpdate(this.trigger, this.dropdown, () => this.update());
     }
-    this.resetItemsOnNextValueChange = true;
-    (_b = this.choice) === null || _b === void 0 ? void 0 : _b.setChoiceByValue(value);
-    this.multiple && this.updateRemoveItemButtonVisibility();
   }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
@@ -110,47 +111,97 @@ export class CatSelect {
       log.error('[A11y] Missing ARIA label on select', this);
     }
   }
-  componentDidLoad() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    this.init();
-    const attachedInternals = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a);
-    if (attachedInternals) {
-      const root = attachedInternals.shadowRoot;
-      this.choicesElement = (root === null || root === void 0 ? void 0 : root.querySelector('.choices')) || undefined;
-      this.choiceInner = (root === null || root === void 0 ? void 0 : root.querySelector('.choices__inner')) || undefined;
-      this.choiceDropdown = ((_c = root === null || root === void 0 ? void 0 : root.querySelector('.choices__list--dropdown')) === null || _c === void 0 ? void 0 : _c.firstElementChild) || undefined;
-    }
-    (_d = this.choicesElement) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.resetFocus.bind(this));
-    (_e = this.choiceInner) === null || _e === void 0 ? void 0 : _e.addEventListener('click', this.showDropdownHandler.bind(this));
-    (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('hideDropdown', this.showMultipleFocus.bind(this));
-    (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('showDropdown', this.showMultipleFocus.bind(this));
-    (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('removeItem', this.resetFocus.bind(this));
-    (_j = this.selectElement) === null || _j === void 0 ? void 0 : _j.addEventListener('change', this.onChange.bind(this));
-    (_k = this.selectElement) === null || _k === void 0 ? void 0 : _k.addEventListener('search', this.onSearch.bind(this));
-    (_l = this.choiceDropdown) === null || _l === void 0 ? void 0 : _l.addEventListener('scroll', this.onScrolledBottom.bind(this));
-    if (this.multiple) {
-      (_m = this.selectElement) === null || _m === void 0 ? void 0 : _m.addEventListener('choice', this.onChoice.bind(this));
-      this.createRemoveItemButton();
+  onBlur(event) {
+    if (!this.multiple && this.state.activeOptionIndex >= 0) {
+      this.select(this.state.options[this.state.activeOptionIndex]);
     }
+    this.hide();
+    this.patchState({ activeSelectionIndex: -1 });
+    this.catBlur.emit(event);
   }
-  disconnectedCallback() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    (_a = this.choice) === null || _a === void 0 ? void 0 : _a.destroy();
-    this.choice = undefined;
-    (_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.resetFocus.bind(this));
-    (_c = this.choiceInner) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.showDropdownHandler.bind(this));
-    (_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('hideDropdown', this.showMultipleFocus.bind(this));
-    (_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('showDropdown', this.showMultipleFocus.bind(this));
-    (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('removeItem', this.resetFocus.bind(this));
-    (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('change', this.onChange.bind(this));
-    (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('search', this.onSearch.bind(this));
-    (_j = this.choiceDropdown) === null || _j === void 0 ? void 0 : _j.removeEventListener('scroll', this.onScrolledBottom.bind(this));
-    if (this.multiple) {
-      (_k = this.removeElement) === null || _k === void 0 ? void 0 : _k.removeEventListener('choice', this.onChoice.bind(this));
+  onKeyDown(event) {
+    var _a, _b, _c, _d, _e;
+    const isInputFocused = ((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.input;
+    if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      this.onArrowKeyDown(event);
+    }
+    else if (['Enter', ' '].includes(event.key)) {
+      if (isInputFocused && this.state.activeOptionIndex >= 0) {
+        event.preventDefault();
+        if (this.multiple) {
+          this.toggle(this.state.options[this.state.activeOptionIndex]);
+        }
+        else {
+          this.select(this.state.options[this.state.activeOptionIndex]);
+        }
+      }
+    }
+    else if (event.key === 'Escape') {
+      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')) {
+        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 });
+        }
+      }
+    }
+    else if (event.key === 'Tab') {
+      (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.setAttribute('tabindex', '-1');
+      if (this.multiple) {
+        this.patchState({ activeSelectionIndex: -1, activeOptionIndex: -1 });
+      }
+      else if (this.state.activeOptionIndex >= 0) {
+        this.select(this.state.options[this.state.activeOptionIndex]);
+      }
+    }
+    else if (event.key.length === 1) {
+      (_e = this.input) === null || _e === void 0 ? void 0 : _e.focus();
     }
   }
-  onBlur(event) {
-    this.catBlur.emit(event);
+  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.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}`);
+      if (clearButton) {
+        ((_e = this.hostElement.shadowRoot) === null || _e === void 0 ? void 0 : _e.activeElement) === clearButton && this.show();
+      }
+      else {
+        this.show();
+      }
+    }
+  }
+  /**
+   * Connect the functions of the select
+   *
+   * @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 = 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 => this.connectorSafe.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 => this.patchState({
+      options: items === null || items === void 0 ? void 0 : items.map(item => ({
+        item,
+        render: this.connectorSafe.render(item)
+      }))
+    }));
   }
   render() {
     return (h(Host, null,
@@ -161,182 +212,241 @@ export class CatSelect {
             "(",
             this.i18n.t('input.optional'),
             ")"))))),
-      h("select", { id: this.id, ref: el => (this.selectElement = el), multiple: this.multiple, disabled: this.disabled }),
-      this.hintSection));
-  }
-  init() {
-    const component = this; // eslint-disable-line @typescript-eslint/no-this-alias
-    const removeItemText = (value) => this.i18n.t('select.removeItem', { value });
-    const config = {
-      allowHTML: true,
-      removeItemButton: true,
-      duplicateItemsAllowed: false,
-      delimiter: '',
-      paste: false,
-      searchEnabled: this.search,
-      searchChoices: false,
-      position: this.position,
-      resetScrollPosition: false,
-      placeholder: !!this.placeholder,
-      placeholderValue: this.placeholder || '',
-      searchPlaceholderValue: this.i18n.t('select.searchPlaceholder'),
-      renderSelectedChoices: 'always',
-      loadingText: this.i18n.t('select.loading'),
-      noResultsText: this.i18n.t('select.noResults'),
-      noChoicesText: this.i18n.t('select.noChoices'),
-      itemSelectText: this.i18n.t('select.selectItem'),
-      addItemText: (value) => this.i18n.t('select.addItem', { value }),
-      maxItemText: (maxItemCount) => this.i18n.t('select.maxItem', { maxItemCount }),
-      uniqueItemText: this.i18n.t('select.uniqueItem'),
-      customAddItemText: this.i18n.t('select.customAddItem'),
-      callbackOnInit: function () {
-        const choice = this;
-        choice.setChoices(component.items, 'value', 'label', true);
-        choice.setChoiceByValue(component.value);
-      }
-    };
-    const configSingle = {
-      callbackOnCreateTemplates: (strToEl) => {
-        return {
-          item: ({ classNames }, data) => {
-            var _a;
-            const template = ((_a = data.customProperties) === null || _a === void 0 ? void 0 : _a.imageUrl)
-              ? `<img class="choices-option-icon" src="${data.customProperties.imageUrl}" style="margin-right: 0.5rem" />`
-              : '';
-            return strToEl(`
-              <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable} ${data.placeholder ? classNames.placeholder : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
-                  <span>${template}</span> ${data.label}
-                  <button type="button"
-                    class="${classNames.button}"
-                    aria-label="${removeItemText(data.label)}"
-                    data-button>${removeItemText(data.label)}</button>
-              </div>
-              `);
-          }
-        };
-      }
-    };
-    const configMultiple = {
-      callbackOnCreateTemplates: (strToEl) => {
-        const itemSelectText = config.itemSelectText;
-        return {
-          item: ({ classNames }, data) => {
-            var _a;
-            const template = ((_a = data.customProperties) === null || _a === void 0 ? void 0 : _a.imageUrl)
-              ? `<img class="choices-option-icon" src="${data.customProperties.imageUrl}" style="margin-right: 0.5rem;" />`
-              : '';
-            return strToEl(`<div class="
-                ${classNames.item}
-                ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}
-                ${data.placeholder ? classNames.placeholder : ''}"
-                data-item data-id="${data.id}" data-value="${data.value}"
-                ${data.active ? 'aria-selected="true"' : ''}
-                ${data.disabled ? 'aria-disabled="true"' : ''}>
-                  ${template}
-                  ${data.label}
-                  <button type="button"
-                    class="${classNames.button}"
-                    aria-label="${removeItemText(data.label)}"
-                    data-button>${removeItemText(data.label)}</button>
-              </div>`);
-          },
-          choice: function ({ classNames }, data) {
-            const template = getOptionTemplate(data);
-            const className = `${String(classNames.item)} ${String(classNames.itemChoice)}
-                  ${String(data.disabled ? classNames.itemDisabled : classNames.itemSelectable)}
-                  ${data.selected ? 'choices__item--selected' : ''}`;
-            return strToEl(`<div class="${className}"
-                data-select-text="${itemSelectText}"
-                data-choice data-id="${String(data.id)}" data-value="${String(data.value)}"
-                ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'}
-                ${data.groupId && data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
-                  ${template}
-              </div>`);
-          }
-        };
-      }
-    };
-    const settings = this.multiple
-      ? Object.assign(Object.assign({}, config), configMultiple) : Object.assign(Object.assign({}, config), configSingle);
-    this.choice = new Choices(this.selectElement, settings);
+      h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled }, 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, "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, initials: '' })) : null,
+            h("span", null, item.render.label),
+            !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "16-cross", iconOnly: true, a11yLabel: this.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: '' })) : null,
+          h("input", { class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, onInput: () => this.onInput(), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })),
+        this.state.isResolving && h("cat-spinner", null),
+        (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: this.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 ? this.i18n.t('select.close') : this.i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))),
+      this.hintSection,
+      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.state.options.map((item, i) => (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": this.isSelected(item.item.id) ? 'true' : 'false' }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: this.isSelected(item.item.id), tabIndex: -1, labelLeft: true, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onCatChange: e => {
+              this.toggle(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: '' })) : null,
+              h("span", { class: "select-option-text" },
+                h("span", { class: "select-option-label" }, item.render.label),
+                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: () => 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: '' })) : null,
+            h("span", { class: "select-option-text" },
+              h("span", { class: "select-option-label" }, item.render.label),
+              h("span", { class: "select-option-description" }, item.render.description))))))),
+          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 && h("li", { class: "select-option-empty" }, this.i18n.t('select.empty'))))))));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
     return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
-  onChange() {
+  get connectorSafe() {
+    if (this.connector) {
+      return this.connector;
+    }
+    throw new Error('CatSelectConnector not set');
+  }
+  resolve() {
     var _a;
-    this.resetItemsOnNextValueChange = false;
-    this.value = (_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue(true);
-    this.catChange.emit(this.value);
+    this.patchState({ isResolving: true });
+    let ids;
+    if (this.multiple) {
+      ids = this.value;
+    }
+    else {
+      ids = [this.value];
+    }
+    const data$ = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.connectorSafe.resolve(ids).pipe(first()) : of([]);
+    data$.pipe(catchError(() => of([]))).subscribe(items => this.patchState({
+      isResolving: false,
+      selection: items === null || items === void 0 ? void 0 : items.map(item => ({ item, render: this.connectorSafe.render(item) })),
+      term: !this.multiple && items.length ? this.connectorSafe.render(items[0]).label : ''
+    }));
   }
-  showMultipleFocus() {
-    var _a, _b;
-    if (this.multiple && this.isFocused() && !((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.classList.contains('is-focused'))) {
-      (_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.classList.add('is-focused');
+  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');
     }
   }
-  resetFocus() {
-    var _a, _b, _c;
-    if (!this.isFocused()) {
-      if (!((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('tabindex'))) {
-        (_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
-      }
-      (_c = this.choicesElement) === null || _c === void 0 ? void 0 : _c.focus();
+  hide() {
+    if (this.state.isOpen) {
+      this.patchState({ isOpen: false, activeOptionIndex: -1 });
+      this.catClose.emit();
     }
   }
-  isFocused() {
-    return document.activeElement === this.hostElement;
+  search(term) {
+    this.patchState({ term, activeOptionIndex: -1, activeSelectionIndex: -1 });
+    this.term$.next(term);
   }
-  onChoice(event) {
+  isSelected(id) {
+    return this.state.selection.findIndex(s => s.item.id === id) >= 0;
+  }
+  select(item) {
     var _a;
-    const customEvent = event;
-    const choice = customEvent.detail.choice;
-    if (choice.selected) {
-      (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(choice.value);
-      this.onChange();
+    if (!this.isSelected(item.item.id)) {
+      let newSelection;
+      if (this.multiple) {
+        newSelection = [...this.state.selection, item];
+      }
+      else {
+        newSelection = [item];
+        this.search(item.render.label);
+      }
+      this.patchState({ selection: newSelection });
+    }
+    if (!this.multiple) {
+      this.hide();
+      (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.add('select-input-transparent-caret');
+    }
+  }
+  deselect(id) {
+    if (this.isSelected(id)) {
+      this.patchState({
+        selection: this.state.selection.filter(item => item.item.id !== id),
+        activeSelectionIndex: -1
+      });
     }
   }
-  onSearch(event) {
-    const customEvent = event;
-    this.catSearch.emit(customEvent.detail.value);
+  toggle(item) {
+    this.isSelected(item.item.id) ? this.deselect(item.item.id) : this.select(item);
   }
-  onScrolledBottom() {
-    var _a, _b, _c;
-    const scrolledBottom = ((_a = this.choiceDropdown) === null || _a === void 0 ? void 0 : _a.scrollHeight) ===
-      (((_b = this.choiceDropdown) === null || _b === void 0 ? void 0 : _b.scrollTop) || 0) + (((_c = this.choiceDropdown) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0);
-    if (scrolledBottom) {
-      this.catScrolledBottom.emit();
+  clear() {
+    if (this.input && this.state.term) {
+      this.patchState({ selection: [], options: [], term: '', activeOptionIndex: -1 });
+      this.term$.next('');
+      this.input.value = '';
+    }
+    else {
+      this.patchState({ selection: [] });
     }
   }
-  showDropdownHandler() {
+  reset(connector) {
     var _a;
-    !this.disabled && ((_a = this.choice) === null || _a === void 0 ? void 0 : _a.showDropdown());
+    this.connector = connector !== null && connector !== void 0 ? connector : this.connector;
+    (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    this.subscription = undefined;
+    this.state = INIT_STATE;
+  }
+  onClick(event) {
+    var _a, _b;
+    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();
+    if (elem === this.trigger ||
+      elem === this.input ||
+      elem.classList.contains('select-btn') ||
+      elem.nodeName === 'SPAN') {
+      this.state.isOpen ? this.hide() : this.show();
+    }
   }
-  createRemoveItemButton() {
+  onInput() {
     var _a;
-    this.removeElement = document.createElement('cat-button');
-    this.removeElement.icon = 'cross-circle-outlined';
-    this.removeElement.iconOnly = true;
-    this.removeElement.a11yLabel = this.i18n.t('select.removeItem');
-    this.updateRemoveItemButtonVisibility();
-    this.removeElement.addEventListener('click', this.onRemoveItemButtonClick.bind(this));
-    (_a = this.choiceInner) === null || _a === void 0 ? void 0 : _a.appendChild(this.removeElement);
+    this.search(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || '');
+    this.show();
   }
-  updateRemoveItemButtonVisibility() {
-    var _a, _b, _c;
-    if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) {
-      (_b = this.removeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
+  update() {
+    if (this.trigger && this.dropdown) {
+      computePosition(this.trigger, this.dropdown, {
+        placement: this.placement,
+        middleware: [offset(CatSelect.DROPDOWN_OFFSET)]
+      }).then(({ x, y }) => {
+        if (this.dropdown) {
+          Object.assign(this.dropdown.style, {
+            left: `${x}px`,
+            top: `${y}px`
+          });
+        }
+      });
     }
-    else {
-      (_c = this.removeElement) === null || _c === void 0 ? void 0 : _c.setAttribute('hidden', 'true');
+  }
+  patchState(update) {
+    this.state = Object.assign(Object.assign({}, this.state), update);
+  }
+  isPillboxActive() {
+    return this.state.activeSelectionIndex >= 0;
+  }
+  get activeDescendant() {
+    let activeDescendant = undefined;
+    if (this.state.activeOptionIndex >= 0) {
+      activeDescendant = `select-${this.id}-option-${this.state.activeOptionIndex}`;
+    }
+    else if (this.state.activeSelectionIndex >= 0) {
+      activeDescendant = `select-${this.id}-selection-${this.state.activeSelectionIndex}`;
     }
+    return activeDescendant;
   }
-  onRemoveItemButtonClick(event) {
-    var _a;
-    event.stopPropagation();
-    (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
-    this.onChange();
+  onArrowKeyDown(event) {
+    var _a, _b;
+    let preventDefault = false;
+    (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+    if (event.key === 'ArrowDown') {
+      preventDefault = true;
+      this.state.isOpen
+        ? this.patchState({
+          activeOptionIndex: Math.min(this.state.activeOptionIndex + 1, this.state.options.length - 1),
+          activeSelectionIndex: -1
+        })
+        : this.show();
+    }
+    else if (event.key === 'ArrowUp') {
+      preventDefault = true;
+      this.state.activeOptionIndex >= 0
+        ? this.patchState({
+          activeOptionIndex: Math.max(this.state.activeOptionIndex - 1, -1),
+          activeSelectionIndex: -1
+        })
+        : this.hide();
+    }
+    else if (event.key === 'ArrowLeft') {
+      if (((_b = this.input) === null || _b === void 0 ? void 0 : _b.selectionStart) === 0) {
+        preventDefault = true;
+        let index;
+        this.state.activeSelectionIndex > 0
+          ? (index = Math.max(this.state.activeSelectionIndex - 1, -1))
+          : (index = this.state.selection.length - 1);
+        this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
+      }
+    }
+    else if (event.key === 'ArrowRight') {
+      if (this.state.activeSelectionIndex >= 0) {
+        preventDefault = true;
+        let index = -1;
+        if (this.state.activeSelectionIndex < this.state.selection.length - 1) {
+          index = Math.min(this.state.activeSelectionIndex + 1, this.state.selection.length - 1);
+        }
+        else if (!this.state.term) {
+          index = 0;
+        }
+        this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
+      }
+    }
+    if (preventDefault) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
   }
   static get is() { return "cat-select"; }
   static get encapsulation() { return "shadow"; }
@@ -347,25 +457,7 @@ export class CatSelect {
     "$": ["cat-select.css"]
   }; }
   static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The label for the select."
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "labelHidden": {
+    "multiple": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -377,39 +469,40 @@ export class CatSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
+        "text": "Enable multiple selection."
       },
-      "attribute": "label-hidden",
+      "attribute": "multiple",
       "reflect": false,
       "defaultValue": "false"
     },
-    "required": {
-      "type": "boolean",
+    "debounce": {
+      "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "A value is required or must be check for the form to be submittable."
+        "text": "The debounce time for the search."
       },
-      "attribute": "required",
+      "attribute": "debounce",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "250"
     },
-    "items": {
-      "type": "unknown",
+    "placement": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "CatSelectItem[]",
-        "resolved": "CatSelectItem[]",
+        "original": "Placement",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
         "references": {
-          "CatSelectItem": {
-            "location": "local"
+          "Placement": {
+            "location": "import",
+            "path": "@floating-ui/dom"
           }
         }
       },
@@ -417,16 +510,18 @@ export class CatSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The available options for the input."
+        "text": "The placement of the select."
       },
-      "defaultValue": "[]"
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'bottom-start'"
     },
     "value": {
-      "type": "any",
+      "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
         "references": {}
       },
       "required": false,
@@ -450,31 +545,65 @@ export class CatSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Disable the select."
+        "text": "Whether the select is disabled."
       },
       "attribute": "disabled",
       "reflect": false,
       "defaultValue": "false"
     },
-    "multiple": {
-      "type": "boolean",
+    "placeholder": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The placeholder text to display within the select."
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "hint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Optional hint text(s) to be displayed with the select."
+      },
+      "attribute": "hint",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Enable multiple selection."
+        "text": "The label for the select."
       },
-      "attribute": "multiple",
+      "attribute": "label",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "''"
     },
-    "placeholder": {
+    "name": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -486,31 +615,31 @@ export class CatSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The placeholder for the select."
+        "text": "The name of the form control. Submitted with the form as part of a name/value pair."
       },
-      "attribute": "placeholder",
+      "attribute": "name",
       "reflect": false,
       "defaultValue": "''"
     },
-    "position": {
-      "type": "string",
+    "labelHidden": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "'auto' | 'top' | 'bottom'",
-        "resolved": "\"auto\" | \"bottom\" | \"top\"",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Whether the dropdown should appear above `(top)` or below `(bottom)` the\ninput. By default, if there is not enough space within the window the\ndropdown will appear above the input, otherwise below it."
+        "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
       },
-      "attribute": "position",
+      "attribute": "label-hidden",
       "reflect": false,
-      "defaultValue": "'auto'"
+      "defaultValue": "false"
     },
-    "search": {
+    "required": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -522,72 +651,83 @@ export class CatSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Enable search for the select."
+        "text": "A value is required or must be checked for the form to be submittable."
       },
-      "attribute": "search",
+      "attribute": "required",
       "reflect": false,
       "defaultValue": "false"
     },
-    "hint": {
-      "type": "string",
+    "clearable": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string | string[]",
-        "resolved": "string | string[] | undefined",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
-        "text": "Optional hint text(s) to be displayed with the select."
+        "text": "Whether the select should show a clear button."
       },
-      "attribute": "hint",
-      "reflect": false
+      "attribute": "clearable",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
+    "connector": {},
+    "state": {},
     "hasSlottedLabel": {}
   }; }
   static get events() { return [{
-      "method": "catChange",
-      "name": "catChange",
+      "method": "catOpen",
+      "name": "catOpen",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the value is changed."
+        "text": "Emitted when the select dropdown is opened."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
       }
     }, {
-      "method": "catSearch",
-      "name": "catSearch",
+      "method": "catClose",
+      "name": "catClose",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the search is triggered."
+        "text": "Emitted when the select dropdown is closed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
       }
     }, {
-      "method": "catScrolledBottom",
-      "name": "catScrolledBottom",
+      "method": "catChange",
+      "name": "catChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when scrolled to the bottom."
+        "text": "Emitted when the value is changed."
       },
       "complexType": {
         "original": "any",
@@ -602,7 +742,7 @@ export class CatSelect {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the select loses focus."
+        "text": "Emitted when the select loses the focus."
       },
       "complexType": {
         "original": "FocusEvent",
@@ -614,20 +754,71 @@ export class CatSelect {
         }
       }
     }]; }
+  static get methods() { return {
+    "connect": {
+      "complexType": {
+        "signature": "(connector: CatSelectConnector) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "connector - The {@link CatSelectConnector } of the select."
+              }],
+            "text": "- The {@link CatSelectConnector} of the select."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "CatSelectConnector": {
+            "location": "local"
+          },
+          "Observable": {
+            "location": "import",
+            "path": "rxjs"
+          },
+          "Item": {
+            "location": "local"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Connect the functions of the select",
+        "tags": [{
+            "name": "param",
+            "text": "connector - The {@link CatSelectConnector} of the select."
+          }]
+      }
+    }
+  }; }
   static get elementRef() { return "hostElement"; }
   static get watchers() { return [{
-      "propName": "items",
-      "methodName": "setChoicesHandler"
+      "propName": "connector",
+      "methodName": "onConnectorChange"
     }, {
-      "propName": "value",
-      "methodName": "setValueHandler"
+      "propName": "state",
+      "methodName": "onStateChange"
     }]; }
   static get listeners() { return [{
       "name": "blur",
       "method": "onBlur",
       "target": undefined,
-      "capture": true,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keydown",
+      "method": "onKeyDown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keyup",
+      "method": "onKeyUp",
+      "target": undefined,
+      "capture": false,
       "passive": false
     }]; }
 }
+CatSelect.SKELETON_COUNT = 4;
+CatSelect.DROPDOWN_OFFSET = 4;
 //# sourceMappingURL=cat-select.js.map