@3kles/kles-material-dynamicforms 14.8.1 → 14.9.0

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

@@ -42,7 +42,7 @@ import { CdkTableModule } from '@angular/cdk/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i9 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i6$1 from '@angular/material/checkbox';
+import * as i10 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
 import * as i9$1 from '@angular/material/autocomplete';
@@ -52,11 +52,11 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTreeModule } from '@angular/material/tree';
-import * as i6$2 from '@angular/material/slide-toggle';
+import * as i6$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i7$2 from 'ngx-color-picker';
 import { ColorPickerModule } from 'ngx-color-picker';
-import * as i10 from '@angular/cdk/scrolling';
+import * as i11 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkScrollable, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i4$5 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -69,6 +69,7 @@ import * as i3$1 from '@angular/flex-layout/flex';
 import * as i4$3 from '@angular/cdk/text-field';
 import * as i12 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+import { v4 } from 'uuid';
 
 class KlesFormControl {
     constructor(field) {
@@ -80,6 +81,9 @@ class KlesFormControl {
             asyncValidators: this.bindAsyncValidations(this.field.asyncValidations || []),
             updateOn: this.field.updateOn || 'change'
         });
+        if (this.field.disabled) {
+            control.disable();
+        }
         if (this.field.asyncValue) {
             concat(of({ value: null, pending: true }), this.field.asyncValue.pipe(take(1), catchError((err) => {
                 console.error(err);
@@ -90,7 +94,9 @@ class KlesFormControl {
                     control.disable({ emitEvent: false });
                 }
                 else {
-                    control.enable({ emitEvent: false });
+                    if (!this.field.disabled) {
+                        control.enable({ emitEvent: false });
+                    }
                     control.setValue(response.value);
                     this.field.value = response.value;
                 }
@@ -834,6 +840,9 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
         if (this.field.options instanceof Observable) {
             this.options$ = this.field.options;
         }
+        else if (this.field.options instanceof Function) {
+            this.options$ = this.field.options();
+        }
         else {
             this.options$ = of(this.field.options);
         }
@@ -1055,13 +1064,17 @@ let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbs
             this.openChange$
                 .pipe(takeUntil(this._onDestroy), switchMap((isOpen) => {
                 if (isOpen) {
-                    if (!(this.field.options instanceof Observable)) {
-                        return of(this.field.options);
-                    }
-                    else {
+                    if (this.field.options instanceof Observable) {
                         this.isLoading = true;
                         return this.field.options.pipe(take(1));
                     }
+                    else if (this.field.options instanceof Function) {
+                        this.isLoading = true;
+                        return this.field.options();
+                    }
+                    else {
+                        return of(this.field.options);
+                    }
                 }
                 else {
                     return of(this.group.controls[this.field.name].value !== undefined && this.group.controls[this.field.name].value !== null
@@ -1076,11 +1089,14 @@ let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbs
             });
         }
         else {
-            if (!(this.field.options instanceof Observable)) {
-                this.options$ = of(this.field.options);
+            if (this.field.options instanceof Observable) {
+                this.options$ = this.field.options;
+            }
+            else if (this.field.options instanceof Function) {
+                this.options$ = this.field.options();
             }
             else {
-                this.options$ = this.field.options;
+                this.options$ = of(this.field.options);
             }
         }
     }
@@ -1206,7 +1222,7 @@ KlesFormSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
             </ng-container>
     </mat-form-field>
-`, isInline: true, styles: ["mat-form-field{width:100%}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i10.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i10.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i10.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
+`, isInline: true, styles: ["mat-form-field{width:100%}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
 KlesFormSelectComponent = __decorate([
     FieldMapper({ type: EnumType.select })
 ], KlesFormSelectComponent);
@@ -1415,7 +1431,7 @@ KlesFormCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>
         </ng-container>
     </div>
-`, isInline: true, dependencies: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+`, isInline: true, dependencies: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 KlesFormCheckboxComponent = __decorate([
     FieldMapper({ type: EnumType.checkbox })
 ], KlesFormCheckboxComponent);
@@ -2167,6 +2183,9 @@ class KlesFormGroup extends KlesFormControl {
                 subGroup.addControl(subfield.name, control);
             });
         }
+        if (this.field.disabled) {
+            subGroup.disable();
+        }
         return subGroup;
     }
 }
@@ -2355,20 +2374,7 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
             }
             this.openChange$
                 .pipe(takeUntil(this._onDestroy), switchMap((isOpen) => {
-                if (isOpen) {
-                    if (!(this.field.options instanceof Observable)) {
-                        return of(this.field.options);
-                    }
-                    else {
-                        this.isLoading = true;
-                        return this.field.options.pipe(take(1));
-                    }
-                }
-                else {
-                    return of(this.group.controls[this.field.name].value !== undefined && this.group.controls[this.field.name].value !== null
-                        ? (Array.isArray(this.group.controls[this.field.name].value) ?
-                            this.group.controls[this.field.name].value : [this.group.controls[this.field.name].value]) : []);
-                }
+                return this.onOpenChange(isOpen);
             }))
                 .subscribe((options) => {
                 this.options$.next(options);
@@ -2377,41 +2383,22 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
             });
         }
         else {
-            if (!(this.field.options instanceof Observable)) {
-                this.options$ = of(this.field.options);
-            }
-            else {
+            if (this.field.options instanceof Observable) {
                 this.options$ = this.field.options;
             }
-        }
-        this.searchControl.valueChanges.pipe(startWith(this.searchControl.value), takeUntil(this._onDestroy), switchMap(value => {
-            if (value) {
-                const search = value.toLowerCase();
-                return this.options$.pipe(map(options => {
-                    return options
-                        .filter(option => {
-                        if (this.field.searchKeys && this.field.searchKeys.length) {
-                            return this.field.searchKeys.some(searchKey => {
-                                if (option[searchKey]) {
-                                    return option[searchKey].toString().toLowerCase().indexOf(search) > -1;
-                                }
-                                return false;
-                            }) || (this.field.property ?
-                                option[this.field.property].toString().toLowerCase().indexOf(search) > -1 : false);
-                        }
-                        else {
-                            if (this.field.property) {
-                                return option[this.field.property].toString().toLowerCase().indexOf(search) > -1;
-                            }
-                        }
-                        return option.toString().toLowerCase().indexOf(search) > -1;
-                    });
-                }));
+            else if (this.field.options instanceof Function) {
+                this.options$ = this.field.options();
             }
             else {
-                return this.options$;
+                this.options$ = of(this.field.options);
             }
-        })).subscribe(this.optionsFiltered$);
+        }
+        this.searchControl.valueChanges.pipe(takeUntil(this._onDestroy), startWith(this.searchControl.value), switchMap(value => {
+            return concat(of({ loading: true, options: [] }), this.onSearchChange(value).pipe(map((options) => ({ loading: false, options }))));
+        })).subscribe(({ loading, options }) => {
+            this.isLoading = loading;
+            this.optionsFiltered$.next(options);
+        });
         if (this.field.multiple) {
             this.group.controls[this.field.name]
                 .valueChanges.pipe(takeUntil(this._onDestroy), startWith(this.group.controls[this.field.name].value), map((selected) => (this.field.property ? selected?.map(s => s[this.field.property]) : selected)), switchMap(selected => {
@@ -2447,6 +2434,54 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
             this.group.controls[this.field.name].patchValue([]);
         }
     }
+    onOpenChange(isOpen) {
+        if (isOpen) {
+            if (this.field.options instanceof Observable) {
+                this.isLoading = true;
+                return this.field.options.pipe(take(1));
+            }
+            else if (this.field.options instanceof Function) {
+                this.isLoading = true;
+                return this.field.options();
+            }
+            else {
+                return of(this.field.options);
+            }
+        }
+        else {
+            return of(this.group.controls[this.field.name].value !== undefined && this.group.controls[this.field.name].value !== null
+                ? (Array.isArray(this.group.controls[this.field.name].value) ?
+                    this.group.controls[this.field.name].value : [this.group.controls[this.field.name].value]) : []);
+        }
+    }
+    onSearchChange(value) {
+        if (value) {
+            const search = value.toLowerCase();
+            return this.options$.pipe(map(options => {
+                return options
+                    .filter(option => {
+                    if (this.field.searchKeys && this.field.searchKeys.length) {
+                        return this.field.searchKeys.some(searchKey => {
+                            if (option[searchKey]) {
+                                return option[searchKey].toString().toLowerCase().indexOf(search) > -1;
+                            }
+                            return false;
+                        }) || (this.field.property ?
+                            option[this.field.property].toString().toLowerCase().indexOf(search) > -1 : false);
+                    }
+                    else {
+                        if (this.field.property) {
+                            return option[this.field.property].toString().toLowerCase().indexOf(search) > -1;
+                        }
+                    }
+                    return option.toString().toLowerCase().indexOf(search) > -1;
+                });
+            }));
+        }
+        else {
+            return this.options$;
+        }
+    }
     openChange($event) {
         if (this.field.lazy) {
             this.openChange$.next($event);
@@ -2563,7 +2598,7 @@ KlesFormSelectSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                 <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
             </ng-container>
     </mat-form-field>
-`, isInline: true, styles: ["mat-form-field{width:100%}\n", ".selectAll{padding:10px 16px}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i10.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i10.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i12.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
+`, isInline: true, styles: ["mat-form-field{width:100%}\n", ".selectAll{padding:10px 16px}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i12.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KlesFormSelectSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-select-search', template: `
@@ -2757,7 +2792,7 @@ KlesFormSlideToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>
         </ng-container>
     </div>
-`, isInline: true, dependencies: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+`, isInline: true, dependencies: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KlesFormSlideToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-slide-toggle', template: `
@@ -2776,11 +2811,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class KlesFormSelectionListComponent extends KlesFieldAbstract {
     ngOnInit() {
         super.ngOnInit();
-        if (!(this.field.options instanceof Observable)) {
-            this.options$ = of(this.field.options);
+        if (this.field.options instanceof Observable) {
+            this.options$ = this.field.options;
+        }
+        else if (this.field.options instanceof Function) {
+            this.options$ = this.field.options();
         }
         else {
-            this.options$ = this.field.options;
+            this.options$ = of(this.field.options);
         }
     }
     ngOnDestroy() {
@@ -2858,11 +2896,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class KlesFormButtonToogleGroupComponent extends KlesFieldAbstract {
     ngOnInit() {
         super.ngOnInit();
-        if (!(this.field.options instanceof Observable)) {
-            this.options$ = of(this.field.options);
+        if (this.field.options instanceof Observable) {
+            this.options$ = this.field.options;
+        }
+        else if (this.field.options instanceof Function) {
+            this.options$ = this.field.options();
         }
         else {
-            this.options$ = this.field.options;
+            this.options$ = of(this.field.options);
         }
     }
     ngOnDestroy() {
@@ -2899,11 +2940,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class KlesFormArray extends KlesFormControl {
     create() {
-        const array = new FormArray([]);
+        const array = new FormArray([], {
+            validators: this.bindValidations(this.field.validations || []),
+            asyncValidators: this.bindAsyncValidations(this.field.asyncValidations || []),
+            updateOn: this.field.updateOn || 'change'
+        });
         if (this.field.value && Array.isArray(this.field.value)) {
             if (this.field.collections && Array.isArray(this.field.collections)) {
                 this.field.value.forEach(val => {
                     const group = new FormGroup({});
+                    group.addControl('_id', new FormControl(v4()));
                     this.field.collections.forEach(subfield => {
                         const data = val[subfield.name] || null;
                         const control = new KlesFormControl({ ...subfield, ...(data && { value: data }) }).create();
@@ -2921,6 +2967,9 @@ class KlesFormArray extends KlesFormControl {
             });
             array.push(group);
         }
+        if (this.field.disabled) {
+            array.disable();
+        }
         return array;
     }
 }
@@ -3059,6 +3108,256 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
     `, styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
+class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {
+    constructor(viewRef, ref) {
+        super(viewRef, ref);
+        this.viewRef = viewRef;
+        this.ref = ref;
+    }
+    ngOnInit() {
+        this.field.lazy = true;
+        super.ngOnInit();
+        this.openChange$.pipe(takeUntil(this._onDestroy))
+            .subscribe((open) => {
+            if (open) {
+                this.searchControl.reset(null);
+            }
+            else {
+                this.searchControl.reset(null, { emitEvent: false });
+            }
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    onSearchChange(value) {
+        if (this.field.options instanceof Function) {
+            if (value) {
+                const search = value.toLowerCase();
+                return this.field.options(search).pipe(take(1));
+            }
+            else {
+                return this.field.options().pipe(take(1));
+            }
+        }
+        else {
+            return super.onSearchChange(value);
+        }
+    }
+}
+KlesFormSelectLazySearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KlesFormSelectLazySearchComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+KlesFormSelectLazySearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KlesFormSelectLazySearchComponent, selector: "kles-form-select-lazy-search", usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
+        <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
+        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
+        <mat-select-trigger *ngIf="field.triggerComponent">
+            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+        </mat-select-trigger>
+
+        <ng-container *ngIf="field.virtualScroll">
+            <mat-option>
+                <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false"
+                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
+            </mat-option>
+
+            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=4*48>
+                <ng-container *ngIf="!isLoading; else emptyOption">
+                    <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
+                    (change)="toggleAllSelection($event)">
+                        {{'selectAll' | translate}}
+                    </mat-checkbox>
+                    <ng-container *ngIf="!field.autocompleteComponent">
+                        <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
+
+                        <ng-container *ngIf="field.multiple">
+                            <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                            style="display:none">
+                                {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                            </mat-option>
+                        </ng-container>
+
+                        <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                            <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                                {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                            </mat-option>
+                        </ng-container>
+                    </ng-container>
+
+                    <ng-container *ngIf="field.autocompleteComponent">
+                        <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+
+                        <ng-container *ngIf="field.multiple">
+                            <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                            style="display:none">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                            </mat-option>
+                        </ng-container>
+
+                        <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                            <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                                <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                            </mat-option>
+                        </ng-container>
+                    </ng-container>
+                </ng-container>
+                <ng-template #emptyOption>
+                    <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
+                </ng-template>
+            </cdk-virtual-scroll-viewport>
+
+        </ng-container>
+
+        <ng-container *ngIf="!field.virtualScroll">
+            <mat-option>
+                <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" 
+                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
+            </mat-option>
+
+            <ng-container *ngIf="!isLoading; else emptyOption">
+                <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
+                        (change)="toggleAllSelection($event)">
+                        {{'selectAll' | translate}}
+                </mat-checkbox>
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                    </mat-option>
+                </ng-container>
+            </ng-container>
+
+            <ng-template #emptyOption>
+                <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
+            </ng-template>
+        </ng-container>
+        </mat-select>
+
+        <div matSuffix>
+            <ng-content></ng-content>
+        </div>
+        
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+    </mat-form-field>
+`, isInline: true, styles: ["mat-form-field{width:100%}\n", ".selectAll{padding:10px 16px}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i12.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KlesFormSelectLazySearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-select-lazy-search', template: `
+    <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
+        <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
+        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
+        <mat-select-trigger *ngIf="field.triggerComponent">
+            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+        </mat-select-trigger>
+
+        <ng-container *ngIf="field.virtualScroll">
+            <mat-option>
+                <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false"
+                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
+            </mat-option>
+
+            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=4*48>
+                <ng-container *ngIf="!isLoading; else emptyOption">
+                    <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
+                    (change)="toggleAllSelection($event)">
+                        {{'selectAll' | translate}}
+                    </mat-checkbox>
+                    <ng-container *ngIf="!field.autocompleteComponent">
+                        <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
+
+                        <ng-container *ngIf="field.multiple">
+                            <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                            style="display:none">
+                                {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                            </mat-option>
+                        </ng-container>
+
+                        <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                            <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                                {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                            </mat-option>
+                        </ng-container>
+                    </ng-container>
+
+                    <ng-container *ngIf="field.autocompleteComponent">
+                        <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+
+                        <ng-container *ngIf="field.multiple">
+                            <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                            style="display:none">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                            </mat-option>
+                        </ng-container>
+
+                        <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                            <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                                <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                            </mat-option>
+                        </ng-container>
+                    </ng-container>
+                </ng-container>
+                <ng-template #emptyOption>
+                    <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
+                </ng-template>
+            </cdk-virtual-scroll-viewport>
+
+        </ng-container>
+
+        <ng-container *ngIf="!field.virtualScroll">
+            <mat-option>
+                <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" 
+                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
+            </mat-option>
+
+            <ng-container *ngIf="!isLoading; else emptyOption">
+                <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
+                        (change)="toggleAllSelection($event)">
+                        {{'selectAll' | translate}}
+                </mat-checkbox>
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                    </mat-option>
+                </ng-container>
+            </ng-container>
+
+            <ng-template #emptyOption>
+                <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
+            </ng-template>
+        </ng-container>
+        </mat-select>
+
+        <div matSuffix>
+            <ng-content></ng-content>
+        </div>
+        
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+    </mat-form-field>
+`, styles: ["mat-form-field{width:100%}\n", ".selectAll{padding:10px 16px}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
+
 const components = [
     KlesDynamicFormComponent,
     KlesFormLabelComponent,
@@ -3091,7 +3390,8 @@ const components = [
     KlesFormButtonToogleGroupComponent,
     KlesFormArrayComponent,
     KlesFormRangeComponent,
-    KlesFormClearComponent
+    KlesFormClearComponent,
+    KlesFormSelectLazySearchComponent
 ];
 const directives = [KlesDynamicFieldDirective, KlesComponentDirective];
 const pipes = [KlesTransformPipe, ArrayFormatPipe];
@@ -3134,7 +3434,8 @@ KlesMaterialDynamicformsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "1
         KlesFormButtonToogleGroupComponent,
         KlesFormArrayComponent,
         KlesFormRangeComponent,
-        KlesFormClearComponent, KlesDynamicFieldDirective, KlesComponentDirective, KlesTransformPipe, ArrayFormatPipe], imports: [CommonModule,
+        KlesFormClearComponent,
+        KlesFormSelectLazySearchComponent, KlesDynamicFieldDirective, KlesComponentDirective, KlesTransformPipe, ArrayFormatPipe], imports: [CommonModule,
         ReactiveFormsModule,
         TranslateModule,
         FlexLayoutModule,
@@ -3172,7 +3473,8 @@ KlesMaterialDynamicformsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "1
         KlesFormButtonToogleGroupComponent,
         KlesFormArrayComponent,
         KlesFormRangeComponent,
-        KlesFormClearComponent, KlesTransformPipe, ArrayFormatPipe, KlesDynamicFieldDirective, KlesComponentDirective, ColorPickerModule] });
+        KlesFormClearComponent,
+        KlesFormSelectLazySearchComponent, KlesTransformPipe, ArrayFormatPipe, KlesDynamicFieldDirective, KlesComponentDirective, ColorPickerModule] });
 KlesMaterialDynamicformsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KlesMaterialDynamicformsModule, providers: [
         { provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher },
         pipes
@@ -3247,5 +3549,5 @@ function autocompleteStringValidator(validOptions, optional) {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayFormatPipe, EnumType, FieldMapper, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesFieldAbstract, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormDateComponent, KlesFormErrorStateMatcher, KlesFormGroup, KlesFormGroupComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSlideToggleComponent, KlesFormSubmitButtonComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesMaterialDynamicformsModule, KlesTransformPipe, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, klesFieldControlFactory };
+export { ArrayFormatPipe, EnumType, FieldMapper, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesFieldAbstract, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormDateComponent, KlesFormErrorStateMatcher, KlesFormGroup, KlesFormGroupComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectLazySearchComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSlideToggleComponent, KlesFormSubmitButtonComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesMaterialDynamicformsModule, KlesTransformPipe, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, klesFieldControlFactory };
 //# sourceMappingURL=3kles-kles-material-dynamicforms.mjs.map