@haiilo/catalyst 0.15.3 → 1.0.0

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

@@ -1,824 +0,0 @@
-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}` },
-            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('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-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(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