nexheal-lib 0.0.46 → 0.0.49

package/fesm2022/nexheal-lib.mjs

@@ -2791,10 +2791,13 @@ class PaginatedAutocompleteControl {
     paginationType = 'scroll';
     pageSize = 10;
     searchDebounce = 300;
+    /** Re-fetch page 1 every time the dropdown opens, instead of reusing cached results */
+    refreshOnOpen = false;
     /** Total record count for the current search, from the API response */
     totalCount = 0;
     _disabled = false;
     _pendingPage = 1;
+    lastLoadedSearch = null;
     /** Items of the page just loaded. Page 1 replaces the list, later pages append. */
     _displayedOptions = [];
     set options(value) {
@@ -2811,6 +2814,8 @@ class PaginatedAutocompleteControl {
             ];
         }
         this.isPageLoading = false;
+        this.loadErrorMessage = null;
+        this.failedPage = null;
         this.processValueBuffer();
         if (this.isDropdownOpen) {
             if (this._pendingPage <= 1) {
@@ -2847,6 +2852,8 @@ class PaginatedAutocompleteControl {
     valueBuffer = null;
     popperInstance;
     preventClearOnBlur = false;
+    searchInput$ = new Subject();
+    cancelPendingSearch = false;
     onChange = () => { };
     onTouched = () => { };
     inputElement;
@@ -2855,6 +2862,8 @@ class PaginatedAutocompleteControl {
     isDropdownOpen = false;
     hasFocus = false;
     isPageLoading = false;
+    loadErrorMessage = null;
+    failedPage = null;
     selectedItems;
     highlightedIndex = null;
     currentPage = 1;
@@ -2864,12 +2873,17 @@ class PaginatedAutocompleteControl {
     constructor() { }
     ngOnInit() {
         this.inputControl.markAsPristine();
-        this.subscription.add(this.inputControl.valueChanges
-            .pipe(debounceTime(this.searchDebounce), distinctUntilChanged())
+        // Search is driven by real keystrokes (the DOM input event), never by
+        // programmatic setValue — this avoids selection/debounce races entirely.
+        this.subscription.add(this.searchInput$
+            .pipe(debounceTime(this.searchDebounce))
             .subscribe((value) => {
+            // A selection happened after this keystroke — drop the search
+            if (this.cancelPendingSearch)
+                return;
             if (this.readonly || !this.hasFocus)
                 return;
-            this.loadPage(1, value || "");
+            this.loadPage(1, value);
         }));
     }
     ngAfterViewInit() {
@@ -2883,6 +2897,7 @@ class PaginatedAutocompleteControl {
     }
     // CVA
     writeValue(value) {
+        this.cancelPendingSearch = true;
         if (value == null) {
             this.valueBuffer = null;
             this.selectedItems = null;
@@ -2926,6 +2941,9 @@ class PaginatedAutocompleteControl {
     loadPage(page, search) {
         this.currentPage = page;
         this._pendingPage = page;
+        this.lastLoadedSearch = search;
+        this.loadErrorMessage = null;
+        this.failedPage = null;
         this.isPageLoading = true;
         if (page === 1) {
             this.openDropdown();
@@ -2953,6 +2971,22 @@ class PaginatedAutocompleteControl {
         event.stopPropagation();
         this.loadNextPage();
     }
+    /** Call from the parent's API error handler to unblock paging and show a
+     *  Retry row in the dropdown. e.g. error: () => ctrl.pageLoadFailed() */
+    pageLoadFailed(message = "Couldn't load results") {
+        this.isPageLoading = false;
+        this.loadErrorMessage = message;
+        this.failedPage = this._pendingPage;
+        if (this._pendingPage > 1) {
+            // Roll back so a retry re-requests the failed page, not the one after it
+            this.currentPage = this._pendingPage - 1;
+        }
+    }
+    retryLoad(event) {
+        event.stopPropagation();
+        const page = this.failedPage ?? 1;
+        this.loadPage(page, this.lastLoadedSearch || "");
+    }
     openDropdown() {
         if (this.isDropdownOpen)
             return;
@@ -2964,6 +2998,7 @@ class PaginatedAutocompleteControl {
     }
     // selection
     selectSuggestion(suggestion) {
+        this.cancelPendingSearch = true;
         this.inputControl.setValue(suggestion[this.optionDisplayProperty], {
             emitEvent: false,
         });
@@ -2977,22 +3012,61 @@ class PaginatedAutocompleteControl {
         }
     }
     // events
+    onUserType(event) {
+        if (this.readonly)
+            return;
+        // A real keystroke re-arms searching after any selection cancelled it
+        this.cancelPendingSearch = false;
+        this.searchInput$.next(event.target.value || "");
+    }
     onFocus() {
         this.hasFocus = true;
         if (this.readonly || this.isDropdownOpen)
             return;
-        this.loadPage(1, this.inputControl.value || "");
+        this.openWithSearch();
     }
     onInputClick() {
         if (this.readonly || this.isDropdownOpen)
             return;
         if (this.hasFocus) {
-            this.loadPage(1, this.inputControl.value || "");
+            this.openWithSearch();
         }
     }
+    /** Text to search with when the dropdown opens: if the input just holds the
+     *  selected item's display text, open with the full list instead. */
+    openSearchTerm() {
+        const value = this.inputControl.value || "";
+        if (this.selectedItems &&
+            value === this.selectedItems[this.optionDisplayProperty]) {
+            return "";
+        }
+        return value;
+    }
+    openWithSearch() {
+        const term = this.openSearchTerm();
+        // Reuse cached results when reopening with the same search term
+        if (!this.refreshOnOpen &&
+            this.lastLoadedSearch === term &&
+            this._displayedOptions.length > 0) {
+            this.openDropdown();
+            const idx = this.selectedItems
+                ? this._displayedOptions.findIndex((o) => o.id === this.selectedItems.id)
+                : -1;
+            this.highlightedIndex =
+                idx >= 0 ? idx : this._displayedOptions.length > 0 ? 0 : null;
+            return;
+        }
+        this.loadPage(1, term);
+    }
     onBlur() {
         this.blurEvent.emit();
         this.onTouched();
+        // mousedown fires before blur — if no dropdown interaction flagged itself,
+        // the user clicked outside: close immediately instead of waiting 300ms.
+        if (!this.preventClearOnBlur) {
+            this.isDropdownOpen = false;
+            this.isPageLoading = false;
+        }
         // Delay so option / load-more mousedown and click can occur first.
         setTimeout(() => {
             if (this.preventClearOnBlur) {
@@ -3086,6 +3160,19 @@ class PaginatedAutocompleteControl {
                             fallbackPlacements: ["top-start", "bottom-start"],
                         },
                     },
+                    // Make the dropdown exactly as wide as the input
+                    {
+                        name: "sameWidth",
+                        enabled: true,
+                        phase: "beforeWrite",
+                        requires: ["computeStyles"],
+                        fn: ({ state }) => {
+                            state.styles["popper"].width = `${state.rects.reference.width}px`;
+                        },
+                        effect: ({ state }) => {
+                            state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+                        },
+                    },
                 ],
             });
         }
@@ -3100,6 +3187,7 @@ class PaginatedAutocompleteControl {
     }
     // clear
     resetInput() {
+        this.cancelPendingSearch = true;
         this.inputControl.setValue("", { emitEvent: false });
         this.selectedItems = null;
         this.valueBuffer = null;
@@ -3110,13 +3198,13 @@ class PaginatedAutocompleteControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PaginatedAutocompleteControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PaginatedAutocompleteControl, isStandalone: true, selector: "paginated-autocomplete-control", inputs: { title: "title", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", readonly: "readonly", optionDisplayProperty: "optionDisplayProperty", paginationType: "paginationType", pageSize: "pageSize", searchDebounce: "searchDebounce", totalCount: "totalCount", options: "options", disabled: "disabled" }, outputs: { pageChange: "pageChange", optionSelected: "optionSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent", optionPatched: "optionPatched" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PaginatedAutocompleteControl, isStandalone: true, selector: "paginated-autocomplete-control", inputs: { title: "title", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", readonly: "readonly", optionDisplayProperty: "optionDisplayProperty", paginationType: "paginationType", pageSize: "pageSize", searchDebounce: "searchDebounce", refreshOnOpen: "refreshOnOpen", totalCount: "totalCount", options: "options", disabled: "disabled" }, outputs: { pageChange: "pageChange", optionSelected: "optionSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent", optionPatched: "optionPatched" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: PaginatedAutocompleteControl,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], ngImport: i0, template: "<div class=\"form-group auto-complete paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\n    (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\n\n  <span class=\"focus-border\"></span>\n\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\n    <i class=\"he he-close\"></i>\n  </label>\n  }\n\n  @if (isDropdownOpen) {\n  <div #dropdownElement class=\"option-list\" (scroll)=\"onListScroll($event)\">\n    @if (options.length === 0 && !isPageLoading) {\n    <div class=\"no-results\">\n      <div>No results found</div>\n    </div>\n    } @else {\n    @for (suggestion of options; track suggestion.id; let i = $index) {\n    <div class=\"list-item\" [ngClass]=\"{\n                'active': suggestion === selectedItems,\n                'highlighted': highlightedIndex === i\n              }\" (mousedown)=\"onOptionMouseDown()\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\n      {{ suggestion[optionDisplayProperty] }}\n    </div>\n    }\n\n    @if (isPageLoading) {\n    <div class=\"list-loading\">Loading...</div>\n    }\n\n    @if (paginationType === 'click' && hasMore && !isPageLoading) {\n    <div class=\"load-more\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onLoadMoreClick($event)\">\n      Load more ({{ options.length }} of {{ totalCount }})\n    </div>\n    }\n    }\n  </div>\n  }\n\n  @if (inputLoader) {\n  <label class=\"loader input-loader\"></label>\n  }\n\n  @if (error) {\n  <div class=\"val-msg\">{{ errorMessage }}</div>\n  }\n</div>\n", styles: [".form-group.paginated-autocomplete .form-control{padding-right:unset}.form-group.paginated-autocomplete .clear{right:7px}.form-group.paginated-autocomplete .option-list{max-height:220px;overflow-y:auto}.form-group.paginated-autocomplete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.paginated-autocomplete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.paginated-autocomplete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-more:hover{background-color:#f5f5f5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], ngImport: i0, template: "<div class=\"form-group auto-complete paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\n    (input)=\"onUserType($event)\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\n\n  <span class=\"focus-border\"></span>\n\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\n    <i class=\"he he-close\"></i>\n  </label>\n  }\n\n  @if (isDropdownOpen) {\n  <div #dropdownElement class=\"option-list\" (mousedown)=\"onOptionMouseDown()\" (scroll)=\"onListScroll($event)\">\n    @if (options.length === 0 && !isPageLoading && !loadErrorMessage) {\n    <div class=\"no-results\">\n      <div>No results found</div>\n    </div>\n    } @else {\n    @for (suggestion of options; track suggestion.id; let i = $index) {\n    <div class=\"list-item\" [ngClass]=\"{\n                'active': suggestion === selectedItems,\n                'highlighted': highlightedIndex === i\n              }\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\n      {{ suggestion[optionDisplayProperty] }}\n    </div>\n    }\n\n    @if (isPageLoading) {\n    <div class=\"list-loading\">Loading...</div>\n    }\n\n    @if (loadErrorMessage) {\n    <div class=\"load-error\" (click)=\"retryLoad($event)\">\n      {{ loadErrorMessage }} \u00B7 <span class=\"retry\">Retry</span>\n    </div>\n    }\n\n    @if (paginationType === 'click' && hasMore && !isPageLoading && !loadErrorMessage) {\n    <div class=\"load-more\" (click)=\"onLoadMoreClick($event)\">\n      Load more ({{ options.length }} of {{ totalCount }})\n    </div>\n    }\n\n    @if (totalCount > 0 && options.length > 0 && !loadErrorMessage && !(paginationType === 'click' && hasMore)) {\n    <div class=\"list-footer\">\n      {{ options.length }} of {{ totalCount }}\n      @if (hasMore && paginationType === 'scroll') {\n      <span> \u00B7 scroll for more</span>\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n  @if (inputLoader) {\n  <label class=\"loader input-loader\"></label>\n  }\n\n  @if (error) {\n  <div class=\"val-msg\">{{ errorMessage }}</div>\n  }\n</div>\n", styles: [".form-group.paginated-autocomplete .form-control{padding-right:unset}.form-group.paginated-autocomplete .clear{right:7px}.form-group.paginated-autocomplete .option-list{max-height:220px;overflow-y:auto}.form-group.paginated-autocomplete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.paginated-autocomplete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.paginated-autocomplete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .load-error{padding:8px 10px;text-align:center;font-size:12px;color:#dc3545;cursor:pointer;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.paginated-autocomplete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer{position:sticky;bottom:0;padding:4px 10px;text-align:center;font-size:11px;color:#9b9b9b;background-color:#fff;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PaginatedAutocompleteControl, decorators: [{
             type: Component,
@@ -3126,7 +3214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useExisting: PaginatedAutocompleteControl,
                             multi: true,
                         },
-                    ], template: "<div class=\"form-group auto-complete paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\n    (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\n\n  <span class=\"focus-border\"></span>\n\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\n    <i class=\"he he-close\"></i>\n  </label>\n  }\n\n  @if (isDropdownOpen) {\n  <div #dropdownElement class=\"option-list\" (scroll)=\"onListScroll($event)\">\n    @if (options.length === 0 && !isPageLoading) {\n    <div class=\"no-results\">\n      <div>No results found</div>\n    </div>\n    } @else {\n    @for (suggestion of options; track suggestion.id; let i = $index) {\n    <div class=\"list-item\" [ngClass]=\"{\n                'active': suggestion === selectedItems,\n                'highlighted': highlightedIndex === i\n              }\" (mousedown)=\"onOptionMouseDown()\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\n      {{ suggestion[optionDisplayProperty] }}\n    </div>\n    }\n\n    @if (isPageLoading) {\n    <div class=\"list-loading\">Loading...</div>\n    }\n\n    @if (paginationType === 'click' && hasMore && !isPageLoading) {\n    <div class=\"load-more\" (mousedown)=\"onOptionMouseDown()\" (click)=\"onLoadMoreClick($event)\">\n      Load more ({{ options.length }} of {{ totalCount }})\n    </div>\n    }\n    }\n  </div>\n  }\n\n  @if (inputLoader) {\n  <label class=\"loader input-loader\"></label>\n  }\n\n  @if (error) {\n  <div class=\"val-msg\">{{ errorMessage }}</div>\n  }\n</div>\n", styles: [".form-group.paginated-autocomplete .form-control{padding-right:unset}.form-group.paginated-autocomplete .clear{right:7px}.form-group.paginated-autocomplete .option-list{max-height:220px;overflow-y:auto}.form-group.paginated-autocomplete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.paginated-autocomplete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.paginated-autocomplete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-more:hover{background-color:#f5f5f5}\n"] }]
+                    ], template: "<div class=\"form-group auto-complete paginated-autocomplete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\n  @if (title) {\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n  }\n\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\n    (input)=\"onUserType($event)\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" (click)=\"onInputClick()\"\n    [ngClass]=\"{'is-invalid': error}\" [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\n\n  <span class=\"focus-border\"></span>\n\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\n  <label class=\"clear\" (mousedown)=\"onOptionMouseDown()\" (click)=\"resetInput()\">\n    <i class=\"he he-close\"></i>\n  </label>\n  }\n\n  @if (isDropdownOpen) {\n  <div #dropdownElement class=\"option-list\" (mousedown)=\"onOptionMouseDown()\" (scroll)=\"onListScroll($event)\">\n    @if (options.length === 0 && !isPageLoading && !loadErrorMessage) {\n    <div class=\"no-results\">\n      <div>No results found</div>\n    </div>\n    } @else {\n    @for (suggestion of options; track suggestion.id; let i = $index) {\n    <div class=\"list-item\" [ngClass]=\"{\n                'active': suggestion === selectedItems,\n                'highlighted': highlightedIndex === i\n              }\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\n      {{ suggestion[optionDisplayProperty] }}\n    </div>\n    }\n\n    @if (isPageLoading) {\n    <div class=\"list-loading\">Loading...</div>\n    }\n\n    @if (loadErrorMessage) {\n    <div class=\"load-error\" (click)=\"retryLoad($event)\">\n      {{ loadErrorMessage }} \u00B7 <span class=\"retry\">Retry</span>\n    </div>\n    }\n\n    @if (paginationType === 'click' && hasMore && !isPageLoading && !loadErrorMessage) {\n    <div class=\"load-more\" (click)=\"onLoadMoreClick($event)\">\n      Load more ({{ options.length }} of {{ totalCount }})\n    </div>\n    }\n\n    @if (totalCount > 0 && options.length > 0 && !loadErrorMessage && !(paginationType === 'click' && hasMore)) {\n    <div class=\"list-footer\">\n      {{ options.length }} of {{ totalCount }}\n      @if (hasMore && paginationType === 'scroll') {\n      <span> \u00B7 scroll for more</span>\n      }\n    </div>\n    }\n    }\n  </div>\n  }\n\n  @if (inputLoader) {\n  <label class=\"loader input-loader\"></label>\n  }\n\n  @if (error) {\n  <div class=\"val-msg\">{{ errorMessage }}</div>\n  }\n</div>\n", styles: [".form-group.paginated-autocomplete .form-control{padding-right:unset}.form-group.paginated-autocomplete .clear{right:7px}.form-group.paginated-autocomplete .option-list{max-height:220px;overflow-y:auto}.form-group.paginated-autocomplete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.paginated-autocomplete .option-list .list-loading{padding:8px 10px;color:#9b9b9b;text-align:center;font-size:12px}.form-group.paginated-autocomplete .option-list .load-more{padding:8px 10px;text-align:center;cursor:pointer;color:#0d6efd;font-size:13px;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-more:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .load-error{padding:8px 10px;text-align:center;font-size:12px;color:#dc3545;cursor:pointer;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}.form-group.paginated-autocomplete .option-list .load-error .retry{color:#0d6efd;text-decoration:underline}.form-group.paginated-autocomplete .option-list .load-error:hover{background-color:#f5f5f5}.form-group.paginated-autocomplete .option-list .list-footer{position:sticky;bottom:0;padding:4px 10px;text-align:center;font-size:11px;color:#9b9b9b;background-color:#fff;border-top:1px solid #eee;-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], required: [{
@@ -3155,6 +3243,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], searchDebounce: [{
                 type: Input
+            }], refreshOnOpen: [{
+                type: Input
             }], totalCount: [{
                 type: Input
             }], options: [{