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

package/dist/cjs/p-select.cjs.entry.js

@@ -2,398 +2,446 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-02e05522.js');
-const childOf = require('./child-of-af405fc2.js');
+const index = require('./index-3f9bbc0c.js');
+const childOf = require('./child-of-8fbd3ebe.js');
+const index$1 = require('./index-b556e70f.js');
+require('./clsx-fc789adc.js');
 
-const selectComponentCss = ".pointer-events-none{pointer-events:none!important}.pointer-events-auto{pointer-events:auto!important}.absolute{position:absolute!important}.relative{position:relative!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.block{display:block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-8{height:2rem!important}.h-\\[1\\.625rem\\]{height:1.625rem!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded{border-radius:.25rem!important}.border-b{border-bottom-width:1px!important}.border-l{border-left-width:1px!important}.border-r{border-right-width:1px!important}.border-solid{border-style:solid!important}.border-indigo{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity,1))!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity,1))!important}.bg-indigo-light{background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.bg-indigo-light,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;position:relative;text-overflow:ellipsis;width:100%}p-select .p-input{--tw-text-opacity:1;--tw-bg-opacity:1;--tw-border-opacity:1!important;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));border-color:rgb(218 230 240/var(--tw-border-opacity,1))!important;border-radius:.5rem;border-style:solid!important;border-width:1px;color:rgb(39 40 56/var(--tw-text-opacity,1));display:flex;font-size:1rem;font-weight:600;height:2.5rem;justify-content:flex-start;line-height:1.5rem;outline:2px solid transparent!important;outline-offset:2px!important;padding-left:1rem;padding-right:1rem;width:100%!important}p-select .p-input::-moz-placeholder{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity,1));font-size:1rem;line-height:1.5rem}p-select .p-input::placeholder{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity,1));font-size:1rem;line-height:1.5rem}p-select .p-input.active,p-select .p-input.focus,p-select .p-input:focus,p-select .p-input:focus-visible,p-select .p-input:focus-within,p-select .p-input[active]{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity,1))!important;outline:2px solid transparent!important;outline-offset:2px!important}p-select .p-input.size-small{font-size:.875rem;font-weight:500;height:2rem!important;line-height:1.25rem}p-select .p-input.size-small::-moz-placeholder{font-size:.875rem;line-height:1.25rem}p-select .p-input.size-small::placeholder{font-size:.875rem;line-height:1.25rem}p-select .text-container{display:block;overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap;width:100%}p-select .multi-container{align-items:center;bottom:0;display:flex;gap:.5rem;height:2.5rem;left:0;overflow:hidden;padding:1rem .5rem;pointer-events:none;position:absolute;width:100%}p-select .multi-container.size-small{height:2rem;padding:.5rem .25rem}p-select .multi-container .item{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(241 246 255/var(--tw-bg-opacity,1));border-radius:.25rem;color:rgb(44 75 169/var(--tw-text-opacity,1));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.625rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;pointer-events:auto;white-space:nowrap}p-select .multi-container .item p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity,1));font-size:.75rem;line-height:1rem}p-select .multi-container .extra{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity,1));font-size:.875rem;line-height:1.25rem;pointer-events:none}.static{position:static!important}.sticky{position:sticky!important}.top-0{top:0!important}.top-2{top:.5rem!important}.-mt-2{margin-top:-.5rem!important}.mb-2{margin-bottom:.5rem!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\\[calc\\(100\\%-3rem\\)\\]{max-width:calc(100% - 3rem)!important}.max-w-full{max-width:100%!important}.justify-start{justify-content:flex-start!important}.justify-center{justify-content:center!important}.gap-1{gap:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.text-center{text-align:center!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.font-medium{font-weight:500!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity,1))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity,1))!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
+const selectComponentCss = "*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.pointer-events-auto{pointer-events:auto!important}.static{position:static!important}.relative{position:relative!important}.sticky{position:sticky!important}.top-0{top:0!important}.mb-3{margin-bottom:.75rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-\\[1\\.625rem\\]{height:1.625rem!important}.h-full{height:100%!important}.w-6{width:1.5rem!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded{border-radius:.25rem!important}.rounded-lg{border-radius:.5rem!important}.bg-supportive-lilac-100{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-center{text-align:center!important}.text-start{text-align:start!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.text-black-teal-100{--tw-text-opacity:1!important;color:rgb(205 212 211/var(--tw-text-opacity,1))!important}.text-black-teal-400{--tw-text-opacity:1!important;color:rgb(53 85 80/var(--tw-text-opacity,1))!important}.text-supportive-lilac{--tw-text-opacity:1!important;color:rgb(209 174 255/var(--tw-text-opacity,1))!important}.text-teal-800{--tw-text-opacity:1!important;color:rgb(2 102 92/var(--tw-text-opacity,1))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.group\\/item:hover .group-hover\\/item\\:text-supportive-lilac-800{--tw-text-opacity:1!important;color:rgb(189 140 255/var(--tw-text-opacity,1))!important}";
+const PSelectStyle0 = selectComponentCss;
 
+const multiContainer = index$1.cva([
+    'flex items-center gap-2',
+    'flex-1 min-w-0 h-full',
+    'pointer-events-none overflow-hidden',
+]);
+const multiItem = index$1.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 = index$1.cva('block w-full overflow-hidden text-ellipsis whitespace-nowrap text-start', {
+    variants: {
+        variant: {
+            placeholder: 'text-black-teal-400',
+            default: null,
+        },
+    },
+});
 const Select = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.queryChange = index.createEvent(this, "queryChange", 3);
-    this.valueChange = index.createEvent(this, "valueChange", 3);
-    this.selectAllChange = index.createEvent(this, "selectAllChange", 3);
-    this.dropdownShown = index.createEvent(this, "dropdownShown", 3);
-    this.add = index.createEvent(this, "add", 3);
-    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 [];
-    }
-    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,
-      }));
-    }
-    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);
-        }
-        return (this._checkvalue(this._identifierKey, item) ||
-          this._checkvalue(this.displayKey, item));
-      });
-    }
-    return items === null || items === void 0 ? void 0 : items.slice(0, this.maxDisplayedItems);
-  }
-  get _displayValue() {
-    var _a;
-    if (!this._selectedItem) {
-      return this.placeholder;
-    }
-    if (this.multi) {
-      if (((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.length) === 0) {
-        return this.placeholder;
-      }
-      return (index.h("div", { class: `multi-container size-${this.size}`, ref: ref => (this._multiContainerRef = ref) }, this._selectedItem.map(item => {
-        var _a;
-        return (index.h("div", { class: 'item', onClick: () => this._selectValue(item) }, item[(_a = this.selectionDisplayKey) !== null && _a !== void 0 ? _a : this.displayKey], index.h("p-icon", { variant: 'negative' })));
-      }), index.h("div", { class: 'extra hidden' }, "+", this._amountHidden)));
-    }
-    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');
-    }
-    if (this.multi) {
-      this._setMultiContainerMaxWidth();
-      this._resizeObserver = new ResizeObserver(() => {
-        if (this._resizeDebounceTimer) {
-          clearTimeout(this._resizeDebounceTimer);
-          this._resizeDebounceTimer = null;
-        }
-        this._resizeDebounceTimer = setTimeout(() => {
-          this._setMultiContainerMaxWidth();
-          this._checkSelectedItems();
-        }, 200);
-      });
-      this._resizeObserver.observe(this._el);
-    }
-    if (this.value) {
-      this._valueChange();
-      return;
-    }
-    this.itemChanges();
-  }
-  componentDidRender() {
-    if (this.multi) {
-      this._setMultiContainerMaxWidth();
-      this._checkSelectedItems();
-    }
-  }
-  disconnectedCallback() {
-    if (this.multi) {
-      this._resizeObserver.disconnect();
-    }
-  }
-  render() {
-    var _a;
-    return (index.h(index.Host, { class: 'p-select' }, index.h("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev) }, index.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 }, index.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 && (index.h("p-icon", { variant: 'caret', slot: 'suffix' }))), index.h("div", { slot: 'items' }, this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem()))));
-  }
-  documentClickHandler({ target }) {
-    if (!this._showDropdown || childOf.childOf(target, this._el)) {
-      return;
-    }
-    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 = [];
-    }
-  }
-  _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;
-    }
-    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
-      ? (_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;
-    }
-    if (!((_b = this._items) === null || _b === void 0 ? void 0 : _b.length) && value) {
-      this._selectValue(value, false);
-      return;
-    }
-    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;
-    }
-    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;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.queryChange = index.createEvent(this, "queryChange", 3);
+        this.valueChange = index.createEvent(this, "valueChange", 3);
+        this.selectAllChange = index.createEvent(this, "selectAllChange", 3);
+        this.dropdownShown = index.createEvent(this, "dropdownShown", 3);
+        this.add = index.createEvent(this, "add", 3);
+        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;
+    }
+    /**
+     * 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;
+    get _el() { return index.getElement(this); }
+    _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);
     }
-    return;
-  }
-  _onMouseDown(ev) {
-    if (this.enableAutocomplete) {
-      return;
+    get _displayValue() {
+        const placeholder = (index.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 (index.h("div", { class: multiContainer(), ref: ref => (this._multiContainerRef = ref) }, this._selectedItem.map(item => (index.h("div", { class: multiItem(), onClick: () => this._selectValue(item) }, item[this.selectionDisplayKey ?? this.displayKey], index.h("p-icon", { class: 'text-xs text-supportive-lilac group-hover/item:text-supportive-lilac-800', variant: 'negative' })))), index.h("div", { class: 'extra pointer-events-none hidden text-sm text-black-teal-100' }, "+", this._amountHidden)));
+        }
+        return this._getDisplay(this._selectedItem, true);
     }
-    ev.preventDefault();
-  }
-  _onClick() {
-    if (this.enableAutocomplete) {
-      return;
+    get _identifierKey() {
+        return this.identifierKey ?? this.valueKey ?? 'value';
     }
-    this._showDropdown = !this._showDropdown;
-  }
-  _onBlur(force = false) {
-    if (this.enableAutocomplete && !force) {
-      return;
+    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();
     }
-    this._showDropdown = false;
-  }
-  _onAutoComplete(ev) {
-    if (!this.enableAutocomplete) {
-      return;
+    componentDidRender() {
+        if (this.multi) {
+            this._setMultiContainerMaxWidth();
+        }
     }
-    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 (index.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 = [
-        index.h("p", { class: 'w-full p-2 text-center text-sm text-storm-medium' }, this.emptyStateText),
-      ];
+    disconnectedCallback() {
+        if (this.multi) {
+            this._resizeObserver.disconnect();
+        }
     }
-    if (this.enableSelectAll && this._items.length) {
-      items.unshift(index.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) ? (index.h("span", { class: 'flex items-center gap-2' }, index.h("div", { class: 'flex w-6 justify-center text-lg' }, index.h("p-icon", { variant: this.selectAllIcon })), ' ', this.selectAllText)) : (this.selectAllText)));
+    render() {
+        return (index.h(index.Host, { key: '9090270a3b0048ffbe8e8c37cbbcca384daf5f4d', class: 'p-select' }, index.h("p-dropdown", { key: '6050a5d6358631b969c9675e5ae070def18b7f58', disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev) }, index.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 }, index.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) }, index.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())));
     }
-    if (this.enableAutocomplete) {
-      items.unshift(this._getAutoCompleteItem());
+    documentClickHandler({ target }) {
+        if (!this._showDropdown || childOf.childOf(target, this._el)) {
+            return;
+        }
+        this._showDropdown = false;
+    }
+    _valueChange() {
+        setTimeout(() => {
+            this._preselectItem();
+            this._setCheckSelectedItemsTimeout();
+        });
+    }
+    itemChanges() {
+        setTimeout(() => this._preselectItem());
+    }
+    _showDropdownChanges() {
+        this.dropdownShown.emit({
+            value: this._showDropdown,
+            query: this.query,
+        });
+    }
+    multiChanges() {
+        if (this._selectedItem && !Array.isArray(this._selectedItem)) {
+            this._selectedItem = [];
+        }
     }
-    return items;
-  }
-  _getAddItem() {
-    return (index.h("p-dropdown-menu-item", { onClick: () => this.add.emit(), useContainer: false }, index.h("span", { class: 'flex items-center gap-1 font-semibold text-indigo' }, this.addItemText, index.h("p-icon", { variant: 'plus' }))));
-  }
-  _getLoadingItems() {
-    const items = [0, 0, 0].map(() => (index.h("p-dropdown-menu-item", { enableHover: false }, index.h("p-loader", { variant: 'ghost', class: 'h-6 w-full rounded' }))));
-    if (this.enableAutocomplete) {
-      items.unshift(this._getAutoCompleteItem());
+    _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);
+    }
+    _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);
+    }
+    _findOnClickTarget(target) {
+        if (target.nodeName.toLowerCase() === 'p-button') {
+            return true;
+        }
+        if (target.classList.contains('item')) {
+            return false;
+        }
+        return this._findOnClickTarget(target.parentElement);
     }
-    return items;
-  }
-  _getAutoCompleteItem() {
-    return (index.h("div", { class: 'sticky top-0 -mt-2 bg-white pt-2' }, index.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;
+    _onClick(ev) {
+        if (!this._findOnClickTarget(ev.target)) {
+            return;
+        }
+        this._showDropdown = !this._showDropdown;
     }
-    this._multiContainerRef.style.maxWidth = `${this._inputRef.clientWidth - 16}px`;
-  }
-  _checkSelectedItems() {
-    if (!this._multiContainerRef) {
-      return;
+    _onBlur(force = false) {
+        if (this.enableAutocomplete && !force) {
+            return;
+        }
+        this._showDropdown = false;
     }
-    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++;
-      }
+    _onAutoComplete(ev) {
+        if (!this.enableAutocomplete) {
+            return;
+        }
+        this._showDropdown = true;
+        this.query = ev.detail;
+        this.queryChange.emit(ev.detail);
+    }
+    _checkvalue(key, item) {
+        return (item?.[key]
+            ?.toString()
+            ?.toLowerCase()
+            .indexOf(this.query?.toLowerCase()) >= 0);
+    }
+    _getItems() {
+        let items = this._items.map(item => (index.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 = [
+                index.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(index.h("p-dropdown-menu-item", { slot: 'items', useContainer: false, checkbox: true, onClick: () => this._selectAllChange(), active: this._allSelected }, this.selectAllIcon?.length ? (index.h("span", { class: 'flex items-center gap-2' }, index.h("div", { class: 'flex w-6 justify-center text-lg' }, index.h("p-icon", { variant: this.selectAllIcon })), ' ', this.selectAllText)) : (this.selectAllText)));
+        }
+        if (this.enableAutocomplete) {
+            items.unshift(this._getAutoCompleteItem());
+        }
+        return items;
     }
-    this._amountHidden = amountHidden;
-    const extra = this._multiContainerRef.querySelector('.extra');
-    if (!extra) {
-      return;
+    _getAddItem() {
+        return (index.h("p-dropdown-menu-item", { onClick: () => this.add.emit(), useContainer: false, slot: 'items' }, index.h("span", { class: 'flex items-center gap-1 font-semibold text-teal-800' }, this.addItemText, index.h("p-icon", { variant: 'plus' }))));
     }
-    if (!extra.classList.contains('hidden')) {
-      extra.classList.add('hidden');
+    _getLoadingItems() {
+        const items = [0, 0, 0].map(() => (index.h("p-dropdown-menu-item", { enableHover: false, slot: 'items' }, index.h("p-loader", { variant: 'ghost', class: 'h-6 w-full rounded' }))));
+        if (this.enableAutocomplete) {
+            items.unshift(this._getAutoCompleteItem());
+        }
+        return items;
     }
-    if (amountHidden > 0) {
-      extra.classList.remove('hidden');
+    _getAutoCompleteItem() {
+        return (index.h("div", { class: 'sticky top-0 mb-3 h-8', slot: 'items' }, index.h("p-field", { class: 'block', placeholder: this.autocompletePlaceholder, onValueChange: ev => this._onAutoComplete(ev), onInputRefChange: ev => (this.autocompleteInputRef = ev.detail), value: this.query })));
     }
-  }
-  _onDropdownOpen(ev) {
-    if (!ev.detail || !this.autocompleteInputRef) {
-      return;
+    _setMultiContainerMaxWidth() {
+        if (!this._inputRef || !this._multiContainerRef) {
+            return;
+        }
+        this._multiContainerRef.style.maxWidth = `${this._inputRef.clientWidth - 16}px`;
     }
-    this.autocompleteInputRef.focus();
-  }
-  _selectAllChange() {
-    this._allSelected = !this._allSelected;
-    this.selectAllChange.emit(this._allSelected);
-  }
-  _getDisplay(item, isSelection = false) {
-    var _a, _b, _c;
-    let content = (index.h("div", { class: 'text-container' }, item[isSelection
-      ? (_a = this.selectionDisplayKey) !== null && _a !== void 0 ? _a : this.displayKey
-      : this.displayKey]));
-    if (this.avatarKey) {
-      content = (index.h("span", { class: 'flex items-center gap-2' }, index.h("p-avatar", { size: 'xs', src: item[this.avatarKey], letters: item[this.avatarLettersKey] }), index.h("div", { class: 'text-container' }, item[(_b = this.dropdownDisplayKey) !== null && _b !== void 0 ? _b : this.displayKey])));
+    _setCheckSelectedItemsTimeout() {
+        if (this._checkSelectedItemsTimeout) {
+            clearTimeout(this._checkSelectedItemsTimeout);
+        }
+        this._checkSelectedItemsTimeout = setTimeout(() => this._checkSelectedItems(), 50);
     }
-    if (this.iconKey && (!isSelection || this.showIconInSelectedItem)) {
-      content = (index.h("span", { class: 'flex items-center gap-2' }, index.h("p-icon", { variant: item[this.iconKey] }), index.h("div", { class: 'text-container' }, item[(_c = this.dropdownDisplayKey) !== null && _c !== void 0 ? _c : this.displayKey])));
+    _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');
+        }
     }
-    return (index.h("div", { class: !isSelection || this.applyClassOnSelectedItem
-        ? `max-w-full ${item === null || item === void 0 ? void 0 : item.class}`
-        : 'max-w-full' }, content));
-  }
-  get _el() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["_valueChange"],
-    "items": ["itemChanges"],
-    "_showDropdown": ["_showDropdownChanges"],
-    "multi": ["multiChanges"]
-  }; }
+    _onDropdownOpen(ev) {
+        if (!ev.detail || !this.autocompleteInputRef) {
+            return;
+        }
+        this.autocompleteInputRef.focus();
+    }
+    _selectAllChange() {
+        this._allSelected = !this._allSelected;
+        this.selectAllChange.emit(this._allSelected);
+    }
+    _getDisplay(item, isSelection = false) {
+        let content = (index.h("div", { class: textContainer({ variant: 'default' }) }, item[isSelection
+            ? this.selectionDisplayKey ?? this.displayKey
+            : this.displayKey]));
+        if (this.avatarKey) {
+            content = (index.h("span", { class: 'flex items-center gap-2' }, index.h("p-avatar", { size: 'sm', src: item[this.avatarKey], letters: item[this.avatarLettersKey] }), index.h("div", { class: textContainer({ variant: 'default' }) }, item[this.dropdownDisplayKey ?? this.displayKey])));
+        }
+        if (this.iconKey && (!isSelection || this.showIconInSelectedItem)) {
+            content = (index.h("span", { class: 'flex items-center gap-2' }, index.h("p-icon", { variant: item[this.iconKey] }), index.h("div", { class: textContainer({ variant: 'default' }) }, item[this.dropdownDisplayKey ?? this.displayKey])));
+        }
+        if ((!isSelection || this.applyClassOnSelectedItem) &&
+            !!item?.class?.length) {
+            return index.h("div", { class: item.class }, content);
+        }
+        return content;
+    }
+    static get watchers() { return {
+        "value": ["_valueChange"],
+        "items": ["itemChanges"],
+        "_showDropdown": ["_showDropdownChanges"],
+        "multi": ["multiChanges"]
+    }; }
 };
-Select.style = selectComponentCss;
+Select.style = PSelectStyle0;
 
 exports.p_select = Select;