@paperless/core 1.20.2 → 1.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/build/p-8710c681.entry.js +2 -0
  3. package/dist/build/p-8710c681.entry.js.map +1 -0
  4. package/dist/build/paperless.esm.js +1 -1
  5. package/dist/build/paperless.esm.js.map +1 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/cjs/p-select.cjs.entry.js +49 -54
  8. package/dist/cjs/p-select.cjs.entry.js.map +1 -1
  9. package/dist/cjs/paperless.cjs.js +1 -1
  10. package/dist/collection/components/molecules/select/select.component.css +1 -1
  11. package/dist/collection/components/molecules/select/select.component.js +136 -67
  12. package/dist/collection/components/molecules/select/select.component.js.map +1 -1
  13. package/dist/components/p-select.js +54 -56
  14. package/dist/components/p-select.js.map +1 -1
  15. package/dist/esm/loader.js +1 -1
  16. package/dist/esm/p-select.entry.js +49 -54
  17. package/dist/esm/p-select.entry.js.map +1 -1
  18. package/dist/esm/paperless.js +1 -1
  19. package/dist/index.html +1 -1
  20. package/dist/paperless/p-8710c681.entry.js +2 -0
  21. package/dist/paperless/p-8710c681.entry.js.map +1 -0
  22. package/dist/paperless/paperless.esm.js +1 -1
  23. package/dist/paperless/paperless.esm.js.map +1 -1
  24. package/dist/sw.js +1 -1
  25. package/dist/sw.js.map +1 -1
  26. package/dist/types/components/molecules/select/select.component.d.ts +26 -8
  27. package/dist/types/components.d.ts +38 -10
  28. package/hydrate/index.js +54 -56
  29. package/package.json +1 -1
  30. package/dist/build/p-33831081.entry.js +0 -2
  31. package/dist/build/p-33831081.entry.js.map +0 -1
  32. package/dist/paperless/p-33831081.entry.js +0 -2
  33. package/dist/paperless/p-33831081.entry.js.map +0 -1
@@ -22,7 +22,7 @@ export declare class Select {
22
22
  */
23
23
  placeholder: string;
24
24
  /**
25
- * The placeholder of the input when auto completing
25
+ * The placeholder of the input used for auto complete
26
26
  */
27
27
  autocompletePlaceholder: string;
28
28
  /**
@@ -77,10 +77,6 @@ export declare class Select {
77
77
  * Wether to enable autocomplete
78
78
  */
79
79
  enableAutocomplete: boolean;
80
- /**
81
- * Wether to keep the query or not
82
- */
83
- keepQuery: boolean;
84
80
  /**
85
81
  * Wether the input uses async filtering
86
82
  */
@@ -89,6 +85,18 @@ export declare class Select {
89
85
  * Wether to show loading items
90
86
  */
91
87
  loading: boolean;
88
+ /**
89
+ * Wether to show the select all item with multi select
90
+ */
91
+ enableSelectAll: boolean;
92
+ /**
93
+ * The text of the select all item
94
+ */
95
+ selectAllText: string;
96
+ /**
97
+ * The icon to prefix for select all
98
+ */
99
+ selectAllIcon: IconVariant | undefined;
92
100
  /**
93
101
  * Event when the query of the autocomplete changes
94
102
  */
@@ -97,6 +105,10 @@ export declare class Select {
97
105
  * Event when the value changes
98
106
  */
99
107
  valueChange: EventEmitter<any>;
108
+ /**
109
+ * Event when the select all item has been selected or not
110
+ */
111
+ selectAllChange: EventEmitter<any>;
100
112
  /**
101
113
  * Event when the dropdown shows
102
114
  */
@@ -141,21 +153,25 @@ export declare class Select {
141
153
  * Event when the add item is clicked
142
154
  */
143
155
  add: EventEmitter;
156
+ /**
157
+ * The text to show when items is empty
158
+ */
159
+ emptyStateText: string;
144
160
  /**
145
161
  * The host element
146
162
  */
147
163
  private _el;
148
164
  private _showDropdown;
149
165
  private _selectedItem;
150
- private _isAutoCompleting;
166
+ private _allSelected;
151
167
  private _amountHidden;
152
168
  private _inputRef;
169
+ private autocompleteInputRef;
153
170
  private _multiContainerRef;
154
171
  private _resizeObserver;
155
172
  private _resizeDebounceTimer;
156
173
  get _items(): any;
157
174
  get _displayValue(): any;
158
- get _placeholder(): string;
159
175
  get _identifierKey(): string;
160
176
  componentDidLoad(): void;
161
177
  componentDidRender(): void;
@@ -173,11 +189,13 @@ export declare class Select {
173
189
  private _onMouseDown;
174
190
  private _onClick;
175
191
  private _onBlur;
176
- private _onChange;
192
+ private _onAutoComplete;
177
193
  private _checkvalue;
178
194
  private _getItems;
179
195
  private _getAddItem;
180
196
  private _getLoadingItems;
181
197
  private _setMultiContainerMaxWidth;
182
198
  private _checkSelectedItems;
199
+ private _onDropdownOpen;
200
+ private _selectAllChange;
183
201
  }
@@ -901,7 +901,7 @@ export namespace Components {
901
901
  */
902
902
  "autoSelectFirst": boolean;
903
903
  /**
904
- * The placeholder of the input when auto completing
904
+ * The placeholder of the input used for auto complete
905
905
  */
906
906
  "autocompletePlaceholder": string;
907
907
  /**
@@ -924,10 +924,18 @@ export namespace Components {
924
924
  * The key of the object to display in the dropdown (overwrites displayKey)
925
925
  */
926
926
  "dropdownDisplayKey": string | undefined;
927
+ /**
928
+ * The text to show when items is empty
929
+ */
930
+ "emptyStateText": string;
927
931
  /**
928
932
  * Wether to enable autocomplete
929
933
  */
930
934
  "enableAutocomplete": boolean;
935
+ /**
936
+ * Wether to show the select all item with multi select
937
+ */
938
+ "enableSelectAll": boolean;
931
939
  /**
932
940
  * The helper of the input group used by the select
933
941
  */
@@ -948,10 +956,6 @@ export namespace Components {
948
956
  * The items to show in the dropdown
949
957
  */
950
958
  "items": string | any[];
951
- /**
952
- * Wether to keep the query or not
953
- */
954
- "keepQuery": boolean;
955
959
  /**
956
960
  * The label of the input group used by the select
957
961
  */
@@ -988,6 +992,14 @@ export namespace Components {
988
992
  * Wether the field is required
989
993
  */
990
994
  "required": boolean;
995
+ /**
996
+ * The icon to prefix for select all
997
+ */
998
+ "selectAllIcon": IconVariant | undefined;
999
+ /**
1000
+ * The text of the select all item
1001
+ */
1002
+ "selectAllText": string;
991
1003
  /**
992
1004
  * The key of the object to display in the input (overwrites displayKey)
993
1005
  */
@@ -2968,7 +2980,7 @@ declare namespace LocalJSX {
2968
2980
  */
2969
2981
  "autoSelectFirst"?: boolean;
2970
2982
  /**
2971
- * The placeholder of the input when auto completing
2983
+ * The placeholder of the input used for auto complete
2972
2984
  */
2973
2985
  "autocompletePlaceholder"?: string;
2974
2986
  /**
@@ -2991,10 +3003,18 @@ declare namespace LocalJSX {
2991
3003
  * The key of the object to display in the dropdown (overwrites displayKey)
2992
3004
  */
2993
3005
  "dropdownDisplayKey"?: string | undefined;
3006
+ /**
3007
+ * The text to show when items is empty
3008
+ */
3009
+ "emptyStateText"?: string;
2994
3010
  /**
2995
3011
  * Wether to enable autocomplete
2996
3012
  */
2997
3013
  "enableAutocomplete"?: boolean;
3014
+ /**
3015
+ * Wether to show the select all item with multi select
3016
+ */
3017
+ "enableSelectAll"?: boolean;
2998
3018
  /**
2999
3019
  * The helper of the input group used by the select
3000
3020
  */
@@ -3015,10 +3035,6 @@ declare namespace LocalJSX {
3015
3035
  * The items to show in the dropdown
3016
3036
  */
3017
3037
  "items"?: string | any[];
3018
- /**
3019
- * Wether to keep the query or not
3020
- */
3021
- "keepQuery"?: boolean;
3022
3038
  /**
3023
3039
  * The label of the input group used by the select
3024
3040
  */
@@ -3047,6 +3063,10 @@ declare namespace LocalJSX {
3047
3063
  * Event when the query of the autocomplete changes
3048
3064
  */
3049
3065
  "onQueryChange"?: (event: PSelectCustomEvent<string>) => void;
3066
+ /**
3067
+ * Event when the select all item has been selected or not
3068
+ */
3069
+ "onSelectAllChange"?: (event: PSelectCustomEvent<any>) => void;
3050
3070
  /**
3051
3071
  * Event when the value changes
3052
3072
  */
@@ -3071,6 +3091,14 @@ declare namespace LocalJSX {
3071
3091
  * Wether the field is required
3072
3092
  */
3073
3093
  "required"?: boolean;
3094
+ /**
3095
+ * The icon to prefix for select all
3096
+ */
3097
+ "selectAllIcon"?: IconVariant | undefined;
3098
+ /**
3099
+ * The text of the select all item
3100
+ */
3101
+ "selectAllText"?: string;
3074
3102
  /**
3075
3103
  * The key of the object to display in the input (overwrites displayKey)
3076
3104
  */
package/hydrate/index.js CHANGED
@@ -20856,13 +20856,14 @@ class SegmentItem {
20856
20856
  }; }
20857
20857
  }
20858
20858
 
20859
- const selectComponentCss = ".pointer-events-none{pointer-events:none!important}.pointer-events-auto{pointer-events:auto!important}.absolute{position:absolute!important}.relative{position:relative!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.flex{display:flex!important}.h-10{height:2.5rem!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}.rounded{border-radius:.25rem!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 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}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.py-4{padding-bottom:1rem!important;padding-top:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo-dark{--tw-text-opacity:1!important;color:rgb(44 75 169/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;position:relative;width:100%}p-select input.read-only{text-overflow:ellipsis}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}.hidden{display:none!important}.h-6{height:1.5rem!important}.gap-1{gap:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
20859
+ const selectComponentCss = ".pointer-events-none{pointer-events:none!important}.pointer-events-auto{pointer-events:auto!important}.absolute{position:absolute!important}.relative{position:relative!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.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}.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}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.py-4{padding-bottom:1rem!important;padding-top:1rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo-dark{--tw-text-opacity:1!important;color:rgb(44 75 169/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!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;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;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 .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}.justify-center{justify-content:center!important}.gap-1{gap:.25rem!important}.p-2{padding:.5rem!important}.pb-1{padding-bottom:.25rem!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}.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}";
20860
20860
 
20861
20861
  class Select {
20862
20862
  constructor(hostRef) {
20863
20863
  registerInstance(this, hostRef);
20864
20864
  this.queryChange = createEvent(this, "queryChange", 3);
20865
20865
  this.valueChange = createEvent(this, "valueChange", 3);
20866
+ this.selectAllChange = createEvent(this, "selectAllChange", 3);
20866
20867
  this.dropdownShown = createEvent(this, "dropdownShown", 3);
20867
20868
  this.add = createEvent(this, "add", 3);
20868
20869
  this.items = undefined;
@@ -20870,7 +20871,7 @@ class Select {
20870
20871
  this.icon = undefined;
20871
20872
  this.query = undefined;
20872
20873
  this.placeholder = undefined;
20873
- this.autocompletePlaceholder = undefined;
20874
+ this.autocompletePlaceholder = 'Search...';
20874
20875
  this.value = undefined;
20875
20876
  this.displayKey = 'text';
20876
20877
  this.dropdownDisplayKey = undefined;
@@ -20884,9 +20885,11 @@ class Select {
20884
20885
  this.showChevron = true;
20885
20886
  this.maxDisplayedItems = 10;
20886
20887
  this.enableAutocomplete = true;
20887
- this.keepQuery = true;
20888
20888
  this.asyncFilter = false;
20889
20889
  this.loading = false;
20890
+ this.enableSelectAll = false;
20891
+ this.selectAllText = 'Select all';
20892
+ this.selectAllIcon = undefined;
20890
20893
  this.size = 'medium';
20891
20894
  this.prefix = undefined;
20892
20895
  this.label = undefined;
@@ -20896,13 +20899,14 @@ class Select {
20896
20899
  this.disabled = false;
20897
20900
  this.showAddItem = false;
20898
20901
  this.addItemText = 'Add item';
20902
+ this.emptyStateText = 'No items available';
20899
20903
  this._showDropdown = false;
20900
20904
  this._selectedItem = null;
20901
- this._isAutoCompleting = false;
20905
+ this._allSelected = false;
20902
20906
  this._amountHidden = 0;
20903
20907
  }
20904
20908
  get _items() {
20905
- var _a, _b;
20909
+ var _a;
20906
20910
  if (!this.items || this.loading) {
20907
20911
  return [];
20908
20912
  }
@@ -20917,10 +20921,7 @@ class Select {
20917
20921
  text: str,
20918
20922
  }));
20919
20923
  }
20920
- if (this._isAutoCompleting &&
20921
- ((_a = this.query) === null || _a === void 0 ? void 0 : _a.length) &&
20922
- this.query !== ((_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b[this.displayKey]) &&
20923
- !this.asyncFilter) {
20924
+ if (((_a = this.query) === null || _a === void 0 ? void 0 : _a.length) && !this.asyncFilter) {
20924
20925
  items = items.filter((item) => {
20925
20926
  if (this.queryKey) {
20926
20927
  return this._checkvalue(this.queryKey, item);
@@ -20933,9 +20934,6 @@ class Select {
20933
20934
  }
20934
20935
  get _displayValue() {
20935
20936
  var _a, _b, _c, _d;
20936
- if (this._isAutoCompleting) {
20937
- return this.query;
20938
- }
20939
20937
  if (this.multi) {
20940
20938
  if (!((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.length)) {
20941
20939
  return [];
@@ -20944,12 +20942,6 @@ class Select {
20944
20942
  }
20945
20943
  return (_c = this._selectedItem) === null || _c === void 0 ? void 0 : _c[(_d = this.selectionDisplayKey) !== null && _d !== void 0 ? _d : this.displayKey];
20946
20944
  }
20947
- get _placeholder() {
20948
- var _a;
20949
- return this._isAutoCompleting && ((_a = this.autocompletePlaceholder) === null || _a === void 0 ? void 0 : _a.length)
20950
- ? this.autocompletePlaceholder
20951
- : this.placeholder;
20952
- }
20953
20945
  get _identifierKey() {
20954
20946
  var _a, _b;
20955
20947
  return (_b = (_a = this.identifierKey) !== null && _a !== void 0 ? _a : this.valueKey) !== null && _b !== void 0 ? _b : 'value';
@@ -20959,7 +20951,6 @@ class Select {
20959
20951
  throw new Error('You must provide a valueKey or identifierKey');
20960
20952
  }
20961
20953
  if (this.multi) {
20962
- this.enableAutocomplete = false;
20963
20954
  this._setMultiContainerMaxWidth();
20964
20955
  this._resizeObserver = new ResizeObserver(() => {
20965
20956
  if (this._resizeDebounceTimer) {
@@ -20992,10 +20983,9 @@ class Select {
20992
20983
  }
20993
20984
  render() {
20994
20985
  var _a, _b;
20995
- return (hAsync(Host, { class: "p-select" }, hAsync("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: true, show: this._showDropdown &&
20996
- (!!this._items.length || this.loading) }, 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, focusMethod: this.enableAutocomplete ? 'focus' : 'click' }, hAsync("input", { slot: "input", type: "text", placeholder: this._placeholder, value: this.multi && ((_a = this._displayValue) === null || _a === void 0 ? void 0 : _a.length)
20986
+ return (hAsync(Host, { class: "p-select" }, hAsync("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: 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, focusMethod: "click" }, hAsync("input", { slot: "input", type: "text", placeholder: this.placeholder, value: this.multi && ((_a = this._displayValue) === null || _a === void 0 ? void 0 : _a.length)
20997
20987
  ? ' '
20998
- : this._displayValue, class: `p-input cursor-pointer ${!this._isAutoCompleting && 'read-only'}`, onFocus: (ev) => this._onFocus(ev), onMouseDown: (ev) => this._onMouseDown(ev), onClick: () => this._onClick(), onInput: (ev) => this._onChange(ev), ref: (ref) => (this._inputRef = ref) }), this.showChevron && (hAsync("p-icon", { variant: "chevron", slot: "suffix" }))), hAsync("div", { slot: "items" }, this.loading
20988
+ : this._displayValue, class: "p-input cursor-pointer read-only", onFocus: (ev) => this._onFocus(ev), onMouseDown: (ev) => this._onMouseDown(ev), onClick: () => this._onClick(), ref: (ref) => (this._inputRef = ref) }), this.showChevron && (hAsync("p-icon", { variant: "chevron", slot: "suffix" }))), hAsync("div", { slot: "items" }, this.loading
20999
20989
  ? this._getLoadingItems()
21000
20990
  : this._getItems(), this.showAddItem && this._getAddItem())), this.multi && ((_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b.length) > 0 && (hAsync("div", { class: `multi-container size-${this.size}`, ref: (ref) => (this._multiContainerRef = ref) }, this._selectedItem.map((item) => {
21001
20991
  var _a;
@@ -21007,7 +20997,6 @@ class Select {
21007
20997
  return;
21008
20998
  }
21009
20999
  this._showDropdown = false;
21010
- this._isAutoCompleting = false;
21011
21000
  }
21012
21001
  _valueChange() {
21013
21002
  this._preselectItem();
@@ -21022,10 +21011,7 @@ class Select {
21022
21011
  });
21023
21012
  }
21024
21013
  _preselectItem() {
21025
- var _a, _b, _c;
21026
- if (this._isAutoCompleting && ((_a = this.query) === null || _a === void 0 ? void 0 : _a.length)) {
21027
- return;
21028
- }
21014
+ var _a, _b;
21029
21015
  let value = typeof this.value === 'string' && this.multi
21030
21016
  ? JSON.parse(this.value)
21031
21017
  : this.value;
@@ -21055,7 +21041,7 @@ class Select {
21055
21041
  ? identifier
21056
21042
  : JSON.stringify(identifier);
21057
21043
  const currentValue = this._selectedItem
21058
- ? (_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b[this._identifierKey]
21044
+ ? (_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a[this._identifierKey]
21059
21045
  : null;
21060
21046
  const currentParsedValue = typeof currentValue === 'string' || typeof currentValue === 'number'
21061
21047
  ? currentValue
@@ -21063,7 +21049,7 @@ class Select {
21063
21049
  if (this._selectedItem && currentParsedValue === parsedValue) {
21064
21050
  return;
21065
21051
  }
21066
- if (!((_c = this._items) === null || _c === void 0 ? void 0 : _c.length) && value) {
21052
+ if (!((_b = this._items) === null || _b === void 0 ? void 0 : _b.length) && value) {
21067
21053
  this._selectValue(value);
21068
21054
  return;
21069
21055
  }
@@ -21081,7 +21067,6 @@ class Select {
21081
21067
  let value = !!this.valueKey && this.valueKey !== 'false' && item !== null
21082
21068
  ? item === null || item === void 0 ? void 0 : item[this.valueKey]
21083
21069
  : item;
21084
- this.query = this.keepQuery ? item === null || item === void 0 ? void 0 : item[this.displayKey] : null;
21085
21070
  if (this.multi) {
21086
21071
  if (!this._selectedItem || !Array.isArray(this._selectedItem)) {
21087
21072
  this._selectedItem = [];
@@ -21103,27 +21088,20 @@ class Select {
21103
21088
  this._selectedItem = selectedItem;
21104
21089
  this.value = valueArray;
21105
21090
  this.valueChange.emit(valueArray);
21091
+ return;
21106
21092
  }
21107
- else {
21108
- this._selectedItem = item;
21109
- this.value = value;
21110
- this.valueChange.emit(value);
21111
- }
21112
- if (!this.multi) {
21113
- this._onBlur(true);
21114
- }
21093
+ this._selectedItem = item;
21094
+ this.value = value;
21095
+ this.valueChange.emit(value);
21096
+ this._onBlur(true);
21115
21097
  }
21116
21098
  _onFocus(ev) {
21117
- if (!this.enableAutocomplete) {
21118
- ev.preventDefault();
21119
- ev.stopPropogation();
21120
- if (!this._showDropdown) {
21121
- this._showDropdown = true;
21122
- }
21123
- return;
21099
+ ev.preventDefault();
21100
+ this._inputRef.blur();
21101
+ if (!this._showDropdown) {
21102
+ this._showDropdown = true;
21124
21103
  }
21125
- this._showDropdown = true;
21126
- this._isAutoCompleting = true;
21104
+ return;
21127
21105
  }
21128
21106
  _onMouseDown(ev) {
21129
21107
  if (this.enableAutocomplete) {
@@ -21141,17 +21119,13 @@ class Select {
21141
21119
  if (!this.enableAutocomplete && !force) {
21142
21120
  return;
21143
21121
  }
21144
- this._isAutoCompleting = false;
21145
21122
  this._showDropdown = false;
21146
21123
  }
21147
- _onChange(ev) {
21124
+ _onAutoComplete(ev) {
21148
21125
  if (!this.enableAutocomplete) {
21149
21126
  return;
21150
21127
  }
21151
- if (!this._isAutoCompleting) {
21152
- this._isAutoCompleting = true;
21153
- this._showDropdown = true;
21154
- }
21128
+ this._showDropdown = true;
21155
21129
  this.query = ev.target.value;
21156
21130
  this.queryChange.emit(ev.target.value);
21157
21131
  }
@@ -21160,7 +21134,11 @@ class Select {
21160
21134
  return (((_b = (_a = item === null || item === void 0 ? void 0 : item[key]) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.toLowerCase().indexOf((_c = this.query) === null || _c === void 0 ? void 0 : _c.toLowerCase())) >= 0);
21161
21135
  }
21162
21136
  _getItems() {
21163
- return this._items.map((item) => {
21137
+ var _a, _b;
21138
+ if (!this._items.length && !((_a = this.query) === null || _a === void 0 ? void 0 : _a.length)) {
21139
+ return (hAsync("p", { class: "w-full p-2 text-storm-medium text-sm text-center" }, this.emptyStateText));
21140
+ }
21141
+ const items = this._items.map((item) => {
21164
21142
  var _a, _b, _c;
21165
21143
  return (hAsync("p-dropdown-menu-item", { onClick: () => this._selectValue(item), active: this.multi
21166
21144
  ? ((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.findIndex((i) => i[this._identifierKey] ===
@@ -21168,6 +21146,13 @@ class Select {
21168
21146
  : item[this._identifierKey] ===
21169
21147
  ((_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b[this._identifierKey]), variant: this.multi ? 'checkbox' : 'default' }, this.avatarKey ? (hAsync("span", { class: "flex items-center gap-2" }, hAsync("p-avatar", { size: "xsmall", src: item[this.avatarKey], letters: item[this.avatarLettersKey] }), item[(_c = this.dropdownDisplayKey) !== null && _c !== void 0 ? _c : this.displayKey])) : (item[this.displayKey])));
21170
21148
  });
21149
+ if (this.enableSelectAll) {
21150
+ items.unshift(hAsync("p-dropdown-menu-item", { variant: "checkbox", onClick: () => this._selectAllChange(), active: this._allSelected }, ((_b = this.selectAllIcon) === null || _b === void 0 ? void 0 : _b.length) ? (hAsync("span", { class: "flex items-center gap-2" }, hAsync("div", { class: "w-6 justify-center flex text-lg" }, hAsync("p-icon", { variant: this.selectAllIcon })), this.selectAllText)) : (this.selectAllText)));
21151
+ }
21152
+ if (this.enableAutocomplete) {
21153
+ items.unshift(hAsync("div", { class: "bg-white sticky top-0 pt-2 pb-1 -mt-2" }, hAsync("input", { class: "p-input size-small mb-2 sticky top-2", placeholder: this.autocompletePlaceholder, onInput: (ev) => this._onAutoComplete(ev), ref: (ref) => (this.autocompleteInputRef = ref) })));
21154
+ }
21155
+ return items;
21171
21156
  }
21172
21157
  _getAddItem() {
21173
21158
  return (hAsync("p-dropdown-menu-item", { onClick: () => this.add.emit() }, hAsync("span", { class: "text-indigo font-semibold flex gap-1 items-center" }, this.addItemText, hAsync("p-icon", { variant: "plus" }))));
@@ -21208,6 +21193,16 @@ class Select {
21208
21193
  extra.classList.remove('hidden');
21209
21194
  }
21210
21195
  }
21196
+ _onDropdownOpen(ev) {
21197
+ if (!ev.detail || !this.autocompleteInputRef) {
21198
+ return;
21199
+ }
21200
+ this.autocompleteInputRef.focus();
21201
+ }
21202
+ _selectAllChange() {
21203
+ this._allSelected = !this._allSelected;
21204
+ this.selectAllChange.emit(this._allSelected);
21205
+ }
21211
21206
  get _el() { return getElement(this); }
21212
21207
  static get watchers() { return {
21213
21208
  "value": ["_valueChange"],
@@ -21238,9 +21233,11 @@ class Select {
21238
21233
  "showChevron": [4, "show-chevron"],
21239
21234
  "maxDisplayedItems": [2, "max-displayed-items"],
21240
21235
  "enableAutocomplete": [4, "enable-autocomplete"],
21241
- "keepQuery": [4, "keep-query"],
21242
21236
  "asyncFilter": [4, "async-filter"],
21243
21237
  "loading": [4],
21238
+ "enableSelectAll": [4, "enable-select-all"],
21239
+ "selectAllText": [1, "select-all-text"],
21240
+ "selectAllIcon": [1, "select-all-icon"],
21244
21241
  "size": [1],
21245
21242
  "prefix": [1],
21246
21243
  "label": [1],
@@ -21250,9 +21247,10 @@ class Select {
21250
21247
  "disabled": [516],
21251
21248
  "showAddItem": [4, "show-add-item"],
21252
21249
  "addItemText": [1, "add-item-text"],
21250
+ "emptyStateText": [1, "empty-state-text"],
21253
21251
  "_showDropdown": [32],
21254
21252
  "_selectedItem": [32],
21255
- "_isAutoCompleting": [32],
21253
+ "_allSelected": [32],
21256
21254
  "_amountHidden": [32]
21257
21255
  },
21258
21256
  "$listeners$": [[6, "click", "documentClickHandler"]],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paperless/core",
3
- "version": "1.20.2",
3
+ "version": "1.22.0",
4
4
  "description": "Stencil Component Starter",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as e,H as s,g as r}from"./p-e4d5e7a7.js";import{c as n}from"./p-4d330cfc.js";const o=".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}.flex{display:flex!important}.h-10{height:2.5rem!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}.rounded{border-radius:.25rem!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 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}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.py-4{padding-bottom:1rem!important;padding-top:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo-dark{--tw-text-opacity:1!important;color:rgb(44 75 169/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;position:relative;width:100%}p-select input.read-only{text-overflow:ellipsis}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}.hidden{display:none!important}.h-6{height:1.5rem!important}.gap-1{gap:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";const h=class{constructor(e){t(this,e);this.queryChange=i(this,"queryChange",3);this.valueChange=i(this,"valueChange",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=undefined;this.value=undefined;this.displayKey="text";this.dropdownDisplayKey=undefined;this.selectionDisplayKey=undefined;this.valueKey=undefined;this.avatarKey=undefined;this.avatarLettersKey=undefined;this.identifierKey=undefined;this.queryKey=undefined;this.autoSelectFirst=true;this.showChevron=true;this.maxDisplayedItems=10;this.enableAutocomplete=true;this.keepQuery=true;this.asyncFilter=false;this.loading=false;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._showDropdown=false;this._selectedItem=null;this._isAutoCompleting=false;this._amountHidden=0}get _items(){var t,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(this._isAutoCompleting&&((t=this.query)===null||t===void 0?void 0:t.length)&&this.query!==((i=this._selectedItem)===null||i===void 0?void 0:i[this.displayKey])&&!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)}))}return e===null||e===void 0?void 0:e.slice(0,this.maxDisplayedItems)}get _displayValue(){var t,i,e,s;if(this._isAutoCompleting){return this.query}if(this.multi){if(!((t=this._selectedItem)===null||t===void 0?void 0:t.length)){return[]}return(i=this._selectedItem)===null||i===void 0?void 0:i.map((t=>t===null||t===void 0?void 0:t[this.displayKey])).filter((t=>!!t))}return(e=this._selectedItem)===null||e===void 0?void 0:e[(s=this.selectionDisplayKey)!==null&&s!==void 0?s:this.displayKey]}get _placeholder(){var t;return this._isAutoCompleting&&((t=this.autocompletePlaceholder)===null||t===void 0?void 0:t.length)?this.autocompletePlaceholder:this.placeholder}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.enableAutocomplete=false;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,i;return e(s,{class:"p-select"},e("p-dropdown",{disableTriggerClick:true,calculateWidth:true,insideClick:true,scrollable:true,show:this._showDropdown&&(!!this._items.length||this.loading)},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,focusMethod:this.enableAutocomplete?"focus":"click"},e("input",{slot:"input",type:"text",placeholder:this._placeholder,value:this.multi&&((t=this._displayValue)===null||t===void 0?void 0:t.length)?" ":this._displayValue,class:`p-input cursor-pointer ${!this._isAutoCompleting&&"read-only"}`,onFocus:t=>this._onFocus(t),onMouseDown:t=>this._onMouseDown(t),onClick:()=>this._onClick(),onInput:t=>this._onChange(t),ref:t=>this._inputRef=t}),this.showChevron&&e("p-icon",{variant:"chevron",slot:"suffix"})),e("div",{slot:"items"},this.loading?this._getLoadingItems():this._getItems(),this.showAddItem&&this._getAddItem())),this.multi&&((i=this._selectedItem)===null||i===void 0?void 0:i.length)>0&&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)))}documentClickHandler({target:t}){if(!this._showDropdown||n(t,this._el)){return}this._showDropdown=false;this._isAutoCompleting=false}_valueChange(){this._preselectItem()}itemChanges(){this._preselectItem()}_showDropdownChanges(){this.dropdownShown.emit({value:this._showDropdown,query:this.query})}_preselectItem(){var t,i,e;if(this._isAutoCompleting&&((t=this.query)===null||t===void 0?void 0:t.length)){return}let s=typeof this.value==="string"&&this.multi?JSON.parse(this.value):this.value;if(this.multi){if(!Array.isArray(s)){this.value=[];this.valueChange.emit(this.value);return}this.value=s;if(!s.length){return}this._selectedItem=!!this.valueKey&&this.valueKey!=="false"?this._items.filter((t=>s.includes(t===null||t===void 0?void 0:t[this.valueKey]))):[...s];return}if(!this._selectedItem&&!s&&this.autoSelectFirst){s=this._items[0]}const r=typeof s==="object"&&s!==null?s[this._identifierKey]:s;const n=typeof r==="string"||typeof r==="number"?r:JSON.stringify(r);const o=this._selectedItem?(i=this._selectedItem)===null||i===void 0?void 0:i[this._identifierKey]:null;const h=typeof o==="string"||typeof o==="number"?o:JSON.stringify(o);if(this._selectedItem&&h===n){return}if(!((e=this._items)===null||e===void 0?void 0:e.length)&&s){this._selectValue(s);return}const a=this._items.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===n}));this._selectValue(!!a?a:s)}_selectValue(t){let i=!!this.valueKey&&this.valueKey!=="false"&&t!==null?t===null||t===void 0?void 0:t[this.valueKey]:t;this.query=this.keepQuery?t===null||t===void 0?void 0:t[this.displayKey]:null;if(this.multi){if(!this._selectedItem||!Array.isArray(this._selectedItem)){this._selectedItem=[]}if(!this.value||!Array.isArray(this.value)){this.value=[]}const e=[...this._selectedItem];const s=[...this.value];const r=e.findIndex((i=>i[this._identifierKey]===t[this._identifierKey]));if(r===-1){e.push(t);s.push(i)}else{e.splice(r,1);s.splice(r,1)}this._selectedItem=e;this.value=s;this.valueChange.emit(s)}else{this._selectedItem=t;this.value=i;this.valueChange.emit(i)}if(!this.multi){this._onBlur(true)}}_onFocus(t){if(!this.enableAutocomplete){t.preventDefault();t.stopPropogation();if(!this._showDropdown){this._showDropdown=true}return}this._showDropdown=true;this._isAutoCompleting=true}_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._isAutoCompleting=false;this._showDropdown=false}_onChange(t){if(!this.enableAutocomplete){return}if(!this._isAutoCompleting){this._isAutoCompleting=true;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(){return this._items.map((t=>{var i,s,r;return e("p-dropdown-menu-item",{onClick:()=>this._selectValue(t),active:this.multi?((i=this._selectedItem)===null||i===void 0?void 0:i.findIndex((i=>i[this._identifierKey]===t[this._identifierKey])))>=0:t[this._identifierKey]===((s=this._selectedItem)===null||s===void 0?void 0:s[this._identifierKey]),variant:this.multi?"checkbox":"default"},this.avatarKey?e("span",{class:"flex items-center gap-2"},e("p-avatar",{size:"xsmall",src:t[this.avatarKey],letters:t[this.avatarLettersKey]}),t[(r=this.dropdownDisplayKey)!==null&&r!==void 0?r:this.displayKey]):t[this.displayKey])}))}_getAddItem(){return e("p-dropdown-menu-item",{onClick:()=>this.add.emit()},e("span",{class:"text-indigo font-semibold flex gap-1 items-center"},this.addItemText,e("p-icon",{variant:"plus"})))}_getLoadingItems(){return[0,0,0].map((()=>e("p-dropdown-menu-item",{enableHover:false},e("p-loader",{variant:"ghost",class:"h-6 w-full rounded"}))))}_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")}}get _el(){return r(this)}static get watchers(){return{value:["_valueChange"],items:["itemChanges"],_showDropdown:["_showDropdownChanges"]}}};h.style=o;export{h as p_select};
2
- //# sourceMappingURL=p-33831081.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["selectComponentCss","Select","_items","this","items","loading","JSON","parse","displayKey","valueKey","map","str","value","text","_isAutoCompleting","_a","query","length","_b","_selectedItem","asyncFilter","filter","item","queryKey","_checkvalue","_identifierKey","slice","maxDisplayedItems","_displayValue","multi","i","_c","_d","selectionDisplayKey","_placeholder","autocompletePlaceholder","placeholder","identifierKey","componentDidLoad","Error","enableAutocomplete","_setMultiContainerMaxWidth","_resizeObserver","ResizeObserver","_resizeDebounceTimer","clearTimeout","setTimeout","_checkSelectedItems","observe","_el","_valueChange","itemChanges","componentDidRender","disconnectedCallback","disconnect","render","h","Host","class","disableTriggerClick","calculateWidth","insideClick","scrollable","show","_showDropdown","slot","icon","size","prefix","label","helper","required","error","disabled","focused","focusMethod","type","onFocus","ev","_onFocus","onMouseDown","_onMouseDown","onClick","_onClick","onInput","_onChange","ref","_inputRef","showChevron","variant","_getLoadingItems","_getItems","showAddItem","_getAddItem","_multiContainerRef","_selectValue","_amountHidden","documentClickHandler","target","childOf","_preselectItem","_showDropdownChanges","dropdownShown","emit","Array","isArray","valueChange","includes","autoSelectFirst","identifier","parsedValue","stringify","currentValue","currentParsedValue","find","itemIdentifier","parsedItemIdentifier","keepQuery","selectedItem","valueArray","includesIndex","findIndex","push","splice","_onBlur","preventDefault","stopPropogation","force","queryChange","key","toString","toLowerCase","indexOf","active","avatarKey","src","letters","avatarLettersKey","dropdownDisplayKey","add","addItemText","enableHover","style","maxWidth","clientWidth","containerRect","getBoundingClientRect","from","querySelectorAll","amountHidden","child","classList","remove","childRect","right","extra","querySelector","contains"],"sources":["src/components/molecules/select/select.component.scss?tag=p-select","src/components/molecules/select/select.component.tsx"],"sourcesContent":["p-select {\n\t@apply flex w-full flex-col relative;\n\n\tinput.read-only {\n\t\t@apply text-ellipsis;\n\t}\n\n\t.multi-container {\n\t\t@apply absolute bottom-0 left-0 h-10 flex gap-2 items-center px-2 py-4 overflow-hidden pointer-events-none w-full;\n\n\t\t&.size-small {\n\t\t\t@apply px-1 py-2 h-8;\n\t\t}\n\n\t\t.item {\n\t\t\t@apply bg-indigo-light rounded px-2 flex gap-2 items-center cursor-pointer text-indigo-dark h-[1.625rem] text-sm font-semibold pointer-events-auto whitespace-nowrap;\n\n\t\t\tp-icon {\n\t\t\t\t@apply text-indigo text-xs;\n\t\t\t}\n\t\t}\n\n\t\t.extra {\n\t\t\t@apply text-sm text-storm-medium pointer-events-none;\n\t\t}\n\t}\n}\n","import {\n Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h\n} from '@stencil/core';\n\nimport { childOf } from '../../../utils';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n\ttag: 'p-select',\n\tstyleUrl: 'select.component.scss',\n\tshadow: false,\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 when auto completing\n\t */\n\t@Prop() autocompletePlaceholder: string;\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 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 to keep the query or not\n\t */\n\t@Prop() keepQuery: 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 * 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 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 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 _isAutoCompleting: boolean = false;\n\t@State() private _amountHidden = 0;\n\n\tprivate _inputRef: HTMLInputElement;\n\tprivate _multiContainerRef: HTMLElement;\n\n\tprivate _resizeObserver: ResizeObserver;\n\tprivate _resizeDebounceTimer: NodeJS.Timer;\n\n\tget _items() {\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'\n\t\t\t\t? JSON.parse(this.items)\n\t\t\t\t: 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 (\n\t\t\tthis._isAutoCompleting &&\n\t\t\tthis.query?.length &&\n\t\t\tthis.query !== this._selectedItem?.[this.displayKey] &&\n\t\t\t!this.asyncFilter\n\t\t) {\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\treturn items?.slice(0, this.maxDisplayedItems);\n\t}\n\n\tget _displayValue() {\n\t\tif (this._isAutoCompleting) {\n\t\t\treturn this.query;\n\t\t}\n\n\t\tif (this.multi) {\n\t\t\tif (!this._selectedItem?.length) {\n\t\t\t\treturn [];\n\t\t\t}\n\n\t\t\treturn this._selectedItem\n\t\t\t\t?.map((i) => i?.[this.displayKey])\n\t\t\t\t.filter((i) => !!i);\n\t\t}\n\n\t\treturn this._selectedItem?.[\n\t\t\tthis.selectionDisplayKey ?? this.displayKey\n\t\t];\n\t}\n\n\tget _placeholder() {\n\t\treturn this._isAutoCompleting && this.autocompletePlaceholder?.length\n\t\t\t? this.autocompletePlaceholder\n\t\t\t: this.placeholder;\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.enableAutocomplete = false;\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={true}\n\t\t\t\t\tshow={\n\t\t\t\t\t\tthis._showDropdown &&\n\t\t\t\t\t\t(!!this._items.length || this.loading)\n\t\t\t\t\t}\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\tfocusMethod={\n\t\t\t\t\t\t\tthis.enableAutocomplete ? 'focus' : 'click'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tplaceholder={this._placeholder}\n\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\tthis.multi && this._displayValue?.length\n\t\t\t\t\t\t\t\t\t? ' '\n\t\t\t\t\t\t\t\t\t: this._displayValue\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclass={`p-input cursor-pointer ${\n\t\t\t\t\t\t\t\t!this._isAutoCompleting && 'read-only'\n\t\t\t\t\t\t\t}`}\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\tonInput={(ev) => this._onChange(ev)}\n\t\t\t\t\t\t\tref={(ref) => (this._inputRef = ref)}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t{this.showChevron && (\n\t\t\t\t\t\t\t<p-icon variant=\"chevron\" slot=\"suffix\" />\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\n\t\t\t\t\t\t\t? this._getLoadingItems()\n\t\t\t\t\t\t\t: 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\n\t\t\t\t{this.multi && this._selectedItem?.length > 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={`multi-container size-${this.size}`}\n\t\t\t\t\t\tref={(ref) => (this._multiContainerRef = ref)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._selectedItem.map((item) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"item\"\n\t\t\t\t\t\t\t\tonClick={() => this._selectValue(item)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\titem[\n\t\t\t\t\t\t\t\t\t\tthis.selectionDisplayKey ??\n\t\t\t\t\t\t\t\t\t\t\tthis.displayKey\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t<p-icon variant=\"negative\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t<div class=\"extra hidden\">+{this._amountHidden}</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\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\tthis._isAutoCompleting = false;\n\t}\n\n\t@Watch('value')\n\tprivate _valueChange() {\n\t\tthis._preselectItem();\n\t}\n\n\t@Watch('items')\n\tpublic itemChanges() {\n\t\tthis._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\tprivate _preselectItem() {\n\t\tif (this._isAutoCompleting && this.query?.length) {\n\t\t\treturn;\n\t\t}\n\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\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) =>\n\t\t\t\t\t\t\tvalue.includes(i?.[this.valueKey])\n\t\t\t\t\t\t)\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);\n\t\t\treturn;\n\t\t}\n\n\t\tconst item = this._items.find((i) => {\n\t\t\tconst itemIdentifier = i?.[this._identifierKey];\n\t\t\tconst parsedItemIdentifier =\n\t\t\t\ttypeof itemIdentifier === 'string' ||\n\t\t\t\ttypeof 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);\n\t}\n\n\tprivate _selectValue(item) {\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\tthis.query = this.keepQuery ? item?.[this.displayKey] : null;\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\t(i) => 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} else {\n\t\t\tthis._selectedItem = item;\n\t\t\tthis.value = value;\n\t\t\tthis.valueChange.emit(value);\n\t\t}\n\n\t\tif (!this.multi) {\n\t\t\tthis._onBlur(true);\n\t\t}\n\t}\n\n\tprivate _onFocus(ev) {\n\t\tif (!this.enableAutocomplete) {\n\t\t\tev.preventDefault();\n\t\t\tev.stopPropogation();\n\n\t\t\tif (!this._showDropdown) {\n\t\t\t\tthis._showDropdown = true;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showDropdown = true;\n\t\tthis._isAutoCompleting = true;\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._isAutoCompleting = false;\n\t\tthis._showDropdown = false;\n\t}\n\n\tprivate _onChange(ev) {\n\t\tif (!this.enableAutocomplete) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._isAutoCompleting) {\n\t\t\tthis._isAutoCompleting = true;\n\t\t\tthis._showDropdown = true;\n\t\t}\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\treturn this._items.map((item) => (\n\t\t\t<p-dropdown-menu-item\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\t? this._selectedItem?.findIndex(\n\t\t\t\t\t\t\t\t(i) =>\n\t\t\t\t\t\t\t\t\ti[this._identifierKey] ===\n\t\t\t\t\t\t\t\t\titem[this._identifierKey]\n\t\t\t\t\t\t\t) >= 0\n\t\t\t\t\t\t: item[this._identifierKey] ===\n\t\t\t\t\t\t\tthis._selectedItem?.[this._identifierKey]\n\t\t\t\t}\n\t\t\t\tvariant={this.multi ? 'checkbox' : 'default'}\n\t\t\t>\n\t\t\t\t{this.avatarKey ? (\n\t\t\t\t\t<span class=\"flex items-center gap-2\">\n\t\t\t\t\t\t<p-avatar\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\tsrc={item[this.avatarKey]}\n\t\t\t\t\t\t\tletters={item[this.avatarLettersKey]}\n\t\t\t\t\t\t></p-avatar>\n\t\t\t\t\t\t{item[this.dropdownDisplayKey ?? this.displayKey]}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\titem[this.displayKey]\n\t\t\t\t)}\n\t\t\t</p-dropdown-menu-item>\n\t\t));\n\t}\n\n\tprivate _getAddItem() {\n\t\treturn (\n\t\t\t<p-dropdown-menu-item onClick={() => this.add.emit()}>\n\t\t\t\t<span class=\"text-indigo font-semibold flex gap-1 items-center\">\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\treturn [0, 0, 0].map(() => (\n\t\t\t<p-dropdown-menu-item enableHover={false}>\n\t\t\t\t<p-loader variant=\"ghost\" class=\"h-6 w-full rounded\" />\n\t\t\t</p-dropdown-menu-item>\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 = `${this._inputRef.clientWidth - 16}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"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as e,H as s,g as r}from"./p-e4d5e7a7.js";import{c as n}from"./p-4d330cfc.js";const o=".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}.flex{display:flex!important}.h-10{height:2.5rem!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}.rounded{border-radius:.25rem!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 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}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.py-4{padding-bottom:1rem!important;padding-top:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo-dark{--tw-text-opacity:1!important;color:rgb(44 75 169/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;position:relative;width:100%}p-select input.read-only{text-overflow:ellipsis}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}.hidden{display:none!important}.h-6{height:1.5rem!important}.gap-1{gap:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";const h=class{constructor(e){t(this,e);this.queryChange=i(this,"queryChange",3);this.valueChange=i(this,"valueChange",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=undefined;this.value=undefined;this.displayKey="text";this.dropdownDisplayKey=undefined;this.selectionDisplayKey=undefined;this.valueKey=undefined;this.avatarKey=undefined;this.avatarLettersKey=undefined;this.identifierKey=undefined;this.queryKey=undefined;this.autoSelectFirst=true;this.showChevron=true;this.maxDisplayedItems=10;this.enableAutocomplete=true;this.keepQuery=true;this.asyncFilter=false;this.loading=false;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._showDropdown=false;this._selectedItem=null;this._isAutoCompleting=false;this._amountHidden=0}get _items(){var t,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(this._isAutoCompleting&&((t=this.query)===null||t===void 0?void 0:t.length)&&this.query!==((i=this._selectedItem)===null||i===void 0?void 0:i[this.displayKey])&&!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)}))}return e===null||e===void 0?void 0:e.slice(0,this.maxDisplayedItems)}get _displayValue(){var t,i,e,s;if(this._isAutoCompleting){return this.query}if(this.multi){if(!((t=this._selectedItem)===null||t===void 0?void 0:t.length)){return[]}return(i=this._selectedItem)===null||i===void 0?void 0:i.map((t=>t===null||t===void 0?void 0:t[this.displayKey])).filter((t=>!!t))}return(e=this._selectedItem)===null||e===void 0?void 0:e[(s=this.selectionDisplayKey)!==null&&s!==void 0?s:this.displayKey]}get _placeholder(){var t;return this._isAutoCompleting&&((t=this.autocompletePlaceholder)===null||t===void 0?void 0:t.length)?this.autocompletePlaceholder:this.placeholder}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.enableAutocomplete=false;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,i;return e(s,{class:"p-select"},e("p-dropdown",{disableTriggerClick:true,calculateWidth:true,insideClick:true,scrollable:true,show:this._showDropdown&&(!!this._items.length||this.loading)},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,focusMethod:this.enableAutocomplete?"focus":"click"},e("input",{slot:"input",type:"text",placeholder:this._placeholder,value:this.multi&&((t=this._displayValue)===null||t===void 0?void 0:t.length)?" ":this._displayValue,class:`p-input cursor-pointer ${!this._isAutoCompleting&&"read-only"}`,onFocus:t=>this._onFocus(t),onMouseDown:t=>this._onMouseDown(t),onClick:()=>this._onClick(),onInput:t=>this._onChange(t),ref:t=>this._inputRef=t}),this.showChevron&&e("p-icon",{variant:"chevron",slot:"suffix"})),e("div",{slot:"items"},this.loading?this._getLoadingItems():this._getItems(),this.showAddItem&&this._getAddItem())),this.multi&&((i=this._selectedItem)===null||i===void 0?void 0:i.length)>0&&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)))}documentClickHandler({target:t}){if(!this._showDropdown||n(t,this._el)){return}this._showDropdown=false;this._isAutoCompleting=false}_valueChange(){this._preselectItem()}itemChanges(){this._preselectItem()}_showDropdownChanges(){this.dropdownShown.emit({value:this._showDropdown,query:this.query})}_preselectItem(){var t,i,e;if(this._isAutoCompleting&&((t=this.query)===null||t===void 0?void 0:t.length)){return}let s=typeof this.value==="string"&&this.multi?JSON.parse(this.value):this.value;if(this.multi){if(!Array.isArray(s)){this.value=[];this.valueChange.emit(this.value);return}this.value=s;if(!s.length){return}this._selectedItem=!!this.valueKey&&this.valueKey!=="false"?this._items.filter((t=>s.includes(t===null||t===void 0?void 0:t[this.valueKey]))):[...s];return}if(!this._selectedItem&&!s&&this.autoSelectFirst){s=this._items[0]}const r=typeof s==="object"&&s!==null?s[this._identifierKey]:s;const n=typeof r==="string"||typeof r==="number"?r:JSON.stringify(r);const o=this._selectedItem?(i=this._selectedItem)===null||i===void 0?void 0:i[this._identifierKey]:null;const h=typeof o==="string"||typeof o==="number"?o:JSON.stringify(o);if(this._selectedItem&&h===n){return}if(!((e=this._items)===null||e===void 0?void 0:e.length)&&s){this._selectValue(s);return}const a=this._items.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===n}));this._selectValue(!!a?a:s)}_selectValue(t){let i=!!this.valueKey&&this.valueKey!=="false"&&t!==null?t===null||t===void 0?void 0:t[this.valueKey]:t;this.query=this.keepQuery?t===null||t===void 0?void 0:t[this.displayKey]:null;if(this.multi){if(!this._selectedItem||!Array.isArray(this._selectedItem)){this._selectedItem=[]}if(!this.value||!Array.isArray(this.value)){this.value=[]}const e=[...this._selectedItem];const s=[...this.value];const r=e.findIndex((i=>i[this._identifierKey]===t[this._identifierKey]));if(r===-1){e.push(t);s.push(i)}else{e.splice(r,1);s.splice(r,1)}this._selectedItem=e;this.value=s;this.valueChange.emit(s)}else{this._selectedItem=t;this.value=i;this.valueChange.emit(i)}if(!this.multi){this._onBlur(true)}}_onFocus(t){if(!this.enableAutocomplete){t.preventDefault();t.stopPropogation();if(!this._showDropdown){this._showDropdown=true}return}this._showDropdown=true;this._isAutoCompleting=true}_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._isAutoCompleting=false;this._showDropdown=false}_onChange(t){if(!this.enableAutocomplete){return}if(!this._isAutoCompleting){this._isAutoCompleting=true;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(){return this._items.map((t=>{var i,s,r;return e("p-dropdown-menu-item",{onClick:()=>this._selectValue(t),active:this.multi?((i=this._selectedItem)===null||i===void 0?void 0:i.findIndex((i=>i[this._identifierKey]===t[this._identifierKey])))>=0:t[this._identifierKey]===((s=this._selectedItem)===null||s===void 0?void 0:s[this._identifierKey]),variant:this.multi?"checkbox":"default"},this.avatarKey?e("span",{class:"flex items-center gap-2"},e("p-avatar",{size:"xsmall",src:t[this.avatarKey],letters:t[this.avatarLettersKey]}),t[(r=this.dropdownDisplayKey)!==null&&r!==void 0?r:this.displayKey]):t[this.displayKey])}))}_getAddItem(){return e("p-dropdown-menu-item",{onClick:()=>this.add.emit()},e("span",{class:"text-indigo font-semibold flex gap-1 items-center"},this.addItemText,e("p-icon",{variant:"plus"})))}_getLoadingItems(){return[0,0,0].map((()=>e("p-dropdown-menu-item",{enableHover:false},e("p-loader",{variant:"ghost",class:"h-6 w-full rounded"}))))}_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")}}get _el(){return r(this)}static get watchers(){return{value:["_valueChange"],items:["itemChanges"],_showDropdown:["_showDropdownChanges"]}}};h.style=o;export{h as p_select};
2
- //# sourceMappingURL=p-33831081.entry.js.map