nexheal-lib 0.0.48 → 0.0.50

package/fesm2022/nexheal-lib.mjs

@@ -2852,6 +2852,8 @@ class PaginatedAutocompleteControl {
     valueBuffer = null;
     popperInstance;
     preventClearOnBlur = false;
+    searchInput$ = new Subject();
+    cancelPendingSearch = false;
     onChange = () => { };
     onTouched = () => { };
     inputElement;
@@ -2871,16 +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) => {
-            if (this.readonly || !this.hasFocus)
+            // A selection happened after this keystroke — drop the search
+            if (this.cancelPendingSearch)
                 return;
-            // Discard stale debounced emissions — e.g. an Enter-selection replaced
-            // the text while this search was still waiting out the debounce.
-            if ((value || "") !== (this.inputControl.value || ""))
+            if (this.readonly || !this.hasFocus)
                 return;
-            this.loadPage(1, value || "");
+            this.loadPage(1, value);
         }));
     }
     ngAfterViewInit() {
@@ -2894,6 +2897,7 @@ class PaginatedAutocompleteControl {
     }
     // CVA
     writeValue(value) {
+        this.cancelPendingSearch = true;
         if (value == null) {
             this.valueBuffer = null;
             this.selectedItems = null;
@@ -2953,7 +2957,9 @@ class PaginatedAutocompleteControl {
     loadNextPage() {
         if (!this.hasMore || this.isPageLoading)
             return;
-        this.loadPage(this.currentPage + 1, this.inputControl.value || "");
+        // Continue with the search the list was built from — NOT the input text,
+        // which after a selection holds the display name, not the search term.
+        this.loadPage(this.currentPage + 1, this.lastLoadedSearch ?? (this.inputControl.value || ""));
     }
     onListScroll(event) {
         if (this.paginationType !== 'scroll')
@@ -2994,6 +3000,7 @@ class PaginatedAutocompleteControl {
     }
     // selection
     selectSuggestion(suggestion) {
+        this.cancelPendingSearch = true;
         this.inputControl.setValue(suggestion[this.optionDisplayProperty], {
             emitEvent: false,
         });
@@ -3007,6 +3014,13 @@ 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)
@@ -3073,6 +3087,14 @@ class PaginatedAutocompleteControl {
             this.isDropdownOpen = false;
             this.isPageLoading = false;
             const currentValue = this.inputControl.value;
+            // A valid selection stays valid regardless of which page is displayed —
+            // the selected item may not be in the currently loaded page at all.
+            const matchesSelected = this.selectedItems &&
+                String(this.selectedItems[this.optionDisplayProperty]).toLowerCase() ===
+                    String(currentValue).toLowerCase();
+            if (matchesSelected) {
+                return;
+            }
             const found = this._displayedOptions.find((opt) => String(opt[this.optionDisplayProperty]).toLowerCase() ===
                 String(currentValue).toLowerCase());
             if (!found) {
@@ -3175,6 +3197,7 @@ class PaginatedAutocompleteControl {
     }
     // clear
     resetInput() {
+        this.cancelPendingSearch = true;
         this.inputControl.setValue("", { emitEvent: false });
         this.selectedItems = null;
         this.valueBuffer = null;
@@ -3191,7 +3214,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    (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    </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,
@@ -3201,7 +3224,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\" (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    </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: [{