@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.
- package/CHANGELOG.md +22 -0
- package/dist/build/p-8710c681.entry.js +2 -0
- package/dist/build/p-8710c681.entry.js.map +1 -0
- package/dist/build/paperless.esm.js +1 -1
- package/dist/build/paperless.esm.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/p-select.cjs.entry.js +49 -54
- package/dist/cjs/p-select.cjs.entry.js.map +1 -1
- package/dist/cjs/paperless.cjs.js +1 -1
- package/dist/collection/components/molecules/select/select.component.css +1 -1
- package/dist/collection/components/molecules/select/select.component.js +136 -67
- package/dist/collection/components/molecules/select/select.component.js.map +1 -1
- package/dist/components/p-select.js +54 -56
- package/dist/components/p-select.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/p-select.entry.js +49 -54
- package/dist/esm/p-select.entry.js.map +1 -1
- package/dist/esm/paperless.js +1 -1
- package/dist/index.html +1 -1
- package/dist/paperless/p-8710c681.entry.js +2 -0
- package/dist/paperless/p-8710c681.entry.js.map +1 -0
- package/dist/paperless/paperless.esm.js +1 -1
- package/dist/paperless/paperless.esm.js.map +1 -1
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/types/components/molecules/select/select.component.d.ts +26 -8
- package/dist/types/components.d.ts +38 -10
- package/hydrate/index.js +54 -56
- package/package.json +1 -1
- package/dist/build/p-33831081.entry.js +0 -2
- package/dist/build/p-33831081.entry.js.map +0 -1
- package/dist/paperless/p-33831081.entry.js +0 -2
- 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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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}.
|
|
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 =
|
|
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.
|
|
20905
|
+
this._allSelected = false;
|
|
20902
20906
|
this._amountHidden = 0;
|
|
20903
20907
|
}
|
|
20904
20908
|
get _items() {
|
|
20905
|
-
var _a
|
|
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.
|
|
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:
|
|
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
|
|
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
|
-
? (
|
|
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 (!((
|
|
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
|
-
|
|
21108
|
-
|
|
21109
|
-
|
|
21110
|
-
|
|
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
|
-
|
|
21118
|
-
|
|
21119
|
-
|
|
21120
|
-
|
|
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
|
-
|
|
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
|
-
|
|
21124
|
+
_onAutoComplete(ev) {
|
|
21148
21125
|
if (!this.enableAutocomplete) {
|
|
21149
21126
|
return;
|
|
21150
21127
|
}
|
|
21151
|
-
|
|
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
|
-
|
|
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
|
-
"
|
|
21253
|
+
"_allSelected": [32],
|
|
21256
21254
|
"_amountHidden": [32]
|
|
21257
21255
|
},
|
|
21258
21256
|
"$listeners$": [[6, "click", "documentClickHandler"]],
|
package/package.json
CHANGED
|
@@ -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":"oGAAA,MAAMA,EAAqB,wuF,MCYdC,EAAM,M,2WAuCW,O,gOAwCM,K,iBAKJ,K,uBAKK,G,wBAKE,K,eAKT,K,iBAKE,M,aAKJ,M,UA6BQ,S,4HA8BU,M,iBAKd,M,iBAKD,W,mBAeQ,M,mBACA,K,uBAEQ,M,mBACb,C,CAQjC,UAAIC,G,QACH,IAAKC,KAAKC,OAASD,KAAKE,QAAS,CAChC,MAAO,E,CAGR,IAAID,SACID,KAAKC,QAAU,SACnBE,KAAKC,MAAMJ,KAAKC,OAChBD,KAAKC,MAET,UAAWA,IAAK,MAALA,SAAK,SAALA,EAAQ,MAAO,SAAU,CACnCD,KAAKK,WAAa,OAClBL,KAAKM,SAAW,QAEhBL,EAAQA,EAAMM,KAAKC,IAAG,CACrBC,MAAOD,EACPE,KAAMF,K,CAIR,GACCR,KAAKW,qBACLC,EAAAZ,KAAKa,SAAK,MAAAD,SAAA,SAAAA,EAAEE,SACZd,KAAKa,UAAUE,EAAAf,KAAKgB,iBAAa,MAAAD,SAAA,SAAAA,EAAGf,KAAKK,eACxCL,KAAKiB,YACL,CACDhB,EAAQA,EAAMiB,QAAQC,IACrB,GAAInB,KAAKoB,SAAU,CAClB,OAAOpB,KAAKqB,YAAYrB,KAAKoB,SAAUD,E,CAGxC,OACCnB,KAAKqB,YAAYrB,KAAKsB,eAAgBH,IACtCnB,KAAKqB,YAAYrB,KAAKK,WAAYc,EAAK,G,CAK1C,OAAOlB,IAAK,MAALA,SAAK,SAALA,EAAOsB,MAAM,EAAGvB,KAAKwB,kB,CAG7B,iBAAIC,G,YACH,GAAIzB,KAAKW,kBAAmB,CAC3B,OAAOX,KAAKa,K,CAGb,GAAIb,KAAK0B,MAAO,CACf,MAAKd,EAAAZ,KAAKgB,iBAAa,MAAAJ,SAAA,SAAAA,EAAEE,QAAQ,CAChC,MAAO,E,CAGR,OAAOC,EAAAf,KAAKgB,iBAAa,MAAAD,SAAA,SAAAA,EACtBR,KAAKoB,GAAMA,IAAC,MAADA,SAAC,SAADA,EAAI3B,KAAKK,cACrBa,QAAQS,KAAQA,G,CAGnB,OAAOC,EAAA5B,KAAKgB,iBAAa,MAAAY,SAAA,SAAAA,GACxBC,EAAA7B,KAAK8B,uBAAmB,MAAAD,SAAA,EAAAA,EAAI7B,KAAKK,W,CAInC,gBAAI0B,G,MACH,OAAO/B,KAAKW,qBAAqBC,EAAAZ,KAAKgC,2BAAuB,MAAApB,SAAA,SAAAA,EAAEE,QAC5Dd,KAAKgC,wBACLhC,KAAKiC,W,CAGT,kBAAIX,G,QACH,OAAOP,GAAAH,EAAAZ,KAAKkC,iBAAa,MAAAtB,SAAA,EAAAA,EAAIZ,KAAKM,YAAQ,MAAAS,SAAA,EAAAA,EAAI,O,CAG/C,gBAAAoB,GACC,IAAKnC,KAAKM,WAAaN,KAAKkC,cAAe,CAC1C,MAAM,IAAIE,MAAM,+C,CAGjB,GAAIpC,KAAK0B,MAAO,CACf1B,KAAKqC,mBAAqB,MAC1BrC,KAAKsC,6BAELtC,KAAKuC,gBAAkB,IAAIC,gBAAe,KACzC,GAAIxC,KAAKyC,qBAAsB,CAC9BC,aAAa1C,KAAKyC,sBAClBzC,KAAKyC,qBAAuB,I,CAG7BzC,KAAKyC,qBAAuBE,YAAW,KACtC3C,KAAKsC,6BACLtC,KAAK4C,qBAAqB,GACxB,IAAI,IAER5C,KAAKuC,gBAAgBM,QAAQ7C,KAAK8C,I,CAGnC,GAAI9C,KAAKS,MAAO,CACfT,KAAK+C,eACL,M,CAGD/C,KAAKgD,a,CAGN,kBAAAC,GACC,GAAIjD,KAAK0B,MAAO,CACf1B,KAAKsC,6BACLtC,KAAK4C,qB,EAIP,oBAAAM,GACC,GAAIlD,KAAK0B,MAAO,CACf1B,KAAKuC,gBAAgBY,Y,EAIvB,MAAAC,G,QACC,OACCC,EAACC,EAAI,CAACC,MAAM,YACXF,EAAA,cACCG,oBAAqB,KACrBC,eAAgB,KAChBC,YAAa,KACbC,WAAY,KACZC,KACC5D,KAAK6D,kBACF7D,KAAKD,OAAOe,QAAUd,KAAKE,UAG/BmD,EAAA,iBACCS,KAAK,UACLC,KAAM/D,KAAK+D,KACXC,KAAMhE,KAAKgE,KACXC,OAAQjE,KAAKiE,OACbC,MAAOlE,KAAKkE,MACZC,OAAQnE,KAAKmE,OACbC,SAAUpE,KAAKoE,SACfC,MAAOrE,KAAKqE,MACZC,SAAUtE,KAAKsE,SACfC,QAASvE,KAAK6D,cACdW,YACCxE,KAAKqC,mBAAqB,QAAU,SAGrCgB,EAAA,SACCS,KAAK,QACLW,KAAK,OACLxC,YAAajC,KAAK+B,aAClBtB,MACCT,KAAK0B,SAASd,EAAAZ,KAAKyB,iBAAa,MAAAb,SAAA,SAAAA,EAAEE,QAC/B,IACAd,KAAKyB,cAET8B,MAAO,2BACLvD,KAAKW,mBAAqB,cAE5B+D,QAAUC,GAAO3E,KAAK4E,SAASD,GAC/BE,YAAcF,GAAO3E,KAAK8E,aAAaH,GACvCI,QAAS,IAAM/E,KAAKgF,WACpBC,QAAUN,GAAO3E,KAAKkF,UAAUP,GAChCQ,IAAMA,GAASnF,KAAKoF,UAAYD,IAGhCnF,KAAKqF,aACLhC,EAAA,UAAQiC,QAAQ,UAAUxB,KAAK,YAGjCT,EAAA,OAAKS,KAAK,SACR9D,KAAKE,QACHF,KAAKuF,mBACLvF,KAAKwF,YACPxF,KAAKyF,aAAezF,KAAK0F,gBAI3B1F,KAAK0B,SAASX,EAAAf,KAAKgB,iBAAa,MAAAD,SAAA,SAAAA,EAAED,QAAS,GAC3CuC,EAAA,OACCE,MAAO,wBAAwBvD,KAAKgE,OACpCmB,IAAMA,GAASnF,KAAK2F,mBAAqBR,GAExCnF,KAAKgB,cAAcT,KAAKY,I,MAAS,OACjCkC,EAAA,OACCE,MAAM,OACNwB,QAAS,IAAM/E,KAAK4F,aAAazE,IAGhCA,GACCP,EAAAZ,KAAK8B,uBAAmB,MAAAlB,SAAA,EAAAA,EACvBZ,KAAKK,YAGRgD,EAAA,UAAQiC,QAAQ,aACX,IAGPjC,EAAA,OAAKE,MAAM,gBAAc,IAAGvD,KAAK6F,gB,CAQ5B,oBAAAC,EAAqBC,OAAEA,IAChC,IAAK/F,KAAK6D,eAAiBmC,EAAQD,EAAQ/F,KAAK8C,KAAM,CACrD,M,CAGD9C,KAAK6D,cAAgB,MACrB7D,KAAKW,kBAAoB,K,CAIlB,YAAAoC,GACP/C,KAAKiG,gB,CAIC,WAAAjD,GACNhD,KAAKiG,gB,CAIC,oBAAAC,GACNlG,KAAKmG,cAAcC,KAAK,CACvB3F,MAAOT,KAAK6D,cACZhD,MAAOb,KAAKa,O,CAIN,cAAAoF,G,UACP,GAAIjG,KAAKW,qBAAqBC,EAAAZ,KAAKa,SAAK,MAAAD,SAAA,SAAAA,EAAEE,QAAQ,CACjD,M,CAGD,IAAIL,SACIT,KAAKS,QAAU,UAAYT,KAAK0B,MACpCvB,KAAKC,MAAMJ,KAAKS,OAChBT,KAAKS,MAET,GAAIT,KAAK0B,MAAO,CACf,IAAK2E,MAAMC,QAAQ7F,GAAQ,CAC1BT,KAAKS,MAAQ,GACbT,KAAKuG,YAAYH,KAAKpG,KAAKS,OAC3B,M,CAGDT,KAAKS,MAAQA,EACb,IAAKA,EAAMK,OAAQ,CAClB,M,CAGDd,KAAKgB,gBACFhB,KAAKM,UAAYN,KAAKM,WAAa,QAClCN,KAAKD,OAAOmB,QAAQS,GACpBlB,EAAM+F,SAAS7E,IAAC,MAADA,SAAC,SAADA,EAAI3B,KAAKM,aAExB,IAAIG,GACR,M,CAGD,IAAKT,KAAKgB,gBAAkBP,GAAST,KAAKyG,gBAAiB,CAC1DhG,EAAQT,KAAKD,OAAO,E,CAGrB,MAAM2G,SACEjG,IAAU,UAAYA,IAAU,KACpCA,EAAMT,KAAKsB,gBACXb,EACJ,MAAMkG,SACED,IAAe,iBAAmBA,IAAe,SACrDA,EACAvG,KAAKyG,UAAUF,GAEnB,MAAMG,EAAe7G,KAAKgB,eACvBD,EAAAf,KAAKgB,iBAAa,MAAAD,SAAA,SAAAA,EAAGf,KAAKsB,gBAC1B,KACH,MAAMwF,SACED,IAAiB,iBAAmBA,IAAiB,SACzDA,EACA1G,KAAKyG,UAAUC,GAEnB,GAAI7G,KAAKgB,eAAiB8F,IAAuBH,EAAa,CAC7D,M,CAGD,MAAK/E,EAAA5B,KAAKD,UAAM,MAAA6B,SAAA,SAAAA,EAAEd,SAAUL,EAAO,CAClCT,KAAK4F,aAAanF,GAClB,M,CAGD,MAAMU,EAAOnB,KAAKD,OAAOgH,MAAMpF,IAC9B,MAAMqF,EAAiBrF,IAAC,MAADA,SAAC,SAADA,EAAI3B,KAAKsB,gBAChC,MAAM2F,SACED,IAAmB,iBACnBA,IAAmB,SACvBA,EACA7G,KAAKyG,UAAUI,GAEnB,OAAOC,IAAyBN,CAAW,IAG5C3G,KAAK4F,eAAezE,EAAOA,EAAOV,E,CAG3B,YAAAmF,CAAazE,GACpB,IAAIV,IACDT,KAAKM,UAAYN,KAAKM,WAAa,SAAWa,IAAS,KACtDA,IAAI,MAAJA,SAAI,SAAJA,EAAOnB,KAAKM,UACZa,EAEJnB,KAAKa,MAAQb,KAAKkH,UAAY/F,IAAI,MAAJA,SAAI,SAAJA,EAAOnB,KAAKK,YAAc,KAExD,GAAIL,KAAK0B,MAAO,CACf,IAAK1B,KAAKgB,gBAAkBqF,MAAMC,QAAQtG,KAAKgB,eAAgB,CAC9DhB,KAAKgB,cAAgB,E,CAGtB,IAAKhB,KAAKS,QAAU4F,MAAMC,QAAQtG,KAAKS,OAAQ,CAC9CT,KAAKS,MAAQ,E,CAGd,MAAM0G,EAAe,IAAInH,KAAKgB,eAC9B,MAAMoG,EAAa,IAAIpH,KAAKS,OAE5B,MAAM4G,EAAgBF,EAAaG,WACjC3F,GAAMA,EAAE3B,KAAKsB,kBAAoBH,EAAKnB,KAAKsB,kBAE7C,GAAI+F,KAAmB,EAAG,CACzBF,EAAaI,KAAKpG,GAClBiG,EAAWG,KAAK9G,E,KACV,CACN0G,EAAaK,OAAOH,EAAe,GACnCD,EAAWI,OAAOH,EAAe,E,CAGlCrH,KAAKgB,cAAgBmG,EACrBnH,KAAKS,MAAQ2G,EACbpH,KAAKuG,YAAYH,KAAKgB,E,KAChB,CACNpH,KAAKgB,cAAgBG,EACrBnB,KAAKS,MAAQA,EACbT,KAAKuG,YAAYH,KAAK3F,E,CAGvB,IAAKT,KAAK0B,MAAO,CAChB1B,KAAKyH,QAAQ,K,EAIP,QAAA7C,CAASD,GAChB,IAAK3E,KAAKqC,mBAAoB,CAC7BsC,EAAG+C,iBACH/C,EAAGgD,kBAEH,IAAK3H,KAAK6D,cAAe,CACxB7D,KAAK6D,cAAgB,I,CAEtB,M,CAGD7D,KAAK6D,cAAgB,KACrB7D,KAAKW,kBAAoB,I,CAGlB,YAAAmE,CAAaH,GACpB,GAAI3E,KAAKqC,mBAAoB,CAC5B,M,CAGDsC,EAAG+C,gB,CAGI,QAAA1C,GACP,GAAIhF,KAAKqC,mBAAoB,CAC5B,M,CAGDrC,KAAK6D,eAAiB7D,KAAK6D,a,CAGpB,OAAA4D,CAAQG,EAAQ,OACvB,IAAK5H,KAAKqC,qBAAuBuF,EAAO,CACvC,M,CAGD5H,KAAKW,kBAAoB,MACzBX,KAAK6D,cAAgB,K,CAGd,SAAAqB,CAAUP,GACjB,IAAK3E,KAAKqC,mBAAoB,CAC7B,M,CAGD,IAAKrC,KAAKW,kBAAmB,CAC5BX,KAAKW,kBAAoB,KACzBX,KAAK6D,cAAgB,I,CAGtB7D,KAAKa,MAAQ8D,EAAGoB,OAAOtF,MACvBT,KAAK6H,YAAYzB,KAAKzB,EAAGoB,OAAOtF,M,CAGzB,WAAAY,CAAYyG,EAAK3G,G,UACxB,QACCJ,GAAAH,EAAAO,IAAI,MAAJA,SAAI,SAAJA,EAAO2G,MAAI,MAAAlH,SAAA,SAAAA,EACRmH,cAAU,MAAAhH,SAAA,SAAAA,EACViH,cACDC,SAAQrG,EAAA5B,KAAKa,SAAK,MAAAe,SAAA,SAAAA,EAAEoG,iBAAkB,C,CAIlC,SAAAxC,GACP,OAAOxF,KAAKD,OAAOQ,KAAKY,I,UAAS,OAChCkC,EAAA,wBACC0B,QAAS,IAAM/E,KAAK4F,aAAazE,GACjC+G,OACClI,KAAK0B,QACFd,EAAAZ,KAAKgB,iBAAa,MAAAJ,SAAA,SAAAA,EAAE0G,WACnB3F,GACAA,EAAE3B,KAAKsB,kBACPH,EAAKnB,KAAKsB,oBACP,EACJH,EAAKnB,KAAKsB,oBACXP,EAAAf,KAAKgB,iBAAa,MAAAD,SAAA,SAAAA,EAAGf,KAAKsB,iBAE7BgE,QAAStF,KAAK0B,MAAQ,WAAa,WAElC1B,KAAKmI,UACL9E,EAAA,QAAME,MAAM,2BACXF,EAAA,YACCW,KAAK,SACLoE,IAAKjH,EAAKnB,KAAKmI,WACfE,QAASlH,EAAKnB,KAAKsI,oBAEnBnH,GAAKS,EAAA5B,KAAKuI,sBAAkB,MAAA3G,SAAA,EAAAA,EAAI5B,KAAKK,aAGvCc,EAAKnB,KAAKK,YAEW,G,CAIjB,WAAAqF,GACP,OACCrC,EAAA,wBAAsB0B,QAAS,IAAM/E,KAAKwI,IAAIpC,QAC7C/C,EAAA,QAAME,MAAM,qDACVvD,KAAKyI,YACNpF,EAAA,UAAQiC,QAAQ,U,CAMZ,gBAAAC,GACP,MAAO,CAAC,EAAG,EAAG,GAAGhF,KAAI,IACpB8C,EAAA,wBAAsBqF,YAAa,OAClCrF,EAAA,YAAUiC,QAAQ,QAAQ/B,MAAM,yB,CAK3B,0BAAAjB,GACP,IAAKtC,KAAKoF,YAAcpF,KAAK2F,mBAAoB,CAChD,M,CAGD3F,KAAK2F,mBAAmBgD,MAAMC,SAAW,GAAG5I,KAAKoF,UAAUyD,YAAc,M,CAGlE,mBAAAjG,GACP,IAAK5C,KAAK2F,mBAAoB,CAC7B,M,CAGD,MAAMmD,EAAgB9I,KAAK2F,mBAAmBoD,wBAC9C,MAAM9I,EAAQoG,MAAM2C,KACnBhJ,KAAK2F,mBAAmBsD,iBAAiB,UAG1C,IAAIC,EAAe,EAEnB,IAAK,MAAMC,KAASlJ,EAAO,CAC1BkJ,EAAMC,UAAUC,OAAO,UAEvB,MAAMC,EAAYH,EAAMJ,wBACxB,GAAIO,EAAUC,MAAQT,EAAcS,MAAO,CAC1CJ,EAAMC,UAAUZ,IAAI,UACpBU,G,EAIFlJ,KAAK6F,cAAgBqD,EACrB,MAAMM,EAAQxJ,KAAK2F,mBAAmB8D,cAAc,UACpD,IAAKD,EAAO,CACX,M,CAGD,IAAKA,EAAMJ,UAAUM,SAAS,UAAW,CACxCF,EAAMJ,UAAUZ,IAAI,S,CAGrB,GAAIU,EAAe,EAAG,CACrBM,EAAMJ,UAAUC,OAAO,S"}
|
|
@@ -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
|