@melodicdev/components 1.2.2 → 1.2.4
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/lib/components/forms/autocomplete/autocomplete.component.d.ts +2 -2
- package/lib/components/forms/autocomplete/autocomplete.component.d.ts.map +1 -1
- package/lib/components/forms/autocomplete/autocomplete.component.js +9 -9
- package/lib/components/forms/autocomplete/autocomplete.template.js +7 -7
- package/package.json +1 -1
|
@@ -66,9 +66,9 @@ export declare class AutocompleteComponent implements IElementRef, OnCreate, OnD
|
|
|
66
66
|
/** Currently focused option index */
|
|
67
67
|
focusedIndex: number;
|
|
68
68
|
/** Loading state for async search */
|
|
69
|
-
|
|
69
|
+
loading: boolean;
|
|
70
70
|
/** Resolved async results */
|
|
71
|
-
|
|
71
|
+
asyncOptions: AutocompleteOption[];
|
|
72
72
|
private readonly _handleKeyDown;
|
|
73
73
|
private readonly _handleDocumentClick;
|
|
74
74
|
private _handleScroll;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/autocomplete/autocomplete.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAKxF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAMa,qBAAsB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IAC7E,UAAU,EAAG,WAAW,CAAC;IAEzB,iBAAiB;IACjB,KAAK,SAAM;IAEX,uBAAuB;IACvB,WAAW,SAAY;IAEvB,kCAAkC;IAClC,IAAI,SAAM;IAEV,iDAAiD;IACjD,KAAK,SAAM;IAEX,qBAAqB;IACrB,IAAI,EAAE,IAAI,CAAQ;IAElB,4BAA4B;IAC5B,QAAQ,UAAS;IAEjB,uBAAuB;IACvB,QAAQ,UAAS;IAEjB,+BAA+B;IAC/B,QAAQ,UAAS;IAEjB,6CAA6C;IAC7C,KAAK,SAAM;IAEX,6CAA6C;IAC7C,MAAM,EAAE,MAAM,EAAE,CAAM;IAEtB,0BAA0B;IAC1B,OAAO,EAAE,kBAAkB,EAAE,CAAM;IAEnC,4BAA4B;IAC5B,QAAQ,EAAE,oBAAoB,GAAG,IAAI,CAAQ;IAE7C,mCAAmC;IACnC,QAAQ,SAAO;IAEf,qDAAqD;IACrD,QAAQ,SAAK;IAEb,uBAAuB;IACvB,QAAQ,UAAQ;IAEhB,2BAA2B;IAC3B,MAAM,SAAM;IAEZ,+BAA+B;IAC/B,MAAM,UAAS;IAEf,qCAAqC;IACrC,YAAY,SAAM;IAElB,qCAAqC;IACrC,
|
|
1
|
+
{"version":3,"file":"autocomplete.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/autocomplete/autocomplete.component.ts"],"names":[],"mappings":"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"}
|
|
@@ -73,9 +73,9 @@ let AutocompleteComponent = class AutocompleteComponent {
|
|
|
73
73
|
/** Currently focused option index */
|
|
74
74
|
this.focusedIndex = -1;
|
|
75
75
|
/** Loading state for async search */
|
|
76
|
-
this.
|
|
76
|
+
this.loading = false;
|
|
77
77
|
/** Resolved async results */
|
|
78
|
-
this.
|
|
78
|
+
this.asyncOptions = [];
|
|
79
79
|
this._handleKeyDown = this.onKeyDown.bind(this);
|
|
80
80
|
this._handleDocumentClick = this.onDocumentClick.bind(this);
|
|
81
81
|
this._handleScroll = null;
|
|
@@ -168,7 +168,7 @@ let AutocompleteComponent = class AutocompleteComponent {
|
|
|
168
168
|
if (this.disabled)
|
|
169
169
|
return;
|
|
170
170
|
if (this.minChars === 0) {
|
|
171
|
-
if (this.searchFn && this.
|
|
171
|
+
if (this.searchFn && this.asyncOptions.length === 0) {
|
|
172
172
|
this.debouncedSearch('');
|
|
173
173
|
}
|
|
174
174
|
if (!this.isOpen) {
|
|
@@ -180,7 +180,7 @@ let AutocompleteComponent = class AutocompleteComponent {
|
|
|
180
180
|
this.handleInputClick = (event) => {
|
|
181
181
|
event.stopPropagation();
|
|
182
182
|
if (!this.isOpen && this.minChars === 0) {
|
|
183
|
-
if (this.searchFn && this.
|
|
183
|
+
if (this.searchFn && this.asyncOptions.length === 0) {
|
|
184
184
|
this.debouncedSearch('');
|
|
185
185
|
}
|
|
186
186
|
this.open();
|
|
@@ -291,12 +291,12 @@ let AutocompleteComponent = class AutocompleteComponent {
|
|
|
291
291
|
}
|
|
292
292
|
/** All available options (static or async) */
|
|
293
293
|
get allOptions() {
|
|
294
|
-
return this.searchFn ? this.
|
|
294
|
+
return this.searchFn ? this.asyncOptions : this.options;
|
|
295
295
|
}
|
|
296
296
|
/** Filtered options for display */
|
|
297
297
|
get filteredOptions() {
|
|
298
298
|
if (this.searchFn) {
|
|
299
|
-
return this.
|
|
299
|
+
return this.asyncOptions;
|
|
300
300
|
}
|
|
301
301
|
const query = this.search.trim().toLowerCase();
|
|
302
302
|
if (!query)
|
|
@@ -341,13 +341,13 @@ let AutocompleteComponent = class AutocompleteComponent {
|
|
|
341
341
|
async executeSearch(query) {
|
|
342
342
|
if (!this.searchFn)
|
|
343
343
|
return;
|
|
344
|
-
this.
|
|
344
|
+
this.loading = true;
|
|
345
345
|
try {
|
|
346
|
-
this.
|
|
346
|
+
this.asyncOptions = await this.searchFn(query);
|
|
347
347
|
this.focusedIndex = this.findFirstEnabledIndex();
|
|
348
348
|
}
|
|
349
349
|
finally {
|
|
350
|
-
this.
|
|
350
|
+
this.loading = false;
|
|
351
351
|
}
|
|
352
352
|
}
|
|
353
353
|
/** Close dropdown on clicks outside the component */
|
|
@@ -32,13 +32,13 @@ export function autocompleteTemplate(c) {
|
|
|
32
32
|
role="listbox"
|
|
33
33
|
popover="manual"
|
|
34
34
|
>
|
|
35
|
-
${c.
|
|
36
|
-
?
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
${c.filteredOptions.length
|
|
36
|
+
? repeat(c.filteredOptions, (option) => `${option.value}-${c.multiple ? c.values.includes(option.value) : c.value === option.value}`, (option, index) => renderOption(c, option, index))
|
|
37
|
+
: c.loading
|
|
38
|
+
? html `<div class="ml-autocomplete__loading">
|
|
39
|
+
<ml-spinner size="sm"></ml-spinner>
|
|
40
|
+
<span>Searching...</span>
|
|
41
|
+
</div>`
|
|
42
42
|
: html `<div class="ml-autocomplete__empty">No results found</div>`}
|
|
43
43
|
</div>
|
|
44
44
|
</div>
|