@wlcm/angular 17.6.0 → 17.7.1

package/forms/fesm2022/wlcm-angular-forms.mjs

@@ -6,9 +6,10 @@ import { Validators, NgControl, ControlContainer, FormControl, NG_VALUE_ACCESSOR
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Subject, Observable, takeUntil, merge, fromEvent, observeOn, asyncScheduler, BehaviorSubject, EMPTY, switchMap, take, tap, concatMap, filter, timer, map, first } from 'rxjs';
-import { WlcmAutocompleteOption, DEFAULT_QUERY_PARAMS, WlcmIconName, WlcmIconDirective, WlcmLoaderComponent } from '@wlcm/angular/core';
+import * as i1$3 from '@wlcm/angular/core';
+import { WlcmAutocompleteOption, DEFAULT_QUERY_PARAMS, WlcmIconName, WlcmIconDirective, WlcmLoaderComponent, ScrollDetectionApi } from '@wlcm/angular/core';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import * as i3$1 from '@angular/material/select';
+import * as i4$1 from '@angular/material/select';
 import { MatOption, MAT_SELECT_CONFIG, MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i1$1 from '@angular/material/autocomplete';
 import { MatAutocomplete, MatAutocompleteOrigin, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -870,22 +871,31 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     openPanel() {
         this.matSelect.open();
     }
-    constructor(changeDetectorRef, formField, parentFormMember) {
+    constructor(zone, changeDetectorRef, scrollDetectionApi, formField, parentFormMember) {
+        this.zone = zone;
         this.changeDetectorRef = changeDetectorRef;
+        this.scrollDetectionApi = scrollDetectionApi;
         this.formField = formField;
         this.parentFormMember = parentFormMember;
         this.multiple = false;
         this.placeholder = 'Not selected';
-        this.options = input.required();
+        this.queryParams = DEFAULT_QUERY_PARAMS;
+        this.paginated = input(false);
+        this.options = input([]);
+        this.paginatedOptions = signal([]);
         this.selectOptionFormat = input('ValueOnly');
         this.optionTemplate = input(null);
-        this.triggerTemplate = input(null);
+        this.triggerTemplate = input();
         this.isOptionDisabled = input(() => false);
         this.selectionChange = output();
         this.opened = output();
         this.closed = output();
         this.control = new FormControl();
         this.WlcmIconName = WlcmIconName;
+        this._paginatedData = null;
+        this.computedOptions = computed(() => {
+            return this.paginated() ? this.paginatedOptions() : this.options();
+        });
         this.matOptions = viewChildren(MatOption);
         this._focusStream$ = new BehaviorSubject(EMPTY);
         this._blurStream$ = new BehaviorSubject(EMPTY);
@@ -897,7 +907,11 @@ let WlcmSelectComponent = class WlcmSelectComponent {
             this.handleStateChange();
         }
         effect(() => {
-            if (this.isOptionDisabled() && this.options().length > 0) {
+            if (this.paginated())
+                this.loadPaginatedOptions();
+        }, { allowSignalWrites: true });
+        effect(() => {
+            if (this.isOptionDisabled() && this.computedOptions().length > 0) {
                 this.updateOptionsStatus();
             }
         });
@@ -917,7 +931,11 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     }
     panelOpened() {
         this.opened.emit();
-        this.handleClickOutside();
+        this.handleScrollDown();
+    }
+    panelClosed() {
+        this.closed.emit();
+        this._touched?.();
     }
     updateOptionsStatus() {
         this.matOptions().forEach((matOption) => {
@@ -950,27 +968,41 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     get isOpen() {
         return this.matSelect?.panelOpen ?? false;
     }
+    loadPaginatedOptions() {
+        this.fetchPaginatedOptions({ ...this.queryParams, page: 1 })
+            .pipe(untilDestroyed(this), first())
+            .subscribe((paginatedData) => {
+            this._paginatedData = paginatedData;
+            this.paginatedOptions.set(paginatedData.data);
+        });
+    }
+    loadMorePaginatedOptions() {
+        if (!this._paginatedData || this._paginatedData.currPage + 1 > this._paginatedData.totalPages)
+            return;
+        this.queryParams.page++;
+        this.fetchPaginatedOptions({ ...this.queryParams })
+            .pipe(untilDestroyed(this), first())
+            .subscribe((paginatedData) => {
+            this._paginatedData = paginatedData;
+            this.paginatedOptions.update((options) => [...options, ...paginatedData.data]);
+        });
+    }
+    handleScrollDown() {
+        const element = document.querySelector('.mat-mdc-select-panel');
+        this.zone.runOutsideAngular(() => {
+            this.scrollDetectionApi.onScrolledDown(element).subscribe(() => {
+                this.zone.run(() => this.loadMorePaginatedOptions());
+            });
+        });
+    }
     handleStateChange() {
         this.parentFormMember.stateChanges$.pipe(untilDestroyed(this)).subscribe(() => {
             this._validatorChanged?.();
             this.changeDetectorRef.markForCheck();
         });
     }
-    handleClickOutside() {
-        const overlayContainer = document.querySelector(`.cdk-overlay-container:has(.${PANEL_CLASS})`);
-        const backdrop = overlayContainer?.querySelector(`.cdk-overlay-backdrop`);
-        if (backdrop instanceof HTMLElement) {
-            fromEvent(backdrop, 'click')
-                .pipe(first())
-                .subscribe(() => {
-                this._touched?.();
-                this._validatorChanged?.();
-                this.changeDetectorRef.markForCheck();
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: WLCM_FORM_FIELD }, { token: WLCM_FORM_CONTROL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: WlcmSelectComponent, isStandalone: true, selector: "wlcm-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectOptionFormat: { classPropertyName: "selectOptionFormat", publicName: "selectOptionFormat", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, triggerTemplate: { classPropertyName: "triggerTemplate", publicName: "triggerTemplate", isSignal: true, isRequired: false, transformFunction: null }, isOptionDisabled: { classPropertyName: "isOptionDisabled", publicName: "isOptionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "openPanel()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$3.ScrollDetectionApi }, { token: WLCM_FORM_FIELD }, { token: WLCM_FORM_CONTROL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: WlcmSelectComponent, isStandalone: true, selector: "wlcm-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, fetchPaginatedOptions: { classPropertyName: "fetchPaginatedOptions", publicName: "fetchPaginatedOptions", isSignal: false, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: false, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectOptionFormat: { classPropertyName: "selectOptionFormat", publicName: "selectOptionFormat", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, triggerTemplate: { classPropertyName: "triggerTemplate", publicName: "triggerTemplate", isSignal: true, isRequired: false, transformFunction: null }, isOptionDisabled: { classPropertyName: "isOptionDisabled", publicName: "isOptionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "openPanel()" } }, providers: [
             WLCM_FORM_CONTROL_PROVIDER,
             {
                 provide: MAT_SELECT_CONFIG,
@@ -981,11 +1013,13 @@ let WlcmSelectComponent = class WlcmSelectComponent {
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
-        ], viewQueries: [{ propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], hostDirectives: [{ directive: WlcmSelectInputBinderDirective }], ngImport: i0, template: "<mat-select\n  #selectComponent\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  (opened)=\"panelOpened()\"\n  (closed)=\"closed.emit()\"\n>\n  @if (triggerTemplate()) {\n    <mat-select-trigger>\n      <ng-container\n        *ngTemplateOutlet=\"\n          triggerTemplate();\n          context: $any({ $implicit: selectComponent.selected })\n        \"\n      ></ng-container>\n    </mat-select-trigger>\n  }\n\n  <mat-option\n    *ngFor=\"let option of options()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    @if (optionTemplate()) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionTemplate();\n          context: $any({ $implicit: option })\n        \"\n      ></ng-container>\n    } @else {\n      {{ option.viewValue }}\n    }\n  </mat-option>\n</mat-select>\n\n<div class=\"wlcm-select-arrow\">\n  <ng-container\n    [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"\n    [wlcmIconStopPropagation]=\"false\"\n  ></ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], hostDirectives: [{ directive: WlcmSelectInputBinderDirective }], ngImport: i0, template: "<mat-select\n  #selectComponent\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  (opened)=\"panelOpened()\"\n  (closed)=\"panelClosed()\"\n>\n  @if (triggerTemplate()) {\n    <mat-select-trigger>\n      <ng-container\n        *ngTemplateOutlet=\"\n          triggerTemplate()!;\n          context: $any({ $implicit: selectComponent.selected })\n        \"\n      ></ng-container>\n    </mat-select-trigger>\n  }\n\n  <mat-option\n    *ngFor=\"let option of computedOptions()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    @if (optionTemplate()) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionTemplate();\n          context: $any({ $implicit: option })\n        \"\n      ></ng-container>\n    } @else {\n      {{ option.viewValue }}\n    }\n  </mat-option>\n</mat-select>\n\n<div class=\"wlcm-select-arrow\">\n  <ng-container\n    [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"\n    [wlcmIconStopPropagation]=\"false\"\n  ></ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 WlcmSelectComponent = __decorate([
     UntilDestroy(),
-    __metadata("design:paramtypes", [ChangeDetectorRef, Object, Object])
+    __metadata("design:paramtypes", [NgZone,
+        ChangeDetectorRef,
+        ScrollDetectionApi, Object, Object])
 ], WlcmSelectComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, decorators: [{
             type: Component,
@@ -1000,8 +1034,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
-                    ], template: "<mat-select\n  #selectComponent\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  (opened)=\"panelOpened()\"\n  (closed)=\"closed.emit()\"\n>\n  @if (triggerTemplate()) {\n    <mat-select-trigger>\n      <ng-container\n        *ngTemplateOutlet=\"\n          triggerTemplate();\n          context: $any({ $implicit: selectComponent.selected })\n        \"\n      ></ng-container>\n    </mat-select-trigger>\n  }\n\n  <mat-option\n    *ngFor=\"let option of options()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    @if (optionTemplate()) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionTemplate();\n          context: $any({ $implicit: option })\n        \"\n      ></ng-container>\n    } @else {\n      {{ option.viewValue }}\n    }\n  </mat-option>\n</mat-select>\n\n<div class=\"wlcm-select-arrow\">\n  <ng-container\n    [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"\n    [wlcmIconStopPropagation]=\"false\"\n  ></ng-container>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    ], template: "<mat-select\n  #selectComponent\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  (opened)=\"panelOpened()\"\n  (closed)=\"panelClosed()\"\n>\n  @if (triggerTemplate()) {\n    <mat-select-trigger>\n      <ng-container\n        *ngTemplateOutlet=\"\n          triggerTemplate()!;\n          context: $any({ $implicit: selectComponent.selected })\n        \"\n      ></ng-container>\n    </mat-select-trigger>\n  }\n\n  <mat-option\n    *ngFor=\"let option of computedOptions()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    @if (optionTemplate()) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionTemplate();\n          context: $any({ $implicit: option })\n        \"\n      ></ng-container>\n    } @else {\n      {{ option.viewValue }}\n    }\n  </mat-option>\n</mat-select>\n\n<div class=\"wlcm-select-arrow\">\n  <ng-container\n    [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"\n    [wlcmIconStopPropagation]=\"false\"\n  ></ng-container>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$3.ScrollDetectionApi }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WLCM_FORM_FIELD]
                 }] }, { type: undefined, decorators: [{
@@ -1013,6 +1047,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], fetchPaginatedOptions: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
             }], matSelect: [{
                 type: ViewChild,
                 args: [MatSelect]