@haiilo/catalyst 4.1.2 → 5.0.1

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

@@ -1,9 +1,10 @@
 import { autoUpdate, computePosition, offset } from '@floating-ui/dom';
-import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import autosizeInput from 'autosize-input';
 import log from 'loglevel';
 import { catchError, debounce, distinctUntilChanged, filter, first, of, scan, startWith, Subject, switchMap, takeWhile, tap, timer } from 'rxjs';
-import { buildHintSection } from '../cat-form-hint/cat-form-hint-utils';
+import { coerceBoolean, coerceNumber } from '../../utils/coerce';
+import { CatFormHint } from '../cat-form-hint/cat-form-hint';
 import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
 const INIT_STATE = {
   term: '',
@@ -31,54 +32,31 @@ export class CatSelect {
     this.term$ = new Subject();
     this.more$ = new Subject();
     this.valueChangedBySelection = false;
+    this.connector = undefined;
     this.state = INIT_STATE;
     this.hasSlottedLabel = false;
-    /**
-     * Whether the label need a marker to shown if the select is required or optional.
-     */
+    this.hasSlottedHint = false;
+    this.errorMap = undefined;
     this.requiredMarker = 'optional';
-    /**
-     * 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.value = undefined;
     this.disabled = false;
-    /**
-     * The label for the select.
-     */
+    this.placeholder = undefined;
+    this.hint = undefined;
+    this.identifier = undefined;
     this.label = '';
-    /**
-     * Visually hide the label, but still show it to assistive technologies like screen readers.
-     */
+    this.name = undefined;
     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;
-    /**
-     * Whether the select should add new items.
-     */
     this.tags = false;
-    /**
-     * Fine-grained control over when the errors are shown. Can be `false` to
-     * never show errors, `true` to show errors on blur, or a number to show
-     * errors on change with the given delay in milliseconds.
-     */
+    this.tagHint = undefined;
+    this.noItems = undefined;
+    this.errors = undefined;
     this.errorUpdate = 0;
+    this.nativeAttributes = undefined;
   }
   get id() {
     return this.identifier || this._id;
@@ -91,25 +69,25 @@ export class CatSelect {
     !this.valueChangedBySelection ? this.resolve() : (this.valueChangedBySelection = false);
   }
   watchErrorsHandler(value) {
-    if (this.errorUpdate === false) {
+    if (coerceBoolean(this.errorUpdate) === false) {
       this.errorMap = undefined;
     }
     else {
       this.errorMapSrc = Array.isArray(value)
-        ? value.map(error => ({ [error]: undefined }))
+        ? value.reduce((acc, err) => (Object.assign(Object.assign({}, acc), { [err]: undefined })), {})
         : value === true
           ? {}
           : value || undefined;
     }
   }
   onStateChange(newState, oldState) {
-    var _a;
+    var _a, _b;
     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('isOpen')) {
+      this.update();
+    }
+    if (changed('activeOptionIndex') && this.state.activeOptionIndex >= 0) {
+      (_b = (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.querySelector(`#select-${this.id}-option-${this.state.activeOptionIndex}`)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'nearest' });
     }
     if (changed('selection')) {
       let newValue;
@@ -142,9 +120,10 @@ export class CatSelect {
         this.value = newValue;
       }
       this.catChange.emit();
-      if (typeof this.errorUpdate === 'number') {
+      const errorUpdate = coerceNumber(this.errorUpdate, null);
+      if (errorUpdate !== null) {
         typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
-        this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);
+        this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), errorUpdate);
       }
     }
   }
@@ -159,6 +138,7 @@ export class CatSelect {
   componentWillRender() {
     this.watchErrorsHandler(this.errors);
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
     if (!this.label && !this.hasSlottedLabel) {
       log.warn('[A11y] Missing ARIA label on select', this);
     }
@@ -175,7 +155,7 @@ export class CatSelect {
     this.hide();
     this.patchState({ activeSelectionIndex: -1 });
     this.catBlur.emit(event);
-    if (this.errorUpdate !== false) {
+    if (`${this.errorUpdate}` !== 'false') {
       this.errorMap = this.errorMapSrc;
     }
   }
@@ -297,49 +277,20 @@ export class CatSelect {
   }
   render() {
     var _a, _b;
-    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 && this.requiredMarker.startsWith('optional') && (h("span", { class: "input-optional", "aria-hidden": "true" },
-            "(",
-            i18n.t('input.optional'),
-            ")")),
-          this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "input-optional", "aria-hidden": "true" },
-            "(",
-            i18n.t('input.required'),
-            ")"))))),
-      h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) },
-        h("div", { class: "select-wrapper-inner" },
-          this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => {
-            var _a;
-            return (h("span", { class: {
-                pill: true,
-                'select-no-open': true,
-                'select-option-active': this.state.activeSelectionIndex === i
-              }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` },
-              item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null,
-              h("span", null, item.render.label),
-              !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "16-cross", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1 }))));
-          }))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, initials: (_a = this.state.selection[0].render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null,
-          h("input", Object.assign({}, this.nativeAttributes, { class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_b = this.hint) === null || _b === void 0 ? void 0 : _b.length) ? this.id + '-hint' : undefined, onInput: () => this.onInput(), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving }))),
-        this.state.isResolving && h("cat-spinner", null),
-        this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })),
-        (this.state.selection.length || this.state.term.length) &&
-          !this.disabled &&
-          !this.state.isResolving &&
-          this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onClick: () => this.clear() })) : null,
-        !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "chevron-down-outlined", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))),
-      buildHintSection(this.hostElement, this.id, this.hint, this.errorMap),
-      h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() },
-        h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` },
-          this.optionsList,
-          this.state.isLoading
-            ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" },
-              h("cat-skeleton", { variant: "body", lines: 1 }),
-              h("cat-skeleton", { variant: "body", lines: 1 }))))
-            : !this.state.options.length &&
-              !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : i18n.t('select.empty')))))))));
+    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 && this.requiredMarker.startsWith('optional') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))), h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => {
+      var _a;
+      return (h("span", { class: {
+          pill: true,
+          'select-no-open': true,
+          'select-option-active': this.state.activeSelectionIndex === i
+        }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "16-cross", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1 }))));
+    }))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, initials: (_a = this.state.selection[0].render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("input", Object.assign({}, this.nativeAttributes, { class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_b = this.hint) === null || _b === void 0 ? void 0 : _b.length) ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving }))), this.state.isResolving && h("cat-spinner", null), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+      !this.disabled &&
+      !this.state.isResolving &&
+      this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "chevron-down-outlined", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })), h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
+      ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
+      : !this.state.options.length &&
+        !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : i18n.t('select.empty')))))))));
   }
   get invalid() {
     return !!this.errorMap;
@@ -358,20 +309,11 @@ export class CatSelect {
       return (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": isOptionSelected ? 'true' : 'false' }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: isOptionSelected, tabIndex: -1, labelLeft: true, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onCatChange: e => {
           !isTagOption ? this.toggle(item) : this.toggleTag(item);
           e.stopPropagation();
-        } },
-        h("span", { slot: "label", class: "select-option-inner" },
-          item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null,
-          h("span", { class: "select-option-text" },
-            h("span", { class: "select-option-label" }, getLabel()),
-            h("span", { class: "select-option-description" }, item.render.description))))) : (h("div", { class: {
+        } }, h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))) : (h("div", { class: {
           'select-option-inner': true,
           'select-option-single': true,
           'select-option-active': this.state.activeOptionIndex === i
-        }, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onClick: () => (isTagOption ? this.createTag(item.render.label) : this.select(item)), tabIndex: -1 },
-        item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_b = item.render.avatar.initials) !== null && _b !== void 0 ? _b : '' })) : null,
-        h("span", { class: "select-option-text" },
-          h("span", { class: "select-option-label" }, getLabel()),
-          h("span", { class: "select-option-description" }, item.render.description))))));
+        }, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onClick: () => (isTagOption ? this.createTag(item.render.label) : this.select(item)), tabIndex: -1 }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_b = item.render.avatar.initials) !== null && _b !== void 0 ? _b : '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))));
     });
   }
   resolve() {
@@ -660,530 +602,551 @@ export class CatSelect {
   }
   static get is() { return "cat-select"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-select.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-select.css"]
-  }; }
-  static get properties() { return {
-    "requiredMarker": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
-        "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the label need a marker to shown if the select is required or optional."
-      },
-      "attribute": "required-marker",
-      "reflect": false,
-      "defaultValue": "'optional'"
-    },
-    "multiple": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable multiple selection."
+  static get originalStyleUrls() {
+    return {
+      "$": ["cat-select.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cat-select.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "requiredMarker": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
+          "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the label need a marker to shown if the select is required or optional."
+        },
+        "attribute": "required-marker",
+        "reflect": false,
+        "defaultValue": "'optional'"
       },
-      "attribute": "multiple",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "debounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The debounce time for the search."
+      "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"
       },
-      "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"
+      "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."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placement of the select."
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom-start'"
       },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "'bottom-start'"
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | string[] | CatSelectTaggingValue | CatSelectMultipleTaggingValue",
-        "resolved": "CatSelectMultipleTaggingValue | CatSelectTaggingValue | string | string[] | undefined",
-        "references": {
-          "CatSelectTaggingValue": {
-            "location": "local"
-          },
-          "CatSelectMultipleTaggingValue": {
-            "location": "local"
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | string[] | CatSelectTaggingValue | CatSelectMultipleTaggingValue",
+          "resolved": "CatSelectMultipleTaggingValue | CatSelectTaggingValue | string | string[] | undefined",
+          "references": {
+            "CatSelectTaggingValue": {
+              "location": "local",
+              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx"
+            },
+            "CatSelectMultipleTaggingValue": {
+              "location": "local",
+              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The value of the select. <br />\n<br />\nThe value of the select depends on whether it is allowed to choose a single item or several items. <br />\nWhen only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br />\n<br />\nIn case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item,\nin the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created"
-      },
-      "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
-    },
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "A unique identifier for the input."
-      },
-      "attribute": "identifier",
-      "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 | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The name of the form control. Submitted with the form as part of a name/value pair."
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The value of the select. <br />\n<br />\nThe value of the select depends on whether it is allowed to choose a single item or several items. <br />\nWhen only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br />\n<br />\nIn case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item,\nin the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created"
+        },
+        "attribute": "value",
+        "reflect": false
       },
-      "attribute": "name",
-      "reflect": false
-    },
-    "labelHidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
+      "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
       },
-      "attribute": "label-hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A value is required or must be checked for the form to be submittable."
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A unique identifier for the input."
+        },
+        "attribute": "identifier",
+        "reflect": false
       },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "clearable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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": "''"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the select should show a clear button."
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The name of the form control. Submitted with the form as part of a name/value pair."
+        },
+        "attribute": "name",
+        "reflect": false
       },
-      "attribute": "clearable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "tags": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the select should add new items."
+      "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"
       },
-      "attribute": "tags",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "tagHint": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Optional hint text to be displayed on the new item to be added."
+      "tags": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the select should add new items."
+        },
+        "attribute": "tags",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "tag-hint",
-      "reflect": false
-    },
-    "noItems": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
+      "tagHint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional hint text to be displayed on the new item to be added."
+        },
+        "attribute": "tag-hint",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The text to display in the dropdown if no results are found."
+      "noItems": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The text to display in the dropdown if no results are found."
+        },
+        "attribute": "no-items",
+        "reflect": false
       },
-      "attribute": "no-items",
-      "reflect": false
-    },
-    "errors": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean | string[] | ErrorMap",
-        "resolved": "boolean | string[] | undefined | { [key: string]: any; }",
-        "references": {
-          "ErrorMap": {
-            "location": "import",
-            "path": "../cat-form-hint/cat-form-hint-utils"
+      "errors": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | string[] | ErrorMap",
+          "resolved": "boolean | string[] | undefined | { [key: string]: any; }",
+          "references": {
+            "ErrorMap": {
+              "location": "import",
+              "path": "../cat-form-hint/cat-form-hint"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The validation errors for this input. Will render a hint under the input\nwith the translated error message(s) `error.${key}`. If an object is\npassed, the keys will be used as error keys and the values translation\nparameters.\nIf the value is `true`, the input will be marked as invalid without any\nhints under the input."
-      },
-      "attribute": "errors",
-      "reflect": false
-    },
-    "errorUpdate": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean | number",
-        "resolved": "boolean | number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Fine-grained control over when the errors are shown. Can be `false` to\nnever show errors, `true` to show errors on blur, or a number to show\nerrors on change with the given delay in milliseconds."
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The validation errors for this input. Will render a hint under the input\nwith the translated error message(s) `error.${key}`. If an object is\npassed, the keys will be used as error keys and the values translation\nparameters.\nIf the value is `true`, the input will be marked as invalid without any\nhints under the input."
+        },
+        "attribute": "errors",
+        "reflect": false
       },
-      "attribute": "error-update",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "nativeAttributes": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "{ [key: string]: string }",
-        "resolved": "undefined | { [key: string]: string; }",
-        "references": {}
+      "errorUpdate": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | number",
+          "resolved": "boolean | number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fine-grained control over when the errors are shown. Can be `false` to\nnever show errors, `true` to show errors on blur, or a number to show\nerrors on change with the given delay in milliseconds."
+        },
+        "attribute": "error-update",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Attributes that will be added to the native HTML input element."
+      "nativeAttributes": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ [key: string]: string }",
+          "resolved": "undefined | { [key: string]: string; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Attributes that will be added to the native HTML input element."
+        }
       }
-    }
-  }; }
-  static get states() { return {
-    "connector": {},
-    "state": {},
-    "hasSlottedLabel": {},
-    "errorMap": {}
-  }; }
-  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"
+    };
+  }
+  static get states() {
+    return {
+      "connector": {},
+      "state": {},
+      "hasSlottedLabel": {},
+      "hasSlottedHint": {},
+      "errorMap": {}
+    };
+  }
+  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": "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"
+      }, {
+        "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: 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"
+      }];
+  }
+  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",
+              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx"
+            },
+            "Observable": {
+              "location": "import",
+              "path": "rxjs"
+            },
+            "Item": {
+              "location": "local",
+              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx"
+            }
           },
-          "Item": {
-            "location": "local"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Connect the functions of the select",
-        "tags": [{
-            "name": "param",
-            "text": "connector - The {@link CatSelectConnector} of the select."
-          }]
+        "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": "connector",
-      "methodName": "onConnectorChange"
-    }, {
-      "propName": "value",
-      "methodName": "onValueChange"
-    }, {
-      "propName": "errors",
-      "methodName": "watchErrorsHandler"
-    }, {
-      "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
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "connector",
+        "methodName": "onConnectorChange"
+      }, {
+        "propName": "value",
+        "methodName": "onValueChange"
+      }, {
+        "propName": "errors",
+        "methodName": "watchErrorsHandler"
+      }, {
+        "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
+      }];
+  }
 }
 CatSelect.SKELETON_COUNT = 4;
 CatSelect.DROPDOWN_OFFSET = 4;
-//# sourceMappingURL=cat-select.js.map
+//# sourceMappingURL=cat-select.js.map