@haiilo/catalyst 0.14.3 → 0.15.2

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

@@ -0,0 +1,818 @@
+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';
+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 when you have 6 or more options. Select component supports any content
+ * type.
+ *
+ * @slot hint - Optional hint element to be displayed with the select.
+ * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.
+ * @part label - The label content.
+ */
+export class CatSelectRemote {
+  constructor() {
+    this.i18n = CatI18nRegistry.getInstance();
+    this.id = `cat-input-${nextUniqueId++}`;
+    this.term$ = new Subject();
+    this.more$ = new Subject();
+    this.state = INIT_STATE;
+    this.hasSlottedLabel = false;
+    /**
+     * Enable multiple selection.
+     */
+    this.multiple = false;
+    /**
+     * The debounce time for the search.
+     */
+    this.debounce = 250;
+    /**
+     * The placement of the select.
+     */
+    this.placement = 'bottom-start';
+    /**
+     * Whether the select is disabled.
+     */
+    this.disabled = false;
+    /**
+     * The label for the select.
+     */
+    this.label = '';
+    /**
+     * The name of the form control. Submitted with the form as part of a name/value pair.
+     */
+    this.name = '';
+    /**
+     * Visually hide the label, but still show it to assistive technologies like screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * A value is required or must be checked for the form to be submittable.
+     */
+    this.required = false;
+    /**
+     * Whether the select should show a clear button.
+     */
+    this.clearable = false;
+  }
+  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 {
+        this.value = idsSelected.length ? idsSelected[0] : '';
+      }
+      this.catChange.emit();
+    }
+  }
+  componentDidLoad() {
+    if (this.input) {
+      autosizeInput(this.input);
+    }
+    if (this.trigger && this.dropdown) {
+      autoUpdate(this.trigger, this.dropdown, () => this.update());
+    }
+  }
+  componentWillRender() {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    if (!this.label && !this.hasSlottedLabel) {
+      log.error('[A11y] Missing ARIA label on select', this);
+    }
+  }
+  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);
+  }
+  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();
+    }
+  }
+  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 CatSelectRemoteConnector} 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,
+      (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } },
+        h("span", { part: "label" },
+          (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label,
+          !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" },
+            "(",
+            this.i18n.t('input.optional'),
+            ")"))))),
+      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}` },
+            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 }))))))) : 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('select.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" },
+              h("span", { class: "select-option-label" }, item.render.label),
+              h("span", { class: "select-option-description" }, item.render.description)))) : (h("div", { class: {
+              '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 },
+            h("span", { class: "select-option-label" }, item.render.label),
+            h("span", { class: "select-option-description" }, item.render.description)))))),
+          this.state.isLoading
+            ? Array.from(Array(CatSelectRemote.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" }) })));
+  }
+  get connectorSafe() {
+    if (this.connector) {
+      return this.connector;
+    }
+    throw new Error('CatSelectRemoteConnector not set');
+  }
+  resolve() {
+    var _a;
+    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 : ''
+    }));
+  }
+  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');
+    }
+  }
+  hide() {
+    if (this.state.isOpen) {
+      this.patchState({ isOpen: false, activeOptionIndex: -1 });
+      this.catClose.emit();
+    }
+  }
+  search(term) {
+    this.patchState({ term, activeOptionIndex: -1, activeSelectionIndex: -1 });
+    this.term$.next(term);
+  }
+  isSelected(id) {
+    return this.state.selection.findIndex(s => s.item.id === id) >= 0;
+  }
+  select(item) {
+    var _a;
+    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
+      });
+    }
+  }
+  toggle(item) {
+    this.isSelected(item.item.id) ? this.deselect(item.item.id) : this.select(item);
+  }
+  clear() {
+    if (this.input && this.state.term) {
+      this.patchState({ selection: [], options: [], term: '', activeOptionIndex: -1 });
+      this.term$.next('');
+      this.input.value = '';
+    }
+    else {
+      this.patchState({ selection: [] });
+    }
+  }
+  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.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();
+    }
+  }
+  onInput() {
+    var _a;
+    this.search(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || '');
+    this.show();
+  }
+  update() {
+    if (this.trigger && this.dropdown) {
+      computePosition(this.trigger, this.dropdown, {
+        placement: this.placement,
+        middleware: [offset(CatSelectRemote.DROPDOWN_OFFSET)]
+      }).then(({ x, y }) => {
+        if (this.dropdown) {
+          Object.assign(this.dropdown.style, {
+            left: `${x}px`,
+            top: `${y}px`
+          });
+        }
+      });
+    }
+  }
+  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;
+  }
+  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-remote"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-select-remote.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-select-remote.css"]
+  }; }
+  static get properties() { return {
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable multiple selection."
+      },
+      "attribute": "multiple",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "debounce": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The debounce time for the search."
+      },
+      "attribute": "debounce",
+      "reflect": false,
+      "defaultValue": "250"
+    },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Placement",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "@floating-ui/dom"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placement of the select."
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'bottom-start'"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The value of the select."
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the select is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "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": "The label for the select."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the form control. Submitted with the form as part of a name/value pair."
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "labelHidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
+      },
+      "attribute": "label-hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A value is required or must be checked for the form to be submittable."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "clearable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the select should show a clear button."
+      },
+      "attribute": "clearable",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "connector": {},
+    "state": {},
+    "hasSlottedLabel": {}
+  }; }
+  static get events() { return [{
+      "method": "catOpen",
+      "name": "catOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select dropdown is opened."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "catClose",
+      "name": "catClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select dropdown is closed."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "catChange",
+      "name": "catChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the value is changed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "catBlur",
+      "name": "catBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select loses the focus."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "connect": {
+      "complexType": {
+        "signature": "(connector: CatSelectRemoteConnector) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "connector - The {@link CatSelectRemoteConnector } of the select."
+              }],
+            "text": "- The {@link CatSelectRemoteConnector} of the select."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "CatSelectRemoteConnector": {
+            "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 CatSelectRemoteConnector} of the select."
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "connector",
+      "methodName": "onConnectorChange"
+    }, {
+      "propName": "state",
+      "methodName": "onStateChange"
+    }]; }
+  static get listeners() { return [{
+      "name": "blur",
+      "method": "onBlur",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keydown",
+      "method": "onKeyDown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keyup",
+      "method": "onKeyUp",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+CatSelectRemote.SKELETON_COUNT = 4;
+CatSelectRemote.DROPDOWN_OFFSET = 4;
+//# sourceMappingURL=cat-select-remote.js.map