@paperless/core 1.20.2 → 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 +11 -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 +45 -53
- 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 +114 -66
- package/dist/collection/components/molecules/select/select.component.js.map +1 -1
- package/dist/components/p-select.js +49 -55
- package/dist/components/p-select.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/p-select.entry.js +45 -53
- 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 +49 -55
- 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
|
*/
|
|
@@ -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);
|
|
@@ -20933,9 +20933,6 @@ class Select {
|
|
|
20933
20933
|
}
|
|
20934
20934
|
get _displayValue() {
|
|
20935
20935
|
var _a, _b, _c, _d;
|
|
20936
|
-
if (this._isAutoCompleting) {
|
|
20937
|
-
return this.query;
|
|
20938
|
-
}
|
|
20939
20936
|
if (this.multi) {
|
|
20940
20937
|
if (!((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
20941
20938
|
return [];
|
|
@@ -20944,12 +20941,6 @@ class Select {
|
|
|
20944
20941
|
}
|
|
20945
20942
|
return (_c = this._selectedItem) === null || _c === void 0 ? void 0 : _c[(_d = this.selectionDisplayKey) !== null && _d !== void 0 ? _d : this.displayKey];
|
|
20946
20943
|
}
|
|
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
20944
|
get _identifierKey() {
|
|
20954
20945
|
var _a, _b;
|
|
20955
20946
|
return (_b = (_a = this.identifierKey) !== null && _a !== void 0 ? _a : this.valueKey) !== null && _b !== void 0 ? _b : 'value';
|
|
@@ -20959,7 +20950,6 @@ class Select {
|
|
|
20959
20950
|
throw new Error('You must provide a valueKey or identifierKey');
|
|
20960
20951
|
}
|
|
20961
20952
|
if (this.multi) {
|
|
20962
|
-
this.enableAutocomplete = false;
|
|
20963
20953
|
this._setMultiContainerMaxWidth();
|
|
20964
20954
|
this._resizeObserver = new ResizeObserver(() => {
|
|
20965
20955
|
if (this._resizeDebounceTimer) {
|
|
@@ -20993,9 +20983,9 @@ class Select {
|
|
|
20993
20983
|
render() {
|
|
20994
20984
|
var _a, _b;
|
|
20995
20985
|
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:
|
|
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)
|
|
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,8 @@ 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;
|
|
21138
|
+
const items = this._items.map((item) => {
|
|
21164
21139
|
var _a, _b, _c;
|
|
21165
21140
|
return (hAsync("p-dropdown-menu-item", { onClick: () => this._selectValue(item), active: this.multi
|
|
21166
21141
|
? ((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.findIndex((i) => i[this._identifierKey] ===
|
|
@@ -21168,6 +21143,13 @@ class Select {
|
|
|
21168
21143
|
: item[this._identifierKey] ===
|
|
21169
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])));
|
|
21170
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;
|
|
21171
21153
|
}
|
|
21172
21154
|
_getAddItem() {
|
|
21173
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" }))));
|
|
@@ -21208,6 +21190,16 @@ class Select {
|
|
|
21208
21190
|
extra.classList.remove('hidden');
|
|
21209
21191
|
}
|
|
21210
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
|
+
}
|
|
21211
21203
|
get _el() { return getElement(this); }
|
|
21212
21204
|
static get watchers() { return {
|
|
21213
21205
|
"value": ["_valueChange"],
|
|
@@ -21238,9 +21230,11 @@ class Select {
|
|
|
21238
21230
|
"showChevron": [4, "show-chevron"],
|
|
21239
21231
|
"maxDisplayedItems": [2, "max-displayed-items"],
|
|
21240
21232
|
"enableAutocomplete": [4, "enable-autocomplete"],
|
|
21241
|
-
"keepQuery": [4, "keep-query"],
|
|
21242
21233
|
"asyncFilter": [4, "async-filter"],
|
|
21243
21234
|
"loading": [4],
|
|
21235
|
+
"enableSelectAll": [4, "enable-select-all"],
|
|
21236
|
+
"selectAllText": [1, "select-all-text"],
|
|
21237
|
+
"selectAllIcon": [1, "select-all-icon"],
|
|
21244
21238
|
"size": [1],
|
|
21245
21239
|
"prefix": [1],
|
|
21246
21240
|
"label": [1],
|
|
@@ -21252,7 +21246,7 @@ class Select {
|
|
|
21252
21246
|
"addItemText": [1, "add-item-text"],
|
|
21253
21247
|
"_showDropdown": [32],
|
|
21254
21248
|
"_selectedItem": [32],
|
|
21255
|
-
"
|
|
21249
|
+
"_allSelected": [32],
|
|
21256
21250
|
"_amountHidden": [32]
|
|
21257
21251
|
},
|
|
21258
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,s;if(this._isAutoCompleting){return this.query}if(this.multi){if(!((t=this._selectedItem)===null||t===void 0?void 0:t.length)){return[]}return(i=this._selectedItem)===null||i===void 0?void 0:i.map((t=>t===null||t===void 0?void 0:t[this.displayKey])).filter((t=>!!t))}return(e=this._selectedItem)===null||e===void 0?void 0:e[(s=this.selectionDisplayKey)!==null&&s!==void 0?s:this.displayKey]}get _placeholder(){var t;return this._isAutoCompleting&&((t=this.autocompletePlaceholder)===null||t===void 0?void 0:t.length)?this.autocompletePlaceholder:this.placeholder}get _identifierKey(){var t,i;return(i=(t=this.identifierKey)!==null&&t!==void 0?t:this.valueKey)!==null&&i!==void 0?i:"value"}componentDidLoad(){if(!this.valueKey&&!this.identifierKey){throw new Error("You must provide a valueKey or identifierKey")}if(this.multi){this.enableAutocomplete=false;this._setMultiContainerMaxWidth();this._resizeObserver=new ResizeObserver((()=>{if(this._resizeDebounceTimer){clearTimeout(this._resizeDebounceTimer);this._resizeDebounceTimer=null}this._resizeDebounceTimer=setTimeout((()=>{this._setMultiContainerMaxWidth();this._checkSelectedItems()}),200)}));this._resizeObserver.observe(this._el)}if(this.value){this._valueChange();return}this.itemChanges()}componentDidRender(){if(this.multi){this._setMultiContainerMaxWidth();this._checkSelectedItems()}}disconnectedCallback(){if(this.multi){this._resizeObserver.disconnect()}}render(){var t,i;return e(s,{class:"p-select"},e("p-dropdown",{disableTriggerClick:true,calculateWidth:true,insideClick:true,scrollable:true,show:this._showDropdown&&(!!this._items.length||this.loading)},e("p-input-group",{slot:"trigger",icon:this.icon,size:this.size,prefix:this.prefix,label:this.label,helper:this.helper,required:this.required,error:this.error,disabled:this.disabled,focused:this._showDropdown,focusMethod:this.enableAutocomplete?"focus":"click"},e("input",{slot:"input",type:"text",placeholder:this._placeholder,value:this.multi&&((t=this._displayValue)===null||t===void 0?void 0:t.length)?" ":this._displayValue,class:`p-input cursor-pointer ${!this._isAutoCompleting&&"read-only"}`,onFocus:t=>this._onFocus(t),onMouseDown:t=>this._onMouseDown(t),onClick:()=>this._onClick(),onInput:t=>this._onChange(t),ref:t=>this._inputRef=t}),this.showChevron&&e("p-icon",{variant:"chevron",slot:"suffix"})),e("div",{slot:"items"},this.loading?this._getLoadingItems():this._getItems(),this.showAddItem&&this._getAddItem())),this.multi&&((i=this._selectedItem)===null||i===void 0?void 0:i.length)>0&&e("div",{class:`multi-container size-${this.size}`,ref:t=>this._multiContainerRef=t},this._selectedItem.map((t=>{var i;return e("div",{class:"item",onClick:()=>this._selectValue(t)},t[(i=this.selectionDisplayKey)!==null&&i!==void 0?i:this.displayKey],e("p-icon",{variant:"negative"}))})),e("div",{class:"extra hidden"},"+",this._amountHidden)))}documentClickHandler({target:t}){if(!this._showDropdown||n(t,this._el)){return}this._showDropdown=false;this._isAutoCompleting=false}_valueChange(){this._preselectItem()}itemChanges(){this._preselectItem()}_showDropdownChanges(){this.dropdownShown.emit({value:this._showDropdown,query:this.query})}_preselectItem(){var t,i,e;if(this._isAutoCompleting&&((t=this.query)===null||t===void 0?void 0:t.length)){return}let s=typeof this.value==="string"&&this.multi?JSON.parse(this.value):this.value;if(this.multi){if(!Array.isArray(s)){this.value=[];this.valueChange.emit(this.value);return}this.value=s;if(!s.length){return}this._selectedItem=!!this.valueKey&&this.valueKey!=="false"?this._items.filter((t=>s.includes(t===null||t===void 0?void 0:t[this.valueKey]))):[...s];return}if(!this._selectedItem&&!s&&this.autoSelectFirst){s=this._items[0]}const r=typeof s==="object"&&s!==null?s[this._identifierKey]:s;const n=typeof r==="string"||typeof r==="number"?r:JSON.stringify(r);const o=this._selectedItem?(i=this._selectedItem)===null||i===void 0?void 0:i[this._identifierKey]:null;const h=typeof o==="string"||typeof o==="number"?o:JSON.stringify(o);if(this._selectedItem&&h===n){return}if(!((e=this._items)===null||e===void 0?void 0:e.length)&&s){this._selectValue(s);return}const a=this._items.find((t=>{const i=t===null||t===void 0?void 0:t[this._identifierKey];const e=typeof i==="string"||typeof i==="number"?i:JSON.stringify(i);return e===n}));this._selectValue(!!a?a:s)}_selectValue(t){let i=!!this.valueKey&&this.valueKey!=="false"&&t!==null?t===null||t===void 0?void 0:t[this.valueKey]:t;this.query=this.keepQuery?t===null||t===void 0?void 0:t[this.displayKey]:null;if(this.multi){if(!this._selectedItem||!Array.isArray(this._selectedItem)){this._selectedItem=[]}if(!this.value||!Array.isArray(this.value)){this.value=[]}const e=[...this._selectedItem];const s=[...this.value];const r=e.findIndex((i=>i[this._identifierKey]===t[this._identifierKey]));if(r===-1){e.push(t);s.push(i)}else{e.splice(r,1);s.splice(r,1)}this._selectedItem=e;this.value=s;this.valueChange.emit(s)}else{this._selectedItem=t;this.value=i;this.valueChange.emit(i)}if(!this.multi){this._onBlur(true)}}_onFocus(t){if(!this.enableAutocomplete){t.preventDefault();t.stopPropogation();if(!this._showDropdown){this._showDropdown=true}return}this._showDropdown=true;this._isAutoCompleting=true}_onMouseDown(t){if(this.enableAutocomplete){return}t.preventDefault()}_onClick(){if(this.enableAutocomplete){return}this._showDropdown=!this._showDropdown}_onBlur(t=false){if(!this.enableAutocomplete&&!t){return}this._isAutoCompleting=false;this._showDropdown=false}_onChange(t){if(!this.enableAutocomplete){return}if(!this._isAutoCompleting){this._isAutoCompleting=true;this._showDropdown=true}this.query=t.target.value;this.queryChange.emit(t.target.value)}_checkvalue(t,i){var e,s,r;return((s=(e=i===null||i===void 0?void 0:i[t])===null||e===void 0?void 0:e.toString())===null||s===void 0?void 0:s.toLowerCase().indexOf((r=this.query)===null||r===void 0?void 0:r.toLowerCase()))>=0}_getItems(){return this._items.map((t=>{var i,s,r;return e("p-dropdown-menu-item",{onClick:()=>this._selectValue(t),active:this.multi?((i=this._selectedItem)===null||i===void 0?void 0:i.findIndex((i=>i[this._identifierKey]===t[this._identifierKey])))>=0:t[this._identifierKey]===((s=this._selectedItem)===null||s===void 0?void 0:s[this._identifierKey]),variant:this.multi?"checkbox":"default"},this.avatarKey?e("span",{class:"flex items-center gap-2"},e("p-avatar",{size:"xsmall",src:t[this.avatarKey],letters:t[this.avatarLettersKey]}),t[(r=this.dropdownDisplayKey)!==null&&r!==void 0?r:this.displayKey]):t[this.displayKey])}))}_getAddItem(){return e("p-dropdown-menu-item",{onClick:()=>this.add.emit()},e("span",{class:"text-indigo font-semibold flex gap-1 items-center"},this.addItemText,e("p-icon",{variant:"plus"})))}_getLoadingItems(){return[0,0,0].map((()=>e("p-dropdown-menu-item",{enableHover:false},e("p-loader",{variant:"ghost",class:"h-6 w-full rounded"}))))}_setMultiContainerMaxWidth(){if(!this._inputRef||!this._multiContainerRef){return}this._multiContainerRef.style.maxWidth=`${this._inputRef.clientWidth-16}px`}_checkSelectedItems(){if(!this._multiContainerRef){return}const t=this._multiContainerRef.getBoundingClientRect();const i=Array.from(this._multiContainerRef.querySelectorAll(".item"));let e=0;for(const s of i){s.classList.remove("hidden");const i=s.getBoundingClientRect();if(i.right>t.right){s.classList.add("hidden");e++}}this._amountHidden=e;const s=this._multiContainerRef.querySelector(".extra");if(!s){return}if(!s.classList.contains("hidden")){s.classList.add("hidden")}if(e>0){s.classList.remove("hidden")}}get _el(){return r(this)}static get watchers(){return{value:["_valueChange"],items:["itemChanges"],_showDropdown:["_showDropdownChanges"]}}};h.style=o;export{h as p_select};
|
|
2
|
-
//# sourceMappingURL=p-33831081.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["selectComponentCss","Select","_items","this","items","loading","JSON","parse","displayKey","valueKey","map","str","value","text","_isAutoCompleting","_a","query","length","_b","_selectedItem","asyncFilter","filter","item","queryKey","_checkvalue","_identifierKey","slice","maxDisplayedItems","_displayValue","multi","i","_c","_d","selectionDisplayKey","_placeholder","autocompletePlaceholder","placeholder","identifierKey","componentDidLoad","Error","enableAutocomplete","_setMultiContainerMaxWidth","_resizeObserver","ResizeObserver","_resizeDebounceTimer","clearTimeout","setTimeout","_checkSelectedItems","observe","_el","_valueChange","itemChanges","componentDidRender","disconnectedCallback","disconnect","render","h","Host","class","disableTriggerClick","calculateWidth","insideClick","scrollable","show","_showDropdown","slot","icon","size","prefix","label","helper","required","error","disabled","focused","focusMethod","type","onFocus","ev","_onFocus","onMouseDown","_onMouseDown","onClick","_onClick","onInput","_onChange","ref","_inputRef","showChevron","variant","_getLoadingItems","_getItems","showAddItem","_getAddItem","_multiContainerRef","_selectValue","_amountHidden","documentClickHandler","target","childOf","_preselectItem","_showDropdownChanges","dropdownShown","emit","Array","isArray","valueChange","includes","autoSelectFirst","identifier","parsedValue","stringify","currentValue","currentParsedValue","find","itemIdentifier","parsedItemIdentifier","keepQuery","selectedItem","valueArray","includesIndex","findIndex","push","splice","_onBlur","preventDefault","stopPropogation","force","queryChange","key","toString","toLowerCase","indexOf","active","avatarKey","src","letters","avatarLettersKey","dropdownDisplayKey","add","addItemText","enableHover","style","maxWidth","clientWidth","containerRect","getBoundingClientRect","from","querySelectorAll","amountHidden","child","classList","remove","childRect","right","extra","querySelector","contains"],"sources":["src/components/molecules/select/select.component.scss?tag=p-select","src/components/molecules/select/select.component.tsx"],"sourcesContent":["p-select {\n\t@apply flex w-full flex-col relative;\n\n\tinput.read-only {\n\t\t@apply text-ellipsis;\n\t}\n\n\t.multi-container {\n\t\t@apply absolute bottom-0 left-0 h-10 flex gap-2 items-center px-2 py-4 overflow-hidden pointer-events-none w-full;\n\n\t\t&.size-small {\n\t\t\t@apply px-1 py-2 h-8;\n\t\t}\n\n\t\t.item {\n\t\t\t@apply bg-indigo-light rounded px-2 flex gap-2 items-center cursor-pointer text-indigo-dark h-[1.625rem] text-sm font-semibold pointer-events-auto whitespace-nowrap;\n\n\t\t\tp-icon {\n\t\t\t\t@apply text-indigo text-xs;\n\t\t\t}\n\t\t}\n\n\t\t.extra {\n\t\t\t@apply text-sm text-storm-medium pointer-events-none;\n\t\t}\n\t}\n}\n","import {\n Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h\n} from '@stencil/core';\n\nimport { childOf } from '../../../utils';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n\ttag: 'p-select',\n\tstyleUrl: 'select.component.scss',\n\tshadow: false,\n})\nexport class Select {\n\t/**\n\t * The items to show in the dropdown\n\t */\n\t@Prop() items: string | any[];\n\n\t/**\n\t * Wether to enable multi select\n\t */\n\t@Prop({ reflect: true }) multi: boolean;\n\n\t/**\n\t * Icon of the select box\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * The current query\n\t */\n\t@Prop() query: string;\n\n\t/**\n\t * The placeholder of the input\n\t */\n\t@Prop() placeholder: string;\n\n\t/**\n\t * The placeholder of the input when auto completing\n\t */\n\t@Prop() autocompletePlaceholder: string;\n\n\t/**\n\t * The current value\n\t */\n\t@Prop() value: any;\n\n\t/**\n\t * The key of the object to display\n\t */\n\t@Prop() displayKey: string = 'text';\n\n\t/**\n\t * The key of the object to display in the dropdown (overwrites displayKey)\n\t */\n\t@Prop() dropdownDisplayKey: string | undefined;\n\n\t/**\n\t * The key of the object to display in the input (overwrites displayKey)\n\t */\n\t@Prop() selectionDisplayKey: string | undefined;\n\n\t/**\n\t * The key of the object to return\n\t */\n\t@Prop() valueKey: string;\n\n\t/**\n\t * The key of avatar within an item to show\n\t */\n\t@Prop() avatarKey: string;\n\n\t/**\n\t * The key of avatar letters within an item to show when the avatar url doesn't work\n\t */\n\t@Prop() avatarLettersKey: string;\n\n\t/**\n\t * The key to identify an object\n\t */\n\t@Prop() identifierKey: string;\n\n\t/**\n\t * The key of the object to display\n\t */\n\t@Prop() queryKey?: string;\n\n\t/**\n\t * Wether to automatically select the first item\n\t */\n\t@Prop() autoSelectFirst: boolean = true;\n\n\t/**\n\t * Wether to show the chevron or not\n\t */\n\t@Prop() showChevron: boolean = true;\n\n\t/**\n\t * The maximum amount of items to display\n\t */\n\t@Prop() maxDisplayedItems: number = 10;\n\n\t/**\n\t * Wether to enable autocomplete\n\t */\n\t@Prop() enableAutocomplete: boolean = true;\n\n\t/**\n\t * Wether to keep the query or not\n\t */\n\t@Prop() keepQuery: boolean = true;\n\n\t/**\n\t * Wether the input uses async filtering\n\t */\n\t@Prop() asyncFilter: boolean = false;\n\n\t/**\n\t * Wether to show loading items\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * Event when the query of the autocomplete changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tqueryChange: EventEmitter<string>;\n\n\t/**\n\t * Event when the value changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tvalueChange: EventEmitter<any>;\n\n\t/**\n\t * Event when the dropdown shows\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tdropdownShown: EventEmitter<any>;\n\n\t/**\n\t * The size of the input group used by the select\n\t */\n\t@Prop() size: 'small' | 'medium' = 'medium';\n\n\t/**\n\t * The prefix of the input group used by the select\n\t */\n\t@Prop() prefix: string;\n\n\t/**\n\t * The label of the input group used by the select\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * The helper of the input group used by the select\n\t */\n\t@Prop() helper: string;\n\n\t/**\n\t * Wether the field is required\n\t */\n\t@Prop({ reflect: true }) required: boolean;\n\n\t/**\n\t * The helper of the input group used by the select\n\t */\n\t@Prop({ reflect: true }) error: string;\n\n\t/**\n\t * Wether the input group is disabled used by the select\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether to show a \"add\" item\n\t */\n\t@Prop() showAddItem: boolean = false;\n\n\t/**\n\t * The text to show when add item is being shown\n\t */\n\t@Prop() addItemText: string = 'Add item';\n\n\t/**\n\t * Event when the add item is clicked\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tadd: EventEmitter;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _showDropdown: any = false;\n\t@State() private _selectedItem: any = null;\n\n\t@State() private _isAutoCompleting: boolean = false;\n\t@State() private _amountHidden = 0;\n\n\tprivate _inputRef: HTMLInputElement;\n\tprivate _multiContainerRef: HTMLElement;\n\n\tprivate _resizeObserver: ResizeObserver;\n\tprivate _resizeDebounceTimer: NodeJS.Timer;\n\n\tget _items() {\n\t\tif (!this.items || this.loading) {\n\t\t\treturn [];\n\t\t}\n\n\t\tlet items =\n\t\t\ttypeof this.items === 'string'\n\t\t\t\t? JSON.parse(this.items)\n\t\t\t\t: this.items;\n\n\t\tif (typeof items?.[0] === 'string') {\n\t\t\tthis.displayKey = 'text';\n\t\t\tthis.valueKey = 'value';\n\n\t\t\titems = items.map((str) => ({\n\t\t\t\tvalue: str,\n\t\t\t\ttext: str,\n\t\t\t}));\n\t\t}\n\n\t\tif (\n\t\t\tthis._isAutoCompleting &&\n\t\t\tthis.query?.length &&\n\t\t\tthis.query !== this._selectedItem?.[this.displayKey] &&\n\t\t\t!this.asyncFilter\n\t\t) {\n\t\t\titems = items.filter((item) => {\n\t\t\t\tif (this.queryKey) {\n\t\t\t\t\treturn this._checkvalue(this.queryKey, item);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\tthis._checkvalue(this._identifierKey, item) ||\n\t\t\t\t\tthis._checkvalue(this.displayKey, item)\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\n\t\treturn items?.slice(0, this.maxDisplayedItems);\n\t}\n\n\tget _displayValue() {\n\t\tif (this._isAutoCompleting) {\n\t\t\treturn this.query;\n\t\t}\n\n\t\tif (this.multi) {\n\t\t\tif (!this._selectedItem?.length) {\n\t\t\t\treturn [];\n\t\t\t}\n\n\t\t\treturn this._selectedItem\n\t\t\t\t?.map((i) => i?.[this.displayKey])\n\t\t\t\t.filter((i) => !!i);\n\t\t}\n\n\t\treturn this._selectedItem?.[\n\t\t\tthis.selectionDisplayKey ?? this.displayKey\n\t\t];\n\t}\n\n\tget _placeholder() {\n\t\treturn this._isAutoCompleting && this.autocompletePlaceholder?.length\n\t\t\t? this.autocompletePlaceholder\n\t\t\t: this.placeholder;\n\t}\n\n\tget _identifierKey() {\n\t\treturn this.identifierKey ?? this.valueKey ?? 'value';\n\t}\n\n\tcomponentDidLoad() {\n\t\tif (!this.valueKey && !this.identifierKey) {\n\t\t\tthrow new Error('You must provide a valueKey or identifierKey');\n\t\t}\n\n\t\tif (this.multi) {\n\t\t\tthis.enableAutocomplete = false;\n\t\t\tthis._setMultiContainerMaxWidth();\n\n\t\t\tthis._resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (this._resizeDebounceTimer) {\n\t\t\t\t\tclearTimeout(this._resizeDebounceTimer);\n\t\t\t\t\tthis._resizeDebounceTimer = null;\n\t\t\t\t}\n\n\t\t\t\tthis._resizeDebounceTimer = setTimeout(() => {\n\t\t\t\t\tthis._setMultiContainerMaxWidth();\n\t\t\t\t\tthis._checkSelectedItems();\n\t\t\t\t}, 200);\n\t\t\t});\n\t\t\tthis._resizeObserver.observe(this._el);\n\t\t}\n\n\t\tif (this.value) {\n\t\t\tthis._valueChange();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.itemChanges();\n\t}\n\n\tcomponentDidRender() {\n\t\tif (this.multi) {\n\t\t\tthis._setMultiContainerMaxWidth();\n\t\t\tthis._checkSelectedItems();\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this.multi) {\n\t\t\tthis._resizeObserver.disconnect();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-select\">\n\t\t\t\t<p-dropdown\n\t\t\t\t\tdisableTriggerClick={true}\n\t\t\t\t\tcalculateWidth={true}\n\t\t\t\t\tinsideClick={true}\n\t\t\t\t\tscrollable={true}\n\t\t\t\t\tshow={\n\t\t\t\t\t\tthis._showDropdown &&\n\t\t\t\t\t\t(!!this._items.length || this.loading)\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<p-input-group\n\t\t\t\t\t\tslot=\"trigger\"\n\t\t\t\t\t\ticon={this.icon}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\tprefix={this.prefix}\n\t\t\t\t\t\tlabel={this.label}\n\t\t\t\t\t\thelper={this.helper}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\terror={this.error}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tfocused={this._showDropdown}\n\t\t\t\t\t\tfocusMethod={\n\t\t\t\t\t\t\tthis.enableAutocomplete ? 'focus' : 'click'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tplaceholder={this._placeholder}\n\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\tthis.multi && this._displayValue?.length\n\t\t\t\t\t\t\t\t\t? ' '\n\t\t\t\t\t\t\t\t\t: this._displayValue\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclass={`p-input cursor-pointer ${\n\t\t\t\t\t\t\t\t!this._isAutoCompleting && 'read-only'\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tonFocus={(ev) => this._onFocus(ev)}\n\t\t\t\t\t\t\tonMouseDown={(ev) => this._onMouseDown(ev)}\n\t\t\t\t\t\t\tonClick={() => this._onClick()}\n\t\t\t\t\t\t\tonInput={(ev) => this._onChange(ev)}\n\t\t\t\t\t\t\tref={(ref) => (this._inputRef = ref)}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t{this.showChevron && (\n\t\t\t\t\t\t\t<p-icon variant=\"chevron\" slot=\"suffix\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</p-input-group>\n\t\t\t\t\t<div slot=\"items\">\n\t\t\t\t\t\t{this.loading\n\t\t\t\t\t\t\t? this._getLoadingItems()\n\t\t\t\t\t\t\t: this._getItems()}\n\t\t\t\t\t\t{this.showAddItem && this._getAddItem()}\n\t\t\t\t\t</div>\n\t\t\t\t</p-dropdown>\n\n\t\t\t\t{this.multi && this._selectedItem?.length > 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={`multi-container size-${this.size}`}\n\t\t\t\t\t\tref={(ref) => (this._multiContainerRef = ref)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._selectedItem.map((item) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"item\"\n\t\t\t\t\t\t\t\tonClick={() => this._selectValue(item)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\titem[\n\t\t\t\t\t\t\t\t\t\tthis.selectionDisplayKey ??\n\t\t\t\t\t\t\t\t\t\t\tthis.displayKey\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t<p-icon variant=\"negative\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t<div class=\"extra hidden\">+{this._amountHidden}</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { target: 'document', capture: true })\n\tprotected documentClickHandler({ target }) {\n\t\tif (!this._showDropdown || childOf(target, this._el)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showDropdown = false;\n\t\tthis._isAutoCompleting = false;\n\t}\n\n\t@Watch('value')\n\tprivate _valueChange() {\n\t\tthis._preselectItem();\n\t}\n\n\t@Watch('items')\n\tpublic itemChanges() {\n\t\tthis._preselectItem();\n\t}\n\n\t@Watch('_showDropdown')\n\tpublic _showDropdownChanges() {\n\t\tthis.dropdownShown.emit({\n\t\t\tvalue: this._showDropdown,\n\t\t\tquery: this.query,\n\t\t});\n\t}\n\n\tprivate _preselectItem() {\n\t\tif (this._isAutoCompleting && this.query?.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet value =\n\t\t\ttypeof this.value === 'string' && this.multi\n\t\t\t\t? JSON.parse(this.value)\n\t\t\t\t: this.value;\n\n\t\tif (this.multi) {\n\t\t\tif (!Array.isArray(value)) {\n\t\t\t\tthis.value = [];\n\t\t\t\tthis.valueChange.emit(this.value);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.value = value;\n\t\t\tif (!value.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis._selectedItem =\n\t\t\t\t!!this.valueKey && this.valueKey !== 'false'\n\t\t\t\t\t? this._items.filter((i) =>\n\t\t\t\t\t\t\tvalue.includes(i?.[this.valueKey])\n\t\t\t\t\t\t)\n\t\t\t\t\t: [...value];\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._selectedItem && !value && this.autoSelectFirst) {\n\t\t\tvalue = this._items[0];\n\t\t}\n\n\t\tconst identifier =\n\t\t\ttypeof value === 'object' && value !== null\n\t\t\t\t? value[this._identifierKey]\n\t\t\t\t: value;\n\t\tconst parsedValue =\n\t\t\ttypeof identifier === 'string' || typeof identifier === 'number'\n\t\t\t\t? identifier\n\t\t\t\t: JSON.stringify(identifier);\n\n\t\tconst currentValue = this._selectedItem\n\t\t\t? this._selectedItem?.[this._identifierKey]\n\t\t\t: null;\n\t\tconst currentParsedValue =\n\t\t\ttypeof currentValue === 'string' || typeof currentValue === 'number'\n\t\t\t\t? currentValue\n\t\t\t\t: JSON.stringify(currentValue);\n\n\t\tif (this._selectedItem && currentParsedValue === parsedValue) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._items?.length && value) {\n\t\t\tthis._selectValue(value);\n\t\t\treturn;\n\t\t}\n\n\t\tconst item = this._items.find((i) => {\n\t\t\tconst itemIdentifier = i?.[this._identifierKey];\n\t\t\tconst parsedItemIdentifier =\n\t\t\t\ttypeof itemIdentifier === 'string' ||\n\t\t\t\ttypeof itemIdentifier === 'number'\n\t\t\t\t\t? itemIdentifier\n\t\t\t\t\t: JSON.stringify(itemIdentifier);\n\n\t\t\treturn parsedItemIdentifier === parsedValue;\n\t\t});\n\n\t\tthis._selectValue(!!item ? item : value);\n\t}\n\n\tprivate _selectValue(item) {\n\t\tlet value =\n\t\t\t!!this.valueKey && this.valueKey !== 'false' && item !== null\n\t\t\t\t? item?.[this.valueKey]\n\t\t\t\t: item;\n\n\t\tthis.query = this.keepQuery ? item?.[this.displayKey] : null;\n\n\t\tif (this.multi) {\n\t\t\tif (!this._selectedItem || !Array.isArray(this._selectedItem)) {\n\t\t\t\tthis._selectedItem = [];\n\t\t\t}\n\n\t\t\tif (!this.value || !Array.isArray(this.value)) {\n\t\t\t\tthis.value = [];\n\t\t\t}\n\n\t\t\tconst selectedItem = [...this._selectedItem];\n\t\t\tconst valueArray = [...this.value];\n\n\t\t\tconst includesIndex = selectedItem.findIndex(\n\t\t\t\t(i) => i[this._identifierKey] === item[this._identifierKey]\n\t\t\t);\n\t\t\tif (includesIndex === -1) {\n\t\t\t\tselectedItem.push(item);\n\t\t\t\tvalueArray.push(value);\n\t\t\t} else {\n\t\t\t\tselectedItem.splice(includesIndex, 1);\n\t\t\t\tvalueArray.splice(includesIndex, 1);\n\t\t\t}\n\n\t\t\tthis._selectedItem = selectedItem;\n\t\t\tthis.value = valueArray;\n\t\t\tthis.valueChange.emit(valueArray);\n\t\t} else {\n\t\t\tthis._selectedItem = item;\n\t\t\tthis.value = value;\n\t\t\tthis.valueChange.emit(value);\n\t\t}\n\n\t\tif (!this.multi) {\n\t\t\tthis._onBlur(true);\n\t\t}\n\t}\n\n\tprivate _onFocus(ev) {\n\t\tif (!this.enableAutocomplete) {\n\t\t\tev.preventDefault();\n\t\t\tev.stopPropogation();\n\n\t\t\tif (!this._showDropdown) {\n\t\t\t\tthis._showDropdown = true;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showDropdown = true;\n\t\tthis._isAutoCompleting = true;\n\t}\n\n\tprivate _onMouseDown(ev) {\n\t\tif (this.enableAutocomplete) {\n\t\t\treturn;\n\t\t}\n\n\t\tev.preventDefault();\n\t}\n\n\tprivate _onClick() {\n\t\tif (this.enableAutocomplete) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showDropdown = !this._showDropdown;\n\t}\n\n\tprivate _onBlur(force = false) {\n\t\tif (!this.enableAutocomplete && !force) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._isAutoCompleting = false;\n\t\tthis._showDropdown = false;\n\t}\n\n\tprivate _onChange(ev) {\n\t\tif (!this.enableAutocomplete) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._isAutoCompleting) {\n\t\t\tthis._isAutoCompleting = true;\n\t\t\tthis._showDropdown = true;\n\t\t}\n\n\t\tthis.query = ev.target.value;\n\t\tthis.queryChange.emit(ev.target.value);\n\t}\n\n\tprivate _checkvalue(key, item) {\n\t\treturn (\n\t\t\titem?.[key]\n\t\t\t\t?.toString()\n\t\t\t\t?.toLowerCase()\n\t\t\t\t.indexOf(this.query?.toLowerCase()) >= 0\n\t\t);\n\t}\n\n\tprivate _getItems() {\n\t\treturn this._items.map((item) => (\n\t\t\t<p-dropdown-menu-item\n\t\t\t\tonClick={() => this._selectValue(item)}\n\t\t\t\tactive={\n\t\t\t\t\tthis.multi\n\t\t\t\t\t\t? this._selectedItem?.findIndex(\n\t\t\t\t\t\t\t\t(i) =>\n\t\t\t\t\t\t\t\t\ti[this._identifierKey] ===\n\t\t\t\t\t\t\t\t\titem[this._identifierKey]\n\t\t\t\t\t\t\t) >= 0\n\t\t\t\t\t\t: item[this._identifierKey] ===\n\t\t\t\t\t\t\tthis._selectedItem?.[this._identifierKey]\n\t\t\t\t}\n\t\t\t\tvariant={this.multi ? 'checkbox' : 'default'}\n\t\t\t>\n\t\t\t\t{this.avatarKey ? (\n\t\t\t\t\t<span class=\"flex items-center gap-2\">\n\t\t\t\t\t\t<p-avatar\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\tsrc={item[this.avatarKey]}\n\t\t\t\t\t\t\tletters={item[this.avatarLettersKey]}\n\t\t\t\t\t\t></p-avatar>\n\t\t\t\t\t\t{item[this.dropdownDisplayKey ?? this.displayKey]}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\titem[this.displayKey]\n\t\t\t\t)}\n\t\t\t</p-dropdown-menu-item>\n\t\t));\n\t}\n\n\tprivate _getAddItem() {\n\t\treturn (\n\t\t\t<p-dropdown-menu-item onClick={() => this.add.emit()}>\n\t\t\t\t<span class=\"text-indigo font-semibold flex gap-1 items-center\">\n\t\t\t\t\t{this.addItemText}\n\t\t\t\t\t<p-icon variant=\"plus\" />\n\t\t\t\t</span>\n\t\t\t</p-dropdown-menu-item>\n\t\t);\n\t}\n\n\tprivate _getLoadingItems() {\n\t\treturn [0, 0, 0].map(() => (\n\t\t\t<p-dropdown-menu-item enableHover={false}>\n\t\t\t\t<p-loader variant=\"ghost\" class=\"h-6 w-full rounded\" />\n\t\t\t</p-dropdown-menu-item>\n\t\t));\n\t}\n\n\tprivate _setMultiContainerMaxWidth() {\n\t\tif (!this._inputRef || !this._multiContainerRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._multiContainerRef.style.maxWidth = `${this._inputRef.clientWidth - 16}px`;\n\t}\n\n\tprivate _checkSelectedItems() {\n\t\tif (!this._multiContainerRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst containerRect = this._multiContainerRef.getBoundingClientRect();\n\t\tconst items = Array.from(\n\t\t\tthis._multiContainerRef.querySelectorAll('.item')\n\t\t) as HTMLElement[];\n\n\t\tlet amountHidden = 0;\n\n\t\tfor (const child of items) {\n\t\t\tchild.classList.remove('hidden');\n\n\t\t\tconst childRect = child.getBoundingClientRect();\n\t\t\tif (childRect.right > containerRect.right) {\n\t\t\t\tchild.classList.add('hidden');\n\t\t\t\tamountHidden++;\n\t\t\t}\n\t\t}\n\n\t\tthis._amountHidden = amountHidden;\n\t\tconst extra = this._multiContainerRef.querySelector('.extra');\n\t\tif (!extra) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!extra.classList.contains('hidden')) {\n\t\t\textra.classList.add('hidden');\n\t\t}\n\n\t\tif (amountHidden > 0) {\n\t\t\textra.classList.remove('hidden');\n\t\t}\n\t}\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,H as s,g as r}from"./p-e4d5e7a7.js";import{c as n}from"./p-4d330cfc.js";const o=".pointer-events-none{pointer-events:none!important}.pointer-events-auto{pointer-events:auto!important}.absolute{position:absolute!important}.relative{position:relative!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-\\[1\\.625rem\\]{height:1.625rem!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.rounded{border-radius:.25rem!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.py-4{padding-bottom:1rem!important;padding-top:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo-dark{--tw-text-opacity:1!important;color:rgb(44 75 169/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;position:relative;width:100%}p-select input.read-only{text-overflow:ellipsis}p-select .multi-container{align-items:center;bottom:0;display:flex;gap:.5rem;height:2.5rem;left:0;overflow:hidden;padding:1rem .5rem;pointer-events:none;position:absolute;width:100%}p-select .multi-container.size-small{height:2rem;padding:.5rem .25rem}p-select .multi-container .item{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(241 246 255/var(--tw-bg-opacity));border-radius:.25rem;color:rgb(44 75 169/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.625rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;pointer-events:auto;white-space:nowrap}p-select .multi-container .item p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity));font-size:.75rem;line-height:1rem}p-select .multi-container .extra{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;pointer-events:none}.static{position:static!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.gap-1{gap:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";const h=class{constructor(e){t(this,e);this.queryChange=i(this,"queryChange",3);this.valueChange=i(this,"valueChange",3);this.dropdownShown=i(this,"dropdownShown",3);this.add=i(this,"add",3);this.items=undefined;this.multi=undefined;this.icon=undefined;this.query=undefined;this.placeholder=undefined;this.autocompletePlaceholder=undefined;this.value=undefined;this.displayKey="text";this.dropdownDisplayKey=undefined;this.selectionDisplayKey=undefined;this.valueKey=undefined;this.avatarKey=undefined;this.avatarLettersKey=undefined;this.identifierKey=undefined;this.queryKey=undefined;this.autoSelectFirst=true;this.showChevron=true;this.maxDisplayedItems=10;this.enableAutocomplete=true;this.keepQuery=true;this.asyncFilter=false;this.loading=false;this.size="medium";this.prefix=undefined;this.label=undefined;this.helper=undefined;this.required=undefined;this.error=undefined;this.disabled=false;this.showAddItem=false;this.addItemText="Add item";this._showDropdown=false;this._selectedItem=null;this._isAutoCompleting=false;this._amountHidden=0}get _items(){var t,i;if(!this.items||this.loading){return[]}let e=typeof this.items==="string"?JSON.parse(this.items):this.items;if(typeof(e===null||e===void 0?void 0:e[0])==="string"){this.displayKey="text";this.valueKey="value";e=e.map((t=>({value:t,text:t})))}if(this._isAutoCompleting&&((t=this.query)===null||t===void 0?void 0:t.length)&&this.query!==((i=this._selectedItem)===null||i===void 0?void 0:i[this.displayKey])&&!this.asyncFilter){e=e.filter((t=>{if(this.queryKey){return this._checkvalue(this.queryKey,t)}return this._checkvalue(this._identifierKey,t)||this._checkvalue(this.displayKey,t)}))}return e===null||e===void 0?void 0:e.slice(0,this.maxDisplayedItems)}get _displayValue(){var t,i,e,s;if(this._isAutoCompleting){return this.query}if(this.multi){if(!((t=this._selectedItem)===null||t===void 0?void 0:t.length)){return[]}return(i=this._selectedItem)===null||i===void 0?void 0:i.map((t=>t===null||t===void 0?void 0:t[this.displayKey])).filter((t=>!!t))}return(e=this._selectedItem)===null||e===void 0?void 0:e[(s=this.selectionDisplayKey)!==null&&s!==void 0?s:this.displayKey]}get _placeholder(){var t;return this._isAutoCompleting&&((t=this.autocompletePlaceholder)===null||t===void 0?void 0:t.length)?this.autocompletePlaceholder:this.placeholder}get _identifierKey(){var t,i;return(i=(t=this.identifierKey)!==null&&t!==void 0?t:this.valueKey)!==null&&i!==void 0?i:"value"}componentDidLoad(){if(!this.valueKey&&!this.identifierKey){throw new Error("You must provide a valueKey or identifierKey")}if(this.multi){this.enableAutocomplete=false;this._setMultiContainerMaxWidth();this._resizeObserver=new ResizeObserver((()=>{if(this._resizeDebounceTimer){clearTimeout(this._resizeDebounceTimer);this._resizeDebounceTimer=null}this._resizeDebounceTimer=setTimeout((()=>{this._setMultiContainerMaxWidth();this._checkSelectedItems()}),200)}));this._resizeObserver.observe(this._el)}if(this.value){this._valueChange();return}this.itemChanges()}componentDidRender(){if(this.multi){this._setMultiContainerMaxWidth();this._checkSelectedItems()}}disconnectedCallback(){if(this.multi){this._resizeObserver.disconnect()}}render(){var t,i;return e(s,{class:"p-select"},e("p-dropdown",{disableTriggerClick:true,calculateWidth:true,insideClick:true,scrollable:true,show:this._showDropdown&&(!!this._items.length||this.loading)},e("p-input-group",{slot:"trigger",icon:this.icon,size:this.size,prefix:this.prefix,label:this.label,helper:this.helper,required:this.required,error:this.error,disabled:this.disabled,focused:this._showDropdown,focusMethod:this.enableAutocomplete?"focus":"click"},e("input",{slot:"input",type:"text",placeholder:this._placeholder,value:this.multi&&((t=this._displayValue)===null||t===void 0?void 0:t.length)?" ":this._displayValue,class:`p-input cursor-pointer ${!this._isAutoCompleting&&"read-only"}`,onFocus:t=>this._onFocus(t),onMouseDown:t=>this._onMouseDown(t),onClick:()=>this._onClick(),onInput:t=>this._onChange(t),ref:t=>this._inputRef=t}),this.showChevron&&e("p-icon",{variant:"chevron",slot:"suffix"})),e("div",{slot:"items"},this.loading?this._getLoadingItems():this._getItems(),this.showAddItem&&this._getAddItem())),this.multi&&((i=this._selectedItem)===null||i===void 0?void 0:i.length)>0&&e("div",{class:`multi-container size-${this.size}`,ref:t=>this._multiContainerRef=t},this._selectedItem.map((t=>{var i;return e("div",{class:"item",onClick:()=>this._selectValue(t)},t[(i=this.selectionDisplayKey)!==null&&i!==void 0?i:this.displayKey],e("p-icon",{variant:"negative"}))})),e("div",{class:"extra hidden"},"+",this._amountHidden)))}documentClickHandler({target:t}){if(!this._showDropdown||n(t,this._el)){return}this._showDropdown=false;this._isAutoCompleting=false}_valueChange(){this._preselectItem()}itemChanges(){this._preselectItem()}_showDropdownChanges(){this.dropdownShown.emit({value:this._showDropdown,query:this.query})}_preselectItem(){var t,i,e;if(this._isAutoCompleting&&((t=this.query)===null||t===void 0?void 0:t.length)){return}let s=typeof this.value==="string"&&this.multi?JSON.parse(this.value):this.value;if(this.multi){if(!Array.isArray(s)){this.value=[];this.valueChange.emit(this.value);return}this.value=s;if(!s.length){return}this._selectedItem=!!this.valueKey&&this.valueKey!=="false"?this._items.filter((t=>s.includes(t===null||t===void 0?void 0:t[this.valueKey]))):[...s];return}if(!this._selectedItem&&!s&&this.autoSelectFirst){s=this._items[0]}const r=typeof s==="object"&&s!==null?s[this._identifierKey]:s;const n=typeof r==="string"||typeof r==="number"?r:JSON.stringify(r);const o=this._selectedItem?(i=this._selectedItem)===null||i===void 0?void 0:i[this._identifierKey]:null;const h=typeof o==="string"||typeof o==="number"?o:JSON.stringify(o);if(this._selectedItem&&h===n){return}if(!((e=this._items)===null||e===void 0?void 0:e.length)&&s){this._selectValue(s);return}const a=this._items.find((t=>{const i=t===null||t===void 0?void 0:t[this._identifierKey];const e=typeof i==="string"||typeof i==="number"?i:JSON.stringify(i);return e===n}));this._selectValue(!!a?a:s)}_selectValue(t){let i=!!this.valueKey&&this.valueKey!=="false"&&t!==null?t===null||t===void 0?void 0:t[this.valueKey]:t;this.query=this.keepQuery?t===null||t===void 0?void 0:t[this.displayKey]:null;if(this.multi){if(!this._selectedItem||!Array.isArray(this._selectedItem)){this._selectedItem=[]}if(!this.value||!Array.isArray(this.value)){this.value=[]}const e=[...this._selectedItem];const s=[...this.value];const r=e.findIndex((i=>i[this._identifierKey]===t[this._identifierKey]));if(r===-1){e.push(t);s.push(i)}else{e.splice(r,1);s.splice(r,1)}this._selectedItem=e;this.value=s;this.valueChange.emit(s)}else{this._selectedItem=t;this.value=i;this.valueChange.emit(i)}if(!this.multi){this._onBlur(true)}}_onFocus(t){if(!this.enableAutocomplete){t.preventDefault();t.stopPropogation();if(!this._showDropdown){this._showDropdown=true}return}this._showDropdown=true;this._isAutoCompleting=true}_onMouseDown(t){if(this.enableAutocomplete){return}t.preventDefault()}_onClick(){if(this.enableAutocomplete){return}this._showDropdown=!this._showDropdown}_onBlur(t=false){if(!this.enableAutocomplete&&!t){return}this._isAutoCompleting=false;this._showDropdown=false}_onChange(t){if(!this.enableAutocomplete){return}if(!this._isAutoCompleting){this._isAutoCompleting=true;this._showDropdown=true}this.query=t.target.value;this.queryChange.emit(t.target.value)}_checkvalue(t,i){var e,s,r;return((s=(e=i===null||i===void 0?void 0:i[t])===null||e===void 0?void 0:e.toString())===null||s===void 0?void 0:s.toLowerCase().indexOf((r=this.query)===null||r===void 0?void 0:r.toLowerCase()))>=0}_getItems(){return this._items.map((t=>{var i,s,r;return e("p-dropdown-menu-item",{onClick:()=>this._selectValue(t),active:this.multi?((i=this._selectedItem)===null||i===void 0?void 0:i.findIndex((i=>i[this._identifierKey]===t[this._identifierKey])))>=0:t[this._identifierKey]===((s=this._selectedItem)===null||s===void 0?void 0:s[this._identifierKey]),variant:this.multi?"checkbox":"default"},this.avatarKey?e("span",{class:"flex items-center gap-2"},e("p-avatar",{size:"xsmall",src:t[this.avatarKey],letters:t[this.avatarLettersKey]}),t[(r=this.dropdownDisplayKey)!==null&&r!==void 0?r:this.displayKey]):t[this.displayKey])}))}_getAddItem(){return e("p-dropdown-menu-item",{onClick:()=>this.add.emit()},e("span",{class:"text-indigo font-semibold flex gap-1 items-center"},this.addItemText,e("p-icon",{variant:"plus"})))}_getLoadingItems(){return[0,0,0].map((()=>e("p-dropdown-menu-item",{enableHover:false},e("p-loader",{variant:"ghost",class:"h-6 w-full rounded"}))))}_setMultiContainerMaxWidth(){if(!this._inputRef||!this._multiContainerRef){return}this._multiContainerRef.style.maxWidth=`${this._inputRef.clientWidth-16}px`}_checkSelectedItems(){if(!this._multiContainerRef){return}const t=this._multiContainerRef.getBoundingClientRect();const i=Array.from(this._multiContainerRef.querySelectorAll(".item"));let e=0;for(const s of i){s.classList.remove("hidden");const i=s.getBoundingClientRect();if(i.right>t.right){s.classList.add("hidden");e++}}this._amountHidden=e;const s=this._multiContainerRef.querySelector(".extra");if(!s){return}if(!s.classList.contains("hidden")){s.classList.add("hidden")}if(e>0){s.classList.remove("hidden")}}get _el(){return r(this)}static get watchers(){return{value:["_valueChange"],items:["itemChanges"],_showDropdown:["_showDropdownChanges"]}}};h.style=o;export{h as p_select};
|
|
2
|
-
//# sourceMappingURL=p-33831081.entry.js.map
|