nexheal-lib 0.0.50 → 0.0.51

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;
@@ -2812,6 +2812,15 @@ class PaginatedAutocompleteControl {
                 ...this._displayedOptions,
                 ...incoming.filter((o) => !existingIds.has(o.id)),
             ];
+            // Keyboard-triggered page load: move the highlight into the new items
+            if (this.pendingHighlightIndex !== null) {
+                const idx = Math.min(this.pendingHighlightIndex, this._displayedOptions.length - 1);
+                this.pendingHighlightIndex = null;
+                if (idx >= 0) {
+                    this.highlightedIndex = idx;
+                    setTimeout(() => this.scrollHighlightedItemIntoView(), 0);
+                }
+            }
         }
         this.isPageLoading = false;
         this.loadErrorMessage = null;
@@ -2854,6 +2863,8 @@ class PaginatedAutocompleteControl {
     preventClearOnBlur = false;
     searchInput$ = new Subject();
     cancelPendingSearch = false;
+    /** When set, the highlight jumps to this index after the next page appends */
+    pendingHighlightIndex = null;
     onChange = () => { };
     onTouched = () => { };
     inputElement;
@@ -3126,6 +3137,34 @@ class PaginatedAutocompleteControl {
                 event.preventDefault();
                 this.scrollHighlightedItemIntoView();
                 break;
+            case "ArrowRight": {
+                if (this.paginationType !== 'arrow')
+                    break; // caret moves normally
+                // Jump forward a full page; fetch the next page if we're at the end
+                const target = (this.highlightedIndex ?? -1) + this.pageSize;
+                if (target > this._displayedOptions.length - 1 && this.hasMore) {
+                    if (!this.isPageLoading) {
+                        this.pendingHighlightIndex = this._displayedOptions.length;
+                        this.loadNextPage();
+                    }
+                }
+                else {
+                    this.highlightedIndex = Math.min(target, this._displayedOptions.length - 1);
+                    this.scrollHighlightedItemIntoView();
+                }
+                event.preventDefault();
+                break;
+            }
+            case "ArrowLeft": {
+                if (this.paginationType !== 'arrow')
+                    break; // caret moves normally
+                // Jump back a full page
+                const target = (this.highlightedIndex ?? 0) - this.pageSize;
+                this.highlightedIndex = Math.max(target, 0);
+                this.scrollHighlightedItemIntoView();
+                event.preventDefault();
+                break;
+            }
             case "Enter":
                 if (this.highlightedIndex !== null &&
                     this._displayedOptions.length > 0) {
@@ -3214,7 +3253,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      {{ options.length }} of {{ totalCount }}\n      @if (hasMore && paginationType === 'scroll') {\n      <span> \u00B7 scroll for more</span>\n      }\n      @if (hasMore && paginationType === 'arrow') {\n      <span> \u00B7 \u2190 \u2192 to page</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,
@@ -3224,7 +3263,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      {{ options.length }} of {{ totalCount }}\n      @if (hasMore && paginationType === 'scroll') {\n      <span> \u00B7 scroll for more</span>\n      }\n      @if (hasMore && paginationType === 'arrow') {\n      <span> \u00B7 \u2190 \u2192 to page</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: [{