@paperless/core 1.20.1 → 1.21.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-9a363a18.entry.js +2 -0
- package/dist/build/p-9a363a18.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 +52 -57
- 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 +121 -70
- package/dist/collection/components/molecules/select/select.component.js.map +1 -1
- package/dist/components/p-select.js +56 -59
- package/dist/components/p-select.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/p-select.entry.js +52 -57
- 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-9a363a18.entry.js +2 -0
- package/dist/paperless/p-9a363a18.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 +22 -8
- package/dist/types/components.d.ts +30 -10
- package/hydrate/index.js +56 -59
- package/package.json +1 -1
- package/dist/build/p-85328396.entry.js +0 -2
- package/dist/build/p-85328396.entry.js.map +0 -1
- package/dist/paperless/p-85328396.entry.js +0 -2
- package/dist/paperless/p-85328396.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
|
*/
|
|
@@ -147,15 +159,15 @@ export declare class Select {
|
|
|
147
159
|
private _el;
|
|
148
160
|
private _showDropdown;
|
|
149
161
|
private _selectedItem;
|
|
150
|
-
private
|
|
162
|
+
private _allSelected;
|
|
151
163
|
private _amountHidden;
|
|
152
164
|
private _inputRef;
|
|
165
|
+
private autocompleteInputRef;
|
|
153
166
|
private _multiContainerRef;
|
|
154
167
|
private _resizeObserver;
|
|
155
168
|
private _resizeDebounceTimer;
|
|
156
169
|
get _items(): any;
|
|
157
170
|
get _displayValue(): any;
|
|
158
|
-
get _placeholder(): string;
|
|
159
171
|
get _identifierKey(): string;
|
|
160
172
|
componentDidLoad(): void;
|
|
161
173
|
componentDidRender(): void;
|
|
@@ -173,11 +185,13 @@ export declare class Select {
|
|
|
173
185
|
private _onMouseDown;
|
|
174
186
|
private _onClick;
|
|
175
187
|
private _onBlur;
|
|
176
|
-
private
|
|
188
|
+
private _onAutoComplete;
|
|
177
189
|
private _checkvalue;
|
|
178
190
|
private _getItems;
|
|
179
191
|
private _getAddItem;
|
|
180
192
|
private _getLoadingItems;
|
|
181
193
|
private _setMultiContainerMaxWidth;
|
|
182
194
|
private _checkSelectedItems;
|
|
195
|
+
private _onDropdownOpen;
|
|
196
|
+
private _selectAllChange;
|
|
183
197
|
}
|
|
@@ -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
|
/**
|
|
@@ -928,6 +928,10 @@ export namespace Components {
|
|
|
928
928
|
* Wether to enable autocomplete
|
|
929
929
|
*/
|
|
930
930
|
"enableAutocomplete": boolean;
|
|
931
|
+
/**
|
|
932
|
+
* Wether to show the select all item with multi select
|
|
933
|
+
*/
|
|
934
|
+
"enableSelectAll": boolean;
|
|
931
935
|
/**
|
|
932
936
|
* The helper of the input group used by the select
|
|
933
937
|
*/
|
|
@@ -948,10 +952,6 @@ export namespace Components {
|
|
|
948
952
|
* The items to show in the dropdown
|
|
949
953
|
*/
|
|
950
954
|
"items": string | any[];
|
|
951
|
-
/**
|
|
952
|
-
* Wether to keep the query or not
|
|
953
|
-
*/
|
|
954
|
-
"keepQuery": boolean;
|
|
955
955
|
/**
|
|
956
956
|
* The label of the input group used by the select
|
|
957
957
|
*/
|
|
@@ -988,6 +988,14 @@ export namespace Components {
|
|
|
988
988
|
* Wether the field is required
|
|
989
989
|
*/
|
|
990
990
|
"required": boolean;
|
|
991
|
+
/**
|
|
992
|
+
* The icon to prefix for select all
|
|
993
|
+
*/
|
|
994
|
+
"selectAllIcon": IconVariant | undefined;
|
|
995
|
+
/**
|
|
996
|
+
* The text of the select all item
|
|
997
|
+
*/
|
|
998
|
+
"selectAllText": string;
|
|
991
999
|
/**
|
|
992
1000
|
* The key of the object to display in the input (overwrites displayKey)
|
|
993
1001
|
*/
|
|
@@ -2968,7 +2976,7 @@ declare namespace LocalJSX {
|
|
|
2968
2976
|
*/
|
|
2969
2977
|
"autoSelectFirst"?: boolean;
|
|
2970
2978
|
/**
|
|
2971
|
-
* The placeholder of the input
|
|
2979
|
+
* The placeholder of the input used for auto complete
|
|
2972
2980
|
*/
|
|
2973
2981
|
"autocompletePlaceholder"?: string;
|
|
2974
2982
|
/**
|
|
@@ -2995,6 +3003,10 @@ declare namespace LocalJSX {
|
|
|
2995
3003
|
* Wether to enable autocomplete
|
|
2996
3004
|
*/
|
|
2997
3005
|
"enableAutocomplete"?: boolean;
|
|
3006
|
+
/**
|
|
3007
|
+
* Wether to show the select all item with multi select
|
|
3008
|
+
*/
|
|
3009
|
+
"enableSelectAll"?: boolean;
|
|
2998
3010
|
/**
|
|
2999
3011
|
* The helper of the input group used by the select
|
|
3000
3012
|
*/
|
|
@@ -3015,10 +3027,6 @@ declare namespace LocalJSX {
|
|
|
3015
3027
|
* The items to show in the dropdown
|
|
3016
3028
|
*/
|
|
3017
3029
|
"items"?: string | any[];
|
|
3018
|
-
/**
|
|
3019
|
-
* Wether to keep the query or not
|
|
3020
|
-
*/
|
|
3021
|
-
"keepQuery"?: boolean;
|
|
3022
3030
|
/**
|
|
3023
3031
|
* The label of the input group used by the select
|
|
3024
3032
|
*/
|
|
@@ -3047,6 +3055,10 @@ declare namespace LocalJSX {
|
|
|
3047
3055
|
* Event when the query of the autocomplete changes
|
|
3048
3056
|
*/
|
|
3049
3057
|
"onQueryChange"?: (event: PSelectCustomEvent<string>) => void;
|
|
3058
|
+
/**
|
|
3059
|
+
* Event when the select all item has been selected or not
|
|
3060
|
+
*/
|
|
3061
|
+
"onSelectAllChange"?: (event: PSelectCustomEvent<any>) => void;
|
|
3050
3062
|
/**
|
|
3051
3063
|
* Event when the value changes
|
|
3052
3064
|
*/
|
|
@@ -3071,6 +3083,14 @@ declare namespace LocalJSX {
|
|
|
3071
3083
|
* Wether the field is required
|
|
3072
3084
|
*/
|
|
3073
3085
|
"required"?: boolean;
|
|
3086
|
+
/**
|
|
3087
|
+
* The icon to prefix for select all
|
|
3088
|
+
*/
|
|
3089
|
+
"selectAllIcon"?: IconVariant | undefined;
|
|
3090
|
+
/**
|
|
3091
|
+
* The text of the select all item
|
|
3092
|
+
*/
|
|
3093
|
+
"selectAllText"?: string;
|
|
3074
3094
|
/**
|
|
3075
3095
|
* The key of the object to display in the input (overwrites displayKey)
|
|
3076
3096
|
*/
|
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}.pb-1{padding-bottom:.25rem!important}.pt-2{padding-top:.5rem!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;
|
|
@@ -20898,11 +20901,11 @@ class Select {
|
|
|
20898
20901
|
this.addItemText = 'Add item';
|
|
20899
20902
|
this._showDropdown = false;
|
|
20900
20903
|
this._selectedItem = null;
|
|
20901
|
-
this.
|
|
20904
|
+
this._allSelected = false;
|
|
20902
20905
|
this._amountHidden = 0;
|
|
20903
20906
|
}
|
|
20904
20907
|
get _items() {
|
|
20905
|
-
var _a
|
|
20908
|
+
var _a;
|
|
20906
20909
|
if (!this.items || this.loading) {
|
|
20907
20910
|
return [];
|
|
20908
20911
|
}
|
|
@@ -20917,10 +20920,7 @@ class Select {
|
|
|
20917
20920
|
text: str,
|
|
20918
20921
|
}));
|
|
20919
20922
|
}
|
|
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) {
|
|
20923
|
+
if (((_a = this.query) === null || _a === void 0 ? void 0 : _a.length) && !this.asyncFilter) {
|
|
20924
20924
|
items = items.filter((item) => {
|
|
20925
20925
|
if (this.queryKey) {
|
|
20926
20926
|
return this._checkvalue(this.queryKey, item);
|
|
@@ -20932,20 +20932,14 @@ class Select {
|
|
|
20932
20932
|
return items === null || items === void 0 ? void 0 : items.slice(0, this.maxDisplayedItems);
|
|
20933
20933
|
}
|
|
20934
20934
|
get _displayValue() {
|
|
20935
|
-
var _a, _b, _c;
|
|
20936
|
-
if (this._isAutoCompleting) {
|
|
20937
|
-
return this.query;
|
|
20938
|
-
}
|
|
20935
|
+
var _a, _b, _c, _d;
|
|
20939
20936
|
if (this.multi) {
|
|
20940
|
-
|
|
20937
|
+
if (!((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
20938
|
+
return [];
|
|
20939
|
+
}
|
|
20940
|
+
return (_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b.map((i) => i === null || i === void 0 ? void 0 : i[this.displayKey]).filter((i) => !!i);
|
|
20941
20941
|
}
|
|
20942
|
-
return (
|
|
20943
|
-
}
|
|
20944
|
-
get _placeholder() {
|
|
20945
|
-
var _a;
|
|
20946
|
-
return this._isAutoCompleting && ((_a = this.autocompletePlaceholder) === null || _a === void 0 ? void 0 : _a.length)
|
|
20947
|
-
? this.autocompletePlaceholder
|
|
20948
|
-
: this.placeholder;
|
|
20942
|
+
return (_c = this._selectedItem) === null || _c === void 0 ? void 0 : _c[(_d = this.selectionDisplayKey) !== null && _d !== void 0 ? _d : this.displayKey];
|
|
20949
20943
|
}
|
|
20950
20944
|
get _identifierKey() {
|
|
20951
20945
|
var _a, _b;
|
|
@@ -20956,7 +20950,6 @@ class Select {
|
|
|
20956
20950
|
throw new Error('You must provide a valueKey or identifierKey');
|
|
20957
20951
|
}
|
|
20958
20952
|
if (this.multi) {
|
|
20959
|
-
this.enableAutocomplete = false;
|
|
20960
20953
|
this._setMultiContainerMaxWidth();
|
|
20961
20954
|
this._resizeObserver = new ResizeObserver(() => {
|
|
20962
20955
|
if (this._resizeDebounceTimer) {
|
|
@@ -20989,10 +20982,10 @@ class Select {
|
|
|
20989
20982
|
}
|
|
20990
20983
|
render() {
|
|
20991
20984
|
var _a, _b;
|
|
20992
|
-
return (hAsync(Host, { class: "p-select" },
|
|
20993
|
-
(!!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:
|
|
20985
|
+
return (hAsync(Host, { class: "p-select" }, hAsync("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: true, show: this._showDropdown &&
|
|
20986
|
+
(!!this._items.length || this.loading), 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)
|
|
20994
20987
|
? ' '
|
|
20995
|
-
: 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
|
|
20996
20989
|
? this._getLoadingItems()
|
|
20997
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) => {
|
|
20998
20991
|
var _a;
|
|
@@ -21004,7 +20997,6 @@ class Select {
|
|
|
21004
20997
|
return;
|
|
21005
20998
|
}
|
|
21006
20999
|
this._showDropdown = false;
|
|
21007
|
-
this._isAutoCompleting = false;
|
|
21008
21000
|
}
|
|
21009
21001
|
_valueChange() {
|
|
21010
21002
|
this._preselectItem();
|
|
@@ -21019,10 +21011,7 @@ class Select {
|
|
|
21019
21011
|
});
|
|
21020
21012
|
}
|
|
21021
21013
|
_preselectItem() {
|
|
21022
|
-
var _a, _b
|
|
21023
|
-
if (this._isAutoCompleting && ((_a = this.query) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
21024
|
-
return;
|
|
21025
|
-
}
|
|
21014
|
+
var _a, _b;
|
|
21026
21015
|
let value = typeof this.value === 'string' && this.multi
|
|
21027
21016
|
? JSON.parse(this.value)
|
|
21028
21017
|
: this.value;
|
|
@@ -21052,7 +21041,7 @@ class Select {
|
|
|
21052
21041
|
? identifier
|
|
21053
21042
|
: JSON.stringify(identifier);
|
|
21054
21043
|
const currentValue = this._selectedItem
|
|
21055
|
-
? (
|
|
21044
|
+
? (_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a[this._identifierKey]
|
|
21056
21045
|
: null;
|
|
21057
21046
|
const currentParsedValue = typeof currentValue === 'string' || typeof currentValue === 'number'
|
|
21058
21047
|
? currentValue
|
|
@@ -21060,7 +21049,7 @@ class Select {
|
|
|
21060
21049
|
if (this._selectedItem && currentParsedValue === parsedValue) {
|
|
21061
21050
|
return;
|
|
21062
21051
|
}
|
|
21063
|
-
if (!((
|
|
21052
|
+
if (!((_b = this._items) === null || _b === void 0 ? void 0 : _b.length) && value) {
|
|
21064
21053
|
this._selectValue(value);
|
|
21065
21054
|
return;
|
|
21066
21055
|
}
|
|
@@ -21078,7 +21067,6 @@ class Select {
|
|
|
21078
21067
|
let value = !!this.valueKey && this.valueKey !== 'false' && item !== null
|
|
21079
21068
|
? item === null || item === void 0 ? void 0 : item[this.valueKey]
|
|
21080
21069
|
: item;
|
|
21081
|
-
this.query = this.keepQuery ? item === null || item === void 0 ? void 0 : item[this.displayKey] : null;
|
|
21082
21070
|
if (this.multi) {
|
|
21083
21071
|
if (!this._selectedItem || !Array.isArray(this._selectedItem)) {
|
|
21084
21072
|
this._selectedItem = [];
|
|
@@ -21100,27 +21088,20 @@ class Select {
|
|
|
21100
21088
|
this._selectedItem = selectedItem;
|
|
21101
21089
|
this.value = valueArray;
|
|
21102
21090
|
this.valueChange.emit(valueArray);
|
|
21091
|
+
return;
|
|
21103
21092
|
}
|
|
21104
|
-
|
|
21105
|
-
|
|
21106
|
-
|
|
21107
|
-
|
|
21108
|
-
}
|
|
21109
|
-
if (!this.multi) {
|
|
21110
|
-
this._onBlur(true);
|
|
21111
|
-
}
|
|
21093
|
+
this._selectedItem = item;
|
|
21094
|
+
this.value = value;
|
|
21095
|
+
this.valueChange.emit(value);
|
|
21096
|
+
this._onBlur(true);
|
|
21112
21097
|
}
|
|
21113
21098
|
_onFocus(ev) {
|
|
21114
|
-
|
|
21115
|
-
|
|
21116
|
-
|
|
21117
|
-
|
|
21118
|
-
this._showDropdown = true;
|
|
21119
|
-
}
|
|
21120
|
-
return;
|
|
21099
|
+
ev.preventDefault();
|
|
21100
|
+
this._inputRef.blur();
|
|
21101
|
+
if (!this._showDropdown) {
|
|
21102
|
+
this._showDropdown = true;
|
|
21121
21103
|
}
|
|
21122
|
-
|
|
21123
|
-
this._isAutoCompleting = true;
|
|
21104
|
+
return;
|
|
21124
21105
|
}
|
|
21125
21106
|
_onMouseDown(ev) {
|
|
21126
21107
|
if (this.enableAutocomplete) {
|
|
@@ -21138,17 +21119,13 @@ class Select {
|
|
|
21138
21119
|
if (!this.enableAutocomplete && !force) {
|
|
21139
21120
|
return;
|
|
21140
21121
|
}
|
|
21141
|
-
this._isAutoCompleting = false;
|
|
21142
21122
|
this._showDropdown = false;
|
|
21143
21123
|
}
|
|
21144
|
-
|
|
21124
|
+
_onAutoComplete(ev) {
|
|
21145
21125
|
if (!this.enableAutocomplete) {
|
|
21146
21126
|
return;
|
|
21147
21127
|
}
|
|
21148
|
-
|
|
21149
|
-
this._isAutoCompleting = true;
|
|
21150
|
-
this._showDropdown = true;
|
|
21151
|
-
}
|
|
21128
|
+
this._showDropdown = true;
|
|
21152
21129
|
this.query = ev.target.value;
|
|
21153
21130
|
this.queryChange.emit(ev.target.value);
|
|
21154
21131
|
}
|
|
@@ -21157,7 +21134,8 @@ class Select {
|
|
|
21157
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);
|
|
21158
21135
|
}
|
|
21159
21136
|
_getItems() {
|
|
21160
|
-
|
|
21137
|
+
var _a;
|
|
21138
|
+
const items = this._items.map((item) => {
|
|
21161
21139
|
var _a, _b, _c;
|
|
21162
21140
|
return (hAsync("p-dropdown-menu-item", { onClick: () => this._selectValue(item), active: this.multi
|
|
21163
21141
|
? ((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.findIndex((i) => i[this._identifierKey] ===
|
|
@@ -21165,6 +21143,13 @@ class Select {
|
|
|
21165
21143
|
: item[this._identifierKey] ===
|
|
21166
21144
|
((_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])));
|
|
21167
21145
|
});
|
|
21146
|
+
if (this.enableSelectAll) {
|
|
21147
|
+
items.unshift(hAsync("p-dropdown-menu-item", { variant: "checkbox", onClick: () => this._selectAllChange(), active: this._allSelected }, ((_a = this.selectAllIcon) === null || _a === void 0 ? void 0 : _a.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)));
|
|
21148
|
+
}
|
|
21149
|
+
if (this.enableAutocomplete) {
|
|
21150
|
+
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) })));
|
|
21151
|
+
}
|
|
21152
|
+
return items;
|
|
21168
21153
|
}
|
|
21169
21154
|
_getAddItem() {
|
|
21170
21155
|
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" }))));
|
|
@@ -21205,6 +21190,16 @@ class Select {
|
|
|
21205
21190
|
extra.classList.remove('hidden');
|
|
21206
21191
|
}
|
|
21207
21192
|
}
|
|
21193
|
+
_onDropdownOpen(ev) {
|
|
21194
|
+
if (!ev.detail || !this.autocompleteInputRef) {
|
|
21195
|
+
return;
|
|
21196
|
+
}
|
|
21197
|
+
this.autocompleteInputRef.focus();
|
|
21198
|
+
}
|
|
21199
|
+
_selectAllChange() {
|
|
21200
|
+
this._allSelected = !this._allSelected;
|
|
21201
|
+
this.selectAllChange.emit(this._allSelected);
|
|
21202
|
+
}
|
|
21208
21203
|
get _el() { return getElement(this); }
|
|
21209
21204
|
static get watchers() { return {
|
|
21210
21205
|
"value": ["_valueChange"],
|
|
@@ -21235,9 +21230,11 @@ class Select {
|
|
|
21235
21230
|
"showChevron": [4, "show-chevron"],
|
|
21236
21231
|
"maxDisplayedItems": [2, "max-displayed-items"],
|
|
21237
21232
|
"enableAutocomplete": [4, "enable-autocomplete"],
|
|
21238
|
-
"keepQuery": [4, "keep-query"],
|
|
21239
21233
|
"asyncFilter": [4, "async-filter"],
|
|
21240
21234
|
"loading": [4],
|
|
21235
|
+
"enableSelectAll": [4, "enable-select-all"],
|
|
21236
|
+
"selectAllText": [1, "select-all-text"],
|
|
21237
|
+
"selectAllIcon": [1, "select-all-icon"],
|
|
21241
21238
|
"size": [1],
|
|
21242
21239
|
"prefix": [1],
|
|
21243
21240
|
"label": [1],
|
|
@@ -21249,7 +21246,7 @@ class Select {
|
|
|
21249
21246
|
"addItemText": [1, "add-item-text"],
|
|
21250
21247
|
"_showDropdown": [32],
|
|
21251
21248
|
"_selectedItem": [32],
|
|
21252
|
-
"
|
|
21249
|
+
"_allSelected": [32],
|
|
21253
21250
|
"_amountHidden": [32]
|
|
21254
21251
|
},
|
|
21255
21252
|
"$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;if(this._isAutoCompleting){return this.query}if(this.multi){return(t=this._selectedItem)===null||t===void 0?void 0:t.map((t=>t===null||t===void 0?void 0:t[this.displayKey])).filter((t=>!!t))}return(i=this._selectedItem)===null||i===void 0?void 0:i[(e=this.selectionDisplayKey)!==null&&e!==void 0?e: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"},this._showDropdown&&(!!this._items.length||this.loading),this._isAutoCompleting,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-85328396.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","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","_showDropdown","disableTriggerClick","calculateWidth","insideClick","scrollable","show","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\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{this._showDropdown && (!!this._items.length || this.loading)}\n\t\t\t\t{this._isAutoCompleting}\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;if(this._isAutoCompleting){return this.query}if(this.multi){return(t=this._selectedItem)===null||t===void 0?void 0:t.map((t=>t===null||t===void 0?void 0:t[this.displayKey])).filter((t=>!!t))}return(i=this._selectedItem)===null||i===void 0?void 0:i[(e=this.selectionDisplayKey)!==null&&e!==void 0?e: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"},this._showDropdown&&(!!this._items.length||this.loading),this._isAutoCompleting,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-85328396.entry.js.map
|