nexheal-lib 0.0.44 → 0.0.45

package/fesm2022/nexheal-lib.mjs

@@ -2774,6 +2774,415 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 args: ["window:keydown", ["$event"]]
             }] } });
 
+class PaginatedAutocompleteControl {
+    subscription = new Subscription();
+    title;
+    required = false;
+    placeholder = "";
+    customClass = '';
+    clearVal = true;
+    error = false;
+    errorMessage = "";
+    autocomplete = "";
+    inputLoader = false;
+    readonly = false;
+    optionDisplayProperty = "displayname";
+    /** 'scroll' = infinite scroll, 'click' = "Load more" button */
+    paginationType = 'scroll';
+    pageSize = 10;
+    searchDebounce = 300;
+    /** Total record count for the current search, from the API response */
+    totalCount = 0;
+    _disabled = false;
+    _pendingPage = 1;
+    /** Items of the page just loaded. Page 1 replaces the list, later pages append. */
+    _displayedOptions = [];
+    set options(value) {
+        const incoming = value || [];
+        if (this._pendingPage <= 1) {
+            this._displayedOptions = [...incoming];
+        }
+        else {
+            // Append, de-duplicating by id in case of overlapping pages
+            const existingIds = new Set(this._displayedOptions.map((o) => o.id));
+            this._displayedOptions = [
+                ...this._displayedOptions,
+                ...incoming.filter((o) => !existingIds.has(o.id)),
+            ];
+        }
+        this.isPageLoading = false;
+        this.processValueBuffer();
+        if (this.isDropdownOpen) {
+            if (this._pendingPage <= 1) {
+                this.highlightedIndex = this._displayedOptions.length > 0 ? 0 : null;
+            }
+            setTimeout(() => {
+                if (this.popperInstance)
+                    this.popperInstance.update();
+            }, 0);
+        }
+    }
+    get options() {
+        return this._displayedOptions;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        if (this.inputControl) {
+            if (value) {
+                this.inputControl.disable();
+            }
+            else {
+                this.inputControl.enable();
+            }
+        }
+    }
+    pageChange = new EventEmitter();
+    optionSelected = new EventEmitter();
+    selectionCleared = new EventEmitter();
+    blurEvent = new EventEmitter();
+    optionPatched = new EventEmitter();
+    valueBuffer = null;
+    popperInstance;
+    preventDropdownReopen = false;
+    preventClearOnBlur = false;
+    onChange = () => { };
+    onTouched = () => { };
+    inputElement;
+    dropdownElement;
+    inputControl = new FormControl("");
+    isDropdownOpen = false;
+    hasFocus = false;
+    isPageLoading = false;
+    selectedItems;
+    highlightedIndex = null;
+    currentPage = 1;
+    get hasMore() {
+        return this._displayedOptions.length < this.totalCount;
+    }
+    constructor() { }
+    ngOnInit() {
+        this.inputControl.markAsPristine();
+        this.subscription.add(this.inputControl.valueChanges
+            .pipe(debounceTime(this.searchDebounce), distinctUntilChanged())
+            .subscribe((value) => {
+            if (this.preventDropdownReopen) {
+                this.preventDropdownReopen = false;
+                return;
+            }
+            if (this.readonly || !this.hasFocus)
+                return;
+            this.loadPage(1, value || "");
+        }));
+    }
+    ngAfterViewInit() {
+        this.createPopperInstance();
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+        }
+    }
+    // CVA
+    writeValue(value) {
+        this.preventDropdownReopen = true;
+        if (value == null) {
+            this.valueBuffer = null;
+            this.selectedItems = null;
+            this.inputControl.setValue("", { emitEvent: false });
+        }
+        else {
+            this.valueBuffer = value;
+            this.processValueBuffer();
+        }
+    }
+    processValueBuffer() {
+        if (this.valueBuffer == null) {
+            return;
+        }
+        if (this._displayedOptions.length > 0) {
+            const matchedSuggestion = this._displayedOptions.find((s) => s.id === this.valueBuffer);
+            if (matchedSuggestion) {
+                this.preventDropdownReopen = true;
+                this.inputControl.setValue(matchedSuggestion[this.optionDisplayProperty], { emitEvent: false });
+                this.selectedItems = matchedSuggestion;
+                this.onChange(matchedSuggestion.id);
+                this.optionPatched.emit(matchedSuggestion);
+                this.valueBuffer = null;
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.inputControl.disable();
+        }
+        else {
+            this.inputControl.enable();
+        }
+    }
+    // paging
+    loadPage(page, search) {
+        this.currentPage = page;
+        this._pendingPage = page;
+        this.isPageLoading = true;
+        if (page === 1) {
+            this.openDropdown();
+        }
+        this.pageChange.emit({
+            search: search,
+            page: page,
+            pageSize: this.pageSize,
+        });
+    }
+    loadNextPage() {
+        if (!this.hasMore || this.isPageLoading)
+            return;
+        this.loadPage(this.currentPage + 1, this.inputControl.value || "");
+    }
+    onListScroll(event) {
+        if (this.paginationType !== 'scroll')
+            return;
+        const el = event.target;
+        if (el.scrollTop + el.clientHeight >= el.scrollHeight - 40) {
+            this.loadNextPage();
+        }
+    }
+    onLoadMoreClick(event) {
+        event.stopPropagation();
+        this.loadNextPage();
+    }
+    openDropdown() {
+        if (this.isDropdownOpen)
+            return;
+        this.isDropdownOpen = true;
+        this.highlightedIndex = null;
+        setTimeout(() => {
+            this.createPopperInstance();
+        }, 0);
+    }
+    // selection
+    selectSuggestion(suggestion) {
+        this.preventDropdownReopen = true;
+        this.inputControl.setValue(suggestion[this.optionDisplayProperty], {
+            emitEvent: false,
+        });
+        this.onChange(suggestion.id);
+        this.inputControl.markAsTouched();
+        this.inputControl.updateValueAndValidity();
+        this.isDropdownOpen = false;
+        if (this.selectedItems?.id !== suggestion.id) {
+            this.selectedItems = suggestion;
+            this.optionSelected.emit(suggestion);
+        }
+    }
+    // events
+    onFocus() {
+        this.hasFocus = true;
+        if (this.readonly)
+            return;
+        this.loadPage(1, this.inputControl.value || "");
+    }
+    onInputClick() {
+        if (this.readonly || this.isDropdownOpen)
+            return;
+        if (this.hasFocus) {
+            this.loadPage(1, this.inputControl.value || "");
+        }
+    }
+    onBlur() {
+        this.blurEvent.emit();
+        this.onTouched();
+        // Delay so option / load-more mousedown and click can occur first.
+        setTimeout(() => {
+            if (this.preventClearOnBlur) {
+                this.preventClearOnBlur = false;
+                // Keep the dropdown alive for load-more clicks
+                if (this.inputElement) {
+                    this.inputElement.nativeElement.focus();
+                }
+                return;
+            }
+            this.hasFocus = false;
+            this.isDropdownOpen = false;
+            this.isPageLoading = false;
+            const currentValue = this.inputControl.value;
+            const found = this._displayedOptions.find((opt) => String(opt[this.optionDisplayProperty]).toLowerCase() ===
+                String(currentValue).toLowerCase());
+            if (!found) {
+                this.inputControl.setValue("", { emitEvent: false });
+                this.selectedItems = null;
+                this.onChange(null);
+            }
+        }, 300);
+    }
+    onKeyDown(event) {
+        if (!this.isDropdownOpen) {
+            return;
+        }
+        switch (event.key) {
+            case "ArrowDown":
+                this.highlightedIndex =
+                    this.highlightedIndex === null ||
+                        this.highlightedIndex === this._displayedOptions.length - 1
+                        ? 0
+                        : this.highlightedIndex + 1;
+                event.preventDefault();
+                this.scrollHighlightedItemIntoView();
+                break;
+            case "ArrowUp":
+                this.highlightedIndex =
+                    this.highlightedIndex === null || this.highlightedIndex === 0
+                        ? this._displayedOptions.length - 1
+                        : this.highlightedIndex - 1;
+                event.preventDefault();
+                this.scrollHighlightedItemIntoView();
+                break;
+            case "Enter":
+                if (this.highlightedIndex !== null &&
+                    this._displayedOptions.length > 0) {
+                    this.selectSuggestion(this._displayedOptions[this.highlightedIndex]);
+                }
+                else {
+                    this.isDropdownOpen = false;
+                }
+                event.preventDefault();
+                break;
+            case "Escape":
+                this.isDropdownOpen = false;
+                break;
+            default:
+                break;
+        }
+    }
+    onOptionMouseDown() {
+        this.preventClearOnBlur = true;
+    }
+    onMouseOver(index) {
+        this.highlightedIndex = index;
+    }
+    // popper
+    createPopperInstance() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+        }
+        if (this.inputElement && this.dropdownElement) {
+            this.popperInstance = createPopper(this.inputElement.nativeElement, this.dropdownElement.nativeElement, {
+                placement: "bottom-start",
+                modifiers: [
+                    {
+                        name: "offset",
+                        options: {
+                            offset: [0, 1],
+                        },
+                    },
+                    {
+                        name: "flip",
+                        options: {
+                            fallbackPlacements: ["top-start", "bottom-start"],
+                        },
+                    },
+                ],
+            });
+        }
+    }
+    scrollHighlightedItemIntoView() {
+        if (this.highlightedIndex !== null) {
+            const highlightedItem = this.dropdownElement.nativeElement.querySelectorAll(".list-item")[this.highlightedIndex];
+            if (highlightedItem) {
+                highlightedItem.scrollIntoView({ block: "nearest" });
+            }
+        }
+    }
+    // clear
+    resetInput() {
+        this.inputControl.setValue("", { emitEvent: false });
+        this.selectedItems = null;
+        this.valueBuffer = null;
+        this.onChange(null);
+        this.selectionCleared.emit();
+        if (this.hasFocus) {
+            this.loadPage(1, "");
+        }
+    }
+    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: [
+            {
+                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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PaginatedAutocompleteControl, decorators: [{
+            type: Component,
+            args: [{ selector: "paginated-autocomplete-control", standalone: true, imports: [CommonModule, ReactiveFormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], clearVal: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], inputLoader: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], optionDisplayProperty: [{
+                type: Input
+            }], paginationType: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], searchDebounce: [{
+                type: Input
+            }], totalCount: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], optionSelected: [{
+                type: Output
+            }], selectionCleared: [{
+                type: Output
+            }], blurEvent: [{
+                type: Output
+            }], optionPatched: [{
+                type: Output
+            }], inputElement: [{
+                type: ViewChild,
+                args: ["inputElement"]
+            }], dropdownElement: [{
+                type: ViewChild,
+                args: ["dropdownElement"]
+            }] } });
+
 /**
  * A custom radio-button group.
  *
@@ -3750,5 +4159,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteControl, CalendarControl, CheckboxControl, ColorPicker, InputControl, MultiselectControl, RadioControl, RichTextEditor, SelectControl, SwitchControl, TextareaControl };
+export { AutocompleteControl, CalendarControl, CheckboxControl, ColorPicker, InputControl, MultiselectControl, PaginatedAutocompleteControl, RadioControl, RichTextEditor, SelectControl, SwitchControl, TextareaControl };
 //# sourceMappingURL=nexheal-lib.mjs.map