@wlcm/angular 17.7.22 → 17.7.24

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

@@ -17,6 +17,7 @@ import { RxLet } from '@rx-angular/template/let';
 import * as i3 from '@angular/material/core';
 import * as i1$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { toObservable } from '@angular/core/rxjs-interop';
 import { CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { mergeWith } from 'lodash-es';
 import { MatRadioModule, MAT_RADIO_DEFAULT_OPTIONS } from '@angular/material/radio';
@@ -480,6 +481,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
         this.formField = formField;
         this.required = false;
         this.placeholder = '';
+        this.queryParams = { ...DEFAULT_QUERY_PARAMS, limit: 15 };
         this.selectOptionFormat = input('ValueOnly');
         this.noResultsTemplate = input();
         this.selected = output();
@@ -494,7 +496,6 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
         this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
         this.blur$ = this._blurStream$.pipe(switchMap((stream) => stream));
         this.loading$ = this._loading$.asObservable();
-        this.queryParams = { ...DEFAULT_QUERY_PARAMS, limit: 15 };
         this._paginatedData = null;
         this._reloadOptions$ = new Subject();
         this.handleLoadMoreEvent();
@@ -607,7 +608,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
         this._blurStream$.next(merge(...blurObservables).pipe(map(() => this.control?.markAsTouched())));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmAutocompleteComponent, deps: [{ token: WLCM_FORM_FIELD }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: WlcmAutocompleteComponent, isStandalone: true, selector: "wlcm-autocomplete", inputs: { fetchPaginatedOptions: { classPropertyName: "fetchPaginatedOptions", publicName: "fetchPaginatedOptions", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectOptionFormat: { classPropertyName: "selectOptionFormat", publicName: "selectOptionFormat", isSignal: true, isRequired: false, transformFunction: null }, noResultsTemplate: { classPropertyName: "noResultsTemplate", publicName: "noResultsTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { classAttribute: "wlcm-autocomplete" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: WlcmAutocompleteComponent, isStandalone: true, selector: "wlcm-autocomplete", inputs: { fetchPaginatedOptions: { classPropertyName: "fetchPaginatedOptions", publicName: "fetchPaginatedOptions", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: false, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: false, isRequired: false, transformFunction: null }, selectOptionFormat: { classPropertyName: "selectOptionFormat", publicName: "selectOptionFormat", isSignal: true, isRequired: false, transformFunction: null }, noResultsTemplate: { classPropertyName: "noResultsTemplate", publicName: "noResultsTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { classAttribute: "wlcm-autocomplete" }, providers: [
             { provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, useValue: { overlayPanelClass: PANEL_CLASS$1 } },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
@@ -660,6 +661,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 type: Input
             }], optionTemplate: [{
                 type: Input
+            }], queryParams: [{
+                type: Input
             }], inputElement: [{
                 type: ViewChild,
                 args: [WLCM_INPUT, { read: ElementRef }]
@@ -887,7 +890,7 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         this.multiple = false;
         this.placeholder = 'Not selected';
         this.canSelect = (_) => true;
-        this.queryParams = DEFAULT_QUERY_PARAMS;
+        this.queryParams = { ...DEFAULT_QUERY_PARAMS };
         this.paginated = input(false);
         this.options = input([]);
         this.paginatedOptions = signal([]);
@@ -903,9 +906,15 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         this.WlcmIconName = WlcmIconName;
         this._paginatedData = null;
         this._previousValue = null;
+        this._optionsCache = new Set();
         this.computedOptions = computed(() => {
-            return this.paginated() ? this.paginatedOptions() : this.options();
+            const options = this.paginated() ? this.paginatedOptions() : this.options();
+            if (this.isOptionDisabled() && options.length > 0) {
+                this.updateOptionsStatus();
+            }
+            return options;
         });
+        this.prefilledOptions = signal([]);
         this.matOptions = viewChildren(MatOption);
         this._focusStream$ = new BehaviorSubject(EMPTY);
         this._blurStream$ = new BehaviorSubject(EMPTY);
@@ -920,14 +929,11 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         if (this.parentFormMember) {
             this.handleStateChange();
         }
-        effect(() => {
-            if (this.paginated())
+        toObservable(this.paginated)
+            .pipe(untilDestroyed(this))
+            .subscribe((paginated) => {
+            if (paginated)
                 this.loadPaginatedOptions();
-        }, { allowSignalWrites: true });
-        effect(() => {
-            if (this.isOptionDisabled() && this.computedOptions().length > 0) {
-                this.updateOptionsStatus();
-            }
         });
     }
     ngAfterViewInit() {
@@ -983,6 +989,8 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         });
     }
     writeValue(value) {
+        if (this.paginated())
+            this.prefillOptions(value);
         this.updateValue(value);
     }
     registerOnChange(callback) {
@@ -1007,6 +1015,8 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         this.fetchPaginatedOptions({ ...this.queryParams, page: 1 })
             .pipe(untilDestroyed(this), first())
             .subscribe((paginatedData) => {
+            this._optionsCache.clear();
+            this.cacheOptions(paginatedData.data);
             this._paginatedData = paginatedData;
             this.paginatedOptions.set(paginatedData.data);
         });
@@ -1018,10 +1028,32 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         this.fetchPaginatedOptions({ ...this.queryParams })
             .pipe(untilDestroyed(this), first())
             .subscribe((paginatedData) => {
+            this.cacheOptions(paginatedData.data);
             this._paginatedData = paginatedData;
             this.paginatedOptions.update((options) => [...options, ...paginatedData.data]);
         });
     }
+    cacheOptions(options) {
+        options.forEach((option) => this._optionsCache.add(option.value));
+        this.syncPrefilledOptions();
+    }
+    syncPrefilledOptions() {
+        if (this.prefilledOptions().length === 0)
+            return;
+        this.prefilledOptions.update((options) => {
+            return options.filter((option) => !this._optionsCache.has(option.value));
+        });
+    }
+    prefillOptions(value) {
+        let prefilledOptions = [];
+        if (value instanceof Array) {
+            prefilledOptions = value.filter((option) => option instanceof Object);
+        }
+        else if (value instanceof Object) {
+            prefilledOptions = [value];
+        }
+        this.prefilledOptions.set(prefilledOptions);
+    }
     handleScrollDown() {
         const element = document.querySelector('.mat-mdc-select-panel');
         this.zone.runOutsideAngular(() => {
@@ -1048,7 +1080,7 @@ 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  [value]=\"value()\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  [compareWith]=\"compareWith\"\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: 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  [value]=\"value()\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  [compareWith]=\"compareWith\"\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 prefilledOptions()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: option }\"\n    ></ng-container>\n  </mat-option>\n\n  <mat-option\n    *ngFor=\"let option of computedOptions()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: option }\"\n    ></ng-container>\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\n<ng-template #wlcmSelectOptionContent let-option>\n  @if (optionTemplate()) {\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplate(); context: $any({ $implicit: option })\"\n    ></ng-container>\n  } @else {\n    {{ option.viewValue }}\n  }\n</ng-template>\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: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 WlcmSelectComponent = __decorate([
     UntilDestroy(),
@@ -1069,7 +1101,7 @@ 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  [value]=\"value()\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  [compareWith]=\"compareWith\"\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" }]
+                    ], template: "<mat-select\n  #selectComponent\n  [value]=\"value()\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  [compareWith]=\"compareWith\"\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 prefilledOptions()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: option }\"\n    ></ng-container>\n  </mat-option>\n\n  <mat-option\n    *ngFor=\"let option of computedOptions()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: option }\"\n    ></ng-container>\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\n<ng-template #wlcmSelectOptionContent let-option>\n  @if (optionTemplate()) {\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplate(); context: $any({ $implicit: option })\"\n    ></ng-container>\n  } @else {\n    {{ option.viewValue }}\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$3.ScrollDetectionApi }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WLCM_FORM_FIELD]