@3kles/kles-material-dynamicforms 17.8.1 → 17.8.3

package/fesm2022/3kles-kles-material-dynamicforms.mjs

@@ -497,7 +497,7 @@ class KlesDynamicFormComponent {
           <mat-error matErrorForm [form]="form" [validations]="validators" [asyncValidations]="asyncValidators"></mat-error>
         }
     </form>
-    `, isInline: true, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["validations", "asyncValidations", "form"] }] }); }
+    `, isInline: true, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["validations", "asyncValidations", "form"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KlesDynamicFormComponent, decorators: [{
             type: Component,
@@ -513,7 +513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           <mat-error matErrorForm [form]="form" [validations]="validators" [asyncValidations]="asyncValidators"></mat-error>
         }
     </form>
-    `, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"] }]
+    `, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.UntypedFormBuilder }], propDecorators: { fields: [{
                 type: Input
             }], validators: [{
@@ -2785,9 +2785,10 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
         this.ref = ref;
         this.searchControl = new UntypedFormControl();
         this.selectAllControl = new UntypedFormControl(false);
-        this.isLoading = false;
+        this.isLoading = signal(false);
         this.optionsFiltered$ = new ReplaySubject(1);
         this.openChange$ = new BehaviorSubject(false);
+        this.openClosed$ = new Subject();
         this.compareFn = (o1, o2) => {
             if (this.field.property && o1 && o2) {
                 return o1[this.field.property] === o2[this.field.property];
@@ -2798,10 +2799,10 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
     ngOnInit() {
         super.ngOnInit();
         if (this.field.lazy) {
-            this.isLoading = true;
+            this.isLoading.set(true);
             if (this.group.controls[this.field.name].value !== undefined && this.group.controls[this.field.name].value !== null) {
                 this.options$ = new BehaviorSubject(Array.isArray(this.group.controls[this.field.name].value) ? this.group.controls[this.field.name].value : [this.group.controls[this.field.name].value]);
-                this.isLoading = false;
+                this.isLoading.set(false);
             }
             else {
                 this.options$ = new BehaviorSubject([]);
@@ -2825,7 +2826,7 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
         this.searchControl.valueChanges.pipe(takeUntil(this._onDestroy), debounceTime(this.field.debounceTime || 0), startWith(this.searchControl.value), switchMap(value => {
             return concat(of({ loading: true, options: [] }), this.onSearchChange(value).pipe(take(1), map((options) => ({ loading: false, options }))));
         })).subscribe(({ loading, options }) => {
-            this.isLoading = loading;
+            this.isLoading.set(loading);
             this.optionsFiltered$.next(options);
             this.ref.markForCheck();
         });
@@ -2840,19 +2841,22 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
     }
     ngOnDestroy() {
         // this._onDestroy.next();
+        this.openClosed$.next();
+        this.openClosed$.complete();
         super.ngOnDestroy();
     }
     toggleAllSelection(state) {
         if (state.checked) {
             this.optionsFiltered$.pipe(take(1), map((options) => options.filter((option) => !option?.disabled))).subscribe(options => {
                 if (options.length > 0) {
-                    this.group.controls[this.field.name].patchValue(options.slice(), { emitModelToViewChange: false });
+                    this.group.controls[this.field.name].patchValue(options);
                 }
             });
         }
         else {
-            this.group.controls[this.field.name].patchValue([], { emitModelToViewChange: false });
+            this.group.controls[this.field.name].patchValue([]);
         }
+        this.ref.markForCheck();
     }
     openChangeEvent() {
         this.openChange$
@@ -2860,7 +2864,7 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
             return this.onOpenChange(isOpen);
         }))
             .subscribe((options) => {
-            this.isLoading = false;
+            this.isLoading.set(false);
             this.options$.next(options);
             this.optionsFiltered$.next(options);
             this.ref.markForCheck();
@@ -2869,12 +2873,12 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
     onOpenChange(isOpen) {
         if (isOpen) {
             if (this.field.options instanceof Observable) {
-                this.isLoading = true;
-                return this.field.options.pipe(take(1));
+                this.isLoading.set(true);
+                return this.field.options.pipe(takeUntil(this.openClosed$));
             }
             else if (this.field.options instanceof Function) {
-                this.isLoading = true;
-                return this.field.options().pipe(take(1));
+                this.isLoading.set(true);
+                return this.field.options().pipe(takeUntil(this.openClosed$));
             }
             else {
                 return of(this.field.options);
@@ -2916,6 +2920,9 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
     }
     openChange($event) {
         if (this.field.lazy) {
+            if (!$event) {
+                this.openClosed$.next();
+            }
             this.openChange$.next($event);
         }
         if (this.field.virtualScroll) {
@@ -2971,7 +2978,7 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
             </mat-option>
 
             <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=4*48>
-                @if (!isLoading) {
+                @if (!isLoading()) {
                     @if (field.multiple) {
                         <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
                             {{'selectAll' | translate}}
@@ -3030,7 +3037,7 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
                 placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
             </mat-option>
 
-            @if (!isLoading) {
+            @if (!isLoading()) {
                 @if (field.multiple) {
                     <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
                         {{'selectAll' | translate}}
@@ -3104,7 +3111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             </mat-option>
 
             <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=4*48>
-                @if (!isLoading) {
+                @if (!isLoading()) {
                     @if (field.multiple) {
                         <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
                             {{'selectAll' | translate}}
@@ -3163,7 +3170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
             </mat-option>
 
-            @if (!isLoading) {
+            @if (!isLoading()) {
                 @if (field.multiple) {
                     <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
                         {{'selectAll' | translate}}
@@ -3917,7 +3924,7 @@ class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {
                 this.searchControl.reset(null, { emitEvent: false });
             }
             this.optionsFiltered$.next(options);
-            this.isLoading = false;
+            this.isLoading.set(false);
             this.ref.markForCheck();
         });
     }
@@ -3944,7 +3951,7 @@ class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {
             </mat-option>
 
             <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=4*48>
-                @if (!isLoading) {
+                @if (!isLoading()) {
                     @if (field.multiple) {
                         <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
                             {{'selectAll' | translate}}
@@ -4003,7 +4010,7 @@ class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {
                 placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
             </mat-option>
 
-            @if (!isLoading) {
+            @if (!isLoading()) {
                 @if (field.multiple) {
                     <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
                         {{'selectAll' | translate}}
@@ -4064,7 +4071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             </mat-option>
 
             <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=4*48>
-                @if (!isLoading) {
+                @if (!isLoading()) {
                     @if (field.multiple) {
                         <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
                             {{'selectAll' | translate}}
@@ -4123,7 +4130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
             </mat-option>
 
-            @if (!isLoading) {
+            @if (!isLoading()) {
                 @if (field.multiple) {
                     <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
                         {{'selectAll' | translate}}