nexheal-lib 0.0.50 → 0.0.52

package/fesm2022/nexheal-lib.mjs

@@ -2787,7 +2787,7 @@ class PaginatedAutocompleteControl {
     inputLoader = false;
     readonly = false;
     optionDisplayProperty = "displayname";
-    /** 'scroll' = infinite scroll, 'click' = "Load more" button */
+    /** 'scroll' = infinite scroll, 'click' = "Load more" button, 'arrow' = ←/→ keys */
     paginationType = 'scroll';
     pageSize = 10;
     searchDebounce = 300;
@@ -2802,7 +2802,15 @@ class PaginatedAutocompleteControl {
     _displayedOptions = [];
     set options(value) {
         const incoming = value || [];
-        if (this._pendingPage <= 1) {
+        if (this.paginationType === 'arrow') {
+            // Arrow mode: discrete pages — each load REPLACES the view and is cached
+            this._displayedOptions = [...incoming];
+            this.pageCache.set(this._pendingPage, [...incoming]);
+            this.currentPage = this._pendingPage;
+            this.highlightedIndex = incoming.length > 0 ? 0 : null;
+            this.resetListScroll();
+        }
+        else if (this._pendingPage <= 1) {
             this._displayedOptions = [...incoming];
         }
         else {
@@ -2818,7 +2826,7 @@ class PaginatedAutocompleteControl {
         this.failedPage = null;
         this.processValueBuffer();
         if (this.isDropdownOpen) {
-            if (this._pendingPage <= 1) {
+            if (this._pendingPage <= 1 && this.paginationType !== 'arrow') {
                 this.highlightedIndex = this._displayedOptions.length > 0 ? 0 : null;
             }
             setTimeout(() => {
@@ -2854,6 +2862,8 @@ class PaginatedAutocompleteControl {
     preventClearOnBlur = false;
     searchInput$ = new Subject();
     cancelPendingSearch = false;
+    /** Arrow mode: cache of visited pages for the current search */
+    pageCache = new Map();
     onChange = () => { };
     onTouched = () => { };
     inputElement;
@@ -2870,6 +2880,11 @@ class PaginatedAutocompleteControl {
     get hasMore() {
         return this._displayedOptions.length < this.totalCount;
     }
+    get totalPages() {
+        return this.pageSize > 0
+            ? Math.max(1, Math.ceil(this.totalCount / this.pageSize))
+            : 1;
+    }
     constructor() { }
     ngOnInit() {
         this.inputControl.markAsPristine();
@@ -2941,6 +2956,10 @@ class PaginatedAutocompleteControl {
     loadPage(page, search) {
         this.currentPage = page;
         this._pendingPage = page;
+        if (page === 1) {
+            // Fresh page-1 load = new search context; visited pages are stale
+            this.pageCache.clear();
+        }
         this.lastLoadedSearch = search;
         this.loadErrorMessage = null;
         this.failedPage = null;
@@ -2961,6 +2980,41 @@ class PaginatedAutocompleteControl {
         // which after a selection holds the display name, not the search term.
         this.loadPage(this.currentPage + 1, this.lastLoadedSearch ?? (this.inputControl.value || ""));
     }
+    /** Arrow mode: show an already-visited page instantly, no API call */
+    showCachedPage(page) {
+        const cached = this.pageCache.get(page);
+        if (!cached)
+            return false;
+        this.currentPage = page;
+        this._pendingPage = page;
+        this._displayedOptions = [...cached];
+        this.highlightedIndex = cached.length > 0 ? 0 : null;
+        this.resetListScroll();
+        return true;
+    }
+    nextArrowPage() {
+        if (this.isPageLoading || this.currentPage >= this.totalPages)
+            return;
+        const next = this.currentPage + 1;
+        if (!this.showCachedPage(next)) {
+            this.loadPage(next, this.lastLoadedSearch || "");
+        }
+    }
+    prevArrowPage() {
+        if (this.isPageLoading || this.currentPage <= 1)
+            return;
+        const prev = this.currentPage - 1;
+        if (!this.showCachedPage(prev)) {
+            this.loadPage(prev, this.lastLoadedSearch || "");
+        }
+    }
+    resetListScroll() {
+        setTimeout(() => {
+            if (this.dropdownElement) {
+                this.dropdownElement.nativeElement.scrollTop = 0;
+            }
+        }, 0);
+    }
     onListScroll(event) {
         if (this.paginationType !== 'scroll')
             return;
@@ -3051,6 +3105,9 @@ class PaginatedAutocompleteControl {
             this.lastLoadedSearch === term &&
             this._displayedOptions.length > 0) {
             this.openDropdown();
+            if (this.paginationType === 'arrow') {
+                this.showCachedPage(1);
+            }
             const idx = this.selectedItems
                 ? this._displayedOptions.findIndex((o) => o.id === this.selectedItems.id)
                 : -1;
@@ -3126,6 +3183,20 @@ class PaginatedAutocompleteControl {
                 event.preventDefault();
                 this.scrollHighlightedItemIntoView();
                 break;
+            case "ArrowRight": {
+                if (this.paginationType !== 'arrow')
+                    break; // caret moves normally
+                this.nextArrowPage();
+                event.preventDefault();
+                break;
+            }
+            case "ArrowLeft": {
+                if (this.paginationType !== 'arrow')
+                    break; // caret moves normally
+                this.prevArrowPage();
+                event.preventDefault();
+                break;
+            }
             case "Enter":
                 if (this.highlightedIndex !== null &&
                     this._displayedOptions.length > 0) {
@@ -3214,7 +3285,7 @@ class PaginatedAutocompleteControl {
                 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    (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"] }] });
+        ], 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      @if (paginationType === 'arrow') {\n      <span class=\"pager\">\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage <= 1\" (click)=\"prevArrowPage()\">\u2190</span>\n        Page {{ currentPage }} of {{ totalPages }}\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\u2192</span>\n      </span>\n      } @else {\n      {{ options.length }} of {{ totalCount }}\n      @if (hasMore && paginationType === 'scroll') {\n      <span> \u00B7 scroll for more</span>\n      }\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,
@@ -3224,7 +3295,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    (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"] }]
+                    ], 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      @if (paginationType === 'arrow') {\n      <span class=\"pager\">\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage <= 1\" (click)=\"prevArrowPage()\">\u2190</span>\n        Page {{ currentPage }} of {{ totalPages }}\n        <span class=\"pager-btn\" [class.disabled]=\"currentPage >= totalPages\" (click)=\"nextArrowPage()\">\u2192</span>\n      </span>\n      } @else {\n      {{ options.length }} of {{ totalCount }}\n      @if (hasMore && paginationType === 'scroll') {\n      <span> \u00B7 scroll for more</span>\n      }\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: [{