@paperless/core 1.67.11 → 1.68.0

package/dist/types/components/molecules/select/select.component.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { IconVariant } from '../../atoms/icon/icon.component';
+import { Strategy } from '@floating-ui/dom';
 export declare class Select {
   /**
    * The items to show in the dropdown
@@ -9,6 +10,14 @@ export declare class Select {
    * Wether to enable multi select
    */
   multi: boolean;
+  /**
+   * Wether to use a portal for the dropdown container of the select
+   */
+  usePortal: boolean;
+  /**
+   * The strategy to use for the dropdown placement
+   */
+  strategy: Strategy;
   /**
    * Icon of the select box
    */

package/dist/types/components.d.ts

@@ -1131,6 +1131,14 @@ export namespace Components {
           * The size of the input group used by the select
          */
         "size": 'small' | 'medium';
+        /**
+          * The strategy to use for the dropdown placement
+         */
+        "strategy": Strategy;
+        /**
+          * Wether to use a portal for the dropdown container of the select
+         */
+        "usePortal": boolean;
         /**
           * The current value
          */
@@ -3453,6 +3461,14 @@ declare namespace LocalJSX {
           * The size of the input group used by the select
          */
         "size"?: 'small' | 'medium';
+        /**
+          * The strategy to use for the dropdown placement
+         */
+        "strategy"?: Strategy;
+        /**
+          * Wether to use a portal for the dropdown container of the select
+         */
+        "usePortal"?: boolean;
         /**
           * The current value
          */

package/hydrate/index.js

@@ -21284,6 +21284,8 @@ class Select {
     this.add = createEvent(this, "add", 3);
     this.items = undefined;
     this.multi = undefined;
+    this.usePortal = false;
+    this.strategy = 'absolute';
     this.icon = undefined;
     this.query = undefined;
     this.placeholder = undefined;
@@ -21385,7 +21387,7 @@ class Select {
   }
   render() {
     var _a;
-    return (hAsync(Host, { class: 'p-select' }, hAsync("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev) }, hAsync("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 }, hAsync("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
+    return (hAsync(Host, { class: 'p-select' }, hAsync("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev), usePortal: this.usePortal, strategy: this.strategy }, hAsync("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 }, hAsync("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 && (hAsync("p-icon", { variant: 'chevron', slot: 'suffix' }))), hAsync("div", { slot: 'items' }, this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem()))));
   }
@@ -21673,6 +21675,8 @@ class Select {
     "$members$": {
       "items": [1],
       "multi": [516],
+      "usePortal": [4, "use-portal"],
+      "strategy": [1],
       "icon": [1],
       "query": [1],
       "placeholder": [1],
@@ -21798,7 +21802,7 @@ class Status {
   }; }
 }
 
-const stepperComponentCss = "/*!@.flex*/.flex.sc-p-stepper{display:flex!important}/*!@.h-auto*/.h-auto.sc-p-stepper{height:auto!important}/*!@.w-full*/.w-full.sc-p-stepper{width:100%!important}/*!@.flex-col*/.flex-col.sc-p-stepper{flex-direction:column!important}/*!@.flex-wrap*/.flex-wrap.sc-p-stepper{flex-wrap:wrap!important}/*!@**/*.sc-p-stepper{box-sizing:border-box}/*!@:host*/.sc-p-stepper-h{display:flex}/*!@:host([direction=horizontal])*/[direction=horizontal].sc-p-stepper-h{align-items:flex-end;height:auto}/*!@:host([direction=vertical])*/[direction=vertical].sc-p-stepper-h{align-items:flex-start;flex-direction:column;flex-wrap:wrap;min-height:100%;width:100%}/*!@:host([direction=vertical][content-position=start])*/[direction=vertical][content-position=start].sc-p-stepper-h{align-items:flex-end}/*!@.static*/.static.sc-p-stepper{position:static!important}";
+const stepperComponentCss = "/*!@.flex*/.flex.sc-p-stepper{display:flex!important}/*!@.h-auto*/.h-auto.sc-p-stepper{height:auto!important}/*!@.flex-col*/.flex-col.sc-p-stepper{flex-direction:column!important}/*!@.flex-wrap*/.flex-wrap.sc-p-stepper{flex-wrap:wrap!important}/*!@**/*.sc-p-stepper{box-sizing:border-box}/*!@:host*/.sc-p-stepper-h{display:flex}/*!@:host([direction=horizontal])*/[direction=horizontal].sc-p-stepper-h{align-items:flex-end;height:auto}/*!@:host([direction=vertical])*/[direction=vertical].sc-p-stepper-h{align-items:flex-start;flex-direction:column;flex-wrap:wrap;width:100%}/*!@:host([direction=vertical][content-position=start])*/[direction=vertical][content-position=start].sc-p-stepper-h{align-items:flex-end}/*!@.static*/.static.sc-p-stepper{position:static!important}";
 
 class Stepper {
   constructor(hostRef) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@paperless/core",
-	"version": "1.67.11",
+	"version": "1.68.0",
 	"description": "Stencil Component Starter",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.js",

package/dist/build/p-78a34d3d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,H as s,g as r}from"./p-0c2cc6c4.js";import{c as o}from"./p-4d330cfc.js";const n=".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))!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-indigo-light{background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.bg-indigo-light,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!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));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-radius:.375rem;border-style:solid!important;border-width:1px;color:rgb(39 40 56/var(--tw-text-opacity));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));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));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))!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));border-radius:.25rem;color:rgb(44 75 169/var(--tw-text-opacity));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));font-size:.75rem;line-height:1rem}p-select .multi-container .extra{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));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))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!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 a=class{constructor(e){t(this,e);this.queryChange=i(this,"queryChange",3);this.valueChange=i(this,"valueChange",3);this.selectAllChange=i(this,"selectAllChange",3);this.dropdownShown=i(this,"dropdownShown",3);this.add=i(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(){return this._getParsedItems()}get _displayValue(){var t;if(!this._selectedItem){return this.placeholder}if(this.multi){if(((t=this._selectedItem)===null||t===void 0?void 0:t.length)===0){return this.placeholder}return e("div",{class:`multi-container size-${this.size}`,ref:t=>this._multiContainerRef=t},this._selectedItem.map((t=>{var i;return e("div",{class:"item",onClick:()=>this._selectValue(t)},t[(i=this.selectionDisplayKey)!==null&&i!==void 0?i:this.displayKey],e("p-icon",{variant:"negative"}))})),e("div",{class:"extra hidden"},"+",this._amountHidden))}return this._getDisplay(this._selectedItem,true)}get _identifierKey(){var t,i;return(i=(t=this.identifierKey)!==null&&t!==void 0?t:this.valueKey)!==null&&i!==void 0?i:"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 t;return e(s,{class:"p-select"},e("p-dropdown",{disableTriggerClick:true,calculateWidth:true,insideClick:true,scrollable:this.enableAutocomplete?"large":true,show:this._showDropdown,onIsOpen:t=>this._onDropdownOpen(t)},e("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:((t=this.error)===null||t===void 0?void 0:t.length)&&this._showDropdown},e("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:t=>this._onFocus(t),onMouseDown:t=>this._onMouseDown(t),onClick:()=>this._onClick(),ref:t=>this._inputRef=t},this._displayValue),this.showChevron&&e("p-icon",{variant:"chevron",slot:"suffix"})),e("div",{slot:"items"},this.loading?this._getLoadingItems():this._getItems(),this.showAddItem&&this._getAddItem())))}documentClickHandler({target:t}){if(!this._showDropdown||o(t,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 t,i;let e=typeof this.value==="string"&&this.multi?JSON.parse(this.value):this.value;if(this.multi){if(!Array.isArray(e)){this.value=[];this.valueChange.emit(this.value);return}this.value=e;if(!e.length){this._selectedItem=[];return}this._selectedItem=!!this.valueKey&&this.valueKey!=="false"?this._items.filter((t=>e.includes(t===null||t===void 0?void 0:t[this.valueKey]))):[...e];return}if(!this._selectedItem&&!e&&this.autoSelectFirst){e=this._items[0]}const s=typeof e==="object"&&e!==null?e[this._identifierKey]:e;const r=typeof s==="string"||typeof s==="number"?s:JSON.stringify(s);const o=this._selectedItem?(t=this._selectedItem)===null||t===void 0?void 0:t[this._identifierKey]:null;const n=typeof o==="string"||typeof o==="number"?o:JSON.stringify(o);if(this._selectedItem&&n===r){return}if(!((i=this._items)===null||i===void 0?void 0:i.length)&&e){this._selectValue(e,false);return}const a=this._getParsedItems(false);const h=a.find((t=>{const i=t===null||t===void 0?void 0:t[this._identifierKey];const e=typeof i==="string"||typeof i==="number"?i:JSON.stringify(i);return e===r}));this._selectValue(!!h?h:e,false)}_selectValue(t,i=true){let e=!!this.valueKey&&this.valueKey!=="false"&&t!==null?t===null||t===void 0?void 0:t[this.valueKey]:t;if(this.multi){if(!this._selectedItem||!Array.isArray(this._selectedItem)){this._selectedItem=[]}if(!this.value||!Array.isArray(this.value)){this.value=[]}const i=[...this._selectedItem];const s=[...this.value];const r=i.findIndex((i=>i[this._identifierKey]===t[this._identifierKey]));if(r===-1){i.push(t);s.push(e)}else{i.splice(r,1);s.splice(r,1)}this._selectedItem=i;this.value=s;this.valueChange.emit(s);return}this._selectedItem=t;this.value=e;this.valueChange.emit(e);this._onBlur(i)}_onFocus(t){t.preventDefault();this._inputRef.blur();if(!this._showDropdown){this._showDropdown=true}return}_onMouseDown(t){if(this.enableAutocomplete){return}t.preventDefault()}_onClick(){if(this.enableAutocomplete){return}this._showDropdown=!this._showDropdown}_onBlur(t=false){if(this.enableAutocomplete&&!t){return}this._showDropdown=false}_onAutoComplete(t){if(!this.enableAutocomplete){return}this._showDropdown=true;this.query=t.target.value;this.queryChange.emit(t.target.value)}_checkvalue(t,i){var e,s,r;return((s=(e=i===null||i===void 0?void 0:i[t])===null||e===void 0?void 0:e.toString())===null||s===void 0?void 0:s.toLowerCase().indexOf((r=this.query)===null||r===void 0?void 0:r.toLowerCase()))>=0}_getItems(){var t;let i=this._items.map((t=>{var i;return e("p-dropdown-menu-item",{useContainer:false,onClick:()=>this._selectValue(t),active:this.multi&&!!this._selectedItem&&Array.isArray(this._selectedItem)?this._selectedItem.findIndex((i=>i[this._identifierKey]===t[this._identifierKey]))>=0:t[this._identifierKey]===((i=this._selectedItem)===null||i===void 0?void 0:i[this._identifierKey]),variant:this.multi?"checkbox":"default",class:"justify-start"},this._getDisplay(t))}));if(!this._items.length){i=[e("p",{class:"w-full p-2 text-center text-sm text-storm-medium"},this.emptyStateText)]}if(this.enableSelectAll&&this._items.length){i.unshift(e("p-dropdown-menu-item",{useContainer:false,variant:"checkbox",onClick:()=>this._selectAllChange(),active:this._allSelected},((t=this.selectAllIcon)===null||t===void 0?void 0:t.length)?e("span",{class:"flex items-center gap-2"},e("div",{class:"flex w-6 justify-center text-lg"},e("p-icon",{variant:this.selectAllIcon}))," ",this.selectAllText):this.selectAllText))}if(this.enableAutocomplete){i.unshift(this._getAutoCompleteItem())}return i}_getAddItem(){return e("p-dropdown-menu-item",{onClick:()=>this.add.emit(),useContainer:false},e("span",{class:"flex items-center gap-1 font-semibold text-indigo"},this.addItemText,e("p-icon",{variant:"plus"})))}_getLoadingItems(){const t=[0,0,0].map((()=>e("p-dropdown-menu-item",{enableHover:false},e("p-loader",{variant:"ghost",class:"h-6 w-full rounded"}))));if(this.enableAutocomplete){t.unshift(this._getAutoCompleteItem())}return t}_getAutoCompleteItem(){return e("div",{class:"sticky top-0 -mt-2 bg-white pt-2"},e("input",{class:"p-input size-small sticky top-2 mb-2",placeholder:this.autocompletePlaceholder,onInput:t=>this._onAutoComplete(t),ref:t=>this.autocompleteInputRef=t,value:this.query}))}_setMultiContainerMaxWidth(){if(!this._inputRef||!this._multiContainerRef){return}this._multiContainerRef.style.maxWidth=`${this._inputRef.clientWidth-16}px`}_checkSelectedItems(){if(!this._multiContainerRef){return}const t=this._multiContainerRef.getBoundingClientRect();const i=Array.from(this._multiContainerRef.querySelectorAll(".item"));let e=0;for(const s of i){s.classList.remove("hidden");const i=s.getBoundingClientRect();if(i.right>t.right){s.classList.add("hidden");e++}}this._amountHidden=e;const s=this._multiContainerRef.querySelector(".extra");if(!s){return}if(!s.classList.contains("hidden")){s.classList.add("hidden")}if(e>0){s.classList.remove("hidden")}}_onDropdownOpen(t){if(!t.detail||!this.autocompleteInputRef){return}this.autocompleteInputRef.focus()}_selectAllChange(){this._allSelected=!this._allSelected;this.selectAllChange.emit(this._allSelected)}_getDisplay(t,i=false){var s,r,o;let n=e("div",{class:"text-container"},t[i?(s=this.selectionDisplayKey)!==null&&s!==void 0?s:this.displayKey:this.displayKey]);if(this.avatarKey){n=e("span",{class:"flex items-center gap-2"},e("p-avatar",{size:"xsmall",src:t[this.avatarKey],letters:t[this.avatarLettersKey]}),e("div",{class:"text-container"},t[(r=this.dropdownDisplayKey)!==null&&r!==void 0?r:this.displayKey]))}if(this.iconKey&&(!i||this.showIconInSelectedItem)){n=e("span",{class:"flex items-center gap-2"},e("p-icon",{variant:t[this.iconKey]}),e("div",{class:"text-container"},t[(o=this.dropdownDisplayKey)!==null&&o!==void 0?o:this.displayKey]))}return e("div",{class:!i||this.applyClassOnSelectedItem?`max-w-full ${t===null||t===void 0?void 0:t.class}`:"max-w-full"},n)}_getParsedItems(t=true){var i;if(!this.items||this.loading){return[]}let e=typeof this.items==="string"?JSON.parse(this.items):this.items;if(typeof(e===null||e===void 0?void 0:e[0])==="string"){this.displayKey="text";this.valueKey="value";e=e.map((t=>({value:t,text:t})))}if(((i=this.query)===null||i===void 0?void 0:i.length)&&!this.asyncFilter){e=e.filter((t=>{if(this.queryKey){return this._checkvalue(this.queryKey,t)}return this._checkvalue(this._identifierKey,t)||this._checkvalue(this.displayKey,t)}))}if(!t){return e}return e===null||e===void 0?void 0:e.slice(0,this.maxDisplayedItems)}get _el(){return r(this)}static get watchers(){return{value:["_valueChange"],items:["itemChanges"],_showDropdown:["_showDropdownChanges"],multi:["multiChanges"]}}};a.style=n;export{a as p_select};
-//# sourceMappingURL=p-78a34d3d.entry.js.map

package/dist/build/p-78a34d3d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["selectComponentCss","Select","_items","this","_getParsedItems","_displayValue","_selectedItem","placeholder","multi","_a","length","h","class","size","ref","_multiContainerRef","map","item","onClick","_selectValue","selectionDisplayKey","displayKey","variant","_amountHidden","_getDisplay","_identifierKey","_b","identifierKey","valueKey","componentDidLoad","Error","_setMultiContainerMaxWidth","_resizeObserver","ResizeObserver","_resizeDebounceTimer","clearTimeout","setTimeout","_checkSelectedItems","observe","_el","value","_valueChange","itemChanges","componentDidRender","disconnectedCallback","disconnect","render","Host","disableTriggerClick","calculateWidth","insideClick","scrollable","enableAutocomplete","show","_showDropdown","onIsOpen","ev","_onDropdownOpen","slot","icon","prefix","label","helper","required","error","disabled","focused","forceShowTooltip","showChevron","contenteditable","onFocus","_onFocus","onMouseDown","_onMouseDown","_onClick","_inputRef","loading","_getLoadingItems","_getItems","showAddItem","_getAddItem","documentClickHandler","target","childOf","_preselectItem","_showDropdownChanges","dropdownShown","emit","query","multiChanges","Array","isArray","JSON","parse","valueChange","filter","i","includes","autoSelectFirst","identifier","parsedValue","stringify","currentValue","currentParsedValue","items","find","itemIdentifier","parsedItemIdentifier","forceBlur","selectedItem","valueArray","includesIndex","findIndex","push","splice","_onBlur","preventDefault","blur","force","_onAutoComplete","queryChange","_checkvalue","key","toString","toLowerCase","indexOf","_c","useContainer","active","emptyStateText","enableSelectAll","unshift","_selectAllChange","_allSelected","selectAllIcon","selectAllText","_getAutoCompleteItem","add","addItemText","enableHover","autocompletePlaceholder","onInput","autocompleteInputRef","style","maxWidth","clientWidth","containerRect","getBoundingClientRect","from","querySelectorAll","amountHidden","child","classList","remove","childRect","right","extra","querySelector","contains","detail","focus","selectAllChange","isSelection","content","avatarKey","src","letters","avatarLettersKey","dropdownDisplayKey","iconKey","showIconInSelectedItem","applyClassOnSelectedItem","applyPagination","str","text","asyncFilter","queryKey","slice","maxDisplayedItems"],"sources":["src/components/molecules/select/select.component.scss?tag=p-select","src/components/molecules/select/select.component.tsx"],"sourcesContent":["@import '../../../style/form/mixins';\n\np-select {\n\t@apply relative flex w-full flex-col text-ellipsis;\n\n\t.p-input {\n\t\t@include inputDefaultState();\n\t\t@apply text-base font-semibold;\n\n\t\t&.size-small {\n\t\t\t@apply text-sm font-medium;\n\t\t}\n\t}\n\n\t.text-container {\n\t\t@apply block w-full overflow-hidden text-ellipsis whitespace-nowrap text-start;\n\t}\n\n\t.multi-container {\n\t\t@apply pointer-events-none absolute bottom-0 left-0 flex h-10 w-full items-center gap-2 overflow-hidden px-2 py-4;\n\n\t\t&.size-small {\n\t\t\t@apply h-8 px-1 py-2;\n\t\t}\n\n\t\t.item {\n\t\t\t@apply pointer-events-auto flex h-[1.625rem] cursor-pointer items-center gap-2 whitespace-nowrap rounded bg-indigo-light px-2 text-sm font-semibold text-indigo-dark;\n\n\t\t\tp-icon {\n\t\t\t\t@apply text-xs text-indigo;\n\t\t\t}\n\t\t}\n\n\t\t.extra {\n\t\t\t@apply pointer-events-none text-sm text-storm-medium;\n\t\t}\n\t}\n}\n","import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { childOf } from '../../../utils';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n\ttag: 'p-select',\n\tstyleUrl: 'select.component.scss',\n})\nexport class Select {\n\t/**\n\t * The items to show in the dropdown\n\t */\n\t@Prop() items: string | any[];\n\n\t/**\n\t * Wether to enable multi select\n\t */\n\t@Prop({ reflect: true }) multi: boolean;\n\n\t/**\n\t * Icon of the select box\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * The current query\n\t */\n\t@Prop() query: string;\n\n\t/**\n\t * The placeholder of the input\n\t */\n\t@Prop() placeholder: string;\n\n\t/**\n\t * The placeholder of the input used for auto complete\n\t */\n\t@Prop() autocompletePlaceholder: string = 'Search...';\n\n\t/**\n\t * The current value\n\t */\n\t@Prop() value: any;\n\n\t/**\n\t * The key of the object to display\n\t */\n\t@Prop() displayKey: string = 'text';\n\n\t/**\n\t * The key of the object to display in the dropdown (overwrites displayKey)\n\t */\n\t@Prop() dropdownDisplayKey: string | undefined;\n\n\t/**\n\t * The key of the object to display in the input (overwrites displayKey)\n\t */\n\t@Prop() selectionDisplayKey: string | undefined;\n\n\t/**\n\t * The key of the object to return\n\t */\n\t@Prop() valueKey: string;\n\n\t/**\n\t * The key of avatar within an item to show\n\t */\n\t@Prop() avatarKey: string;\n\n\t/**\n\t * The key of icon variant within an item to show\n\t */\n\t@Prop() iconKey: string;\n\n\t/**\n\t * Wether to show the icon also on the selected Item\n\t */\n\t@Prop() showIconInSelectedItem: string;\n\n\t/**\n\t * The key of a class in an item to apply\n\t */\n\t@Prop() classKey: string = 'class';\n\n\t/**\n\t * Wether to apply the item's class also on the selected item\n\t */\n\t@Prop() applyClassOnSelectedItem: string;\n\n\t/**\n\t * The key of avatar letters within an item to show when the avatar url doesn't work\n\t */\n\t@Prop() avatarLettersKey: string;\n\n\t/**\n\t * The key to identify an object\n\t */\n\t@Prop() identifierKey: string;\n\n\t/**\n\t * The key of the object to display\n\t */\n\t@Prop() queryKey?: string;\n\n\t/**\n\t * Wether to automatically select the first item\n\t */\n\t@Prop() autoSelectFirst: boolean = true;\n\n\t/**\n\t * Wether to show the chevron or not\n\t */\n\t@Prop() showChevron: boolean = true;\n\n\t/**\n\t * The maximum amount of items to display\n\t */\n\t@Prop() maxDisplayedItems: number = 10;\n\n\t/**\n\t * Wether to enable autocomplete\n\t */\n\t@Prop() enableAutocomplete: boolean = true;\n\n\t/**\n\t * Wether the input uses async filtering\n\t */\n\t@Prop() asyncFilter: boolean = false;\n\n\t/**\n\t * Wether to show loading items\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * Wether to show the select all item with multi select\n\t */\n\t@Prop() enableSelectAll: boolean = false;\n\n\t/**\n\t * The text of the select all item\n\t */\n\t@Prop() selectAllText: string = 'Select all';\n\n\t/**\n\t * The icon to prefix for select all\n\t */\n\t@Prop() selectAllIcon: IconVariant | undefined;\n\n\t/**\n\t * Event when the query of the autocomplete changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tqueryChange: EventEmitter<string>;\n\n\t/**\n\t * Event when the value changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tvalueChange: EventEmitter<any>;\n\n\t/**\n\t * Event when the select all item has been selected or not\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tselectAllChange: EventEmitter<any>;\n\n\t/**\n\t * Event when the dropdown shows\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tdropdownShown: EventEmitter<any>;\n\n\t/**\n\t * The size of the input group used by the select\n\t */\n\t@Prop() size: 'small' | 'medium' = 'medium';\n\n\t/**\n\t * The prefix of the input group used by the select\n\t */\n\t@Prop() prefix: string;\n\n\t/**\n\t * The label of the input group used by the select\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * The helper of the input group used by the select\n\t */\n\t@Prop() helper: string;\n\n\t/**\n\t * Wether the field is required\n\t */\n\t@Prop({ reflect: true }) required: boolean;\n\n\t/**\n\t * The helper of the input group used by the select\n\t */\n\t@Prop({ reflect: true }) error: string;\n\n\t/**\n\t * Wether the input group is disabled used by the select\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether to show a \"add\" item\n\t */\n\t@Prop() showAddItem: boolean = false;\n\n\t/**\n\t * The text to show when add item is being shown\n\t */\n\t@Prop() addItemText: string = 'Add item';\n\n\t/**\n\t * Event when the add item is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tadd: EventEmitter;\n\n\t/**\n\t * The text to show when items is empty\n\t */\n\t@Prop() emptyStateText: string = 'No items available';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _showDropdown: any = false;\n\t@State() private _selectedItem: any = null;\n\n\t@State() private _allSelected: boolean = false;\n\n\t@State() private _amountHidden = 0;\n\n\tprivate _inputRef: HTMLDivElement;\n\tprivate autocompleteInputRef: HTMLInputElement;\n\tprivate _multiContainerRef: HTMLElement;\n\n\tprivate _resizeObserver: ResizeObserver;\n\tprivate _resizeDebounceTimer: NodeJS.Timer;\n\n\tget _items() {\n\t\treturn this._getParsedItems();\n\t}\n\n\tget _displayValue() {\n\t\tif (!this._selectedItem) {\n\t\t\treturn this.placeholder;\n\t\t}\n\n\t\tif (this.multi) {\n\t\t\tif (this._selectedItem?.length === 0) {\n\t\t\t\treturn this.placeholder;\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclass={`multi-container size-${this.size}`}\n\t\t\t\t\tref={ref => (this._multiContainerRef = ref)}\n\t\t\t\t>\n\t\t\t\t\t{this._selectedItem.map(item => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass='item'\n\t\t\t\t\t\t\tonClick={() => this._selectValue(item)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{item[this.selectionDisplayKey ?? this.displayKey]}\n\t\t\t\t\t\t\t<p-icon variant='negative' />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\n\t\t\t\t\t<div class='extra hidden'>+{this._amountHidden}</div>\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn this._getDisplay(this._selectedItem, true);\n\t}\n\n\tget _identifierKey() {\n\t\treturn this.identifierKey ?? this.valueKey ?? 'value';\n\t}\n\n\tcomponentDidLoad() {\n\t\tif (!this.valueKey && !this.identifierKey) {\n\t\t\tthrow new Error('You must provide a valueKey or identifierKey');\n\t\t}\n\n\t\tif (this.multi) {\n\t\t\tthis._setMultiContainerMaxWidth();\n\n\t\t\tthis._resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (this._resizeDebounceTimer) {\n\t\t\t\t\tclearTimeout(this._resizeDebounceTimer);\n\t\t\t\t\tthis._resizeDebounceTimer = null;\n\t\t\t\t}\n\n\t\t\t\tthis._resizeDebounceTimer = setTimeout(() => {\n\t\t\t\t\tthis._setMultiContainerMaxWidth();\n\t\t\t\t\tthis._checkSelectedItems();\n\t\t\t\t}, 200);\n\t\t\t});\n\t\t\tthis._resizeObserver.observe(this._el);\n\t\t}\n\n\t\tif (this.value) {\n\t\t\tthis._valueChange();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.itemChanges();\n\t}\n\n\tcomponentDidRender() {\n\t\tif (this.multi) {\n\t\t\tthis._setMultiContainerMaxWidth();\n\t\t\tthis._checkSelectedItems();\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this.multi) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-select'>\n\t\t\t\t<p-dropdown\n\t\t\t\t\tdisableTriggerClick={true}\n\t\t\t\t\tcalculateWidth={true}\n\t\t\t\t\tinsideClick={true}\n\t\t\t\t\tscrollable={this.enableAutocomplete ? 'large' : true}\n\t\t\t\t\tshow={this._showDropdown}\n\t\t\t\t\tonIsOpen={ev => this._onDropdownOpen(ev)}\n\t\t\t\t>\n\t\t\t\t\t<p-input-group\n\t\t\t\t\t\tslot='trigger'\n\t\t\t\t\t\ticon={this.icon}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\tprefix={this.prefix}\n\t\t\t\t\t\tlabel={this.label}\n\t\t\t\t\t\thelper={this.helper}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\terror={this.error}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tfocused={this._showDropdown}\n\t\t\t\t\t\tforceShowTooltip={this.error?.length && this._showDropdown}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tslot='input'\n\t\t\t\t\t\t\tclass={`p-input read-only cursor-pointer ${\n\t\t\t\t\t\t\t\tthis.showChevron ? 'max-w-[calc(100%-3rem)]' : 'w-full'\n\t\t\t\t\t\t\t} size-${this.size} ${\n\t\t\t\t\t\t\t\tthis._displayValue === this.placeholder\n\t\t\t\t\t\t\t\t\t? 'font-medium text-storm-medium'\n\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tcontenteditable\n\t\t\t\t\t\t\tonFocus={ev => this._onFocus(ev)}\n\t\t\t\t\t\t\tonMouseDown={ev => this._onMouseDown(ev)}\n\t\t\t\t\t\t\tonClick={() => this._onClick()}\n\t\t\t\t\t\t\tref={ref => (this._inputRef = ref)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._displayValue}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{this.showChevron && (\n\t\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\t\tvariant='chevron'\n\t\t\t\t\t\t\t\tslot='suffix'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</p-input-group>\n\t\t\t\t\t<div slot='items'>\n\t\t\t\t\t\t{this.loading ? this._getLoadingItems() : this._getItems()}\n\t\t\t\t\t\t{this.showAddItem && this._getAddItem()}\n\t\t\t\t\t</div>\n\t\t\t\t</p-dropdown>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { target: 'document', capture: true })\n\tprotected documentClickHandler({ target }) {\n\t\tif (!this._showDropdown || childOf(target, this._el)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showDropdown = false;\n\t}\n\n\t@Watch('value')\n\tprivate _valueChange() {\n\t\tsetTimeout(() => this._preselectItem());\n\t}\n\n\t@Watch('items')\n\tpublic itemChanges() {\n\t\tsetTimeout(() => this._preselectItem());\n\t}\n\n\t@Watch('_showDropdown')\n\tpublic _showDropdownChanges() {\n\t\tthis.dropdownShown.emit({\n\t\t\tvalue: this._showDropdown,\n\t\t\tquery: this.query,\n\t\t});\n\t}\n\n\t@Watch('multi')\n\tpublic multiChanges() {\n\t\tif (this._selectedItem && !Array.isArray(this._selectedItem)) {\n\t\t\tthis._selectedItem = [];\n\t\t}\n\t}\n\n\tprivate _preselectItem() {\n\t\tlet value =\n\t\t\ttypeof this.value === 'string' && this.multi\n\t\t\t\t? JSON.parse(this.value)\n\t\t\t\t: this.value;\n\n\t\tif (this.multi) {\n\t\t\tif (!Array.isArray(value)) {\n\t\t\t\tthis.value = [];\n\t\t\t\tthis.valueChange.emit(this.value);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.value = value;\n\t\t\tif (!value.length) {\n\t\t\t\tthis._selectedItem = [];\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis._selectedItem =\n\t\t\t\t!!this.valueKey && this.valueKey !== 'false'\n\t\t\t\t\t? this._items.filter(i => value.includes(i?.[this.valueKey]))\n\t\t\t\t\t: [...value];\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._selectedItem && !value && this.autoSelectFirst) {\n\t\t\tvalue = this._items[0];\n\t\t}\n\n\t\tconst identifier =\n\t\t\ttypeof value === 'object' && value !== null\n\t\t\t\t? value[this._identifierKey]\n\t\t\t\t: value;\n\t\tconst parsedValue =\n\t\t\ttypeof identifier === 'string' || typeof identifier === 'number'\n\t\t\t\t? identifier\n\t\t\t\t: JSON.stringify(identifier);\n\n\t\tconst currentValue = this._selectedItem\n\t\t\t? this._selectedItem?.[this._identifierKey]\n\t\t\t: null;\n\t\tconst currentParsedValue =\n\t\t\ttypeof currentValue === 'string' || typeof currentValue === 'number'\n\t\t\t\t? currentValue\n\t\t\t\t: JSON.stringify(currentValue);\n\n\t\tif (this._selectedItem && currentParsedValue === parsedValue) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._items?.length && value) {\n\t\t\tthis._selectValue(value, false);\n\t\t\treturn;\n\t\t}\n\n\t\tconst items = this._getParsedItems(false);\n\t\tconst item = items.find(i => {\n\t\t\tconst itemIdentifier = i?.[this._identifierKey];\n\t\t\tconst parsedItemIdentifier =\n\t\t\t\ttypeof itemIdentifier === 'string' || typeof itemIdentifier === 'number'\n\t\t\t\t\t? itemIdentifier\n\t\t\t\t\t: JSON.stringify(itemIdentifier);\n\n\t\t\treturn parsedItemIdentifier === parsedValue;\n\t\t});\n\n\t\tthis._selectValue(!!item ? item : value, false);\n\t}\n\n\tprivate _selectValue(item, forceBlur = true) {\n\t\tlet value =\n\t\t\t!!this.valueKey && this.valueKey !== 'false' && item !== null\n\t\t\t\t? item?.[this.valueKey]\n\t\t\t\t: item;\n\n\t\tif (this.multi) {\n\t\t\tif (!this._selectedItem || !Array.isArray(this._selectedItem)) {\n\t\t\t\tthis._selectedItem = [];\n\t\t\t}\n\n\t\t\tif (!this.value || !Array.isArray(this.value)) {\n\t\t\t\tthis.value = [];\n\t\t\t}\n\n\t\t\tconst selectedItem = [...this._selectedItem];\n\t\t\tconst valueArray = [...this.value];\n\n\t\t\tconst includesIndex = selectedItem.findIndex(\n\t\t\t\ti => i[this._identifierKey] === item[this._identifierKey]\n\t\t\t);\n\t\t\tif (includesIndex === -1) {\n\t\t\t\tselectedItem.push(item);\n\t\t\t\tvalueArray.push(value);\n\t\t\t} else {\n\t\t\t\tselectedItem.splice(includesIndex, 1);\n\t\t\t\tvalueArray.splice(includesIndex, 1);\n\t\t\t}\n\n\t\t\tthis._selectedItem = selectedItem;\n\t\t\tthis.value = valueArray;\n\t\t\tthis.valueChange.emit(valueArray);\n\t\t\treturn;\n\t\t}\n\n\t\tthis._selectedItem = item;\n\t\tthis.value = value;\n\t\tthis.valueChange.emit(value);\n\n\t\tthis._onBlur(forceBlur);\n\t}\n\n\tprivate _onFocus(ev) {\n\t\tev.preventDefault();\n\t\tthis._inputRef.blur();\n\n\t\tif (!this._showDropdown) {\n\t\t\tthis._showDropdown = true;\n\t\t}\n\n\t\treturn;\n\t}\n\n\tprivate _onMouseDown(ev) {\n\t\tif (this.enableAutocomplete) {\n\t\t\treturn;\n\t\t}\n\n\t\tev.preventDefault();\n\t}\n\n\tprivate _onClick() {\n\t\tif (this.enableAutocomplete) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showDropdown = !this._showDropdown;\n\t}\n\n\tprivate _onBlur(force = false) {\n\t\tif (this.enableAutocomplete && !force) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showDropdown = false;\n\t}\n\n\tprivate _onAutoComplete(ev) {\n\t\tif (!this.enableAutocomplete) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showDropdown = true;\n\n\t\tthis.query = ev.target.value;\n\t\tthis.queryChange.emit(ev.target.value);\n\t}\n\n\tprivate _checkvalue(key, item) {\n\t\treturn (\n\t\t\titem?.[key]\n\t\t\t\t?.toString()\n\t\t\t\t?.toLowerCase()\n\t\t\t\t.indexOf(this.query?.toLowerCase()) >= 0\n\t\t);\n\t}\n\n\tprivate _getItems() {\n\t\tlet items = this._items.map(item => (\n\t\t\t<p-dropdown-menu-item\n\t\t\t\tuseContainer={false}\n\t\t\t\tonClick={() => this._selectValue(item)}\n\t\t\t\tactive={\n\t\t\t\t\tthis.multi &&\n\t\t\t\t\t!!this._selectedItem &&\n\t\t\t\t\tArray.isArray(this._selectedItem)\n\t\t\t\t\t\t? this._selectedItem.findIndex(\n\t\t\t\t\t\t\t\ti => i[this._identifierKey] === item[this._identifierKey]\n\t\t\t\t\t\t  ) >= 0\n\t\t\t\t\t\t: item[this._identifierKey] ===\n\t\t\t\t\t\t  this._selectedItem?.[this._identifierKey]\n\t\t\t\t}\n\t\t\t\tvariant={this.multi ? 'checkbox' : 'default'}\n\t\t\t\tclass='justify-start'\n\t\t\t>\n\t\t\t\t{this._getDisplay(item)}\n\t\t\t</p-dropdown-menu-item>\n\t\t));\n\n\t\tif (!this._items.length) {\n\t\t\titems = [\n\t\t\t\t<p class='w-full p-2 text-center text-sm text-storm-medium'>\n\t\t\t\t\t{this.emptyStateText}\n\t\t\t\t</p>,\n\t\t\t];\n\t\t}\n\n\t\tif (this.enableSelectAll && this._items.length) {\n\t\t\titems.unshift(\n\t\t\t\t<p-dropdown-menu-item\n\t\t\t\t\tuseContainer={false}\n\t\t\t\t\tvariant='checkbox'\n\t\t\t\t\tonClick={() => this._selectAllChange()}\n\t\t\t\t\tactive={this._allSelected}\n\t\t\t\t>\n\t\t\t\t\t{this.selectAllIcon?.length ? (\n\t\t\t\t\t\t<span class='flex items-center gap-2'>\n\t\t\t\t\t\t\t<div class='flex w-6 justify-center text-lg'>\n\t\t\t\t\t\t\t\t<p-icon variant={this.selectAllIcon} />\n\t\t\t\t\t\t\t</div>{' '}\n\t\t\t\t\t\t\t{this.selectAllText}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tthis.selectAllText\n\t\t\t\t\t)}\n\t\t\t\t</p-dropdown-menu-item>\n\t\t\t);\n\t\t}\n\n\t\tif (this.enableAutocomplete) {\n\t\t\titems.unshift(this._getAutoCompleteItem());\n\t\t}\n\n\t\treturn items;\n\t}\n\n\tprivate _getAddItem() {\n\t\treturn (\n\t\t\t<p-dropdown-menu-item\n\t\t\t\tonClick={() => this.add.emit()}\n\t\t\t\tuseContainer={false}\n\t\t\t>\n\t\t\t\t<span class='flex items-center gap-1 font-semibold text-indigo'>\n\t\t\t\t\t{this.addItemText}\n\t\t\t\t\t<p-icon variant='plus' />\n\t\t\t\t</span>\n\t\t\t</p-dropdown-menu-item>\n\t\t);\n\t}\n\n\tprivate _getLoadingItems() {\n\t\tconst items = [0, 0, 0].map(() => (\n\t\t\t<p-dropdown-menu-item enableHover={false}>\n\t\t\t\t<p-loader\n\t\t\t\t\tvariant='ghost'\n\t\t\t\t\tclass='h-6 w-full rounded'\n\t\t\t\t/>\n\t\t\t</p-dropdown-menu-item>\n\t\t));\n\n\t\tif (this.enableAutocomplete) {\n\t\t\titems.unshift(this._getAutoCompleteItem());\n\t\t}\n\n\t\treturn items;\n\t}\n\n\tprivate _getAutoCompleteItem() {\n\t\treturn (\n\t\t\t<div class='sticky top-0 -mt-2 bg-white pt-2'>\n\t\t\t\t<input\n\t\t\t\t\tclass='p-input size-small sticky top-2 mb-2'\n\t\t\t\t\tplaceholder={this.autocompletePlaceholder}\n\t\t\t\t\tonInput={ev => this._onAutoComplete(ev)}\n\t\t\t\t\tref={ref => (this.autocompleteInputRef = ref)}\n\t\t\t\t\tvalue={this.query}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _setMultiContainerMaxWidth() {\n\t\tif (!this._inputRef || !this._multiContainerRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._multiContainerRef.style.maxWidth = `${\n\t\t\tthis._inputRef.clientWidth - 16\n\t\t}px`;\n\t}\n\n\tprivate _checkSelectedItems() {\n\t\tif (!this._multiContainerRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst containerRect = this._multiContainerRef.getBoundingClientRect();\n\t\tconst items = Array.from(\n\t\t\tthis._multiContainerRef.querySelectorAll('.item')\n\t\t) as HTMLElement[];\n\n\t\tlet amountHidden = 0;\n\n\t\tfor (const child of items) {\n\t\t\tchild.classList.remove('hidden');\n\n\t\t\tconst childRect = child.getBoundingClientRect();\n\t\t\tif (childRect.right > containerRect.right) {\n\t\t\t\tchild.classList.add('hidden');\n\t\t\t\tamountHidden++;\n\t\t\t}\n\t\t}\n\n\t\tthis._amountHidden = amountHidden;\n\t\tconst extra = this._multiContainerRef.querySelector('.extra');\n\t\tif (!extra) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!extra.classList.contains('hidden')) {\n\t\t\textra.classList.add('hidden');\n\t\t}\n\n\t\tif (amountHidden > 0) {\n\t\t\textra.classList.remove('hidden');\n\t\t}\n\t}\n\n\tprivate _onDropdownOpen(ev) {\n\t\tif (!ev.detail || !this.autocompleteInputRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.autocompleteInputRef.focus();\n\t}\n\n\tprivate _selectAllChange() {\n\t\tthis._allSelected = !this._allSelected;\n\t\tthis.selectAllChange.emit(this._allSelected);\n\t}\n\n\tprivate _getDisplay(item, isSelection = false) {\n\t\tlet content = (\n\t\t\t<div class='text-container'>\n\t\t\t\t{\n\t\t\t\t\titem[\n\t\t\t\t\t\tisSelection\n\t\t\t\t\t\t\t? this.selectionDisplayKey ?? this.displayKey\n\t\t\t\t\t\t\t: this.displayKey\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t</div>\n\t\t);\n\n\t\tif (this.avatarKey) {\n\t\t\tcontent = (\n\t\t\t\t<span class='flex items-center gap-2'>\n\t\t\t\t\t<p-avatar\n\t\t\t\t\t\tsize='xsmall'\n\t\t\t\t\t\tsrc={item[this.avatarKey]}\n\t\t\t\t\t\tletters={item[this.avatarLettersKey]}\n\t\t\t\t\t></p-avatar>\n\t\t\t\t\t<div class='text-container'>\n\t\t\t\t\t\t{item[this.dropdownDisplayKey ?? this.displayKey]}\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t);\n\t\t}\n\n\t\tif (this.iconKey && (!isSelection || this.showIconInSelectedItem)) {\n\t\t\tcontent = (\n\t\t\t\t<span class='flex items-center gap-2'>\n\t\t\t\t\t<p-icon variant={item[this.iconKey] as IconVariant} />\n\t\t\t\t\t<div class='text-container'>\n\t\t\t\t\t\t{item[this.dropdownDisplayKey ?? this.displayKey]}\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={\n\t\t\t\t\t!isSelection || this.applyClassOnSelectedItem\n\t\t\t\t\t\t? `max-w-full ${item?.class}`\n\t\t\t\t\t\t: 'max-w-full'\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{content}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _getParsedItems(applyPagination = true) {\n\t\tif (!this.items || this.loading) {\n\t\t\treturn [];\n\t\t}\n\n\t\tlet items =\n\t\t\ttypeof this.items === 'string' ? JSON.parse(this.items) : this.items;\n\n\t\tif (typeof items?.[0] === 'string') {\n\t\t\tthis.displayKey = 'text';\n\t\t\tthis.valueKey = 'value';\n\n\t\t\titems = items.map(str => ({\n\t\t\t\tvalue: str,\n\t\t\t\ttext: str,\n\t\t\t}));\n\t\t}\n\n\t\tif (this.query?.length && !this.asyncFilter) {\n\t\t\titems = items.filter(item => {\n\t\t\t\tif (this.queryKey) {\n\t\t\t\t\treturn this._checkvalue(this.queryKey, item);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\tthis._checkvalue(this._identifierKey, item) ||\n\t\t\t\t\tthis._checkvalue(this.displayKey, item)\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\n\t\tif (!applyPagination) {\n\t\t\treturn items;\n\t\t}\n\n\t\treturn items?.slice(0, this.maxDisplayedItems);\n\t}\n}\n"],"mappings":"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"}

package/dist/build/p-a689640d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,H as e,g as s}from"./p-0c2cc6c4.js";const o=".flex{display:flex!important}.h-auto{height:auto!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}*{box-sizing:border-box}:host{display:flex}:host([direction=horizontal]){align-items:flex-end;height:auto}:host([direction=vertical]){align-items:flex-start;flex-direction:column;flex-wrap:wrap;min-height:100%;width:100%}:host([direction=vertical][content-position=start]){align-items:flex-end}.static{position:static!important}";const n=class{constructor(i){t(this,i);this._generateStepsOnce=()=>{if(this._generateTimeout){clearTimeout(this._generateTimeout);this._generateTimeout=null}this._generateTimeout=setTimeout((()=>this._generateSteps()),50)};this._generateSteps=async()=>{if(!this._el){return}let t=this.activeStep-1||0;const i=this._el.querySelectorAll("p-stepper-item");let e=false;for(let s=0;s<(i===null||i===void 0?void 0:i.length);s++){const o=i.item(s);if(this.enableAutoStatus){o.active=s===t;o.finished=s<t}if(!this.activeStep||t<0){if(o.active){t=s}if(t<0&&o.finished){t=s+1}}if(o.direction!==this.direction&&!e){e=true}o.direction=this.direction;o.align=this.direction==="vertical"?"start":s===0?"start":s===(i===null||i===void 0?void 0:i.length)-1?"end":"center";o.contentPosition=this.contentPosition}if(e){await new Promise((t=>setTimeout(t,200)))}for(let e=0;e<(i===null||i===void 0?void 0:i.length);e++){const s=i.item(e);if(e<i.length-1){let i=s.nextElementSibling;if(i&&i.tagName.toLowerCase()==="p-stepper-item"){const o=document.createElement("p-stepper-line");this._el.insertBefore(o,i);this._setStepperLineData(o,s,i,e,t);const n=o.previousElementSibling;if(n&&n.tagName.toLowerCase()==="p-stepper-line"){n.remove()}continue}if(i&&i.tagName.toLowerCase()==="p-stepper-line"){const o=i;i=i.nextElementSibling;if(i&&i.tagName.toLowerCase()==="p-stepper-item"){this._setStepperLineData(o,s,i,e,t)}}}if(e>0){const t=s.previousElementSibling;if(t&&t.tagName.toLowerCase()==="p-stepper-line"){t.direction=this.direction;t.active=s.active||s.finished}}}const s=this._el.querySelectorAll("p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child");for(let t=s.length-1;t>=0;t--){const i=s.item(t);i.remove()}};this._setStepperLineData=(t,i,e,s,o)=>{const n=i.clientHeight/2;const r=e.clientHeight/2;t.direction=this.direction;t.active=s<o;if(n>0&&this.direction==="vertical"){t.style.marginTop=`-${n/16}rem`;t.style.marginBottom=`-${r/16}rem`;t.style.minHeight=`calc(1rem + ${(n+r)/16}rem)`}};this.activeStep=1;this.enableAutoStatus=true;this.direction="horizontal";this.contentPosition="end"}componentDidLoad(){this._resizeObserver=new ResizeObserver((()=>this._generateStepsOnce()));this._resizeObserver.observe(this._el)}disconnectCallback(){if(this._resizeObserver){this._resizeObserver.disconnect()}}render(){return i(e,{class:"p-stepper"},i("slot",{onSlotchange:()=>this._generateStepsOnce()}))}_onActiveStepChange(){this._generateStepsOnce()}get _el(){return s(this)}static get watchers(){return{activeStep:["_onActiveStepChange"]}}};n.style=o;export{n as p_stepper};
-//# sourceMappingURL=p-a689640d.entry.js.map

package/dist/build/p-a689640d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stepperComponentCss","Stepper","this","_generateStepsOnce","_generateTimeout","clearTimeout","setTimeout","_generateSteps","async","_el","activeStep","items","querySelectorAll","directionChanged","i","length","item","enableAutoStatus","active","finished","direction","align","contentPosition","Promise","resolve","nextItem","nextElementSibling","tagName","toLowerCase","stepperLine","document","createElement","insertBefore","_setStepperLineData","previous","previousElementSibling","remove","previousItem","lines","j","line","heightDiff","clientHeight","heightDiffNext","style","marginTop","marginBottom","minHeight","componentDidLoad","_resizeObserver","ResizeObserver","observe","disconnectCallback","disconnect","render","h","Host","class","onSlotchange","_onActiveStepChange"],"sources":["src/components/molecules/stepper/stepper.component.scss?tag=p-stepper&encapsulation=shadow","src/components/molecules/stepper/stepper.component.tsx"],"sourcesContent":[":host {\n\t@apply flex;\n}\n\n:host([direction='horizontal']) {\n\t@apply h-auto items-end;\n}\n\n:host([direction='vertical']) {\n\t@apply flex-col flex-wrap items-start;\n\t@apply w-full min-h-full;\n}\n\n:host([direction='vertical'][content-position='start']) {\n\t@apply items-end;\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.scss',\n\tshadow: true,\n})\nexport class Stepper {\n\t/**\n\t * The currently active step\n\t */\n\t@Prop() activeStep: number = 1;\n\n\t/**\n\t * Wether to automatically apply active & finished to items\n\t */\n\t@Prop() enableAutoStatus: boolean = true;\n\n\t/**\n\t * The direction of the stepper\n\t */\n\t@Prop({ reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';\n\n\t/**\n\t * The position of the content in case of vertical direction\n\t */\n\t@Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _generateTimeout: NodeJS.Timer;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _generateStepsOnce = () => {\n\t\tif (this._generateTimeout) {\n\t\t\tclearTimeout(this._generateTimeout);\n\t\t\tthis._generateTimeout = null;\n\t\t}\n\n\t\tthis._generateTimeout = setTimeout(() => this._generateSteps(), 50);\n\t};\n\n\tprivate _generateSteps = async () => {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 || 0;\n\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\n\t\tlet directionChanged = false;\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\tif (this.enableAutoStatus) {\n\t\t\t\titem.active = i === activeStep;\n\t\t\t\titem.finished = i < activeStep;\n\t\t\t}\n\n\t\t\tif (!this.activeStep || activeStep < 0) {\n\t\t\t\tif (item.active) {\n\t\t\t\t\tactiveStep = i;\n\t\t\t\t}\n\n\t\t\t\tif (activeStep < 0 && item.finished) {\n\t\t\t\t\tactiveStep = i + 1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (item.direction !== this.direction && !directionChanged) {\n\t\t\t\tdirectionChanged = true;\n\t\t\t}\n\n\t\t\titem.direction = this.direction;\n\t\t\titem.align =\n\t\t\t\tthis.direction === 'vertical'\n\t\t\t\t\t? 'start'\n\t\t\t\t\t: i === 0\n\t\t\t\t\t? 'start'\n\t\t\t\t\t: i === items?.length - 1\n\t\t\t\t\t? 'end'\n\t\t\t\t\t: 'center';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\n\t\tif (directionChanged) {\n\t\t\t// super hacky way to ensure all elements that have a direction changed are re-rendered\n\t\t\tawait new Promise(resolve => setTimeout(resolve, 200));\n\t\t}\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\tif (i < items.length - 1) {\n\t\t\t\tlet nextItem = item.nextElementSibling;\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\tconst stepperLine = document.createElement('p-stepper-line');\n\t\t\t\t\tthis._el.insertBefore(stepperLine, nextItem);\n\t\t\t\t\tthis._setStepperLineData(stepperLine, item, nextItem, i, activeStep);\n\n\t\t\t\t\tconst previous = stepperLine.previousElementSibling;\n\t\t\t\t\tif (previous && previous.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\t\tprevious.remove();\n\t\t\t\t\t}\n\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tconst stepperLine = nextItem;\n\t\t\t\t\tnextItem = nextItem.nextElementSibling;\n\n\t\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\t\tthis._setStepperLineData(\n\t\t\t\t\t\t\tstepperLine,\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\tnextItem,\n\t\t\t\t\t\t\ti,\n\t\t\t\t\t\t\tactiveStep\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (i > 0) {\n\t\t\t\tconst previousItem = item.previousElementSibling;\n\t\t\t\tif (\n\t\t\t\t\tpreviousItem &&\n\t\t\t\t\tpreviousItem.tagName.toLowerCase() === 'p-stepper-line'\n\t\t\t\t) {\n\t\t\t\t\tpreviousItem.direction = this.direction;\n\t\t\t\t\tpreviousItem.active = item.active || item.finished;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst lines = this._el.querySelectorAll(\n\t\t\t'p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child'\n\t\t);\n\t\tfor (let j = lines.length - 1; j >= 0; j--) {\n\t\t\tconst line = lines.item(j);\n\t\t\tline.remove();\n\t\t}\n\t};\n\n\tprivate _setStepperLineData = (\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) => {\n\t\tconst heightDiff = item.clientHeight / 2;\n\t\tconst heightDiffNext = nextItem.clientHeight / 2;\n\n\t\tstepperLine.direction = this.direction;\n\t\tstepperLine.active = i < activeStep;\n\n\t\tif (heightDiff > 0 && this.direction === 'vertical') {\n\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\tstepperLine.style.minHeight = `calc(1rem + ${\n\t\t\t\t(heightDiff + heightDiffNext) / 16\n\t\t\t}rem)`;\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateStepsOnce());\n\t\tthis._resizeObserver.observe(this._el);\n\t}\n\n\tdisconnectCallback() {\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-stepper'>\n\t\t\t\t<slot onSlotchange={() => this._generateStepsOnce()} />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateStepsOnce();\n\t}\n}\n"],"mappings":"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"}

package/dist/paperless/p-78a34d3d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,H as s,g as r}from"./p-0c2cc6c4.js";import{c as o}from"./p-4d330cfc.js";const n=".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))!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-indigo-light{background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.bg-indigo-light,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!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));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-radius:.375rem;border-style:solid!important;border-width:1px;color:rgb(39 40 56/var(--tw-text-opacity));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));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));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))!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));border-radius:.25rem;color:rgb(44 75 169/var(--tw-text-opacity));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));font-size:.75rem;line-height:1rem}p-select .multi-container .extra{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));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))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!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 a=class{constructor(e){t(this,e);this.queryChange=i(this,"queryChange",3);this.valueChange=i(this,"valueChange",3);this.selectAllChange=i(this,"selectAllChange",3);this.dropdownShown=i(this,"dropdownShown",3);this.add=i(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(){return this._getParsedItems()}get _displayValue(){var t;if(!this._selectedItem){return this.placeholder}if(this.multi){if(((t=this._selectedItem)===null||t===void 0?void 0:t.length)===0){return this.placeholder}return e("div",{class:`multi-container size-${this.size}`,ref:t=>this._multiContainerRef=t},this._selectedItem.map((t=>{var i;return e("div",{class:"item",onClick:()=>this._selectValue(t)},t[(i=this.selectionDisplayKey)!==null&&i!==void 0?i:this.displayKey],e("p-icon",{variant:"negative"}))})),e("div",{class:"extra hidden"},"+",this._amountHidden))}return this._getDisplay(this._selectedItem,true)}get _identifierKey(){var t,i;return(i=(t=this.identifierKey)!==null&&t!==void 0?t:this.valueKey)!==null&&i!==void 0?i:"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 t;return e(s,{class:"p-select"},e("p-dropdown",{disableTriggerClick:true,calculateWidth:true,insideClick:true,scrollable:this.enableAutocomplete?"large":true,show:this._showDropdown,onIsOpen:t=>this._onDropdownOpen(t)},e("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:((t=this.error)===null||t===void 0?void 0:t.length)&&this._showDropdown},e("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:t=>this._onFocus(t),onMouseDown:t=>this._onMouseDown(t),onClick:()=>this._onClick(),ref:t=>this._inputRef=t},this._displayValue),this.showChevron&&e("p-icon",{variant:"chevron",slot:"suffix"})),e("div",{slot:"items"},this.loading?this._getLoadingItems():this._getItems(),this.showAddItem&&this._getAddItem())))}documentClickHandler({target:t}){if(!this._showDropdown||o(t,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 t,i;let e=typeof this.value==="string"&&this.multi?JSON.parse(this.value):this.value;if(this.multi){if(!Array.isArray(e)){this.value=[];this.valueChange.emit(this.value);return}this.value=e;if(!e.length){this._selectedItem=[];return}this._selectedItem=!!this.valueKey&&this.valueKey!=="false"?this._items.filter((t=>e.includes(t===null||t===void 0?void 0:t[this.valueKey]))):[...e];return}if(!this._selectedItem&&!e&&this.autoSelectFirst){e=this._items[0]}const s=typeof e==="object"&&e!==null?e[this._identifierKey]:e;const r=typeof s==="string"||typeof s==="number"?s:JSON.stringify(s);const o=this._selectedItem?(t=this._selectedItem)===null||t===void 0?void 0:t[this._identifierKey]:null;const n=typeof o==="string"||typeof o==="number"?o:JSON.stringify(o);if(this._selectedItem&&n===r){return}if(!((i=this._items)===null||i===void 0?void 0:i.length)&&e){this._selectValue(e,false);return}const a=this._getParsedItems(false);const h=a.find((t=>{const i=t===null||t===void 0?void 0:t[this._identifierKey];const e=typeof i==="string"||typeof i==="number"?i:JSON.stringify(i);return e===r}));this._selectValue(!!h?h:e,false)}_selectValue(t,i=true){let e=!!this.valueKey&&this.valueKey!=="false"&&t!==null?t===null||t===void 0?void 0:t[this.valueKey]:t;if(this.multi){if(!this._selectedItem||!Array.isArray(this._selectedItem)){this._selectedItem=[]}if(!this.value||!Array.isArray(this.value)){this.value=[]}const i=[...this._selectedItem];const s=[...this.value];const r=i.findIndex((i=>i[this._identifierKey]===t[this._identifierKey]));if(r===-1){i.push(t);s.push(e)}else{i.splice(r,1);s.splice(r,1)}this._selectedItem=i;this.value=s;this.valueChange.emit(s);return}this._selectedItem=t;this.value=e;this.valueChange.emit(e);this._onBlur(i)}_onFocus(t){t.preventDefault();this._inputRef.blur();if(!this._showDropdown){this._showDropdown=true}return}_onMouseDown(t){if(this.enableAutocomplete){return}t.preventDefault()}_onClick(){if(this.enableAutocomplete){return}this._showDropdown=!this._showDropdown}_onBlur(t=false){if(this.enableAutocomplete&&!t){return}this._showDropdown=false}_onAutoComplete(t){if(!this.enableAutocomplete){return}this._showDropdown=true;this.query=t.target.value;this.queryChange.emit(t.target.value)}_checkvalue(t,i){var e,s,r;return((s=(e=i===null||i===void 0?void 0:i[t])===null||e===void 0?void 0:e.toString())===null||s===void 0?void 0:s.toLowerCase().indexOf((r=this.query)===null||r===void 0?void 0:r.toLowerCase()))>=0}_getItems(){var t;let i=this._items.map((t=>{var i;return e("p-dropdown-menu-item",{useContainer:false,onClick:()=>this._selectValue(t),active:this.multi&&!!this._selectedItem&&Array.isArray(this._selectedItem)?this._selectedItem.findIndex((i=>i[this._identifierKey]===t[this._identifierKey]))>=0:t[this._identifierKey]===((i=this._selectedItem)===null||i===void 0?void 0:i[this._identifierKey]),variant:this.multi?"checkbox":"default",class:"justify-start"},this._getDisplay(t))}));if(!this._items.length){i=[e("p",{class:"w-full p-2 text-center text-sm text-storm-medium"},this.emptyStateText)]}if(this.enableSelectAll&&this._items.length){i.unshift(e("p-dropdown-menu-item",{useContainer:false,variant:"checkbox",onClick:()=>this._selectAllChange(),active:this._allSelected},((t=this.selectAllIcon)===null||t===void 0?void 0:t.length)?e("span",{class:"flex items-center gap-2"},e("div",{class:"flex w-6 justify-center text-lg"},e("p-icon",{variant:this.selectAllIcon}))," ",this.selectAllText):this.selectAllText))}if(this.enableAutocomplete){i.unshift(this._getAutoCompleteItem())}return i}_getAddItem(){return e("p-dropdown-menu-item",{onClick:()=>this.add.emit(),useContainer:false},e("span",{class:"flex items-center gap-1 font-semibold text-indigo"},this.addItemText,e("p-icon",{variant:"plus"})))}_getLoadingItems(){const t=[0,0,0].map((()=>e("p-dropdown-menu-item",{enableHover:false},e("p-loader",{variant:"ghost",class:"h-6 w-full rounded"}))));if(this.enableAutocomplete){t.unshift(this._getAutoCompleteItem())}return t}_getAutoCompleteItem(){return e("div",{class:"sticky top-0 -mt-2 bg-white pt-2"},e("input",{class:"p-input size-small sticky top-2 mb-2",placeholder:this.autocompletePlaceholder,onInput:t=>this._onAutoComplete(t),ref:t=>this.autocompleteInputRef=t,value:this.query}))}_setMultiContainerMaxWidth(){if(!this._inputRef||!this._multiContainerRef){return}this._multiContainerRef.style.maxWidth=`${this._inputRef.clientWidth-16}px`}_checkSelectedItems(){if(!this._multiContainerRef){return}const t=this._multiContainerRef.getBoundingClientRect();const i=Array.from(this._multiContainerRef.querySelectorAll(".item"));let e=0;for(const s of i){s.classList.remove("hidden");const i=s.getBoundingClientRect();if(i.right>t.right){s.classList.add("hidden");e++}}this._amountHidden=e;const s=this._multiContainerRef.querySelector(".extra");if(!s){return}if(!s.classList.contains("hidden")){s.classList.add("hidden")}if(e>0){s.classList.remove("hidden")}}_onDropdownOpen(t){if(!t.detail||!this.autocompleteInputRef){return}this.autocompleteInputRef.focus()}_selectAllChange(){this._allSelected=!this._allSelected;this.selectAllChange.emit(this._allSelected)}_getDisplay(t,i=false){var s,r,o;let n=e("div",{class:"text-container"},t[i?(s=this.selectionDisplayKey)!==null&&s!==void 0?s:this.displayKey:this.displayKey]);if(this.avatarKey){n=e("span",{class:"flex items-center gap-2"},e("p-avatar",{size:"xsmall",src:t[this.avatarKey],letters:t[this.avatarLettersKey]}),e("div",{class:"text-container"},t[(r=this.dropdownDisplayKey)!==null&&r!==void 0?r:this.displayKey]))}if(this.iconKey&&(!i||this.showIconInSelectedItem)){n=e("span",{class:"flex items-center gap-2"},e("p-icon",{variant:t[this.iconKey]}),e("div",{class:"text-container"},t[(o=this.dropdownDisplayKey)!==null&&o!==void 0?o:this.displayKey]))}return e("div",{class:!i||this.applyClassOnSelectedItem?`max-w-full ${t===null||t===void 0?void 0:t.class}`:"max-w-full"},n)}_getParsedItems(t=true){var i;if(!this.items||this.loading){return[]}let e=typeof this.items==="string"?JSON.parse(this.items):this.items;if(typeof(e===null||e===void 0?void 0:e[0])==="string"){this.displayKey="text";this.valueKey="value";e=e.map((t=>({value:t,text:t})))}if(((i=this.query)===null||i===void 0?void 0:i.length)&&!this.asyncFilter){e=e.filter((t=>{if(this.queryKey){return this._checkvalue(this.queryKey,t)}return this._checkvalue(this._identifierKey,t)||this._checkvalue(this.displayKey,t)}))}if(!t){return e}return e===null||e===void 0?void 0:e.slice(0,this.maxDisplayedItems)}get _el(){return r(this)}static get watchers(){return{value:["_valueChange"],items:["itemChanges"],_showDropdown:["_showDropdownChanges"],multi:["multiChanges"]}}};a.style=n;export{a as p_select};
-//# sourceMappingURL=p-78a34d3d.entry.js.map

package/dist/paperless/p-78a34d3d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["selectComponentCss","Select","_items","this","_getParsedItems","_displayValue","_selectedItem","placeholder","multi","_a","length","h","class","size","ref","_multiContainerRef","map","item","onClick","_selectValue","selectionDisplayKey","displayKey","variant","_amountHidden","_getDisplay","_identifierKey","_b","identifierKey","valueKey","componentDidLoad","Error","_setMultiContainerMaxWidth","_resizeObserver","ResizeObserver","_resizeDebounceTimer","clearTimeout","setTimeout","_checkSelectedItems","observe","_el","value","_valueChange","itemChanges","componentDidRender","disconnectedCallback","disconnect","render","Host","disableTriggerClick","calculateWidth","insideClick","scrollable","enableAutocomplete","show","_showDropdown","onIsOpen","ev","_onDropdownOpen","slot","icon","prefix","label","helper","required","error","disabled","focused","forceShowTooltip","showChevron","contenteditable","onFocus","_onFocus","onMouseDown","_onMouseDown","_onClick","_inputRef","loading","_getLoadingItems","_getItems","showAddItem","_getAddItem","documentClickHandler","target","childOf","_preselectItem","_showDropdownChanges","dropdownShown","emit","query","multiChanges","Array","isArray","JSON","parse","valueChange","filter","i","includes","autoSelectFirst","identifier","parsedValue","stringify","currentValue","currentParsedValue","items","find","itemIdentifier","parsedItemIdentifier","forceBlur","selectedItem","valueArray","includesIndex","findIndex","push","splice","_onBlur","preventDefault","blur","force","_onAutoComplete","queryChange","_checkvalue","key","toString","toLowerCase","indexOf","_c","useContainer","active","emptyStateText","enableSelectAll","unshift","_selectAllChange","_allSelected","selectAllIcon","selectAllText","_getAutoCompleteItem","add","addItemText","enableHover","autocompletePlaceholder","onInput","autocompleteInputRef","style","maxWidth","clientWidth","containerRect","getBoundingClientRect","from","querySelectorAll","amountHidden","child","classList","remove","childRect","right","extra","querySelector","contains","detail","focus","selectAllChange","isSelection","content","avatarKey","src","letters","avatarLettersKey","dropdownDisplayKey","iconKey","showIconInSelectedItem","applyClassOnSelectedItem","applyPagination","str","text","asyncFilter","queryKey","slice","maxDisplayedItems"],"sources":["src/components/molecules/select/select.component.scss?tag=p-select","src/components/molecules/select/select.component.tsx"],"sourcesContent":["@import '../../../style/form/mixins';\n\np-select {\n\t@apply relative flex w-full flex-col text-ellipsis;\n\n\t.p-input {\n\t\t@include inputDefaultState();\n\t\t@apply text-base font-semibold;\n\n\t\t&.size-small {\n\t\t\t@apply text-sm font-medium;\n\t\t}\n\t}\n\n\t.text-container {\n\t\t@apply block w-full overflow-hidden text-ellipsis whitespace-nowrap text-start;\n\t}\n\n\t.multi-container {\n\t\t@apply pointer-events-none absolute bottom-0 left-0 flex h-10 w-full items-center gap-2 overflow-hidden px-2 py-4;\n\n\t\t&.size-small {\n\t\t\t@apply h-8 px-1 py-2;\n\t\t}\n\n\t\t.item {\n\t\t\t@apply pointer-events-auto flex h-[1.625rem] cursor-pointer items-center gap-2 whitespace-nowrap rounded bg-indigo-light px-2 text-sm font-semibold text-indigo-dark;\n\n\t\t\tp-icon {\n\t\t\t\t@apply text-xs text-indigo;\n\t\t\t}\n\t\t}\n\n\t\t.extra {\n\t\t\t@apply pointer-events-none text-sm text-storm-medium;\n\t\t}\n\t}\n}\n","import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from '@stencil/core';\nimport { childOf } from '../../../utils';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n\ttag: 'p-select',\n\tstyleUrl: 'select.component.scss',\n})\nexport class Select {\n\t/**\n\t * The items to show in the dropdown\n\t */\n\t@Prop() items: string | any[];\n\n\t/**\n\t * Wether to enable multi select\n\t */\n\t@Prop({ reflect: true }) multi: boolean;\n\n\t/**\n\t * Icon of the select box\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * The current query\n\t */\n\t@Prop() query: string;\n\n\t/**\n\t * The placeholder of the input\n\t */\n\t@Prop() placeholder: string;\n\n\t/**\n\t * The placeholder of the input used for auto complete\n\t */\n\t@Prop() autocompletePlaceholder: string = 'Search...';\n\n\t/**\n\t * The current value\n\t */\n\t@Prop() value: any;\n\n\t/**\n\t * The key of the object to display\n\t */\n\t@Prop() displayKey: string = 'text';\n\n\t/**\n\t * The key of the object to display in the dropdown (overwrites displayKey)\n\t */\n\t@Prop() dropdownDisplayKey: string | undefined;\n\n\t/**\n\t * The key of the object to display in the input (overwrites displayKey)\n\t */\n\t@Prop() selectionDisplayKey: string | undefined;\n\n\t/**\n\t * The key of the object to return\n\t */\n\t@Prop() valueKey: string;\n\n\t/**\n\t * The key of avatar within an item to show\n\t */\n\t@Prop() avatarKey: string;\n\n\t/**\n\t * The key of icon variant within an item to show\n\t */\n\t@Prop() iconKey: string;\n\n\t/**\n\t * Wether to show the icon also on the selected Item\n\t */\n\t@Prop() showIconInSelectedItem: string;\n\n\t/**\n\t * The key of a class in an item to apply\n\t */\n\t@Prop() classKey: string = 'class';\n\n\t/**\n\t * Wether to apply the item's class also on the selected item\n\t */\n\t@Prop() applyClassOnSelectedItem: string;\n\n\t/**\n\t * The key of avatar letters within an item to show when the avatar url doesn't work\n\t */\n\t@Prop() avatarLettersKey: string;\n\n\t/**\n\t * The key to identify an object\n\t */\n\t@Prop() identifierKey: string;\n\n\t/**\n\t * The key of the object to display\n\t */\n\t@Prop() queryKey?: string;\n\n\t/**\n\t * Wether to automatically select the first item\n\t */\n\t@Prop() autoSelectFirst: boolean = true;\n\n\t/**\n\t * Wether to show the chevron or not\n\t */\n\t@Prop() showChevron: boolean = true;\n\n\t/**\n\t * The maximum amount of items to display\n\t */\n\t@Prop() maxDisplayedItems: number = 10;\n\n\t/**\n\t * Wether to enable autocomplete\n\t */\n\t@Prop() enableAutocomplete: boolean = true;\n\n\t/**\n\t * Wether the input uses async filtering\n\t */\n\t@Prop() asyncFilter: boolean = false;\n\n\t/**\n\t * Wether to show loading items\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * Wether to show the select all item with multi select\n\t */\n\t@Prop() enableSelectAll: boolean = false;\n\n\t/**\n\t * The text of the select all item\n\t */\n\t@Prop() selectAllText: string = 'Select all';\n\n\t/**\n\t * The icon to prefix for select all\n\t */\n\t@Prop() selectAllIcon: IconVariant | undefined;\n\n\t/**\n\t * Event when the query of the autocomplete changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tqueryChange: EventEmitter<string>;\n\n\t/**\n\t * Event when the value changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tvalueChange: EventEmitter<any>;\n\n\t/**\n\t * Event when the select all item has been selected or not\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tselectAllChange: EventEmitter<any>;\n\n\t/**\n\t * Event when the dropdown shows\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tdropdownShown: EventEmitter<any>;\n\n\t/**\n\t * The size of the input group used by the select\n\t */\n\t@Prop() size: 'small' | 'medium' = 'medium';\n\n\t/**\n\t * The prefix of the input group used by the select\n\t */\n\t@Prop() prefix: string;\n\n\t/**\n\t * The label of the input group used by the select\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * The helper of the input group used by the select\n\t */\n\t@Prop() helper: string;\n\n\t/**\n\t * Wether the field is required\n\t */\n\t@Prop({ reflect: true }) required: boolean;\n\n\t/**\n\t * The helper of the input group used by the select\n\t */\n\t@Prop({ reflect: true }) error: string;\n\n\t/**\n\t * Wether the input group is disabled used by the select\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether to show a \"add\" item\n\t */\n\t@Prop() showAddItem: boolean = false;\n\n\t/**\n\t * The text to show when add item is being shown\n\t */\n\t@Prop() addItemText: string = 'Add item';\n\n\t/**\n\t * Event when the add item is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tadd: EventEmitter;\n\n\t/**\n\t * The text to show when items is empty\n\t */\n\t@Prop() emptyStateText: string = 'No items available';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _showDropdown: any = false;\n\t@State() private _selectedItem: any = null;\n\n\t@State() private _allSelected: boolean = false;\n\n\t@State() private _amountHidden = 0;\n\n\tprivate _inputRef: HTMLDivElement;\n\tprivate autocompleteInputRef: HTMLInputElement;\n\tprivate _multiContainerRef: HTMLElement;\n\n\tprivate _resizeObserver: ResizeObserver;\n\tprivate _resizeDebounceTimer: NodeJS.Timer;\n\n\tget _items() {\n\t\treturn this._getParsedItems();\n\t}\n\n\tget _displayValue() {\n\t\tif (!this._selectedItem) {\n\t\t\treturn this.placeholder;\n\t\t}\n\n\t\tif (this.multi) {\n\t\t\tif (this._selectedItem?.length === 0) {\n\t\t\t\treturn this.placeholder;\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclass={`multi-container size-${this.size}`}\n\t\t\t\t\tref={ref => (this._multiContainerRef = ref)}\n\t\t\t\t>\n\t\t\t\t\t{this._selectedItem.map(item => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass='item'\n\t\t\t\t\t\t\tonClick={() => this._selectValue(item)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{item[this.selectionDisplayKey ?? this.displayKey]}\n\t\t\t\t\t\t\t<p-icon variant='negative' />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\n\t\t\t\t\t<div class='extra hidden'>+{this._amountHidden}</div>\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn this._getDisplay(this._selectedItem, true);\n\t}\n\n\tget _identifierKey() {\n\t\treturn this.identifierKey ?? this.valueKey ?? 'value';\n\t}\n\n\tcomponentDidLoad() {\n\t\tif (!this.valueKey && !this.identifierKey) {\n\t\t\tthrow new Error('You must provide a valueKey or identifierKey');\n\t\t}\n\n\t\tif (this.multi) {\n\t\t\tthis._setMultiContainerMaxWidth();\n\n\t\t\tthis._resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (this._resizeDebounceTimer) {\n\t\t\t\t\tclearTimeout(this._resizeDebounceTimer);\n\t\t\t\t\tthis._resizeDebounceTimer = null;\n\t\t\t\t}\n\n\t\t\t\tthis._resizeDebounceTimer = setTimeout(() => {\n\t\t\t\t\tthis._setMultiContainerMaxWidth();\n\t\t\t\t\tthis._checkSelectedItems();\n\t\t\t\t}, 200);\n\t\t\t});\n\t\t\tthis._resizeObserver.observe(this._el);\n\t\t}\n\n\t\tif (this.value) {\n\t\t\tthis._valueChange();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.itemChanges();\n\t}\n\n\tcomponentDidRender() {\n\t\tif (this.multi) {\n\t\t\tthis._setMultiContainerMaxWidth();\n\t\t\tthis._checkSelectedItems();\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this.multi) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-select'>\n\t\t\t\t<p-dropdown\n\t\t\t\t\tdisableTriggerClick={true}\n\t\t\t\t\tcalculateWidth={true}\n\t\t\t\t\tinsideClick={true}\n\t\t\t\t\tscrollable={this.enableAutocomplete ? 'large' : true}\n\t\t\t\t\tshow={this._showDropdown}\n\t\t\t\t\tonIsOpen={ev => this._onDropdownOpen(ev)}\n\t\t\t\t>\n\t\t\t\t\t<p-input-group\n\t\t\t\t\t\tslot='trigger'\n\t\t\t\t\t\ticon={this.icon}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\tprefix={this.prefix}\n\t\t\t\t\t\tlabel={this.label}\n\t\t\t\t\t\thelper={this.helper}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\terror={this.error}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tfocused={this._showDropdown}\n\t\t\t\t\t\tforceShowTooltip={this.error?.length && this._showDropdown}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tslot='input'\n\t\t\t\t\t\t\tclass={`p-input read-only cursor-pointer ${\n\t\t\t\t\t\t\t\tthis.showChevron ? 'max-w-[calc(100%-3rem)]' : 'w-full'\n\t\t\t\t\t\t\t} size-${this.size} ${\n\t\t\t\t\t\t\t\tthis._displayValue === this.placeholder\n\t\t\t\t\t\t\t\t\t? 'font-medium text-storm-medium'\n\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tcontenteditable\n\t\t\t\t\t\t\tonFocus={ev => this._onFocus(ev)}\n\t\t\t\t\t\t\tonMouseDown={ev => this._onMouseDown(ev)}\n\t\t\t\t\t\t\tonClick={() => this._onClick()}\n\t\t\t\t\t\t\tref={ref => (this._inputRef = ref)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._displayValue}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{this.showChevron && (\n\t\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\t\tvariant='chevron'\n\t\t\t\t\t\t\t\tslot='suffix'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</p-input-group>\n\t\t\t\t\t<div slot='items'>\n\t\t\t\t\t\t{this.loading ? this._getLoadingItems() : this._getItems()}\n\t\t\t\t\t\t{this.showAddItem && this._getAddItem()}\n\t\t\t\t\t</div>\n\t\t\t\t</p-dropdown>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { target: 'document', capture: true })\n\tprotected documentClickHandler({ target }) {\n\t\tif (!this._showDropdown || childOf(target, this._el)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showDropdown = false;\n\t}\n\n\t@Watch('value')\n\tprivate _valueChange() {\n\t\tsetTimeout(() => this._preselectItem());\n\t}\n\n\t@Watch('items')\n\tpublic itemChanges() {\n\t\tsetTimeout(() => this._preselectItem());\n\t}\n\n\t@Watch('_showDropdown')\n\tpublic _showDropdownChanges() {\n\t\tthis.dropdownShown.emit({\n\t\t\tvalue: this._showDropdown,\n\t\t\tquery: this.query,\n\t\t});\n\t}\n\n\t@Watch('multi')\n\tpublic multiChanges() {\n\t\tif (this._selectedItem && !Array.isArray(this._selectedItem)) {\n\t\t\tthis._selectedItem = [];\n\t\t}\n\t}\n\n\tprivate _preselectItem() {\n\t\tlet value =\n\t\t\ttypeof this.value === 'string' && this.multi\n\t\t\t\t? JSON.parse(this.value)\n\t\t\t\t: this.value;\n\n\t\tif (this.multi) {\n\t\t\tif (!Array.isArray(value)) {\n\t\t\t\tthis.value = [];\n\t\t\t\tthis.valueChange.emit(this.value);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.value = value;\n\t\t\tif (!value.length) {\n\t\t\t\tthis._selectedItem = [];\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis._selectedItem =\n\t\t\t\t!!this.valueKey && this.valueKey !== 'false'\n\t\t\t\t\t? this._items.filter(i => value.includes(i?.[this.valueKey]))\n\t\t\t\t\t: [...value];\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._selectedItem && !value && this.autoSelectFirst) {\n\t\t\tvalue = this._items[0];\n\t\t}\n\n\t\tconst identifier =\n\t\t\ttypeof value === 'object' && value !== null\n\t\t\t\t? value[this._identifierKey]\n\t\t\t\t: value;\n\t\tconst parsedValue =\n\t\t\ttypeof identifier === 'string' || typeof identifier === 'number'\n\t\t\t\t? identifier\n\t\t\t\t: JSON.stringify(identifier);\n\n\t\tconst currentValue = this._selectedItem\n\t\t\t? this._selectedItem?.[this._identifierKey]\n\t\t\t: null;\n\t\tconst currentParsedValue =\n\t\t\ttypeof currentValue === 'string' || typeof currentValue === 'number'\n\t\t\t\t? currentValue\n\t\t\t\t: JSON.stringify(currentValue);\n\n\t\tif (this._selectedItem && currentParsedValue === parsedValue) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._items?.length && value) {\n\t\t\tthis._selectValue(value, false);\n\t\t\treturn;\n\t\t}\n\n\t\tconst items = this._getParsedItems(false);\n\t\tconst item = items.find(i => {\n\t\t\tconst itemIdentifier = i?.[this._identifierKey];\n\t\t\tconst parsedItemIdentifier =\n\t\t\t\ttypeof itemIdentifier === 'string' || typeof itemIdentifier === 'number'\n\t\t\t\t\t? itemIdentifier\n\t\t\t\t\t: JSON.stringify(itemIdentifier);\n\n\t\t\treturn parsedItemIdentifier === parsedValue;\n\t\t});\n\n\t\tthis._selectValue(!!item ? item : value, false);\n\t}\n\n\tprivate _selectValue(item, forceBlur = true) {\n\t\tlet value =\n\t\t\t!!this.valueKey && this.valueKey !== 'false' && item !== null\n\t\t\t\t? item?.[this.valueKey]\n\t\t\t\t: item;\n\n\t\tif (this.multi) {\n\t\t\tif (!this._selectedItem || !Array.isArray(this._selectedItem)) {\n\t\t\t\tthis._selectedItem = [];\n\t\t\t}\n\n\t\t\tif (!this.value || !Array.isArray(this.value)) {\n\t\t\t\tthis.value = [];\n\t\t\t}\n\n\t\t\tconst selectedItem = [...this._selectedItem];\n\t\t\tconst valueArray = [...this.value];\n\n\t\t\tconst includesIndex = selectedItem.findIndex(\n\t\t\t\ti => i[this._identifierKey] === item[this._identifierKey]\n\t\t\t);\n\t\t\tif (includesIndex === -1) {\n\t\t\t\tselectedItem.push(item);\n\t\t\t\tvalueArray.push(value);\n\t\t\t} else {\n\t\t\t\tselectedItem.splice(includesIndex, 1);\n\t\t\t\tvalueArray.splice(includesIndex, 1);\n\t\t\t}\n\n\t\t\tthis._selectedItem = selectedItem;\n\t\t\tthis.value = valueArray;\n\t\t\tthis.valueChange.emit(valueArray);\n\t\t\treturn;\n\t\t}\n\n\t\tthis._selectedItem = item;\n\t\tthis.value = value;\n\t\tthis.valueChange.emit(value);\n\n\t\tthis._onBlur(forceBlur);\n\t}\n\n\tprivate _onFocus(ev) {\n\t\tev.preventDefault();\n\t\tthis._inputRef.blur();\n\n\t\tif (!this._showDropdown) {\n\t\t\tthis._showDropdown = true;\n\t\t}\n\n\t\treturn;\n\t}\n\n\tprivate _onMouseDown(ev) {\n\t\tif (this.enableAutocomplete) {\n\t\t\treturn;\n\t\t}\n\n\t\tev.preventDefault();\n\t}\n\n\tprivate _onClick() {\n\t\tif (this.enableAutocomplete) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showDropdown = !this._showDropdown;\n\t}\n\n\tprivate _onBlur(force = false) {\n\t\tif (this.enableAutocomplete && !force) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showDropdown = false;\n\t}\n\n\tprivate _onAutoComplete(ev) {\n\t\tif (!this.enableAutocomplete) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showDropdown = true;\n\n\t\tthis.query = ev.target.value;\n\t\tthis.queryChange.emit(ev.target.value);\n\t}\n\n\tprivate _checkvalue(key, item) {\n\t\treturn (\n\t\t\titem?.[key]\n\t\t\t\t?.toString()\n\t\t\t\t?.toLowerCase()\n\t\t\t\t.indexOf(this.query?.toLowerCase()) >= 0\n\t\t);\n\t}\n\n\tprivate _getItems() {\n\t\tlet items = this._items.map(item => (\n\t\t\t<p-dropdown-menu-item\n\t\t\t\tuseContainer={false}\n\t\t\t\tonClick={() => this._selectValue(item)}\n\t\t\t\tactive={\n\t\t\t\t\tthis.multi &&\n\t\t\t\t\t!!this._selectedItem &&\n\t\t\t\t\tArray.isArray(this._selectedItem)\n\t\t\t\t\t\t? this._selectedItem.findIndex(\n\t\t\t\t\t\t\t\ti => i[this._identifierKey] === item[this._identifierKey]\n\t\t\t\t\t\t  ) >= 0\n\t\t\t\t\t\t: item[this._identifierKey] ===\n\t\t\t\t\t\t  this._selectedItem?.[this._identifierKey]\n\t\t\t\t}\n\t\t\t\tvariant={this.multi ? 'checkbox' : 'default'}\n\t\t\t\tclass='justify-start'\n\t\t\t>\n\t\t\t\t{this._getDisplay(item)}\n\t\t\t</p-dropdown-menu-item>\n\t\t));\n\n\t\tif (!this._items.length) {\n\t\t\titems = [\n\t\t\t\t<p class='w-full p-2 text-center text-sm text-storm-medium'>\n\t\t\t\t\t{this.emptyStateText}\n\t\t\t\t</p>,\n\t\t\t];\n\t\t}\n\n\t\tif (this.enableSelectAll && this._items.length) {\n\t\t\titems.unshift(\n\t\t\t\t<p-dropdown-menu-item\n\t\t\t\t\tuseContainer={false}\n\t\t\t\t\tvariant='checkbox'\n\t\t\t\t\tonClick={() => this._selectAllChange()}\n\t\t\t\t\tactive={this._allSelected}\n\t\t\t\t>\n\t\t\t\t\t{this.selectAllIcon?.length ? (\n\t\t\t\t\t\t<span class='flex items-center gap-2'>\n\t\t\t\t\t\t\t<div class='flex w-6 justify-center text-lg'>\n\t\t\t\t\t\t\t\t<p-icon variant={this.selectAllIcon} />\n\t\t\t\t\t\t\t</div>{' '}\n\t\t\t\t\t\t\t{this.selectAllText}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tthis.selectAllText\n\t\t\t\t\t)}\n\t\t\t\t</p-dropdown-menu-item>\n\t\t\t);\n\t\t}\n\n\t\tif (this.enableAutocomplete) {\n\t\t\titems.unshift(this._getAutoCompleteItem());\n\t\t}\n\n\t\treturn items;\n\t}\n\n\tprivate _getAddItem() {\n\t\treturn (\n\t\t\t<p-dropdown-menu-item\n\t\t\t\tonClick={() => this.add.emit()}\n\t\t\t\tuseContainer={false}\n\t\t\t>\n\t\t\t\t<span class='flex items-center gap-1 font-semibold text-indigo'>\n\t\t\t\t\t{this.addItemText}\n\t\t\t\t\t<p-icon variant='plus' />\n\t\t\t\t</span>\n\t\t\t</p-dropdown-menu-item>\n\t\t);\n\t}\n\n\tprivate _getLoadingItems() {\n\t\tconst items = [0, 0, 0].map(() => (\n\t\t\t<p-dropdown-menu-item enableHover={false}>\n\t\t\t\t<p-loader\n\t\t\t\t\tvariant='ghost'\n\t\t\t\t\tclass='h-6 w-full rounded'\n\t\t\t\t/>\n\t\t\t</p-dropdown-menu-item>\n\t\t));\n\n\t\tif (this.enableAutocomplete) {\n\t\t\titems.unshift(this._getAutoCompleteItem());\n\t\t}\n\n\t\treturn items;\n\t}\n\n\tprivate _getAutoCompleteItem() {\n\t\treturn (\n\t\t\t<div class='sticky top-0 -mt-2 bg-white pt-2'>\n\t\t\t\t<input\n\t\t\t\t\tclass='p-input size-small sticky top-2 mb-2'\n\t\t\t\t\tplaceholder={this.autocompletePlaceholder}\n\t\t\t\t\tonInput={ev => this._onAutoComplete(ev)}\n\t\t\t\t\tref={ref => (this.autocompleteInputRef = ref)}\n\t\t\t\t\tvalue={this.query}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _setMultiContainerMaxWidth() {\n\t\tif (!this._inputRef || !this._multiContainerRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._multiContainerRef.style.maxWidth = `${\n\t\t\tthis._inputRef.clientWidth - 16\n\t\t}px`;\n\t}\n\n\tprivate _checkSelectedItems() {\n\t\tif (!this._multiContainerRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst containerRect = this._multiContainerRef.getBoundingClientRect();\n\t\tconst items = Array.from(\n\t\t\tthis._multiContainerRef.querySelectorAll('.item')\n\t\t) as HTMLElement[];\n\n\t\tlet amountHidden = 0;\n\n\t\tfor (const child of items) {\n\t\t\tchild.classList.remove('hidden');\n\n\t\t\tconst childRect = child.getBoundingClientRect();\n\t\t\tif (childRect.right > containerRect.right) {\n\t\t\t\tchild.classList.add('hidden');\n\t\t\t\tamountHidden++;\n\t\t\t}\n\t\t}\n\n\t\tthis._amountHidden = amountHidden;\n\t\tconst extra = this._multiContainerRef.querySelector('.extra');\n\t\tif (!extra) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!extra.classList.contains('hidden')) {\n\t\t\textra.classList.add('hidden');\n\t\t}\n\n\t\tif (amountHidden > 0) {\n\t\t\textra.classList.remove('hidden');\n\t\t}\n\t}\n\n\tprivate _onDropdownOpen(ev) {\n\t\tif (!ev.detail || !this.autocompleteInputRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.autocompleteInputRef.focus();\n\t}\n\n\tprivate _selectAllChange() {\n\t\tthis._allSelected = !this._allSelected;\n\t\tthis.selectAllChange.emit(this._allSelected);\n\t}\n\n\tprivate _getDisplay(item, isSelection = false) {\n\t\tlet content = (\n\t\t\t<div class='text-container'>\n\t\t\t\t{\n\t\t\t\t\titem[\n\t\t\t\t\t\tisSelection\n\t\t\t\t\t\t\t? this.selectionDisplayKey ?? this.displayKey\n\t\t\t\t\t\t\t: this.displayKey\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t</div>\n\t\t);\n\n\t\tif (this.avatarKey) {\n\t\t\tcontent = (\n\t\t\t\t<span class='flex items-center gap-2'>\n\t\t\t\t\t<p-avatar\n\t\t\t\t\t\tsize='xsmall'\n\t\t\t\t\t\tsrc={item[this.avatarKey]}\n\t\t\t\t\t\tletters={item[this.avatarLettersKey]}\n\t\t\t\t\t></p-avatar>\n\t\t\t\t\t<div class='text-container'>\n\t\t\t\t\t\t{item[this.dropdownDisplayKey ?? this.displayKey]}\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t);\n\t\t}\n\n\t\tif (this.iconKey && (!isSelection || this.showIconInSelectedItem)) {\n\t\t\tcontent = (\n\t\t\t\t<span class='flex items-center gap-2'>\n\t\t\t\t\t<p-icon variant={item[this.iconKey] as IconVariant} />\n\t\t\t\t\t<div class='text-container'>\n\t\t\t\t\t\t{item[this.dropdownDisplayKey ?? this.displayKey]}\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={\n\t\t\t\t\t!isSelection || this.applyClassOnSelectedItem\n\t\t\t\t\t\t? `max-w-full ${item?.class}`\n\t\t\t\t\t\t: 'max-w-full'\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{content}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _getParsedItems(applyPagination = true) {\n\t\tif (!this.items || this.loading) {\n\t\t\treturn [];\n\t\t}\n\n\t\tlet items =\n\t\t\ttypeof this.items === 'string' ? JSON.parse(this.items) : this.items;\n\n\t\tif (typeof items?.[0] === 'string') {\n\t\t\tthis.displayKey = 'text';\n\t\t\tthis.valueKey = 'value';\n\n\t\t\titems = items.map(str => ({\n\t\t\t\tvalue: str,\n\t\t\t\ttext: str,\n\t\t\t}));\n\t\t}\n\n\t\tif (this.query?.length && !this.asyncFilter) {\n\t\t\titems = items.filter(item => {\n\t\t\t\tif (this.queryKey) {\n\t\t\t\t\treturn this._checkvalue(this.queryKey, item);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\tthis._checkvalue(this._identifierKey, item) ||\n\t\t\t\t\tthis._checkvalue(this.displayKey, item)\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\n\t\tif (!applyPagination) {\n\t\t\treturn items;\n\t\t}\n\n\t\treturn items?.slice(0, this.maxDisplayedItems);\n\t}\n}\n"],"mappings":"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"}

package/dist/paperless/p-a689640d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,H as e,g as s}from"./p-0c2cc6c4.js";const o=".flex{display:flex!important}.h-auto{height:auto!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}*{box-sizing:border-box}:host{display:flex}:host([direction=horizontal]){align-items:flex-end;height:auto}:host([direction=vertical]){align-items:flex-start;flex-direction:column;flex-wrap:wrap;min-height:100%;width:100%}:host([direction=vertical][content-position=start]){align-items:flex-end}.static{position:static!important}";const n=class{constructor(i){t(this,i);this._generateStepsOnce=()=>{if(this._generateTimeout){clearTimeout(this._generateTimeout);this._generateTimeout=null}this._generateTimeout=setTimeout((()=>this._generateSteps()),50)};this._generateSteps=async()=>{if(!this._el){return}let t=this.activeStep-1||0;const i=this._el.querySelectorAll("p-stepper-item");let e=false;for(let s=0;s<(i===null||i===void 0?void 0:i.length);s++){const o=i.item(s);if(this.enableAutoStatus){o.active=s===t;o.finished=s<t}if(!this.activeStep||t<0){if(o.active){t=s}if(t<0&&o.finished){t=s+1}}if(o.direction!==this.direction&&!e){e=true}o.direction=this.direction;o.align=this.direction==="vertical"?"start":s===0?"start":s===(i===null||i===void 0?void 0:i.length)-1?"end":"center";o.contentPosition=this.contentPosition}if(e){await new Promise((t=>setTimeout(t,200)))}for(let e=0;e<(i===null||i===void 0?void 0:i.length);e++){const s=i.item(e);if(e<i.length-1){let i=s.nextElementSibling;if(i&&i.tagName.toLowerCase()==="p-stepper-item"){const o=document.createElement("p-stepper-line");this._el.insertBefore(o,i);this._setStepperLineData(o,s,i,e,t);const n=o.previousElementSibling;if(n&&n.tagName.toLowerCase()==="p-stepper-line"){n.remove()}continue}if(i&&i.tagName.toLowerCase()==="p-stepper-line"){const o=i;i=i.nextElementSibling;if(i&&i.tagName.toLowerCase()==="p-stepper-item"){this._setStepperLineData(o,s,i,e,t)}}}if(e>0){const t=s.previousElementSibling;if(t&&t.tagName.toLowerCase()==="p-stepper-line"){t.direction=this.direction;t.active=s.active||s.finished}}}const s=this._el.querySelectorAll("p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child");for(let t=s.length-1;t>=0;t--){const i=s.item(t);i.remove()}};this._setStepperLineData=(t,i,e,s,o)=>{const n=i.clientHeight/2;const r=e.clientHeight/2;t.direction=this.direction;t.active=s<o;if(n>0&&this.direction==="vertical"){t.style.marginTop=`-${n/16}rem`;t.style.marginBottom=`-${r/16}rem`;t.style.minHeight=`calc(1rem + ${(n+r)/16}rem)`}};this.activeStep=1;this.enableAutoStatus=true;this.direction="horizontal";this.contentPosition="end"}componentDidLoad(){this._resizeObserver=new ResizeObserver((()=>this._generateStepsOnce()));this._resizeObserver.observe(this._el)}disconnectCallback(){if(this._resizeObserver){this._resizeObserver.disconnect()}}render(){return i(e,{class:"p-stepper"},i("slot",{onSlotchange:()=>this._generateStepsOnce()}))}_onActiveStepChange(){this._generateStepsOnce()}get _el(){return s(this)}static get watchers(){return{activeStep:["_onActiveStepChange"]}}};n.style=o;export{n as p_stepper};
-//# sourceMappingURL=p-a689640d.entry.js.map

package/dist/paperless/p-a689640d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stepperComponentCss","Stepper","this","_generateStepsOnce","_generateTimeout","clearTimeout","setTimeout","_generateSteps","async","_el","activeStep","items","querySelectorAll","directionChanged","i","length","item","enableAutoStatus","active","finished","direction","align","contentPosition","Promise","resolve","nextItem","nextElementSibling","tagName","toLowerCase","stepperLine","document","createElement","insertBefore","_setStepperLineData","previous","previousElementSibling","remove","previousItem","lines","j","line","heightDiff","clientHeight","heightDiffNext","style","marginTop","marginBottom","minHeight","componentDidLoad","_resizeObserver","ResizeObserver","observe","disconnectCallback","disconnect","render","h","Host","class","onSlotchange","_onActiveStepChange"],"sources":["src/components/molecules/stepper/stepper.component.scss?tag=p-stepper&encapsulation=shadow","src/components/molecules/stepper/stepper.component.tsx"],"sourcesContent":[":host {\n\t@apply flex;\n}\n\n:host([direction='horizontal']) {\n\t@apply h-auto items-end;\n}\n\n:host([direction='vertical']) {\n\t@apply flex-col flex-wrap items-start;\n\t@apply w-full min-h-full;\n}\n\n:host([direction='vertical'][content-position='start']) {\n\t@apply items-end;\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\n@Component({\n\ttag: 'p-stepper',\n\tstyleUrl: 'stepper.component.scss',\n\tshadow: true,\n})\nexport class Stepper {\n\t/**\n\t * The currently active step\n\t */\n\t@Prop() activeStep: number = 1;\n\n\t/**\n\t * Wether to automatically apply active & finished to items\n\t */\n\t@Prop() enableAutoStatus: boolean = true;\n\n\t/**\n\t * The direction of the stepper\n\t */\n\t@Prop({ reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';\n\n\t/**\n\t * The position of the content in case of vertical direction\n\t */\n\t@Prop({ reflect: true }) contentPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _generateTimeout: NodeJS.Timer;\n\tprivate _resizeObserver: ResizeObserver;\n\n\tprivate _generateStepsOnce = () => {\n\t\tif (this._generateTimeout) {\n\t\t\tclearTimeout(this._generateTimeout);\n\t\t\tthis._generateTimeout = null;\n\t\t}\n\n\t\tthis._generateTimeout = setTimeout(() => this._generateSteps(), 50);\n\t};\n\n\tprivate _generateSteps = async () => {\n\t\tif (!this._el) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet activeStep = this.activeStep - 1 || 0;\n\t\tconst items = this._el.querySelectorAll('p-stepper-item');\n\n\t\tlet directionChanged = false;\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\tif (this.enableAutoStatus) {\n\t\t\t\titem.active = i === activeStep;\n\t\t\t\titem.finished = i < activeStep;\n\t\t\t}\n\n\t\t\tif (!this.activeStep || activeStep < 0) {\n\t\t\t\tif (item.active) {\n\t\t\t\t\tactiveStep = i;\n\t\t\t\t}\n\n\t\t\t\tif (activeStep < 0 && item.finished) {\n\t\t\t\t\tactiveStep = i + 1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (item.direction !== this.direction && !directionChanged) {\n\t\t\t\tdirectionChanged = true;\n\t\t\t}\n\n\t\t\titem.direction = this.direction;\n\t\t\titem.align =\n\t\t\t\tthis.direction === 'vertical'\n\t\t\t\t\t? 'start'\n\t\t\t\t\t: i === 0\n\t\t\t\t\t? 'start'\n\t\t\t\t\t: i === items?.length - 1\n\t\t\t\t\t? 'end'\n\t\t\t\t\t: 'center';\n\t\t\titem.contentPosition = this.contentPosition;\n\t\t}\n\n\t\tif (directionChanged) {\n\t\t\t// super hacky way to ensure all elements that have a direction changed are re-rendered\n\t\t\tawait new Promise(resolve => setTimeout(resolve, 200));\n\t\t}\n\n\t\tfor (let i = 0; i < items?.length; i++) {\n\t\t\tconst item = items.item(i) as any;\n\n\t\t\tif (i < items.length - 1) {\n\t\t\t\tlet nextItem = item.nextElementSibling;\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\tconst stepperLine = document.createElement('p-stepper-line');\n\t\t\t\t\tthis._el.insertBefore(stepperLine, nextItem);\n\t\t\t\t\tthis._setStepperLineData(stepperLine, item, nextItem, i, activeStep);\n\n\t\t\t\t\tconst previous = stepperLine.previousElementSibling;\n\t\t\t\t\tif (previous && previous.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\t\tprevious.remove();\n\t\t\t\t\t}\n\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-line') {\n\t\t\t\t\tconst stepperLine = nextItem;\n\t\t\t\t\tnextItem = nextItem.nextElementSibling;\n\n\t\t\t\t\tif (nextItem && nextItem.tagName.toLowerCase() === 'p-stepper-item') {\n\t\t\t\t\t\tthis._setStepperLineData(\n\t\t\t\t\t\t\tstepperLine,\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\tnextItem,\n\t\t\t\t\t\t\ti,\n\t\t\t\t\t\t\tactiveStep\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (i > 0) {\n\t\t\t\tconst previousItem = item.previousElementSibling;\n\t\t\t\tif (\n\t\t\t\t\tpreviousItem &&\n\t\t\t\t\tpreviousItem.tagName.toLowerCase() === 'p-stepper-line'\n\t\t\t\t) {\n\t\t\t\t\tpreviousItem.direction = this.direction;\n\t\t\t\t\tpreviousItem.active = item.active || item.finished;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst lines = this._el.querySelectorAll(\n\t\t\t'p-stepper-line:not(:has(+ p-stepper-item)), p-stepper-line:first-child'\n\t\t);\n\t\tfor (let j = lines.length - 1; j >= 0; j--) {\n\t\t\tconst line = lines.item(j);\n\t\t\tline.remove();\n\t\t}\n\t};\n\n\tprivate _setStepperLineData = (\n\t\tstepperLine: HTMLPStepperLineElement,\n\t\titem: HTMLPStepperItemElement,\n\t\tnextItem: HTMLPStepperItemElement,\n\t\ti: number,\n\t\tactiveStep: number\n\t) => {\n\t\tconst heightDiff = item.clientHeight / 2;\n\t\tconst heightDiffNext = nextItem.clientHeight / 2;\n\n\t\tstepperLine.direction = this.direction;\n\t\tstepperLine.active = i < activeStep;\n\n\t\tif (heightDiff > 0 && this.direction === 'vertical') {\n\t\t\tstepperLine.style.marginTop = `-${heightDiff / 16}rem`;\n\t\t\tstepperLine.style.marginBottom = `-${heightDiffNext / 16}rem`;\n\t\t\tstepperLine.style.minHeight = `calc(1rem + ${\n\t\t\t\t(heightDiff + heightDiffNext) / 16\n\t\t\t}rem)`;\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tthis._resizeObserver = new ResizeObserver(() => this._generateStepsOnce());\n\t\tthis._resizeObserver.observe(this._el);\n\t}\n\n\tdisconnectCallback() {\n\t\tif (this._resizeObserver) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-stepper'>\n\t\t\t\t<slot onSlotchange={() => this._generateStepsOnce()} />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Watch('activeStep')\n\tprotected _onActiveStepChange() {\n\t\tthis._generateStepsOnce();\n\t}\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,if,MCOfC,EAAO,M,yBA6BXC,KAAAC,mBAAqB,KAC5B,GAAID,KAAKE,iBAAkB,CAC1BC,aAAaH,KAAKE,kBAClBF,KAAKE,iBAAmB,I,CAGzBF,KAAKE,iBAAmBE,YAAW,IAAMJ,KAAKK,kBAAkB,GAAG,EAG5DL,KAAAK,eAAiBC,UACxB,IAAKN,KAAKO,IAAK,CACd,M,CAGD,IAAIC,EAAaR,KAAKQ,WAAa,GAAK,EACxC,MAAMC,EAAQT,KAAKO,IAAIG,iBAAiB,kBAExC,IAAIC,EAAmB,MACvB,IAAK,IAAIC,EAAI,EAAGA,GAAIH,IAAK,MAALA,SAAK,SAALA,EAAOI,QAAQD,IAAK,CACvC,MAAME,EAAOL,EAAMK,KAAKF,GAExB,GAAIZ,KAAKe,iBAAkB,CAC1BD,EAAKE,OAASJ,IAAMJ,EACpBM,EAAKG,SAAWL,EAAIJ,C,CAGrB,IAAKR,KAAKQ,YAAcA,EAAa,EAAG,CACvC,GAAIM,EAAKE,OAAQ,CAChBR,EAAaI,C,CAGd,GAAIJ,EAAa,GAAKM,EAAKG,SAAU,CACpCT,EAAaI,EAAI,C,EAInB,GAAIE,EAAKI,YAAclB,KAAKkB,YAAcP,EAAkB,CAC3DA,EAAmB,I,CAGpBG,EAAKI,UAAYlB,KAAKkB,UACtBJ,EAAKK,MACJnB,KAAKkB,YAAc,WAChB,QACAN,IAAM,EACN,QACAA,KAAMH,IAAK,MAALA,SAAK,SAALA,EAAOI,QAAS,EACtB,MACA,SACJC,EAAKM,gBAAkBpB,KAAKoB,e,CAG7B,GAAIT,EAAkB,OAEf,IAAIU,SAAQC,GAAWlB,WAAWkB,EAAS,M,CAGlD,IAAK,IAAIV,EAAI,EAAGA,GAAIH,IAAK,MAALA,SAAK,SAALA,EAAOI,QAAQD,IAAK,CACvC,MAAME,EAAOL,EAAMK,KAAKF,GAExB,GAAIA,EAAIH,EAAMI,OAAS,EAAG,CACzB,IAAIU,EAAWT,EAAKU,mBAEpB,GAAID,GAAYA,EAASE,QAAQC,gBAAkB,iBAAkB,CACpE,MAAMC,EAAcC,SAASC,cAAc,kBAC3C7B,KAAKO,IAAIuB,aAAaH,EAAaJ,GACnCvB,KAAK+B,oBAAoBJ,EAAab,EAAMS,EAAUX,EAAGJ,GAEzD,MAAMwB,EAAWL,EAAYM,uBAC7B,GAAID,GAAYA,EAASP,QAAQC,gBAAkB,iBAAkB,CACpEM,EAASE,Q,CAGV,Q,CAGD,GAAIX,GAAYA,EAASE,QAAQC,gBAAkB,iBAAkB,CACpE,MAAMC,EAAcJ,EACpBA,EAAWA,EAASC,mBAEpB,GAAID,GAAYA,EAASE,QAAQC,gBAAkB,iBAAkB,CACpE1B,KAAK+B,oBACJJ,EACAb,EACAS,EACAX,EACAJ,E,GAMJ,GAAII,EAAI,EAAG,CACV,MAAMuB,EAAerB,EAAKmB,uBAC1B,GACCE,GACAA,EAAaV,QAAQC,gBAAkB,iBACtC,CACDS,EAAajB,UAAYlB,KAAKkB,UAC9BiB,EAAanB,OAASF,EAAKE,QAAUF,EAAKG,Q,GAK7C,MAAMmB,EAAQpC,KAAKO,IAAIG,iBACtB,0EAED,IAAK,IAAI2B,EAAID,EAAMvB,OAAS,EAAGwB,GAAK,EAAGA,IAAK,CAC3C,MAAMC,EAAOF,EAAMtB,KAAKuB,GACxBC,EAAKJ,Q,GAIClC,KAAA+B,oBAAsB,CAC7BJ,EACAb,EACAS,EACAX,EACAJ,KAEA,MAAM+B,EAAazB,EAAK0B,aAAe,EACvC,MAAMC,EAAiBlB,EAASiB,aAAe,EAE/Cb,EAAYT,UAAYlB,KAAKkB,UAC7BS,EAAYX,OAASJ,EAAIJ,EAEzB,GAAI+B,EAAa,GAAKvC,KAAKkB,YAAc,WAAY,CACpDS,EAAYe,MAAMC,UAAY,IAAIJ,EAAa,QAC/CZ,EAAYe,MAAME,aAAe,IAAIH,EAAiB,QACtDd,EAAYe,MAAMG,UAAY,gBAC5BN,EAAaE,GAAkB,Q,mBA3JN,E,sBAKO,K,eAK4B,a,qBAKJ,K,CAiJ5D,gBAAAK,GACC9C,KAAK+C,gBAAkB,IAAIC,gBAAe,IAAMhD,KAAKC,uBACrDD,KAAK+C,gBAAgBE,QAAQjD,KAAKO,I,CAGnC,kBAAA2C,GACC,GAAIlD,KAAK+C,gBAAiB,CACzB/C,KAAK+C,gBAAgBI,Y,EAIvB,MAAAC,GACC,OACCC,EAACC,EAAI,CAACC,MAAM,aACXF,EAAA,QAAMG,aAAc,IAAMxD,KAAKC,uB,CAMxB,mBAAAwD,GACTzD,KAAKC,oB"}