@paperless/core 2.0.1-beta.2 → 2.0.1-beta.21

package/dist/collection/components/molecules/select/select.component.js

@@ -1,1176 +1,1303 @@
 import { h, Host, } from "@stencil/core";
 import { childOf } from "../../../utils";
+import { cva } from "class-variance-authority";
+const multiContainer = cva([
+    'flex items-center gap-2',
+    'flex-1 min-w-0 h-full',
+    'pointer-events-none overflow-hidden',
+]);
+const multiItem = cva([
+    'item group/item',
+    'pointer-events-auto cursor-pointer',
+    'flex h-[1.625rem] items-center gap-2',
+    'h-[1.625rem] px-2',
+    'text-sm font-semibold whitespace-nowrap',
+    'rounded-lg',
+    'bg-supportive-lilac-100',
+]);
+const textContainer = cva('block w-full overflow-hidden text-ellipsis whitespace-nowrap text-start', {
+    variants: {
+        variant: {
+            placeholder: 'text-black-teal-400',
+            default: null,
+        },
+    },
+});
 export class Select {
-  constructor() {
-    this.items = undefined;
-    this.multi = undefined;
-    this.icon = undefined;
-    this.query = undefined;
-    this.placeholder = undefined;
-    this.autocompletePlaceholder = 'Search...';
-    this.value = undefined;
-    this.displayKey = 'text';
-    this.dropdownDisplayKey = undefined;
-    this.selectionDisplayKey = undefined;
-    this.valueKey = undefined;
-    this.avatarKey = undefined;
-    this.iconKey = undefined;
-    this.showIconInSelectedItem = undefined;
-    this.classKey = 'class';
-    this.applyClassOnSelectedItem = undefined;
-    this.avatarLettersKey = undefined;
-    this.identifierKey = undefined;
-    this.queryKey = undefined;
-    this.autoSelectFirst = true;
-    this.showChevron = true;
-    this.maxDisplayedItems = 10;
-    this.enableAutocomplete = true;
-    this.asyncFilter = false;
-    this.loading = false;
-    this.enableSelectAll = false;
-    this.selectAllText = 'Select all';
-    this.selectAllIcon = undefined;
-    this.size = 'medium';
-    this.prefix = undefined;
-    this.label = undefined;
-    this.helper = undefined;
-    this.required = undefined;
-    this.error = undefined;
-    this.disabled = false;
-    this.showAddItem = false;
-    this.addItemText = 'Add item';
-    this.emptyStateText = 'No items available';
-    this._showDropdown = false;
-    this._selectedItem = null;
-    this._allSelected = false;
-    this._amountHidden = 0;
-  }
-  get _items() {
-    var _a;
-    if (!this.items || this.loading) {
-      return [];
+    constructor() {
+        this.items = undefined;
+        this.multi = undefined;
+        this.icon = undefined;
+        this.query = undefined;
+        this.placeholder = undefined;
+        this.autocompletePlaceholder = 'Search...';
+        this.value = undefined;
+        this.displayKey = 'text';
+        this.dropdownDisplayKey = undefined;
+        this.selectionDisplayKey = undefined;
+        this.valueKey = undefined;
+        this.avatarKey = undefined;
+        this.iconKey = undefined;
+        this.showIconInSelectedItem = undefined;
+        this.classKey = 'class';
+        this.applyClassOnSelectedItem = undefined;
+        this.avatarLettersKey = undefined;
+        this.identifierKey = undefined;
+        this.queryKey = undefined;
+        this.autoSelectFirst = true;
+        this.showChevron = true;
+        this.maxDisplayedItems = 10;
+        this.enableAutocomplete = true;
+        this.asyncFilter = false;
+        this.loading = false;
+        this.enableSelectAll = false;
+        this.selectAllText = 'Select all';
+        this.selectAllIcon = undefined;
+        this.size = 'base';
+        this.prefix = undefined;
+        this.label = undefined;
+        this.helper = undefined;
+        this.required = true;
+        this.error = undefined;
+        this.disabled = false;
+        this.showAddItem = false;
+        this.addItemText = 'Add item';
+        this.emptyStateText = 'No items available';
+        this._showDropdown = false;
+        this._selectedItem = null;
+        this._allSelected = false;
+        this._amountHidden = 0;
     }
-    let items = typeof this.items === 'string' ? JSON.parse(this.items) : this.items;
-    if (typeof (items === null || items === void 0 ? void 0 : items[0]) === 'string') {
-      this.displayKey = 'text';
-      this.valueKey = 'value';
-      items = items.map(str => ({
-        value: str,
-        text: str,
-      }));
+    /**
+     * Event when the query of the autocomplete changes
+     */
+    queryChange;
+    /**
+     * Event when the value changes
+     */
+    valueChange;
+    /**
+     * Event when the select all item has been selected or not
+     */
+    selectAllChange;
+    /**
+     * Event when the dropdown shows
+     */
+    dropdownShown;
+    /**
+     * Event when the add item is clicked
+     */
+    add;
+    /**
+     * The host element
+     */
+    _el;
+    _inputRef;
+    autocompleteInputRef;
+    _multiContainerRef;
+    _resizeObserver;
+    _resizeDebounceTimer;
+    _checkSelectedItemsTimeout;
+    get _items() {
+        if (!this.items || this.loading) {
+            return [];
+        }
+        let items = typeof this.items === 'string' ? JSON.parse(this.items) : this.items;
+        if (typeof items?.[0] === 'string') {
+            this.displayKey = 'text';
+            this.valueKey = 'value';
+            items = items.map(str => ({
+                value: str,
+                text: str,
+            }));
+        }
+        if (this.query?.length && !this.asyncFilter) {
+            items = items.filter(item => {
+                if (this.queryKey) {
+                    return this._checkvalue(this.queryKey, item);
+                }
+                return (this._checkvalue(this._identifierKey, item) ||
+                    this._checkvalue(this.displayKey, item));
+            });
+        }
+        return items?.slice(0, this.maxDisplayedItems);
     }
-    if (((_a = this.query) === null || _a === void 0 ? void 0 : _a.length) && !this.asyncFilter) {
-      items = items.filter(item => {
-        if (this.queryKey) {
-          return this._checkvalue(this.queryKey, item);
+    get _displayValue() {
+        const placeholder = (h("div", { class: textContainer({ variant: 'placeholder' }) }, this.placeholder));
+        console.log(this._selectedItem);
+        if (!this._selectedItem) {
+            return placeholder;
+        }
+        if (this.multi) {
+            if (this._selectedItem?.length === 0) {
+                return placeholder;
+            }
+            return (h("div", { class: multiContainer(), ref: ref => (this._multiContainerRef = ref) }, this._selectedItem.map(item => (h("div", { class: multiItem(), onClick: () => this._selectValue(item) }, item[this.selectionDisplayKey ?? this.displayKey], h("p-icon", { class: 'text-xs text-supportive-lilac group-hover/item:text-supportive-lilac-800', variant: 'negative' })))), h("div", { class: 'extra pointer-events-none hidden text-sm text-black-teal-100' }, "+", this._amountHidden)));
         }
-        return (this._checkvalue(this._identifierKey, item) ||
-          this._checkvalue(this.displayKey, item));
-      });
+        return this._getDisplay(this._selectedItem, true);
     }
-    return items === null || items === void 0 ? void 0 : items.slice(0, this.maxDisplayedItems);
-  }
-  get _displayValue() {
-    var _a;
-    if (!this._selectedItem) {
-      return this.placeholder;
+    get _identifierKey() {
+        return this.identifierKey ?? this.valueKey ?? 'value';
     }
-    if (this.multi) {
-      if (((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.length) === 0) {
-        return this.placeholder;
-      }
-      return (h("div", { class: `multi-container size-${this.size}`, ref: ref => (this._multiContainerRef = ref) }, this._selectedItem.map(item => {
-        var _a;
-        return (h("div", { class: 'item', onClick: () => this._selectValue(item) }, item[(_a = this.selectionDisplayKey) !== null && _a !== void 0 ? _a : this.displayKey], h("p-icon", { variant: 'negative' })));
-      }), h("div", { class: 'extra hidden' }, "+", this._amountHidden)));
+    componentDidLoad() {
+        if (!this.valueKey && !this.identifierKey) {
+            throw new Error('You must provide a valueKey or identifierKey');
+        }
+        if (this.multi) {
+            this._setMultiContainerMaxWidth();
+            this._resizeObserver = new ResizeObserver(() => {
+                if (this._resizeDebounceTimer) {
+                    clearTimeout(this._resizeDebounceTimer);
+                    this._resizeDebounceTimer = null;
+                }
+                this._resizeDebounceTimer = setTimeout(() => {
+                    this._setMultiContainerMaxWidth();
+                    this._setCheckSelectedItemsTimeout();
+                }, 200);
+            });
+            this._resizeObserver.observe(this._el);
+        }
+        if (this.value) {
+            this._valueChange();
+            return;
+        }
+        this.itemChanges();
     }
-    return this._getDisplay(this._selectedItem, true);
-  }
-  get _identifierKey() {
-    var _a, _b;
-    return (_b = (_a = this.identifierKey) !== null && _a !== void 0 ? _a : this.valueKey) !== null && _b !== void 0 ? _b : 'value';
-  }
-  componentDidLoad() {
-    if (!this.valueKey && !this.identifierKey) {
-      throw new Error('You must provide a valueKey or identifierKey');
+    componentDidRender() {
+        if (this.multi) {
+            this._setMultiContainerMaxWidth();
+        }
     }
-    if (this.multi) {
-      this._setMultiContainerMaxWidth();
-      this._resizeObserver = new ResizeObserver(() => {
-        if (this._resizeDebounceTimer) {
-          clearTimeout(this._resizeDebounceTimer);
-          this._resizeDebounceTimer = null;
+    disconnectedCallback() {
+        if (this.multi) {
+            this._resizeObserver.disconnect();
         }
-        this._resizeDebounceTimer = setTimeout(() => {
-          this._setMultiContainerMaxWidth();
-          this._checkSelectedItems();
-        }, 200);
-      });
-      this._resizeObserver.observe(this._el);
     }
-    if (this.value) {
-      this._valueChange();
-      return;
+    render() {
+        return (h(Host, { key: '9090270a3b0048ffbe8e8c37cbbcca384daf5f4d', class: 'p-select' }, h("p-dropdown", { key: '6050a5d6358631b969c9675e5ae070def18b7f58', disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev) }, h("p-field-container", { key: '074697f053f77cd31719f4b892cdd329061f8d9f', slot: 'trigger', prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, errorPlacement: 'top-start', forceShowTooltip: this.error?.length && this._showDropdown }, h("p-button", { key: '0b5986bf4408654eba76d85a5d43988971af866b', class: 'w-full', slot: 'content', variant: 'secondary', size: this.size, chevron: this.showChevron, disabled: this.disabled, active: this._showDropdown, icon: this.icon, onClick: ev => this._onClick(ev) }, h("div", { key: '6bb8b4780aca7a525377c55611fba654764deaf5', class: 'relative flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue))), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem())));
     }
-    this.itemChanges();
-  }
-  componentDidRender() {
-    if (this.multi) {
-      this._setMultiContainerMaxWidth();
-      this._checkSelectedItems();
+    documentClickHandler({ target }) {
+        if (!this._showDropdown || childOf(target, this._el)) {
+            return;
+        }
+        this._showDropdown = false;
     }
-  }
-  disconnectedCallback() {
-    if (this.multi) {
-      this._resizeObserver.disconnect();
+    _valueChange() {
+        setTimeout(() => {
+            this._preselectItem();
+            this._setCheckSelectedItemsTimeout();
+        });
     }
-  }
-  render() {
-    var _a;
-    return (h(Host, { class: 'p-select' }, h("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev) }, h("p-input-group", { slot: 'trigger', icon: this.icon, size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, disabled: this.disabled, focused: this._showDropdown, forceShowTooltip: ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) && this._showDropdown }, h("div", { slot: 'input', class: `p-input read-only cursor-pointer ${this.showChevron ? 'max-w-[calc(100%-3rem)]' : 'w-full'} size-${this.size} ${this._displayValue === this.placeholder
-        ? 'font-medium text-storm-medium'
-        : ''}`, contenteditable: true, onFocus: ev => this._onFocus(ev), onMouseDown: ev => this._onMouseDown(ev), onClick: () => this._onClick(), ref: ref => (this._inputRef = ref) }, this._displayValue), this.showChevron && (h("p-icon", { variant: 'caret', slot: 'suffix' }))), h("div", { slot: 'items' }, this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem()))));
-  }
-  documentClickHandler({ target }) {
-    if (!this._showDropdown || childOf(target, this._el)) {
-      return;
+    itemChanges() {
+        setTimeout(() => this._preselectItem());
     }
-    this._showDropdown = false;
-  }
-  _valueChange() {
-    setTimeout(() => this._preselectItem());
-  }
-  itemChanges() {
-    setTimeout(() => this._preselectItem());
-  }
-  _showDropdownChanges() {
-    this.dropdownShown.emit({
-      value: this._showDropdown,
-      query: this.query,
-    });
-  }
-  multiChanges() {
-    if (this._selectedItem && !Array.isArray(this._selectedItem)) {
-      this._selectedItem = [];
+    _showDropdownChanges() {
+        this.dropdownShown.emit({
+            value: this._showDropdown,
+            query: this.query,
+        });
     }
-  }
-  _preselectItem() {
-    var _a, _b;
-    let value = typeof this.value === 'string' && this.multi
-      ? JSON.parse(this.value)
-      : this.value;
-    if (this.multi) {
-      if (!Array.isArray(value)) {
-        this.value = [];
-        this.valueChange.emit(this.value);
-        return;
-      }
-      this.value = value;
-      if (!value.length) {
-        this._selectedItem = [];
-        return;
-      }
-      this._selectedItem =
-        !!this.valueKey && this.valueKey !== 'false'
-          ? this._items.filter(i => value.includes(i === null || i === void 0 ? void 0 : i[this.valueKey]))
-          : [...value];
-      return;
+    multiChanges() {
+        if (this._selectedItem && !Array.isArray(this._selectedItem)) {
+            this._selectedItem = [];
+        }
     }
-    if (!this._selectedItem && !value && this.autoSelectFirst) {
-      value = this._items[0];
+    _preselectItem() {
+        let value = typeof this.value === 'string' && this.multi
+            ? JSON.parse(this.value)
+            : this.value;
+        if (this.multi) {
+            if (!Array.isArray(value)) {
+                this.value = [];
+                this.valueChange.emit(this.value);
+                return;
+            }
+            this.value = value;
+            if (!value.length) {
+                this._selectedItem = [];
+                return;
+            }
+            this._selectedItem =
+                !!this.valueKey && this.valueKey !== 'false'
+                    ? this._items.filter(i => value.includes(i?.[this.valueKey]))
+                    : [...value];
+            return;
+        }
+        if (!this._selectedItem && !value && this.autoSelectFirst) {
+            value = this._items[0];
+        }
+        const identifier = typeof value === 'object' && value !== null
+            ? value[this._identifierKey]
+            : value;
+        const parsedValue = typeof identifier === 'string' || typeof identifier === 'number'
+            ? identifier
+            : JSON.stringify(identifier);
+        const currentValue = this._selectedItem
+            ? this._selectedItem?.[this._identifierKey]
+            : null;
+        const currentParsedValue = typeof currentValue === 'string' || typeof currentValue === 'number'
+            ? currentValue
+            : JSON.stringify(currentValue);
+        if (this._selectedItem && currentParsedValue === parsedValue) {
+            return;
+        }
+        if (!this._items?.length && value) {
+            this._selectValue(value, false);
+            return;
+        }
+        const item = this._items.find(i => {
+            const itemIdentifier = i?.[this._identifierKey];
+            const parsedItemIdentifier = typeof itemIdentifier === 'string' || typeof itemIdentifier === 'number'
+                ? itemIdentifier
+                : JSON.stringify(itemIdentifier);
+            return parsedItemIdentifier === parsedValue;
+        });
+        this._selectValue(!!item ? item : value, false);
     }
-    const identifier = typeof value === 'object' && value !== null
-      ? value[this._identifierKey]
-      : value;
-    const parsedValue = typeof identifier === 'string' || typeof identifier === 'number'
-      ? identifier
-      : JSON.stringify(identifier);
-    const currentValue = this._selectedItem
-      ? (_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a[this._identifierKey]
-      : null;
-    const currentParsedValue = typeof currentValue === 'string' || typeof currentValue === 'number'
-      ? currentValue
-      : JSON.stringify(currentValue);
-    if (this._selectedItem && currentParsedValue === parsedValue) {
-      return;
+    _selectValue(item, forceBlur = true) {
+        let value = !!this.valueKey && this.valueKey !== 'false' && item !== null
+            ? item?.[this.valueKey]
+            : item;
+        if (this.multi) {
+            if (!this._selectedItem || !Array.isArray(this._selectedItem)) {
+                this._selectedItem = [];
+            }
+            if (!this.value || !Array.isArray(this.value)) {
+                this.value = [];
+            }
+            const selectedItem = [...this._selectedItem];
+            const valueArray = [...this.value];
+            const includesIndex = selectedItem.findIndex(i => i[this._identifierKey] === item[this._identifierKey]);
+            if (includesIndex === -1) {
+                selectedItem.push(item);
+                valueArray.push(value);
+            }
+            else {
+                selectedItem.splice(includesIndex, 1);
+                valueArray.splice(includesIndex, 1);
+            }
+            this._selectedItem = selectedItem;
+            this.value = valueArray;
+            this.valueChange.emit(valueArray);
+            return;
+        }
+        this._selectedItem = item;
+        this.value = value;
+        this.valueChange.emit(value);
+        this._onBlur(forceBlur);
     }
-    if (!((_b = this._items) === null || _b === void 0 ? void 0 : _b.length) && value) {
-      this._selectValue(value, false);
-      return;
+    _findOnClickTarget(target) {
+        if (target.nodeName.toLowerCase() === 'p-button') {
+            return true;
+        }
+        if (target.classList.contains('item')) {
+            return false;
+        }
+        return this._findOnClickTarget(target.parentElement);
     }
-    const item = this._items.find(i => {
-      const itemIdentifier = i === null || i === void 0 ? void 0 : i[this._identifierKey];
-      const parsedItemIdentifier = typeof itemIdentifier === 'string' || typeof itemIdentifier === 'number'
-        ? itemIdentifier
-        : JSON.stringify(itemIdentifier);
-      return parsedItemIdentifier === parsedValue;
-    });
-    this._selectValue(!!item ? item : value, false);
-  }
-  _selectValue(item, forceBlur = true) {
-    let value = !!this.valueKey && this.valueKey !== 'false' && item !== null
-      ? item === null || item === void 0 ? void 0 : item[this.valueKey]
-      : item;
-    if (this.multi) {
-      if (!this._selectedItem || !Array.isArray(this._selectedItem)) {
-        this._selectedItem = [];
-      }
-      if (!this.value || !Array.isArray(this.value)) {
-        this.value = [];
-      }
-      const selectedItem = [...this._selectedItem];
-      const valueArray = [...this.value];
-      const includesIndex = selectedItem.findIndex(i => i[this._identifierKey] === item[this._identifierKey]);
-      if (includesIndex === -1) {
-        selectedItem.push(item);
-        valueArray.push(value);
-      }
-      else {
-        selectedItem.splice(includesIndex, 1);
-        valueArray.splice(includesIndex, 1);
-      }
-      this._selectedItem = selectedItem;
-      this.value = valueArray;
-      this.valueChange.emit(valueArray);
-      return;
+    _onClick(ev) {
+        if (!this._findOnClickTarget(ev.target)) {
+            return;
+        }
+        this._showDropdown = !this._showDropdown;
     }
-    this._selectedItem = item;
-    this.value = value;
-    this.valueChange.emit(value);
-    this._onBlur(forceBlur);
-  }
-  _onFocus(ev) {
-    ev.preventDefault();
-    this._inputRef.blur();
-    if (!this._showDropdown) {
-      this._showDropdown = true;
+    _onBlur(force = false) {
+        if (this.enableAutocomplete && !force) {
+            return;
+        }
+        this._showDropdown = false;
     }
-    return;
-  }
-  _onMouseDown(ev) {
-    if (this.enableAutocomplete) {
-      return;
+    _onAutoComplete(ev) {
+        if (!this.enableAutocomplete) {
+            return;
+        }
+        this._showDropdown = true;
+        this.query = ev.detail;
+        this.queryChange.emit(ev.detail);
     }
-    ev.preventDefault();
-  }
-  _onClick() {
-    if (this.enableAutocomplete) {
-      return;
+    _checkvalue(key, item) {
+        return (item?.[key]
+            ?.toString()
+            ?.toLowerCase()
+            .indexOf(this.query?.toLowerCase()) >= 0);
     }
-    this._showDropdown = !this._showDropdown;
-  }
-  _onBlur(force = false) {
-    if (this.enableAutocomplete && !force) {
-      return;
+    _getItems() {
+        let items = this._items.map(item => (h("p-dropdown-menu-item", { useContainer: false, onClick: () => this._selectValue(item), active: this.multi &&
+                !!this._selectedItem &&
+                Array.isArray(this._selectedItem)
+                ? this._selectedItem.findIndex(i => i[this._identifierKey] === item[this._identifierKey]) >= 0
+                : item[this._identifierKey] ===
+                    this._selectedItem?.[this._identifierKey], checkbox: this.multi ? true : false, slot: 'items' }, this._getDisplay(item))));
+        if (!this._items.length) {
+            items = [
+                h("p", { class: 'w-full p-2 text-center text-sm text-black-teal-400', slot: 'items' }, this.emptyStateText),
+            ];
+        }
+        if (this.enableSelectAll && this._items.length) {
+            items.unshift(h("p-dropdown-menu-item", { slot: 'items', useContainer: false, checkbox: true, onClick: () => this._selectAllChange(), active: this._allSelected }, this.selectAllIcon?.length ? (h("span", { class: 'flex items-center gap-2' }, h("div", { class: 'flex w-6 justify-center text-lg' }, h("p-icon", { variant: this.selectAllIcon })), ' ', this.selectAllText)) : (this.selectAllText)));
+        }
+        if (this.enableAutocomplete) {
+            items.unshift(this._getAutoCompleteItem());
+        }
+        return items;
     }
-    this._showDropdown = false;
-  }
-  _onAutoComplete(ev) {
-    if (!this.enableAutocomplete) {
-      return;
+    _getAddItem() {
+        return (h("p-dropdown-menu-item", { onClick: () => this.add.emit(), useContainer: false, slot: 'items' }, h("span", { class: 'flex items-center gap-1 font-semibold text-teal-800' }, this.addItemText, h("p-icon", { variant: 'plus' }))));
     }
-    this._showDropdown = true;
-    this.query = ev.target.value;
-    this.queryChange.emit(ev.target.value);
-  }
-  _checkvalue(key, item) {
-    var _a, _b, _c;
-    return (((_b = (_a = item === null || item === void 0 ? void 0 : item[key]) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.toLowerCase().indexOf((_c = this.query) === null || _c === void 0 ? void 0 : _c.toLowerCase())) >= 0);
-  }
-  _getItems() {
-    var _a;
-    let items = this._items.map(item => {
-      var _a;
-      return (h("p-dropdown-menu-item", { useContainer: false, onClick: () => this._selectValue(item), active: this.multi &&
-          !!this._selectedItem &&
-          Array.isArray(this._selectedItem)
-          ? this._selectedItem.findIndex(i => i[this._identifierKey] === item[this._identifierKey]) >= 0
-          : item[this._identifierKey] ===
-            ((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a[this._identifierKey]), variant: this.multi ? 'checkbox' : 'default', class: 'justify-start' }, this._getDisplay(item)));
-    });
-    if (!this._items.length) {
-      items = [
-        h("p", { class: 'w-full p-2 text-center text-sm text-storm-medium' }, this.emptyStateText),
-      ];
+    _getLoadingItems() {
+        const items = [0, 0, 0].map(() => (h("p-dropdown-menu-item", { enableHover: false, slot: 'items' }, h("p-loader", { variant: 'ghost', class: 'h-6 w-full rounded' }))));
+        if (this.enableAutocomplete) {
+            items.unshift(this._getAutoCompleteItem());
+        }
+        return items;
     }
-    if (this.enableSelectAll && this._items.length) {
-      items.unshift(h("p-dropdown-menu-item", { useContainer: false, variant: 'checkbox', onClick: () => this._selectAllChange(), active: this._allSelected }, ((_a = this.selectAllIcon) === null || _a === void 0 ? void 0 : _a.length) ? (h("span", { class: 'flex items-center gap-2' }, h("div", { class: 'flex w-6 justify-center text-lg' }, h("p-icon", { variant: this.selectAllIcon })), ' ', this.selectAllText)) : (this.selectAllText)));
+    _getAutoCompleteItem() {
+        return (h("div", { class: 'sticky top-0 mb-3 h-8', slot: 'items' }, h("p-field", { class: 'block', placeholder: this.autocompletePlaceholder, onValueChange: ev => this._onAutoComplete(ev), onInputRefChange: ev => (this.autocompleteInputRef = ev.detail), value: this.query })));
     }
-    if (this.enableAutocomplete) {
-      items.unshift(this._getAutoCompleteItem());
+    _setMultiContainerMaxWidth() {
+        if (!this._inputRef || !this._multiContainerRef) {
+            return;
+        }
+        this._multiContainerRef.style.maxWidth = `${this._inputRef.clientWidth - 16}px`;
     }
-    return items;
-  }
-  _getAddItem() {
-    return (h("p-dropdown-menu-item", { onClick: () => this.add.emit(), useContainer: false }, h("span", { class: 'flex items-center gap-1 font-semibold text-indigo' }, this.addItemText, h("p-icon", { variant: 'plus' }))));
-  }
-  _getLoadingItems() {
-    const items = [0, 0, 0].map(() => (h("p-dropdown-menu-item", { enableHover: false }, h("p-loader", { variant: 'ghost', class: 'h-6 w-full rounded' }))));
-    if (this.enableAutocomplete) {
-      items.unshift(this._getAutoCompleteItem());
+    _setCheckSelectedItemsTimeout() {
+        if (this._checkSelectedItemsTimeout) {
+            clearTimeout(this._checkSelectedItemsTimeout);
+        }
+        this._checkSelectedItemsTimeout = setTimeout(() => this._checkSelectedItems(), 50);
     }
-    return items;
-  }
-  _getAutoCompleteItem() {
-    return (h("div", { class: 'sticky top-0 -mt-2 bg-white pt-2' }, h("input", { class: 'p-input size-small sticky top-2 mb-2', placeholder: this.autocompletePlaceholder, onInput: ev => this._onAutoComplete(ev), ref: ref => (this.autocompleteInputRef = ref), value: this.query })));
-  }
-  _setMultiContainerMaxWidth() {
-    if (!this._inputRef || !this._multiContainerRef) {
-      return;
+    _checkSelectedItems() {
+        if (!this._multiContainerRef) {
+            return;
+        }
+        const containerRect = this._multiContainerRef.getBoundingClientRect();
+        const items = this._multiContainerRef.querySelectorAll('.item');
+        let amountHidden = 0;
+        for (const child of items) {
+            child.classList.remove('hidden');
+            child.classList.add('flex');
+            const childRect = child.getBoundingClientRect();
+            if (childRect.right > containerRect.right) {
+                child.classList.remove('flex');
+                child.classList.add('hidden');
+                amountHidden++;
+                continue;
+            }
+        }
+        this._amountHidden = amountHidden;
+        const extra = this._multiContainerRef.querySelector('.extra');
+        if (!extra) {
+            return;
+        }
+        if (!extra.classList.contains('hidden')) {
+            extra.classList.add('hidden');
+        }
+        if (amountHidden > 0) {
+            extra.classList.remove('hidden');
+        }
     }
-    this._multiContainerRef.style.maxWidth = `${this._inputRef.clientWidth - 16}px`;
-  }
-  _checkSelectedItems() {
-    if (!this._multiContainerRef) {
-      return;
+    _onDropdownOpen(ev) {
+        if (!ev.detail || !this.autocompleteInputRef) {
+            return;
+        }
+        this.autocompleteInputRef.focus();
     }
-    const containerRect = this._multiContainerRef.getBoundingClientRect();
-    const items = Array.from(this._multiContainerRef.querySelectorAll('.item'));
-    let amountHidden = 0;
-    for (const child of items) {
-      child.classList.remove('hidden');
-      const childRect = child.getBoundingClientRect();
-      if (childRect.right > containerRect.right) {
-        child.classList.add('hidden');
-        amountHidden++;
-      }
+    _selectAllChange() {
+        this._allSelected = !this._allSelected;
+        this.selectAllChange.emit(this._allSelected);
     }
-    this._amountHidden = amountHidden;
-    const extra = this._multiContainerRef.querySelector('.extra');
-    if (!extra) {
-      return;
+    _getDisplay(item, isSelection = false) {
+        let content = (h("div", { class: textContainer({ variant: 'default' }) }, item[isSelection
+            ? this.selectionDisplayKey ?? this.displayKey
+            : this.displayKey]));
+        if (this.avatarKey) {
+            content = (h("span", { class: 'flex items-center gap-2' }, h("p-avatar", { size: 'sm', src: item[this.avatarKey], letters: item[this.avatarLettersKey] }), h("div", { class: textContainer({ variant: 'default' }) }, item[this.dropdownDisplayKey ?? this.displayKey])));
+        }
+        if (this.iconKey && (!isSelection || this.showIconInSelectedItem)) {
+            content = (h("span", { class: 'flex items-center gap-2' }, h("p-icon", { variant: item[this.iconKey] }), h("div", { class: textContainer({ variant: 'default' }) }, item[this.dropdownDisplayKey ?? this.displayKey])));
+        }
+        if ((!isSelection || this.applyClassOnSelectedItem) &&
+            !!item?.class?.length) {
+            return h("div", { class: item.class }, content);
+        }
+        return content;
     }
-    if (!extra.classList.contains('hidden')) {
-      extra.classList.add('hidden');
+    static get is() { return "p-select"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select.component.scss"]
+        };
     }
-    if (amountHidden > 0) {
-      extra.classList.remove('hidden');
+    static get styleUrls() {
+        return {
+            "$": ["select.component.css"]
+        };
     }
-  }
-  _onDropdownOpen(ev) {
-    if (!ev.detail || !this.autocompleteInputRef) {
-      return;
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The items to show in the dropdown"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "items",
+                "reflect": false
+            },
+            "multi": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to enable multi select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "multi",
+                "reflect": true
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconVariant",
+                    "resolved": "\"caret\" | \"double-caret\" | \"arrow\" | \"double-arrow\" | \"bell\" | \"chat\" | \"check-circle\" | \"cross-circle\" | \"error-circle\" | \"info-circle\" | \"phone\" | \"question-circle\" | \"headset\" | \"warning\" | \"attachment\" | \"description\" | \"document\" | \"folder\" | \"pdf\" | \"xls\" | \"bank\" | \"bread\" | \"cake\" | \"calculator\" | \"camera\" | \"car\" | \"certified\" | \"chair\" | \"checkmark\" | \"city\" | \"companies\" | \"company\" | \"credit-card\" | \"cutlery\" | \"department\" | \"diamond\" | \"docter\" | \"download\" | \"envelope\" | \"euro\" | \"exam\" | \"filter\" | \"flower\" | \"globe\" | \"globe-2\" | \"hash\" | \"hat\" | \"home\" | \"integration\" | \"language\" | \"laptop\" | \"location\" | \"mail\" | \"medal\" | \"menu\" | \"menu-arrow\" | \"minus\" | \"more\" | \"negative\" | \"other\" | \"pay\" | \"pencil\" | \"percent\" | \"pie-chart\" | \"placeholder\" | \"plus\" | \"power\" | \"receipt\" | \"reset\" | \"search\" | \"send\" | \"settings\" | \"shuffle\" | \"sick\" | \"signature\" | \"sparkle\" | \"star\" | \"stroller\" | \"tag\" | \"tasks\" | \"tools\" | \"tooth\" | \"train\" | \"trash\" | \"upload\" | \"wave\" | \"zipcode\" | \"eye\" | \"eye-closed\" | \"key\" | \"lock\" | \"unlocked\" | \"alarm\" | \"calendar\" | \"calendar-multi\" | \"calendar-free\" | \"calendar-not-free\" | \"clock\" | \"female\" | \"id\" | \"id-two\" | \"male\" | \"user\" | \"users\"",
+                    "references": {
+                        "IconVariant": {
+                            "location": "import",
+                            "path": "../../atoms/icon/icon.component",
+                            "id": "src/components/atoms/icon/icon.component.tsx::IconVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon of the select box"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "query": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current query"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "query",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "autocompletePlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder of the input used for auto complete"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "autocomplete-placeholder",
+                "reflect": false,
+                "defaultValue": "'Search...'"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "displayKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The key of the object to display"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "display-key",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "dropdownDisplayKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The key of the object to display in the dropdown (overwrites displayKey)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dropdown-display-key",
+                "reflect": false
+            },
+            "selectionDisplayKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The key of the object to display in the input (overwrites displayKey)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selection-display-key",
+                "reflect": false
+            },
+            "valueKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The key of the object to return"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value-key",
+                "reflect": false
+            },
+            "avatarKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The key of avatar within an item to show"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "avatar-key",
+                "reflect": false
+            },
+            "iconKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The key of icon variant within an item to show"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-key",
+                "reflect": false
+            },
+            "showIconInSelectedItem": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to show the icon also on the selected Item"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-icon-in-selected-item",
+                "reflect": false
+            },
+            "classKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The key of a class in an item to apply"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "class-key",
+                "reflect": false,
+                "defaultValue": "'class'"
+            },
+            "applyClassOnSelectedItem": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to apply the item's class also on the selected item"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "apply-class-on-selected-item",
+                "reflect": false
+            },
+            "avatarLettersKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The key of avatar letters within an item to show when the avatar url doesn't work"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "avatar-letters-key",
+                "reflect": false
+            },
+            "identifierKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The key to identify an object"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "identifier-key",
+                "reflect": false
+            },
+            "queryKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The key of the object to display"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "query-key",
+                "reflect": false
+            },
+            "autoSelectFirst": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to automatically select the first item"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "auto-select-first",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showChevron": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to show the chevron or not"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-chevron",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "maxDisplayedItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum amount of items to display"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-displayed-items",
+                "reflect": false,
+                "defaultValue": "10"
+            },
+            "enableAutocomplete": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to enable autocomplete"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-autocomplete",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "asyncFilter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the input uses async filtering"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "async-filter",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to show loading items"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "enableSelectAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to show the select all item with multi select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-select-all",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectAllText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text of the select all item"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "select-all-text",
+                "reflect": false,
+                "defaultValue": "'Select all'"
+            },
+            "selectAllIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconVariant | undefined",
+                    "resolved": "\"caret\" | \"double-caret\" | \"arrow\" | \"double-arrow\" | \"bell\" | \"chat\" | \"check-circle\" | \"cross-circle\" | \"error-circle\" | \"info-circle\" | \"phone\" | \"question-circle\" | \"headset\" | \"warning\" | \"attachment\" | \"description\" | \"document\" | \"folder\" | \"pdf\" | \"xls\" | \"bank\" | \"bread\" | \"cake\" | \"calculator\" | \"camera\" | \"car\" | \"certified\" | \"chair\" | \"checkmark\" | \"city\" | \"companies\" | \"company\" | \"credit-card\" | \"cutlery\" | \"department\" | \"diamond\" | \"docter\" | \"download\" | \"envelope\" | \"euro\" | \"exam\" | \"filter\" | \"flower\" | \"globe\" | \"globe-2\" | \"hash\" | \"hat\" | \"home\" | \"integration\" | \"language\" | \"laptop\" | \"location\" | \"mail\" | \"medal\" | \"menu\" | \"menu-arrow\" | \"minus\" | \"more\" | \"negative\" | \"other\" | \"pay\" | \"pencil\" | \"percent\" | \"pie-chart\" | \"placeholder\" | \"plus\" | \"power\" | \"receipt\" | \"reset\" | \"search\" | \"send\" | \"settings\" | \"shuffle\" | \"sick\" | \"signature\" | \"sparkle\" | \"star\" | \"stroller\" | \"tag\" | \"tasks\" | \"tools\" | \"tooth\" | \"train\" | \"trash\" | \"upload\" | \"wave\" | \"zipcode\" | \"eye\" | \"eye-closed\" | \"key\" | \"lock\" | \"unlocked\" | \"alarm\" | \"calendar\" | \"calendar-multi\" | \"calendar-free\" | \"calendar-not-free\" | \"clock\" | \"female\" | \"id\" | \"id-two\" | \"male\" | \"user\" | \"users\"",
+                    "references": {
+                        "IconVariant": {
+                            "location": "import",
+                            "path": "../../atoms/icon/icon.component",
+                            "id": "src/components/atoms/icon/icon.component.tsx::IconVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon to prefix for select all"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "select-all-icon",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'base'",
+                    "resolved": "\"base\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the input group used by the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'base'"
+            },
+            "prefix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The prefix of the input group used by the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "prefix",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the input group used by the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "helper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The helper of the input group used by the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "helper",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the field is required"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The helper of the input group used by the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the input group is disabled used by the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "showAddItem": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to show a \"add\" item"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-add-item",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "addItemText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to show when add item is being shown"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "add-item-text",
+                "reflect": false,
+                "defaultValue": "'Add item'"
+            },
+            "emptyStateText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to show when items is empty"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "empty-state-text",
+                "reflect": false,
+                "defaultValue": "'No items available'"
+            }
+        };
     }
-    this.autocompleteInputRef.focus();
-  }
-  _selectAllChange() {
-    this._allSelected = !this._allSelected;
-    this.selectAllChange.emit(this._allSelected);
-  }
-  _getDisplay(item, isSelection = false) {
-    var _a, _b, _c;
-    let content = (h("div", { class: 'text-container' }, item[isSelection
-      ? (_a = this.selectionDisplayKey) !== null && _a !== void 0 ? _a : this.displayKey
-      : this.displayKey]));
-    if (this.avatarKey) {
-      content = (h("span", { class: 'flex items-center gap-2' }, h("p-avatar", { size: 'xs', src: item[this.avatarKey], letters: item[this.avatarLettersKey] }), h("div", { class: 'text-container' }, item[(_b = this.dropdownDisplayKey) !== null && _b !== void 0 ? _b : this.displayKey])));
+    static get states() {
+        return {
+            "_showDropdown": {},
+            "_selectedItem": {},
+            "_allSelected": {},
+            "_amountHidden": {}
+        };
     }
-    if (this.iconKey && (!isSelection || this.showIconInSelectedItem)) {
-      content = (h("span", { class: 'flex items-center gap-2' }, h("p-icon", { variant: item[this.iconKey] }), h("div", { class: 'text-container' }, item[(_c = this.dropdownDisplayKey) !== null && _c !== void 0 ? _c : this.displayKey])));
+    static get events() {
+        return [{
+                "method": "queryChange",
+                "name": "queryChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when the query of the autocomplete changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when the value changes"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "selectAllChange",
+                "name": "selectAllChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when the select all item has been selected or not"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "dropdownShown",
+                "name": "dropdownShown",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when the dropdown shows"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "add",
+                "name": "add",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when the add item is clicked"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "_el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "_valueChange"
+            }, {
+                "propName": "items",
+                "methodName": "itemChanges"
+            }, {
+                "propName": "_showDropdown",
+                "methodName": "_showDropdownChanges"
+            }, {
+                "propName": "multi",
+                "methodName": "multiChanges"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "documentClickHandler",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
     }
-    return (h("div", { class: !isSelection || this.applyClassOnSelectedItem
-        ? `max-w-full ${item === null || item === void 0 ? void 0 : item.class}`
-        : 'max-w-full' }, content));
-  }
-  static get is() { return "p-select"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["select.component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["select.component.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "items": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | any[]",
-          "resolved": "any[] | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The items to show in the dropdown"
-        },
-        "attribute": "items",
-        "reflect": false
-      },
-      "multi": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to enable multi select"
-        },
-        "attribute": "multi",
-        "reflect": true
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IconVariant",
-          "resolved": "\"caret\" | \"double-caret\" | \"arrow\" | \"double-arrow\" | \"bell\" | \"chat\" | \"check-circle\" | \"cross-circle\" | \"error-circle\" | \"info-circle\" | \"phone\" | \"question-circle\" | \"headset\" | \"warning\" | \"attachment\" | \"description\" | \"document\" | \"folder\" | \"pdf\" | \"xls\" | \"bank\" | \"bread\" | \"cake\" | \"calculator\" | \"camera\" | \"car\" | \"certified\" | \"chair\" | \"checkmark\" | \"city\" | \"companies\" | \"company\" | \"credit-card\" | \"cutlery\" | \"department\" | \"diamond\" | \"docter\" | \"download\" | \"envelope\" | \"euro\" | \"exam\" | \"filter\" | \"flower\" | \"globe\" | \"globe-2\" | \"hash\" | \"hat\" | \"home\" | \"integration\" | \"language\" | \"laptop\" | \"location\" | \"mail\" | \"medal\" | \"menu\" | \"menu-arrow\" | \"minus\" | \"more\" | \"negative\" | \"other\" | \"pay\" | \"pencil\" | \"percent\" | \"pie-chart\" | \"placeholder\" | \"plus\" | \"power\" | \"receipt\" | \"reset\" | \"search\" | \"send\" | \"settings\" | \"shuffle\" | \"sick\" | \"signature\" | \"sparkle\" | \"star\" | \"stroller\" | \"tag\" | \"tasks\" | \"tools\" | \"tooth\" | \"train\" | \"trash\" | \"upload\" | \"wave\" | \"zipcode\" | \"eye\" | \"eye-closed\" | \"key\" | \"lock\" | \"unlocked\" | \"alarm\" | \"calendar\" | \"calendar-multi\" | \"calendar-free\" | \"calendar-not-free\" | \"clock\" | \"female\" | \"id\" | \"id-two\" | \"male\" | \"user\" | \"users\"",
-          "references": {
-            "IconVariant": {
-              "location": "import",
-              "path": "../../atoms/icon/icon.component",
-              "id": "src/components/atoms/icon/icon.component.tsx::IconVariant"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Icon of the select box"
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "query": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The current query"
-        },
-        "attribute": "query",
-        "reflect": false
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placeholder of the input"
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "autocompletePlaceholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placeholder of the input used for auto complete"
-        },
-        "attribute": "autocomplete-placeholder",
-        "reflect": false,
-        "defaultValue": "'Search...'"
-      },
-      "value": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The current value"
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "displayKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The key of the object to display"
-        },
-        "attribute": "display-key",
-        "reflect": false,
-        "defaultValue": "'text'"
-      },
-      "dropdownDisplayKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The key of the object to display in the dropdown (overwrites displayKey)"
-        },
-        "attribute": "dropdown-display-key",
-        "reflect": false
-      },
-      "selectionDisplayKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The key of the object to display in the input (overwrites displayKey)"
-        },
-        "attribute": "selection-display-key",
-        "reflect": false
-      },
-      "valueKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The key of the object to return"
-        },
-        "attribute": "value-key",
-        "reflect": false
-      },
-      "avatarKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The key of avatar within an item to show"
-        },
-        "attribute": "avatar-key",
-        "reflect": false
-      },
-      "iconKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The key of icon variant within an item to show"
-        },
-        "attribute": "icon-key",
-        "reflect": false
-      },
-      "showIconInSelectedItem": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to show the icon also on the selected Item"
-        },
-        "attribute": "show-icon-in-selected-item",
-        "reflect": false
-      },
-      "classKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The key of a class in an item to apply"
-        },
-        "attribute": "class-key",
-        "reflect": false,
-        "defaultValue": "'class'"
-      },
-      "applyClassOnSelectedItem": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to apply the item's class also on the selected item"
-        },
-        "attribute": "apply-class-on-selected-item",
-        "reflect": false
-      },
-      "avatarLettersKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The key of avatar letters within an item to show when the avatar url doesn't work"
-        },
-        "attribute": "avatar-letters-key",
-        "reflect": false
-      },
-      "identifierKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The key to identify an object"
-        },
-        "attribute": "identifier-key",
-        "reflect": false
-      },
-      "queryKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The key of the object to display"
-        },
-        "attribute": "query-key",
-        "reflect": false
-      },
-      "autoSelectFirst": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to automatically select the first item"
-        },
-        "attribute": "auto-select-first",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "showChevron": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to show the chevron or not"
-        },
-        "attribute": "show-chevron",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "maxDisplayedItems": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The maximum amount of items to display"
-        },
-        "attribute": "max-displayed-items",
-        "reflect": false,
-        "defaultValue": "10"
-      },
-      "enableAutocomplete": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to enable autocomplete"
-        },
-        "attribute": "enable-autocomplete",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "asyncFilter": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether the input uses async filtering"
-        },
-        "attribute": "async-filter",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "loading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to show loading items"
-        },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "enableSelectAll": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to show the select all item with multi select"
-        },
-        "attribute": "enable-select-all",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "selectAllText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The text of the select all item"
-        },
-        "attribute": "select-all-text",
-        "reflect": false,
-        "defaultValue": "'Select all'"
-      },
-      "selectAllIcon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IconVariant | undefined",
-          "resolved": "\"caret\" | \"double-caret\" | \"arrow\" | \"double-arrow\" | \"bell\" | \"chat\" | \"check-circle\" | \"cross-circle\" | \"error-circle\" | \"info-circle\" | \"phone\" | \"question-circle\" | \"headset\" | \"warning\" | \"attachment\" | \"description\" | \"document\" | \"folder\" | \"pdf\" | \"xls\" | \"bank\" | \"bread\" | \"cake\" | \"calculator\" | \"camera\" | \"car\" | \"certified\" | \"chair\" | \"checkmark\" | \"city\" | \"companies\" | \"company\" | \"credit-card\" | \"cutlery\" | \"department\" | \"diamond\" | \"docter\" | \"download\" | \"envelope\" | \"euro\" | \"exam\" | \"filter\" | \"flower\" | \"globe\" | \"globe-2\" | \"hash\" | \"hat\" | \"home\" | \"integration\" | \"language\" | \"laptop\" | \"location\" | \"mail\" | \"medal\" | \"menu\" | \"menu-arrow\" | \"minus\" | \"more\" | \"negative\" | \"other\" | \"pay\" | \"pencil\" | \"percent\" | \"pie-chart\" | \"placeholder\" | \"plus\" | \"power\" | \"receipt\" | \"reset\" | \"search\" | \"send\" | \"settings\" | \"shuffle\" | \"sick\" | \"signature\" | \"sparkle\" | \"star\" | \"stroller\" | \"tag\" | \"tasks\" | \"tools\" | \"tooth\" | \"train\" | \"trash\" | \"upload\" | \"wave\" | \"zipcode\" | \"eye\" | \"eye-closed\" | \"key\" | \"lock\" | \"unlocked\" | \"alarm\" | \"calendar\" | \"calendar-multi\" | \"calendar-free\" | \"calendar-not-free\" | \"clock\" | \"female\" | \"id\" | \"id-two\" | \"male\" | \"user\" | \"users\"",
-          "references": {
-            "IconVariant": {
-              "location": "import",
-              "path": "../../atoms/icon/icon.component",
-              "id": "src/components/atoms/icon/icon.component.tsx::IconVariant"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The icon to prefix for select all"
-        },
-        "attribute": "select-all-icon",
-        "reflect": false
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'medium'",
-          "resolved": "\"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size of the input group used by the select"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'medium'"
-      },
-      "prefix": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The prefix of the input group used by the select"
-        },
-        "attribute": "prefix",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label of the input group used by the select"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "helper": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The helper of the input group used by the select"
-        },
-        "attribute": "helper",
-        "reflect": false
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether the field is required"
-        },
-        "attribute": "required",
-        "reflect": true
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The helper of the input group used by the select"
-        },
-        "attribute": "error",
-        "reflect": true
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether the input group is disabled used by the select"
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "showAddItem": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to show a \"add\" item"
-        },
-        "attribute": "show-add-item",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "addItemText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The text to show when add item is being shown"
-        },
-        "attribute": "add-item-text",
-        "reflect": false,
-        "defaultValue": "'Add item'"
-      },
-      "emptyStateText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The text to show when items is empty"
-        },
-        "attribute": "empty-state-text",
-        "reflect": false,
-        "defaultValue": "'No items available'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_showDropdown": {},
-      "_selectedItem": {},
-      "_allSelected": {},
-      "_amountHidden": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "queryChange",
-        "name": "queryChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event when the query of the autocomplete changes"
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }, {
-        "method": "valueChange",
-        "name": "valueChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event when the value changes"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "selectAllChange",
-        "name": "selectAllChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event when the select all item has been selected or not"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "dropdownShown",
-        "name": "dropdownShown",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event when the dropdown shows"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "add",
-        "name": "add",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event when the add item is clicked"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "_el"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "_valueChange"
-      }, {
-        "propName": "items",
-        "methodName": "itemChanges"
-      }, {
-        "propName": "_showDropdown",
-        "methodName": "_showDropdownChanges"
-      }, {
-        "propName": "multi",
-        "methodName": "multiChanges"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "documentClickHandler",
-        "target": "document",
-        "capture": true,
-        "passive": false
-      }];
-  }
 }
 //# sourceMappingURL=select.component.js.map