@3kles/kles-material-dynamicforms 17.8.2 → 17.8.4

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

@@ -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}}
@@ -3564,6 +3571,8 @@ class KlesFormSelectionListComponent extends KlesFieldAbstract {
         });
         this.selection.changed.pipe(takeUntil(this._onDestroy)).subscribe(change => {
             this.group.controls[this.field.name].patchValue(change.source.selected);
+            this.group.controls[this.field.name].markAllAsTouched();
+            this.group.controls[this.field.name].markAsDirty();
         });
     }
     ngOnDestroy() {
@@ -3917,7 +3926,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 +3953,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 +4012,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 +4073,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 +4132,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}}
@@ -4518,6 +4527,8 @@ class KlesFormSelectionListSearchComponent extends KlesFieldAbstract {
         });
         this.selection.changed.pipe(takeUntil(this._onDestroy)).subscribe(change => {
             this.group.controls[this.field.name].patchValue(change.source.selected);
+            this.group.controls[this.field.name].markAllAsTouched();
+            this.group.controls[this.field.name].markAsDirty();
         });
         this.optionFiltered$ = this.searchControl.valueChanges
             .pipe(takeUntil(this._onDestroy), startWith(null), debounceTime(this.field.debounceTime || 0), distinctUntilChanged(), map((value) => value?.toLowerCase()), switchMap((value) => {