@wlcm/angular 18.2.11 → 18.2.13

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

@@ -5,7 +5,7 @@ import * as i4 from '@angular/forms';
 import { Validators, NgControl, ControlContainer, FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
 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, map, filter, timer, first, of } from 'rxjs';
+import { Subject, Observable, takeUntil, merge, fromEvent, observeOn, asyncScheduler, BehaviorSubject, EMPTY, switchMap, first, take, tap, concatMap, map, filter, timer, of } from 'rxjs';
 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';
@@ -14,12 +14,12 @@ import { MatOption, MAT_SELECT_CONFIG, MatSelect, MatSelectModule } from '@angul
 import * as i1$1 from '@angular/material/autocomplete';
 import { MatAutocomplete, MatAutocompleteOrigin, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { RxLet } from '@rx-angular/template/let';
+import { cloneDeep, mergeWith } from 'lodash-es';
 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';
 
 class WlcmErrorComponent {
@@ -481,7 +481,10 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
         this.formField = formField;
         this.required = false;
         this.placeholder = '';
-        this.queryParams = { ...DEFAULT_QUERY_PARAMS, limit: 15 };
+        this.queryParams = cloneDeep({
+            ...DEFAULT_QUERY_PARAMS,
+            limit: 15,
+        });
         this.selectOptionFormat = input('ValueOnly');
         this.noResultsTemplate = input();
         this.selected = output();
@@ -502,7 +505,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
         this.handleControlValueChanges();
     }
     ngOnInit() {
-        this.loadOptions(this.queryParams).subscribe();
+        this.loadOptions().pipe(first()).subscribe();
     }
     ngAfterViewInit() {
         const container = this.formField.inputContainer;
@@ -541,7 +544,6 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
         this.control.enable();
     }
     reloadOptions() {
-        this.queryParams.page = 1;
         this._reloadOptions$.next();
     }
     blured() {
@@ -560,9 +562,10 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
     registerOnValidatorChange(fn) {
         this._onValidatorChange = fn;
     }
-    loadOptions(params) {
+    loadOptions(query = '') {
         this._loading$.next(true);
-        return this.fetchPaginatedOptions({ ...params, page: 1 }).pipe(tap((paginatedData) => {
+        this.queryParams = { ...this.queryParams, query, page: 1 };
+        return this.fetchPaginatedOptions(this.queryParams).pipe(tap((paginatedData) => {
             this._paginatedData = paginatedData;
             this._options$.next(paginatedData.data);
             this._loading$.next(false);
@@ -595,7 +598,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
             this.selected.emit(_value);
             return !(value instanceof Object);
         }))
-            .pipe(switchMap((value) => timer(200).pipe(switchMap(() => this.loadOptions({ ...this.queryParams, query: value })))))
+            .pipe(switchMap((value) => timer(200).pipe(switchMap(() => this.loadOptions(value)))))
             .subscribe();
     }
     attachFocusBlurListeners() {
@@ -608,7 +611,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 }, 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: [
+    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: (params) => cloneDeep(params) }, 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 },
@@ -662,7 +665,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             }], optionTemplate: [{
                 type: Input
             }], queryParams: [{
-                type: Input
+                type: Input,
+                args: [{ transform: (params) => cloneDeep(params) }]
             }], inputElement: [{
                 type: ViewChild,
                 args: [WLCM_INPUT, { read: ElementRef }]
@@ -920,6 +924,8 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         this._blurStream$ = new BehaviorSubject(EMPTY);
         this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
         this.blur$ = this._blurStream$.pipe(switchMap((stream) => stream));
+        this.adjustedValue$ = new BehaviorSubject(null);
+        this.viewReady$ = new Subject();
         this.selected$ = new Subject();
         this.compareWith = (optionA, optionB) => {
             return (optionA?.value || optionA) === (optionB?.value || optionB);
@@ -929,6 +935,7 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         if (this.parentFormMember) {
             this.handleStateChange();
         }
+        this.handleAdjustedValue();
         toObservable(this.paginated)
             .pipe(untilDestroyed(this))
             .subscribe((paginated) => {
@@ -937,6 +944,7 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         });
     }
     ngAfterViewInit() {
+        this.viewReady$.next();
         const formField = this.formField.inputContainer;
         if (formField) {
             this.matSelect._preferredOverlayOrigin = new CdkOverlayOrigin(this.formField.inputContainer);
@@ -962,8 +970,9 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         this.matSelect.value = this._previousValue;
     }
     updateValue(value) {
-        this.value.set(value);
-        this._previousValue = value;
+        const formattedValue = this.prepareValueForPatch(value);
+        this.value.set(formattedValue);
+        this._previousValue = formattedValue;
     }
     validateSelectedOption(value) {
         return new Observable((observer) => {
@@ -1011,8 +1020,36 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     get isOpen() {
         return this.matSelect?.panelOpen ?? false;
     }
+    prepareValueForPatch(value) {
+        const formatedValue = this.formatValue(value);
+        if (formatedValue.changed)
+            this.adjustedValue$.next(formatedValue.value);
+        return formatedValue.value;
+    }
+    formatValue(value) {
+        let changed = false;
+        const _formatOption = (value) => {
+            const formatedOption = this.formatOption(value);
+            if (formatedOption.changed)
+                changed = true;
+            return formatedOption.value;
+        };
+        if (value instanceof Array) {
+            const options = value.map(_formatOption);
+            return { changed, value: options };
+        }
+        const option = _formatOption(value);
+        return { changed, value: option };
+    }
+    formatOption(value) {
+        if (value instanceof Object && this.selectOptionFormat() === 'ValueOnly') {
+            return { changed: true, value: value.value };
+        }
+        return { changed: false, value };
+    }
     loadPaginatedOptions() {
-        this.fetchPaginatedOptions({ ...this.queryParams, page: 1 })
+        this.queryParams.page = 1;
+        this.fetchPaginatedOptions(this.queryParams)
             .pipe(untilDestroyed(this), first())
             .subscribe((paginatedData) => {
             this._optionsCache.clear();
@@ -1068,6 +1105,11 @@ let WlcmSelectComponent = class WlcmSelectComponent {
             this.changeDetectorRef.markForCheck();
         });
     }
+    handleAdjustedValue() {
+        this.viewReady$
+            .pipe(switchMap(() => this.adjustedValue$.pipe(filter(Boolean))))
+            .subscribe((value) => this._changed?.(value));
+    }
     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 }, canSelect: { classPropertyName: "canSelect", publicName: "canSelect", 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,