@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.
Files changed (33) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/build/p-9a363a18.entry.js +2 -0
  3. package/dist/build/p-9a363a18.entry.js.map +1 -0
  4. package/dist/build/paperless.esm.js +1 -1
  5. package/dist/build/paperless.esm.js.map +1 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/cjs/p-select.cjs.entry.js +52 -57
  8. package/dist/cjs/p-select.cjs.entry.js.map +1 -1
  9. package/dist/cjs/paperless.cjs.js +1 -1
  10. package/dist/collection/components/molecules/select/select.component.css +1 -1
  11. package/dist/collection/components/molecules/select/select.component.js +121 -70
  12. package/dist/collection/components/molecules/select/select.component.js.map +1 -1
  13. package/dist/components/p-select.js +56 -59
  14. package/dist/components/p-select.js.map +1 -1
  15. package/dist/esm/loader.js +1 -1
  16. package/dist/esm/p-select.entry.js +52 -57
  17. package/dist/esm/p-select.entry.js.map +1 -1
  18. package/dist/esm/paperless.js +1 -1
  19. package/dist/index.html +1 -1
  20. package/dist/paperless/p-9a363a18.entry.js +2 -0
  21. package/dist/paperless/p-9a363a18.entry.js.map +1 -0
  22. package/dist/paperless/paperless.esm.js +1 -1
  23. package/dist/paperless/paperless.esm.js.map +1 -1
  24. package/dist/sw.js +1 -1
  25. package/dist/sw.js.map +1 -1
  26. package/dist/types/components/molecules/select/select.component.d.ts +22 -8
  27. package/dist/types/components.d.ts +30 -10
  28. package/hydrate/index.js +56 -59
  29. package/package.json +1 -1
  30. package/dist/build/p-85328396.entry.js +0 -2
  31. package/dist/build/p-85328396.entry.js.map +0 -1
  32. package/dist/paperless/p-85328396.entry.js +0 -2
  33. 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 when auto completing
25
+ * The placeholder of the input used for auto complete
26
26
  */
27
27
  autocompletePlaceholder: string;
28
28
  /**
@@ -77,10 +77,6 @@ export declare class Select {
77
77
  * Wether to enable autocomplete
78
78
  */
79
79
  enableAutocomplete: boolean;
80
- /**
81
- * Wether to keep the query or not
82
- */
83
- keepQuery: boolean;
84
80
  /**
85
81
  * Wether the input uses async filtering
86
82
  */
@@ -89,6 +85,18 @@ export declare class Select {
89
85
  * Wether to show loading items
90
86
  */
91
87
  loading: boolean;
88
+ /**
89
+ * Wether to show the select all item with multi select
90
+ */
91
+ enableSelectAll: boolean;
92
+ /**
93
+ * The text of the select all item
94
+ */
95
+ selectAllText: string;
96
+ /**
97
+ * The icon to prefix for select all
98
+ */
99
+ selectAllIcon: IconVariant | undefined;
92
100
  /**
93
101
  * Event when the query of the autocomplete changes
94
102
  */
@@ -97,6 +105,10 @@ export declare class Select {
97
105
  * Event when the value changes
98
106
  */
99
107
  valueChange: EventEmitter<any>;
108
+ /**
109
+ * Event when the select all item has been selected or not
110
+ */
111
+ selectAllChange: EventEmitter<any>;
100
112
  /**
101
113
  * Event when the dropdown shows
102
114
  */
@@ -147,15 +159,15 @@ export declare class Select {
147
159
  private _el;
148
160
  private _showDropdown;
149
161
  private _selectedItem;
150
- private _isAutoCompleting;
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 _onChange;
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 when auto completing
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 when auto completing
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}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.py-4{padding-bottom:1rem!important;padding-top:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo-dark{--tw-text-opacity:1!important;color:rgb(44 75 169/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;position:relative;width:100%}p-select input.read-only{text-overflow:ellipsis}p-select .multi-container{align-items:center;bottom:0;display:flex;gap:.5rem;height:2.5rem;left:0;overflow:hidden;padding:1rem .5rem;pointer-events:none;position:absolute;width:100%}p-select .multi-container.size-small{height:2rem;padding:.5rem .25rem}p-select .multi-container .item{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(241 246 255/var(--tw-bg-opacity));border-radius:.25rem;color:rgb(44 75 169/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.625rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;pointer-events:auto;white-space:nowrap}p-select .multi-container .item p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity));font-size:.75rem;line-height:1rem}p-select .multi-container .extra{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;pointer-events:none}.static{position:static!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.gap-1{gap:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
20859
+ const selectComponentCss = ".pointer-events-none{pointer-events:none!important}.pointer-events-auto{pointer-events:auto!important}.absolute{position:absolute!important}.relative{position:relative!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-8{height:2rem!important}.h-\\[1\\.625rem\\]{height:1.625rem!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.rounded{border-radius:.25rem!important}.border-b{border-bottom-width:1px!important}.border-l{border-left-width:1px!important}.border-r{border-right-width:1px!important}.border-solid{border-style:solid!important}.border-indigo{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-indigo-light{background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.bg-indigo-light,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.py-4{padding-bottom:1rem!important;padding-top:1rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo-dark{--tw-text-opacity:1!important;color:rgb(44 75 169/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;position:relative;text-overflow:ellipsis;width:100%}p-select .p-input{--tw-text-opacity:1;--tw-bg-opacity:1;--tw-border-opacity:1!important;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-radius:.375rem;border-style:solid!important;border-width:1px;color:rgb(39 40 56/var(--tw-text-opacity));display:flex;font-size:1rem;height:2.5rem;justify-content:flex-start;line-height:1.5rem;outline:2px solid transparent!important;outline-offset:2px!important;padding-left:1rem;padding-right:1rem;width:100%!important}p-select .p-input::-moz-placeholder{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:1rem;line-height:1.5rem}p-select .p-input::placeholder{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:1rem;line-height:1.5rem}p-select .p-input.active,p-select .p-input.focus,p-select .p-input:focus,p-select .p-input:focus-visible,p-select .p-input:focus-within,p-select .p-input[active]{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity))!important;outline:2px solid transparent!important;outline-offset:2px!important}p-select .p-input.size-small{font-size:.875rem;height:2rem!important;line-height:1.25rem}p-select .p-input.size-small::-moz-placeholder{font-size:.875rem;line-height:1.25rem}p-select .p-input.size-small::placeholder{font-size:.875rem;line-height:1.25rem}p-select .multi-container{align-items:center;bottom:0;display:flex;gap:.5rem;height:2.5rem;left:0;overflow:hidden;padding:1rem .5rem;pointer-events:none;position:absolute;width:100%}p-select .multi-container.size-small{height:2rem;padding:.5rem .25rem}p-select .multi-container .item{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(241 246 255/var(--tw-bg-opacity));border-radius:.25rem;color:rgb(44 75 169/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.625rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;pointer-events:auto;white-space:nowrap}p-select .multi-container .item p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity));font-size:.75rem;line-height:1rem}p-select .multi-container .extra{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;pointer-events:none}.static{position:static!important}.sticky{position:sticky!important}.top-0{top:0!important}.top-2{top:.5rem!important}.-mt-2{margin-top:-.5rem!important}.mb-2{margin-bottom:.5rem!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.justify-center{justify-content:center!important}.gap-1{gap:.25rem!important}.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 = undefined;
20874
+ this.autocompletePlaceholder = 'Search...';
20874
20875
  this.value = undefined;
20875
20876
  this.displayKey = 'text';
20876
20877
  this.dropdownDisplayKey = undefined;
@@ -20884,9 +20885,11 @@ class Select {
20884
20885
  this.showChevron = true;
20885
20886
  this.maxDisplayedItems = 10;
20886
20887
  this.enableAutocomplete = true;
20887
- this.keepQuery = true;
20888
20888
  this.asyncFilter = false;
20889
20889
  this.loading = false;
20890
+ this.enableSelectAll = false;
20891
+ this.selectAllText = 'Select all';
20892
+ this.selectAllIcon = undefined;
20890
20893
  this.size = 'medium';
20891
20894
  this.prefix = undefined;
20892
20895
  this.label = undefined;
@@ -20898,11 +20901,11 @@ class Select {
20898
20901
  this.addItemText = 'Add item';
20899
20902
  this._showDropdown = false;
20900
20903
  this._selectedItem = null;
20901
- this._isAutoCompleting = false;
20904
+ this._allSelected = false;
20902
20905
  this._amountHidden = 0;
20903
20906
  }
20904
20907
  get _items() {
20905
- var _a, _b;
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._isAutoCompleting &&
20921
- ((_a = this.query) === null || _a === void 0 ? void 0 : _a.length) &&
20922
- this.query !== ((_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b[this.displayKey]) &&
20923
- !this.asyncFilter) {
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
- return (_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.map((i) => i === null || i === void 0 ? void 0 : i[this.displayKey]).filter((i) => !!i);
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 (_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b[(_c = this.selectionDisplayKey) !== null && _c !== void 0 ? _c : this.displayKey];
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" }, this._showDropdown && (!!this._items.length || this.loading), this._isAutoCompleting, hAsync("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, scrollable: true, show: this._showDropdown &&
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: this.enableAutocomplete ? 'focus' : 'click' }, hAsync("input", { slot: "input", type: "text", placeholder: this._placeholder, value: this.multi && ((_a = this._displayValue) === null || _a === void 0 ? void 0 : _a.length)
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: `p-input cursor-pointer ${!this._isAutoCompleting && 'read-only'}`, onFocus: (ev) => this._onFocus(ev), onMouseDown: (ev) => this._onMouseDown(ev), onClick: () => this._onClick(), onInput: (ev) => this._onChange(ev), ref: (ref) => (this._inputRef = ref) }), this.showChevron && (hAsync("p-icon", { variant: "chevron", slot: "suffix" }))), hAsync("div", { slot: "items" }, this.loading
20988
+ : this._displayValue, class: "p-input cursor-pointer read-only", onFocus: (ev) => this._onFocus(ev), onMouseDown: (ev) => this._onMouseDown(ev), onClick: () => this._onClick(), ref: (ref) => (this._inputRef = ref) }), this.showChevron && (hAsync("p-icon", { variant: "chevron", slot: "suffix" }))), hAsync("div", { slot: "items" }, this.loading
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, _c;
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
- ? (_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b[this._identifierKey]
21044
+ ? (_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a[this._identifierKey]
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 (!((_c = this._items) === null || _c === void 0 ? void 0 : _c.length) && value) {
21052
+ if (!((_b = this._items) === null || _b === void 0 ? void 0 : _b.length) && value) {
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
- else {
21105
- this._selectedItem = item;
21106
- this.value = value;
21107
- this.valueChange.emit(value);
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
- if (!this.enableAutocomplete) {
21115
- ev.preventDefault();
21116
- ev.stopPropogation();
21117
- if (!this._showDropdown) {
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
- this._showDropdown = true;
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
- _onChange(ev) {
21124
+ _onAutoComplete(ev) {
21145
21125
  if (!this.enableAutocomplete) {
21146
21126
  return;
21147
21127
  }
21148
- if (!this._isAutoCompleting) {
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
- return this._items.map((item) => {
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
- "_isAutoCompleting": [32],
21249
+ "_allSelected": [32],
21253
21250
  "_amountHidden": [32]
21254
21251
  },
21255
21252
  "$listeners$": [[6, "click", "documentClickHandler"]],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paperless/core",
3
- "version": "1.20.1",
3
+ "version": "1.21.0",
4
4
  "description": "Stencil Component Starter",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as e,H as s,g as r}from"./p-e4d5e7a7.js";import{c as n}from"./p-4d330cfc.js";const o=".pointer-events-none{pointer-events:none!important}.pointer-events-auto{pointer-events:auto!important}.absolute{position:absolute!important}.relative{position:relative!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-\\[1\\.625rem\\]{height:1.625rem!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.rounded{border-radius:.25rem!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.py-4{padding-bottom:1rem!important;padding-top:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo-dark{--tw-text-opacity:1!important;color:rgb(44 75 169/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}*{box-sizing:border-box}p-select{display:flex;flex-direction:column;position:relative;width:100%}p-select input.read-only{text-overflow:ellipsis}p-select .multi-container{align-items:center;bottom:0;display:flex;gap:.5rem;height:2.5rem;left:0;overflow:hidden;padding:1rem .5rem;pointer-events:none;position:absolute;width:100%}p-select .multi-container.size-small{height:2rem;padding:.5rem .25rem}p-select .multi-container .item{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(241 246 255/var(--tw-bg-opacity));border-radius:.25rem;color:rgb(44 75 169/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.625rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;pointer-events:auto;white-space:nowrap}p-select .multi-container .item p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity));font-size:.75rem;line-height:1rem}p-select .multi-container .extra{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;pointer-events:none}.static{position:static!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.gap-1{gap:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";const h=class{constructor(e){t(this,e);this.queryChange=i(this,"queryChange",3);this.valueChange=i(this,"valueChange",3);this.dropdownShown=i(this,"dropdownShown",3);this.add=i(this,"add",3);this.items=undefined;this.multi=undefined;this.icon=undefined;this.query=undefined;this.placeholder=undefined;this.autocompletePlaceholder=undefined;this.value=undefined;this.displayKey="text";this.dropdownDisplayKey=undefined;this.selectionDisplayKey=undefined;this.valueKey=undefined;this.avatarKey=undefined;this.avatarLettersKey=undefined;this.identifierKey=undefined;this.queryKey=undefined;this.autoSelectFirst=true;this.showChevron=true;this.maxDisplayedItems=10;this.enableAutocomplete=true;this.keepQuery=true;this.asyncFilter=false;this.loading=false;this.size="medium";this.prefix=undefined;this.label=undefined;this.helper=undefined;this.required=undefined;this.error=undefined;this.disabled=false;this.showAddItem=false;this.addItemText="Add item";this._showDropdown=false;this._selectedItem=null;this._isAutoCompleting=false;this._amountHidden=0}get _items(){var t,i;if(!this.items||this.loading){return[]}let e=typeof this.items==="string"?JSON.parse(this.items):this.items;if(typeof(e===null||e===void 0?void 0:e[0])==="string"){this.displayKey="text";this.valueKey="value";e=e.map((t=>({value:t,text:t})))}if(this._isAutoCompleting&&((t=this.query)===null||t===void 0?void 0:t.length)&&this.query!==((i=this._selectedItem)===null||i===void 0?void 0:i[this.displayKey])&&!this.asyncFilter){e=e.filter((t=>{if(this.queryKey){return this._checkvalue(this.queryKey,t)}return this._checkvalue(this._identifierKey,t)||this._checkvalue(this.displayKey,t)}))}return e===null||e===void 0?void 0:e.slice(0,this.maxDisplayedItems)}get _displayValue(){var t,i,e;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