@3kles/kles-material-dynamicforms 19.3.1 → 19.4.0

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

@@ -1,35 +1,36 @@
 import * as i0 from '@angular/core';
-import { Input, Component, Injector, Directive, Injectable, EventEmitter, Output, NgModule, HostBinding, signal, Pipe, ViewChildren, ViewChild, forwardRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { signal, InjectionToken, inject, Component, Injector, Input, Directive, Injectable, EventEmitter, Output, NgModule, computed, ViewContainerRef, HostBinding, Pipe, ChangeDetectorRef, ViewChildren, ViewChild, forwardRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { Validators, FormControl, ReactiveFormsModule, FormsModule, FormControlDirective, FormControlName, FormArray, FormGroup, NG_VALUE_ACCESSOR, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
-import { concat, of, Subject, Observable, combineLatest, BehaviorSubject, ReplaySubject } from 'rxjs';
-import { tap, take, catchError, map, takeUntil, distinctUntilChanged, filter, switchMap, startWith, debounceTime, shareReplay } from 'rxjs/operators';
-import * as i4 from '@angular/material/form-field';
+import { Validators, FormControl, ReactiveFormsModule, FormsModule, FormControlDirective, FormControlName, FormArray, FormGroup, UntypedFormBuilder, NG_VALUE_ACCESSOR, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
+import { concat, of, Subject, combineLatest, startWith, map as map$1, takeUntil, Observable, BehaviorSubject, ReplaySubject } from 'rxjs';
+import { tap, take, catchError, map, takeUntil as takeUntil$1, distinctUntilChanged, filter, switchMap, startWith as startWith$1, debounceTime, shareReplay } from 'rxjs/operators';
+import * as i2$1 from '@angular/material/form-field';
 import { MatError, MatFormFieldModule, MatFormField, MatHint, MatLabel } from '@angular/material/form-field';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, ErrorStateMatcher, MatNativeDateModule, MatOptionModule, MatOption } from '@angular/material/core';
-import * as i2$1 from '@angular/material/icon';
+import * as i2$2 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
-import * as i4$2 from '@angular/material/button';
+import * as i4$3 from '@angular/material/button';
 import { MatIconButton, MatButtonModule, MatButton } from '@angular/material/button';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i3$4 from '@angular/material/badge';
+import * as i3$5 from '@angular/material/badge';
 import { MatBadgeModule, MatBadge } from '@angular/material/badge';
-import * as i3$3 from '@angular/material/list';
+import * as i3$4 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import { MatGridListModule } from '@angular/material/grid-list';
-import * as i3$1 from '@angular/material/datepicker';
+import * as i3$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i5 from '@angular/material/input';
+import * as i3 from '@angular/material/input';
 import { MatInputModule, MatInput, MatLabel as MatLabel$1, MatFormField as MatFormField$1 } from '@angular/material/input';
-import * as i5$1 from '@angular/material/select';
+import * as i4 from '@angular/material/select';
 import { MatSelectModule, MatSelectTrigger, MatSelect } from '@angular/material/select';
 import { MatRadioModule, MatRadioButton, MatRadioGroup } from '@angular/material/radio';
 import { MatChipsModule, MatChipOption, MatChipListbox } from '@angular/material/chips';
-import * as i3 from '@angular/material/tooltip';
+import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { MatTableModule } from '@angular/material/table';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -37,12 +38,12 @@ import { MatCardModule } from '@angular/material/card';
 import { MatMenuModule } from '@angular/material/menu';
 import { CdkTableModule } from '@angular/cdk/table';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i9 from '@angular/material/progress-spinner';
+import * as i8 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
 import * as i1$1 from '@angular/material/checkbox';
 import { MatCheckboxModule, MatCheckbox } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
-import * as i6 from '@angular/material/autocomplete';
+import * as i5 from '@angular/material/autocomplete';
 import { MatAutocompleteModule, MatOption as MatOption$1 } from '@angular/material/autocomplete';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSortModule } from '@angular/material/sort';
@@ -50,18 +51,18 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTreeModule } from '@angular/material/tree';
 import { MatSlideToggleModule, MatSlideToggle } from '@angular/material/slide-toggle';
-import * as i4$1 from '@angular/cdk/scrolling';
+import * as i3$1 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkScrollable, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import * as i3$5 from '@angular/material/button-toggle';
+import * as i3$6 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { PortalModule } from '@angular/cdk/portal';
 import { __decorate } from 'tslib';
 import { v4 } from 'uuid';
 import { cloneDeep } from 'lodash';
 import { ColorPickerDirective, ColorPickerComponent } from 'ngx-color-picker';
-import * as i3$2 from '@angular/cdk/text-field';
+import * as i3$3 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import * as i5$2 from 'ngx-mat-select-search';
+import * as i4$2 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { getMultipleValuesInSingleSelectionError } from '@angular/cdk/collections';
 import * as i1$2 from '@angular/cdk/clipboard';
@@ -81,7 +82,7 @@ class KlesAbstractFormControl {
     bindAsyncValidations(validations) {
         if (validations.length > 0) {
             return Validators.composeAsync(validations.map((validation) => {
-                return ((c) => {
+                return (c) => {
                     const validator$ = validation.validator(c);
                     if (validator$ instanceof Promise) {
                         return validator$.finally(() => this.ref?.markForCheck());
@@ -89,7 +90,7 @@ class KlesAbstractFormControl {
                     else {
                         return validator$.pipe(tap(() => this.ref?.markForCheck()));
                     }
-                });
+                };
             }));
         }
         return null;
@@ -126,10 +127,75 @@ class KlesFormControl extends KlesAbstractFormControl {
     }
 }
 
+class AbstractUiState {
+    constructor() {
+        this._value = signal(undefined);
+    }
+    get(path) {
+        let currPath = path;
+        if (currPath == null)
+            return null;
+        if (!Array.isArray(currPath))
+            currPath = currPath.split('.');
+        if (currPath.length === 0)
+            return null;
+        return currPath.reduce((uiState, name) => uiState && uiState._find(name), this);
+    }
+    _find(name) {
+        return null;
+    }
+    get value() {
+        return this._value.asReadonly();
+    }
+}
+
+class ControlUiState extends AbstractUiState {
+    constructor(value) {
+        super();
+        this._value.set(value);
+    }
+    setValue(value) {
+        this._value.set(value);
+    }
+    patchValue(value) {
+        this.setValue(value);
+    }
+}
+
+class KlesAbstractFormUiControl {
+    constructor(field) {
+        this.field = field;
+    }
+}
+
+class KlesFormUiControl extends KlesAbstractFormUiControl {
+    create() {
+        return new ControlUiState({
+            inputType: this.field.inputType,
+            min: this.field.min,
+            max: this.field.max,
+            maxLength: this.field.maxLength,
+            step: this.field.step,
+            hostClass: this.field.hostClass,
+            ngClass: this.field.ngClass,
+            ngStyle: this.field.ngStyle,
+            indeterminate: this.field.indeterminate ?? false,
+            color: this.field.color,
+            icon: this.field.icon,
+            iconSvg: this.field.iconSvg,
+            appearance: this.field.appearance ?? 'fill',
+        });
+    }
+}
+
 const klesFieldControlFactory = (field, ref) => {
     const factory = new KlesFormControl(field, ref);
     return factory.create();
 };
+const klesFieldUiFactory = (field) => {
+    const factory = new KlesFormUiControl(field);
+    return factory.create();
+};
 
 const componentMapper = [];
 function FieldMapper(config) {
@@ -137,7 +203,8 @@ function FieldMapper(config) {
         componentMapper.push({
             component: target,
             type: config.type,
-            factory: config.factory || klesFieldControlFactory
+            factory: config.factory || klesFieldControlFactory,
+            ui: config.ui || klesFieldUiFactory,
         });
     };
 }
@@ -163,22 +230,54 @@ var EnumType;
     EnumType["range"] = "range";
 })(EnumType || (EnumType = {}));
 
+const FIELD_NAME = new InjectionToken('FIELD_NAME');
+const GROUP = new InjectionToken('GROUP');
+const SIBLING_FIELDS = new InjectionToken('SIBLING_FIELDS');
+const GROUP_UI = new InjectionToken('GROUP_UI');
+const FIELD = new InjectionToken('FIELD');
+
 class KlesFormClearComponent {
+    constructor() {
+        this.field = inject(FIELD);
+        this.group = inject(GROUP);
+        this.siblingFields = inject(SIBLING_FIELDS);
+        this._onDestroy = new Subject();
+        this.disabled = toSignal(combineLatest([
+            this.group.get(this.field.name)?.valueChanges.pipe(startWith(this.group.get(this.field.name).value), map$1((value) => {
+                return !this.isPresent(value);
+            })),
+            this.group.get(this.field.name)?.statusChanges.pipe(startWith(this.group.get(this.field.name).status), map$1((status) => status === 'DISABLED')),
+        ]).pipe(takeUntil(this._onDestroy), map$1(([empty, disabled]) => {
+            return empty || disabled;
+        })));
+    }
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    }
     clear(event) {
         event.stopPropagation();
         this.group.controls[this.field.name].reset();
     }
-    isDisable() {
-        return this.group.get(this.field.name).disabled
-            || !this.group.get(this.field.name).value
-            || (Array.isArray(this.group.get(this.field.name).value) && !this.group.get(this.field.name).value.length);
+    isPresent(value) {
+        if (value == null)
+            return false;
+        if (typeof value === 'string') {
+            return value.length > 0;
+        }
+        if (Array.isArray(value)) {
+            return value.length > 0;
+        }
+        if (value instanceof Map || value instanceof Set) {
+            return value.size > 0;
+        }
+        return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormClearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormClearComponent, isStandalone: true, selector: "kles-form-clear", inputs: { field: "field", group: "group", siblingFields: "siblingFields" }, ngImport: i0, template: `
-    <button [disabled]="isDisable()" mat-icon-button aria-label="Clear" type="button"
-        (click)="clear($event)">
-        <mat-icon>close</mat-icon>
-    </button>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormClearComponent, isStandalone: true, selector: "kles-form-clear", ngImport: i0, template: `
+        <button [disabled]="disabled()" mat-icon-button aria-label="Clear" type="button" (click)="clear($event)">
+            <mat-icon>close</mat-icon>
+        </button>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormClearComponent, decorators: [{
@@ -186,21 +285,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{
                     selector: 'kles-form-clear',
                     template: `
-    <button [disabled]="isDisable()" mat-icon-button aria-label="Clear" type="button"
-        (click)="clear($event)">
-        <mat-icon>close</mat-icon>
-    </button>
+        <button [disabled]="disabled()" mat-icon-button aria-label="Clear" type="button" (click)="clear($event)">
+            <mat-icon>close</mat-icon>
+        </button>
     `,
                     standalone: true,
-                    imports: [CommonModule, MatIcon, MatIconButton]
+                    imports: [CommonModule, MatIcon, MatIconButton],
                 }]
-        }], propDecorators: { field: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], siblingFields: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 function isDestroyable(value) {
     return value !== null && typeof value === 'object' &&
@@ -254,6 +346,26 @@ class KlesDynamicFieldDirective {
                         { provide: MAT_DATE_FORMATS, useValue: this.field.dateOptions.dateFormat },
                     ]
                     : []),
+                {
+                    provide: FIELD_NAME,
+                    useValue: this.field.name,
+                },
+                {
+                    provide: FIELD,
+                    useValue: this.field,
+                },
+                {
+                    provide: GROUP,
+                    useValue: this.group,
+                },
+                {
+                    provide: SIBLING_FIELDS,
+                    useValue: this.siblingFields,
+                },
+                {
+                    provide: GROUP_UI,
+                    useValue: this.ui,
+                },
             ],
             parent: this.injector,
         };
@@ -266,12 +378,6 @@ class KlesDynamicFieldDirective {
             this.subComponents.push(...this.field.subComponents.map((subComponent) => this.createSubComponent(subComponent, options)));
         }
         this.componentRef = this.createComponentRef(injector);
-        this.componentRef.setInput('field', this.field);
-        this.componentRef.setInput('group', this.group);
-        this.componentRef.setInput('siblingFields', this.siblingFields);
-        // this.componentRef.instance.field = this.field;
-        // this.componentRef.instance.group = this.group;
-        // this.componentRef.instance.siblingFields = this.siblingFields;
         this.componentRef.onDestroy(() => {
             if (isDestroyable(injector)) {
                 injector.destroy();
@@ -296,9 +402,6 @@ class KlesDynamicFieldDirective {
     createSubComponent(componentType, options) {
         const injector = Injector.create(options);
         const component = this.container.createComponent(componentType, { injector });
-        component.setInput('field', this.field);
-        component.setInput('group', this.group);
-        component.setInput('siblingFields', this.siblingFields);
         component.onDestroy(() => {
             if (isDestroyable(injector)) {
                 injector.destroy();
@@ -307,7 +410,7 @@ class KlesDynamicFieldDirective {
         return component;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesDynamicFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KlesDynamicFieldDirective, isStandalone: true, selector: "[klesDynamicField]", inputs: { field: "field", group: "group", siblingFields: "siblingFields" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KlesDynamicFieldDirective, isStandalone: true, selector: "[klesDynamicField]", inputs: { field: "field", group: "group", ui: "ui", siblingFields: "siblingFields" }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesDynamicFieldDirective, decorators: [{
             type: Directive,
@@ -319,6 +422,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }], group: [{
                 type: Input
+            }], ui: [{
+                type: Input
             }], siblingFields: [{
                 type: Input
             }] } });
@@ -398,6 +503,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
+class GroupUiState extends AbstractUiState {
+    constructor() {
+        super(...arguments);
+        this.states = {};
+    }
+    setValue(value) {
+        Object.keys(value).forEach((name) => {
+            this.states[name]?.setValue(value[name]);
+        });
+    }
+    patchValue(value) {
+        if (value == null)
+            return;
+        Object.keys(value).forEach((name) => {
+            const state = this.states[name];
+            if (state) {
+                state.patchValue(value[name]);
+            }
+        });
+    }
+    _find(name) {
+        return this.states.hasOwnProperty(name) ? this.states[name] : null;
+    }
+    addUiState(name, uiState) {
+        this.states[name] = uiState;
+    }
+}
+
 const originFormControlNgOnChanges = FormControlDirective.prototype.ngOnChanges;
 FormControlDirective.prototype.ngOnChanges = function () {
     this.form.nativeElement = this.valueAccessor._elementRef?.nativeElement;
@@ -427,6 +560,7 @@ class KlesDynamicFormComponent {
     }
     ngOnInit() {
         this.form = this.createForm();
+        this.ui = this.createUi();
         this.setOrientationClass();
         this._onLoaded.emit();
     }
@@ -537,6 +671,14 @@ class KlesDynamicFormComponent {
             return componentMapper.find((c) => c.component === field.component)?.factory ? componentMapper.find((c) => c.component === field.component)?.factory(field, this.ref) : klesFieldControlFactory(field, this.ref);
         }
     }
+    createUiState(field) {
+        if (field.type) {
+            return componentMapper.find((c) => c.type === field.type)?.ui ? componentMapper.find((c) => c.type === field.type)?.ui(field) : klesFieldUiFactory(field);
+        }
+        else {
+            return componentMapper.find((c) => c.component === field.component)?.ui ? componentMapper.find((c) => c.component === field.component)?.ui(field) : klesFieldUiFactory(field);
+        }
+    }
     createForm() {
         const group = this.fb.group({});
         this.fields.forEach((field) => {
@@ -555,19 +697,29 @@ class KlesDynamicFormComponent {
             control.markAsTouched({ onlySelf: true });
         });
     }
+    createUi() {
+        const uiGroup = new GroupUiState();
+        this.fields.forEach((field) => {
+            const uiState = this.createUiState(field);
+            if (uiState) {
+                uiGroup.addUiState(field.name, uiState);
+            }
+        });
+        return uiGroup;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesDynamicFormComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesDynamicFormComponent, isStandalone: true, selector: "app-kles-dynamic-form", inputs: { fields: "fields", validators: "validators", asyncValidators: "asyncValidators", direction: "direction", formClass: "formClass" }, outputs: { submit: "submit", _onLoaded: "_onLoaded" }, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], exportAs: ["klesDynamicForm"], usesOnChanges: true, ngImport: i0, template: `
         <form class="{{ orientationClass }}" [ngClass]="formClass" [formGroup]="form" (submit)="onSubmit($event)">
             @for (field of fields; track field.name) {
                 @if (field.visible !== false) {
-                    <ng-container klesDynamicField [field]="field" [group]="form" [siblingFields]="fields"> </ng-container>
+                    <ng-container klesDynamicField [field]="field" [group]="form" [ui]="ui" [siblingFields]="fields"> </ng-container>
                 }
             }
             @if (form && form.errors) {
                 <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;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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
+    `, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesDynamicFormComponent, decorators: [{
             type: Component,
@@ -575,7 +727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         <form class="{{ orientationClass }}" [ngClass]="formClass" [formGroup]="form" (submit)="onSubmit($event)">
             @for (field of fields; track field.name) {
                 @if (field.visible !== false) {
-                    <ng-container klesDynamicField [field]="field" [group]="form" [siblingFields]="fields"> </ng-container>
+                    <ng-container klesDynamicField [field]="field" [group]="form" [ui]="ui" [siblingFields]="fields"> </ng-container>
                 }
             }
             @if (form && form.errors) {
@@ -620,10 +772,18 @@ class KlesComponentDirective {
         if (this.componentRef) {
             this.componentRef.destroy();
         }
-        this.componentRef = this.container.createComponent(this.component);
+        const options = {
+            providers: [
+                {
+                    provide: FIELD,
+                    useValue: this.field,
+                },
+            ],
+        };
+        const injector = Injector.create(options);
+        this.componentRef = this.container.createComponent(this.component, { injector });
         this.componentRef.instance.component = this.component;
         this.componentRef.instance.value = this.value;
-        this.componentRef.instance.field = this.field;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KlesComponentDirective, isStandalone: true, selector: "[klesComponent]", inputs: { component: "component", value: "value", field: "field" }, usesOnChanges: true, ngImport: i0 }); }
@@ -876,26 +1036,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }] });
 
 class KlesFieldAbstract {
-    constructor(viewRef) {
-        this.viewRef = viewRef;
+    constructor() {
+        this.field = inject(FIELD);
+        this.group = inject(GROUP);
+        this.siblingFields = inject(SIBLING_FIELDS);
+        this.ui = inject(GROUP_UI, { optional: true });
+        this.appearance = computed(() => this.ui?.get(this.field.name)?.value()?.appearance);
+        this.inputType = computed(() => this.ui?.get(this.field.name)?.value()?.inputType);
+        this.min = computed(() => this.ui?.get(this.field.name)?.value()?.min);
+        this.max = computed(() => this.ui?.get(this.field.name)?.value()?.max);
+        this.maxLength = computed(() => this.ui?.get(this.field.name)?.value()?.maxLength);
+        this.step = computed(() => this.ui?.get(this.field.name)?.value()?.step);
+        this.ngClass = computed(() => this.ui?.get(this.field.name)?.value()?.ngClass);
+        this.ngStyle = computed(() => this.ui?.get(this.field.name)?.value()?.ngStyle);
+        this.indeterminate = computed(() => this.ui?.get(this.field.name)?.value()?.indeterminate ?? false);
+        this.color = computed(() => this.ui?.get(this.field.name)?.value()?.color);
+        this.icon = computed(() => this.ui?.get(this.field.name)?.value()?.icon);
+        this.iconSvg = computed(() => this.ui?.get(this.field.name)?.value()?.iconSvg);
+        this.viewRef = inject(ViewContainerRef);
         this._onDestroy = new Subject();
+        if (this.field.directive) {
+            this.directive = new this.field.directive(this.viewRef, this);
+        }
     }
     ngOnInit() {
-        if (!this.field.appearance) {
-            this.field.appearance = 'fill';
-        }
         if (this.field.valueChanges) {
             this.field.valueChanges(this.field, this.group, this.siblingFields);
         }
-        this.group.controls[this.field.name]?.valueChanges
-            .pipe(takeUntil(this._onDestroy))
-            .subscribe(val => {
+        this.group.controls[this.field.name]?.valueChanges.pipe(takeUntil$1(this._onDestroy)).subscribe((val) => {
             if (this.field.valueChanges) {
                 this.field.valueChanges(this.field, this.group, this.siblingFields, val);
             }
         });
-        if (this.field.directive) {
-            this.directive = new this.field.directive(this.viewRef, this);
+        if (this.directive) {
             this.directive.ngOnInit();
         }
     }
@@ -920,10 +1093,10 @@ class KlesFieldAbstract {
             if (control) {
                 const val = this.group.controls[this.field.name].value;
                 if (this.field.pipeTransform) {
-                    this.field.pipeTransform.forEach(p => {
+                    this.field.pipeTransform.forEach((p) => {
                         let pipeVal = control.value;
                         if (p.options) {
-                            p.options.forEach(opt => {
+                            p.options.forEach((opt) => {
                                 pipeVal = p.pipe.transform(val, opt);
                             });
                         }
@@ -937,7 +1110,7 @@ class KlesFieldAbstract {
         }
     }
     isPending() {
-        return (this.group.controls[this.field.name].pending || this.field.pending);
+        return this.group.controls[this.field.name].pending || this.field.pending;
     }
     onFocus() {
         if (this.field?.onFocus) {
@@ -949,54 +1122,47 @@ class KlesFieldAbstract {
             this.field.onBlur(this.field, this.group);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFieldAbstract, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KlesFieldAbstract, isStandalone: true, inputs: { field: "field", group: "group", siblingFields: "siblingFields" }, host: { properties: { "attr.klesDirective": "this.directive" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFieldAbstract, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KlesFieldAbstract, isStandalone: true, host: { properties: { "attr.klesDirective": "this.directive" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFieldAbstract, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { field: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], siblingFields: [{
-                type: Input
-            }], directive: [{
+        }], ctorParameters: () => [], propDecorators: { directive: [{
                 type: HostBinding,
                 args: ['attr.klesDirective']
             }] } });
 
 class KlesFormLabelComponent extends KlesFieldAbstract {
-    ngOnInit() {
+    constructor() {
+        super();
         this.group.controls[this.field.name].disable({ emitEvent: false });
+    }
+    ngOnInit() {
         super.ngOnInit();
     }
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormLabelComponent, isStandalone: true, selector: "kles-form-label", usesInheritance: true, ngImport: i0, template: `
-    <div [formGroup]="group" >
-        <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" 
-        [ngClass]="field.ngClass" 
-        [ngStyle]="{'color':'inherit'}" [formControlName]="field.name" [placeholder]="field.placeholder" [type]="field.inputType">
-    </div>
-`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+        <div [formGroup]="group">
+            <input matInput matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="{ color: 'inherit' }" [formControlName]="field.name" [placeholder]="field.placeholder" [type]="inputType()" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormLabelComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "kles-form-label",
+                    selector: 'kles-form-label',
                     template: `
-    <div [formGroup]="group" >
-        <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" 
-        [ngClass]="field.ngClass" 
-        [ngStyle]="{'color':'inherit'}" [formControlName]="field.name" [placeholder]="field.placeholder" [type]="field.inputType">
-    </div>
-`,
+        <div [formGroup]="group">
+            <input matInput matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="{ color: 'inherit' }" [formControlName]="field.name" [placeholder]="field.placeholder" [type]="inputType()" />
+        </div>
+    `,
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule, MatTooltip]
+                    imports: [CommonModule, ReactiveFormsModule, MatTooltip, MatInputModule],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class MatErrorMessageDirective {
     set validations(v) {
@@ -1069,12 +1235,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }] });
 
 let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstract {
-    constructor(viewRef, intl) {
-        super(viewRef);
-        this.viewRef = viewRef;
-        this.intl = intl;
+    constructor() {
+        super();
         this.isFocused = new Subject();
         this.isLoading = signal(false);
+        this.intl = inject(KlesDynamicFormIntl);
+        if (this.maxLength() === undefined) {
+            this.ui?.get(this.field.name)?.patchValue({ maxLength: 524288 }); // Max default input W3C
+        }
     }
     ngOnInit() {
         if (this.field.lazy) {
@@ -1114,7 +1282,7 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
                 this.options$ = of({ loading: false, options: this.field.options });
             }
         }
-        this.filteredOption$ = concat(combineLatest([this.group.get(this.field.name).valueChanges.pipe(startWith('')), this.options$]).pipe(map(([data, response]) => {
+        this.filteredOption$ = concat(combineLatest([this.group.get(this.field.name).valueChanges.pipe(startWith$1('')), this.options$]).pipe(map(([data, response]) => {
             if (response.loading) {
                 return response;
             }
@@ -1122,9 +1290,6 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
                 return { loading: false, options: data && response.options ? this.filterData(data, response.options) : response.options };
             }
         })));
-        if (!this.field.maxLength) {
-            this.field.maxLength = 524288; // Max default input W3C
-        }
         super.ngOnInit();
     }
     onFocus() {
@@ -1160,83 +1325,94 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormInputComponent, deps: [{ token: i0.ViewContainerRef }, { token: KlesDynamicFormIntl }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormInputComponent, isStandalone: true, selector: "kles-form-input", usesInheritance: true, ngImport: i0, template: `
-        <mat-form-field [formGroup]="group" [color]="field.color" [subscriptSizing]="field.subscriptSizing" class="form-element" [appearance]="field.appearance" class="field-bottom">
+        <mat-form-field [formGroup]="group" [color]="color()" [subscriptSizing]="field.subscriptSizing" class="form-element" [appearance]="appearance()" class="field-bottom">
             @if (field.label) {
                 <mat-label>{{ field.label }}</mat-label>
             }
-            @if(field.icon){
-                <mat-icon matPrefix>{{ field.icon }}</mat-icon>
+            @if (icon()) {
+                <mat-icon matPrefix>{{ icon() }}</mat-icon>
             }
-            
-            @if (field.autocomplete) {
-            <input
-                matInput
-                matTooltip="{{ field.tooltip }}"
-                [attr.id]="field.id"
-                [ngClass]="field.ngClass"
-                [formControlName]="field.name"
-                [placeholder]="field.placeholder"
-                [type]="field.inputType"
-                [maxLength]="field.maxLength"
-                [min]="field.min"
-                [max]="field.max"
-                [step]="field.step"
-                [matAutocomplete]="auto"
-                (focus)="onFocus()"
-                (blur)="onBlur()"
-            />
 
-            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
-                @if(filteredOption$ | async; as filteredOption){ @if(filteredOption.loading){
-                <mat-option disabled>
-                    <div class="loadingSelect">
-                        {{ intl.loading }}...
-                        <mat-spinner class="spinner" diameter="20"></mat-spinner>
-                    </div>
-                </mat-option>
-                }@else{ @if (!field.autocompleteComponent) { @for (option of filteredOption.options; track option) {
-                <mat-option [value]="option">
-                    {{ field.property ? option[field.property] : option }}
-                </mat-option>
-                } } @else { @for (option of filteredOption.options; track option) {
-                <mat-option [value]="option">
-                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field"> </ng-container>
-                </mat-option>
-                } } } }
-            </mat-autocomplete>
+            @if (field.autocomplete) {
+                <input
+                    matInput
+                    matTooltip="{{ field.tooltip }}"
+                    [attr.id]="field.id"
+                    [ngClass]="ngClass()"
+                    [formControlName]="field.name"
+                    [placeholder]="field.placeholder"
+                    [type]="inputType()"
+                    [maxLength]="maxLength()"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="step()"
+                    [matAutocomplete]="auto"
+                    (focus)="onFocus()"
+                    (blur)="onBlur()"
+                />
+
+                <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
+                    @if (filteredOption$ | async; as filteredOption) {
+                        @if (filteredOption.loading) {
+                            <mat-option disabled>
+                                <div class="loadingSelect">
+                                    {{ intl.loading }}...
+                                    <mat-spinner class="spinner" diameter="20"></mat-spinner>
+                                </div>
+                            </mat-option>
+                        } @else {
+                            @if (!field.autocompleteComponent) {
+                                @for (option of filteredOption.options; track option) {
+                                    <mat-option [value]="option">
+                                        {{ field.property ? option[field.property] : option }}
+                                    </mat-option>
+                                }
+                            } @else {
+                                @for (option of filteredOption.options; track option) {
+                                    <mat-option [value]="option">
+                                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field"> </ng-container>
+                                    </mat-option>
+                                }
+                            }
+                        }
+                    }
+                </mat-autocomplete>
             } @else {
-            <input
-                matInput
-                matTooltip="{{ field.tooltip }}"
-                [attr.id]="field.id"
-                [ngClass]="field.ngClass"
-                [formControlName]="field.name"
-                [placeholder]="field.placeholder"
-                [type]="field.inputType"
-                [maxLength]="field.maxLength"
-                [min]="field.min"
-                [max]="field.max"
-                [step]="field.step"
-                (focus)="onFocus()"
-                (blur)="onBlur()"
-            />
-            } @if (field.hint) {
-            <mat-hint>{{ field.hint }}</mat-hint>
-            } @if (field.subComponents || field.clearable || isPending()) {
-            <div matSuffix class="suffix">
-                @if(isPending()){
-                <mat-spinner mode="indeterminate" diameter="21"></mat-spinner>
-                } @if(field.subComponents || field.clearable){
-                <ng-content></ng-content>
-                }
-            </div>
+                <input
+                    matInput
+                    matTooltip="{{ field.tooltip }}"
+                    [attr.id]="field.id"
+                    [ngClass]="ngClass()"
+                    [formControlName]="field.name"
+                    [placeholder]="field.placeholder"
+                    [type]="inputType()"
+                    [maxLength]="maxLength()"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="step()"
+                    (focus)="onFocus()"
+                    (blur)="onBlur()"
+                />
+            }
+            @if (field.hint) {
+                <mat-hint>{{ field.hint }}</mat-hint>
+            }
+            @if (field.subComponents || field.clearable || isPending()) {
+                <div matSuffix class="suffix">
+                    @if (isPending()) {
+                        <mat-spinner mode="indeterminate" diameter="21"></mat-spinner>
+                    }
+                    @if (field.subComponents || field.clearable) {
+                        <ng-content></ng-content>
+                    }
+                </div>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 };
 KlesFormInputComponent = __decorate([
     FieldMapper({ type: EnumType.input })
@@ -1244,82 +1420,93 @@ KlesFormInputComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-input', template: `
-        <mat-form-field [formGroup]="group" [color]="field.color" [subscriptSizing]="field.subscriptSizing" class="form-element" [appearance]="field.appearance" class="field-bottom">
+        <mat-form-field [formGroup]="group" [color]="color()" [subscriptSizing]="field.subscriptSizing" class="form-element" [appearance]="appearance()" class="field-bottom">
             @if (field.label) {
                 <mat-label>{{ field.label }}</mat-label>
             }
-            @if(field.icon){
-                <mat-icon matPrefix>{{ field.icon }}</mat-icon>
+            @if (icon()) {
+                <mat-icon matPrefix>{{ icon() }}</mat-icon>
             }
-            
-            @if (field.autocomplete) {
-            <input
-                matInput
-                matTooltip="{{ field.tooltip }}"
-                [attr.id]="field.id"
-                [ngClass]="field.ngClass"
-                [formControlName]="field.name"
-                [placeholder]="field.placeholder"
-                [type]="field.inputType"
-                [maxLength]="field.maxLength"
-                [min]="field.min"
-                [max]="field.max"
-                [step]="field.step"
-                [matAutocomplete]="auto"
-                (focus)="onFocus()"
-                (blur)="onBlur()"
-            />
 
-            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
-                @if(filteredOption$ | async; as filteredOption){ @if(filteredOption.loading){
-                <mat-option disabled>
-                    <div class="loadingSelect">
-                        {{ intl.loading }}...
-                        <mat-spinner class="spinner" diameter="20"></mat-spinner>
-                    </div>
-                </mat-option>
-                }@else{ @if (!field.autocompleteComponent) { @for (option of filteredOption.options; track option) {
-                <mat-option [value]="option">
-                    {{ field.property ? option[field.property] : option }}
-                </mat-option>
-                } } @else { @for (option of filteredOption.options; track option) {
-                <mat-option [value]="option">
-                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field"> </ng-container>
-                </mat-option>
-                } } } }
-            </mat-autocomplete>
+            @if (field.autocomplete) {
+                <input
+                    matInput
+                    matTooltip="{{ field.tooltip }}"
+                    [attr.id]="field.id"
+                    [ngClass]="ngClass()"
+                    [formControlName]="field.name"
+                    [placeholder]="field.placeholder"
+                    [type]="inputType()"
+                    [maxLength]="maxLength()"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="step()"
+                    [matAutocomplete]="auto"
+                    (focus)="onFocus()"
+                    (blur)="onBlur()"
+                />
+
+                <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
+                    @if (filteredOption$ | async; as filteredOption) {
+                        @if (filteredOption.loading) {
+                            <mat-option disabled>
+                                <div class="loadingSelect">
+                                    {{ intl.loading }}...
+                                    <mat-spinner class="spinner" diameter="20"></mat-spinner>
+                                </div>
+                            </mat-option>
+                        } @else {
+                            @if (!field.autocompleteComponent) {
+                                @for (option of filteredOption.options; track option) {
+                                    <mat-option [value]="option">
+                                        {{ field.property ? option[field.property] : option }}
+                                    </mat-option>
+                                }
+                            } @else {
+                                @for (option of filteredOption.options; track option) {
+                                    <mat-option [value]="option">
+                                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field"> </ng-container>
+                                    </mat-option>
+                                }
+                            }
+                        }
+                    }
+                </mat-autocomplete>
             } @else {
-            <input
-                matInput
-                matTooltip="{{ field.tooltip }}"
-                [attr.id]="field.id"
-                [ngClass]="field.ngClass"
-                [formControlName]="field.name"
-                [placeholder]="field.placeholder"
-                [type]="field.inputType"
-                [maxLength]="field.maxLength"
-                [min]="field.min"
-                [max]="field.max"
-                [step]="field.step"
-                (focus)="onFocus()"
-                (blur)="onBlur()"
-            />
-            } @if (field.hint) {
-            <mat-hint>{{ field.hint }}</mat-hint>
-            } @if (field.subComponents || field.clearable || isPending()) {
-            <div matSuffix class="suffix">
-                @if(isPending()){
-                <mat-spinner mode="indeterminate" diameter="21"></mat-spinner>
-                } @if(field.subComponents || field.clearable){
-                <ng-content></ng-content>
-                }
-            </div>
+                <input
+                    matInput
+                    matTooltip="{{ field.tooltip }}"
+                    [attr.id]="field.id"
+                    [ngClass]="ngClass()"
+                    [formControlName]="field.name"
+                    [placeholder]="field.placeholder"
+                    [type]="inputType()"
+                    [maxLength]="maxLength()"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="step()"
+                    (focus)="onFocus()"
+                    (blur)="onBlur()"
+                />
+            }
+            @if (field.hint) {
+                <mat-hint>{{ field.hint }}</mat-hint>
+            }
+            @if (field.subComponents || field.clearable || isPending()) {
+                <div matSuffix class="suffix">
+                    @if (isPending()) {
+                        <mat-spinner mode="indeterminate" diameter="21"></mat-spinner>
+                    }
+                    @if (field.subComponents || field.clearable) {
+                        <ng-content></ng-content>
+                    }
+                </div>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
     `, standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, MatTooltipModule, MatProgressSpinnerModule, MatOptionModule, MatError, MatErrorMessageDirective, KlesComponentDirective, MatIconModule], styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: KlesDynamicFormIntl }] });
+        }], ctorParameters: () => [] });
 
 class KlesTransformPipe {
     transform(value, pipes) {
@@ -1351,13 +1538,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }] });
 
 let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbstract {
-    constructor(viewRef, ref, intl) {
-        super(viewRef);
-        this.viewRef = viewRef;
-        this.ref = ref;
-        this.intl = intl;
+    constructor() {
+        super(...arguments);
         this.isLoading = false;
         this.openChange$ = new Subject();
+        this.intl = inject(KlesDynamicFormIntl);
+        this.ref = inject(ChangeDetectorRef);
         this.compareFn = (o1, o2) => {
             if (this.field.property && o1 && o2) {
                 return o1[this.field.property] === o2[this.field.property];
@@ -1377,7 +1563,7 @@ let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbs
                 this.options$ = new BehaviorSubject([]);
             }
             this.openChange$
-                .pipe(takeUntil(this._onDestroy), switchMap((isOpen) => {
+                .pipe(takeUntil$1(this._onDestroy), switchMap((isOpen) => {
                 if (isOpen) {
                     if (this.field.options instanceof Observable) {
                         this.isLoading = true;
@@ -1448,11 +1634,11 @@ let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbs
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: KlesDynamicFormIntl }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormSelectComponent, isStandalone: true, selector: "kles-form-select", viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance" class="field-bottom">
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()" class="field-bottom">
             @if (field.label) {
-            <mat-label>{{ field.label }}</mat-label>
+                <mat-label>{{ field.label }}</mat-label>
             }
             <mat-select
                 matTooltip="{{ field.tooltip }}"
@@ -1460,7 +1646,7 @@ let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbs
                 (openedChange)="openChange($event)"
                 [compareWith]="compareFn"
                 [panelWidth]="field.panelWidth || 'auto'"
-                [ngClass]="field.ngClass"
+                [ngClass]="ngClass()"
                 [placeholder]="field.placeholder"
                 [formControlName]="field.name"
                 [multiple]="field.multiple"
@@ -1468,73 +1654,101 @@ let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbs
                 (blur)="onBlur()"
             >
                 @if (field.triggerComponent) {
-                <mat-select-trigger>
-                    <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-                </mat-select-trigger>
-                } @if (!field.virtualScroll) { @if (!field.autocompleteComponent) { @if (!isLoading) { @for (item of options$ | async; track item) {
-                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}</mat-option>
-                } } @else {
-                <mat-option class="hide-checkbox" disabled
-                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                ></mat-option>
-                } } @else { @if (!isLoading) { @for (item of options$ | async; track item) {
-                <mat-option [value]="item" [disabled]="item?.disabled">
-                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                </mat-option>
-                } } @else {
-                <mat-option class="hide-checkbox" disabled
-                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                ></mat-option>
-                } } } @else {
-                <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="5 * 48">
-                    @if (!field.autocompleteComponent) { @if (!isLoading) {
-                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } @else {
-                    <mat-option class="hide-checkbox" disabled
-                        ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                    ></mat-option>
-                    } @if (field.multiple) { @for (item of group.controls[field.name].value | slice:0:30; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } } @if (!field.multiple && group.controls[field.name].value) { @for (item of [group?.controls[field.name]?.value]; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } } } @else { @if (!isLoading) {
-                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
+                    <mat-select-trigger>
+                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+                    </mat-select-trigger>
+                }
+                @if (!field.virtualScroll) {
+                    @if (!field.autocompleteComponent) {
+                        @if (!isLoading) {
+                            @for (item of options$ | async; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
+                            }
+                        } @else {
+                            <mat-option class="hide-checkbox" disabled
+                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                            ></mat-option>
+                        }
                     } @else {
-                    <mat-option class="hide-checkbox" disabled
-                        ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                    ></mat-option>
-                    } @if (field.multiple) { @for (item of group.controls[field.name].value | slice:0:30; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                    } } @if (!field.multiple && group.controls[field.name].value) { @for (item of [group?.controls[field.name]?.value]; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                    } } }
-                </cdk-virtual-scroll-viewport>
+                        @if (!isLoading) {
+                            @for (item of options$ | async; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                </mat-option>
+                            }
+                        } @else {
+                            <mat-option class="hide-checkbox" disabled
+                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                            ></mat-option>
+                        }
+                    }
+                } @else {
+                    <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="5 * 48">
+                        @if (!field.autocompleteComponent) {
+                            @if (!isLoading) {
+                                <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
+                                    {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                </mat-option>
+                            } @else {
+                                <mat-option class="hide-checkbox" disabled
+                                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                                ></mat-option>
+                            }
+                            @if (field.multiple) {
+                                @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
+                                    <mat-option [value]="item" style="display:none">
+                                        {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                    </mat-option>
+                                }
+                            }
+                            @if (!field.multiple && group.controls[field.name].value) {
+                                @for (item of [group?.controls[field.name]?.value]; track item) {
+                                    <mat-option [value]="item" style="display:none">
+                                        {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                    </mat-option>
+                                }
+                            }
+                        } @else {
+                            @if (!isLoading) {
+                                <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                </mat-option>
+                            } @else {
+                                <mat-option class="hide-checkbox" disabled
+                                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                                ></mat-option>
+                            }
+                            @if (field.multiple) {
+                                @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
+                                    <mat-option [value]="item" style="display:none">
+                                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                    </mat-option>
+                                }
+                            }
+                            @if (!field.multiple && group.controls[field.name].value) {
+                                @for (item of [group?.controls[field.name]?.value]; track item) {
+                                    <mat-option [value]="item" style="display:none">
+                                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                    </mat-option>
+                                }
+                            }
+                        }
+                    </cdk-virtual-scroll-viewport>
                 }
             </mat-select>
 
             @if (field.hint) {
-            <mat-hint>{{ field.hint }}</mat-hint>
-            } @if (field.subComponents || field.clearable) {
-            <div matSuffix>
-                <ng-content></ng-content>
-            </div>
+                <mat-hint>{{ field.hint }}</mat-hint>
+            }
+            @if (field.subComponents || field.clearable) {
+                <div matSuffix>
+                    <ng-content></ng-content>
+                </div>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 };
 KlesFormSelectComponent = __decorate([
     FieldMapper({ type: EnumType.select })
@@ -1542,9 +1756,9 @@ KlesFormSelectComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-select', template: `
-        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance" class="field-bottom">
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()" class="field-bottom">
             @if (field.label) {
-            <mat-label>{{ field.label }}</mat-label>
+                <mat-label>{{ field.label }}</mat-label>
             }
             <mat-select
                 matTooltip="{{ field.tooltip }}"
@@ -1552,7 +1766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 (openedChange)="openChange($event)"
                 [compareWith]="compareFn"
                 [panelWidth]="field.panelWidth || 'auto'"
-                [ngClass]="field.ngClass"
+                [ngClass]="ngClass()"
                 [placeholder]="field.placeholder"
                 [formControlName]="field.name"
                 [multiple]="field.multiple"
@@ -1560,74 +1774,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 (blur)="onBlur()"
             >
                 @if (field.triggerComponent) {
-                <mat-select-trigger>
-                    <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-                </mat-select-trigger>
-                } @if (!field.virtualScroll) { @if (!field.autocompleteComponent) { @if (!isLoading) { @for (item of options$ | async; track item) {
-                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}</mat-option>
-                } } @else {
-                <mat-option class="hide-checkbox" disabled
-                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                ></mat-option>
-                } } @else { @if (!isLoading) { @for (item of options$ | async; track item) {
-                <mat-option [value]="item" [disabled]="item?.disabled">
-                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                </mat-option>
-                } } @else {
-                <mat-option class="hide-checkbox" disabled
-                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                ></mat-option>
-                } } } @else {
-                <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="5 * 48">
-                    @if (!field.autocompleteComponent) { @if (!isLoading) {
-                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } @else {
-                    <mat-option class="hide-checkbox" disabled
-                        ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                    ></mat-option>
-                    } @if (field.multiple) { @for (item of group.controls[field.name].value | slice:0:30; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } } @if (!field.multiple && group.controls[field.name].value) { @for (item of [group?.controls[field.name]?.value]; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } } } @else { @if (!isLoading) {
-                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
+                    <mat-select-trigger>
+                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+                    </mat-select-trigger>
+                }
+                @if (!field.virtualScroll) {
+                    @if (!field.autocompleteComponent) {
+                        @if (!isLoading) {
+                            @for (item of options$ | async; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
+                            }
+                        } @else {
+                            <mat-option class="hide-checkbox" disabled
+                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                            ></mat-option>
+                        }
                     } @else {
-                    <mat-option class="hide-checkbox" disabled
-                        ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                    ></mat-option>
-                    } @if (field.multiple) { @for (item of group.controls[field.name].value | slice:0:30; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                    } } @if (!field.multiple && group.controls[field.name].value) { @for (item of [group?.controls[field.name]?.value]; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                    } } }
-                </cdk-virtual-scroll-viewport>
+                        @if (!isLoading) {
+                            @for (item of options$ | async; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                </mat-option>
+                            }
+                        } @else {
+                            <mat-option class="hide-checkbox" disabled
+                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                            ></mat-option>
+                        }
+                    }
+                } @else {
+                    <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="5 * 48">
+                        @if (!field.autocompleteComponent) {
+                            @if (!isLoading) {
+                                <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
+                                    {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                </mat-option>
+                            } @else {
+                                <mat-option class="hide-checkbox" disabled
+                                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                                ></mat-option>
+                            }
+                            @if (field.multiple) {
+                                @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
+                                    <mat-option [value]="item" style="display:none">
+                                        {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                    </mat-option>
+                                }
+                            }
+                            @if (!field.multiple && group.controls[field.name].value) {
+                                @for (item of [group?.controls[field.name]?.value]; track item) {
+                                    <mat-option [value]="item" style="display:none">
+                                        {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                    </mat-option>
+                                }
+                            }
+                        } @else {
+                            @if (!isLoading) {
+                                <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                </mat-option>
+                            } @else {
+                                <mat-option class="hide-checkbox" disabled
+                                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                                ></mat-option>
+                            }
+                            @if (field.multiple) {
+                                @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
+                                    <mat-option [value]="item" style="display:none">
+                                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                    </mat-option>
+                                }
+                            }
+                            @if (!field.multiple && group.controls[field.name].value) {
+                                @for (item of [group?.controls[field.name]?.value]; track item) {
+                                    <mat-option [value]="item" style="display:none">
+                                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                    </mat-option>
+                                }
+                            }
+                        }
+                    </cdk-virtual-scroll-viewport>
                 }
             </mat-select>
 
             @if (field.hint) {
-            <mat-hint>{{ field.hint }}</mat-hint>
-            } @if (field.subComponents || field.clearable) {
-            <div matSuffix>
-                <ng-content></ng-content>
-            </div>
+                <mat-hint>{{ field.hint }}</mat-hint>
+            }
+            @if (field.subComponents || field.clearable) {
+                <div matSuffix>
+                    <ng-content></ng-content>
+                </div>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, standalone: true, imports: [CommonModule, KlesTransformPipe, MatErrorMessageDirective, MatHint, KlesComponentDirective, MatOption, MatProgressSpinner, ScrollingModule, MatSelectModule, ReactiveFormsModule, MatTooltip], styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: KlesDynamicFormIntl }], propDecorators: { cdkVirtualScrollViewport: [{
+    `, standalone: true, imports: [CommonModule, KlesTransformPipe, MatErrorMessageDirective, MatFormFieldModule, MatHint, KlesComponentDirective, MatOption, MatProgressSpinner, ScrollingModule, MatSelectModule, ReactiveFormsModule, MatTooltip], styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"] }]
+        }], propDecorators: { cdkVirtualScrollViewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
             }], options: [{
@@ -1636,52 +1878,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 class KlesFormDateComponent extends KlesFieldAbstract {
-    ngOnInit() { super.ngOnInit(); }
+    ngOnInit() {
+        super.ngOnInit();
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormDateComponent, isStandalone: true, selector: "kles-form-datepicker", usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
-        @if (field.label) {
-            <mat-label>{{field.label}}</mat-label>
-        }
-        <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder"
-        [min]="field.min" [max]="field.max">
-        <div matSuffix class="suffix">
-            <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
-            <ng-content></ng-content>
-        </div>
-        <mat-datepicker #picker></mat-datepicker>
-        @if (field.hint) {
-            <mat-hint>{{field.hint}}</mat-hint>
-        }
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()">
+            @if (field.label) {
+                <mat-label>{{ field.label }}</mat-label>
+            }
+            <input matInput matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder" [min]="field.min" [max]="field.max" />
+            <div matSuffix class="suffix">
+                <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
+                <ng-content></ng-content>
+            </div>
+            <mat-datepicker #picker></mat-datepicker>
+            @if (field.hint) {
+                <mat-hint>{{ field.hint }}</mat-hint>
+            }
 
-        <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
+            <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-datepicker', template: `
-    <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
-        @if (field.label) {
-            <mat-label>{{field.label}}</mat-label>
-        }
-        <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder"
-        [min]="field.min" [max]="field.max">
-        <div matSuffix class="suffix">
-            <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
-            <ng-content></ng-content>
-        </div>
-        <mat-datepicker #picker></mat-datepicker>
-        @if (field.hint) {
-            <mat-hint>{{field.hint}}</mat-hint>
-        }
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()">
+            @if (field.label) {
+                <mat-label>{{ field.label }}</mat-label>
+            }
+            <input matInput matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder" [min]="field.min" [max]="field.max" />
+            <div matSuffix class="suffix">
+                <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
+                <ng-content></ng-content>
+            </div>
+            <mat-datepicker #picker></mat-datepicker>
+            @if (field.hint) {
+                <mat-hint>{{ field.hint }}</mat-hint>
+            }
 
-        <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
+            <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, standalone: true, imports: [CommonModule, MatErrorMessageDirective, MatError, MatHint, MatDatepickerModule, ReactiveFormsModule, MatTooltip, MatLabel, MatFormField, MatInput], styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\n"] }]
+    `, standalone: true, imports: [CommonModule, MatErrorMessageDirective, MatFormFieldModule, MatInputModule, MatTooltipModule, MatError, MatHint, MatDatepickerModule, ReactiveFormsModule, MatTooltip, MatLabel, MatFormField, MatInput], styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\n"] }]
         }] });
 
 class KlesFormRadioComponent extends KlesFieldAbstract {
@@ -1704,7 +1946,7 @@ class KlesFormRadioComponent extends KlesFieldAbstract {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormRadioComponent, isStandalone: true, selector: "kles-form-radiobutton", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
         <label class="radio-label-padding">{{field.label}}</label>
-        <mat-radio-group matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name">
+        <mat-radio-group matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="ngClass()" [formControlName]="field.name">
             @for (item of options$ | async; track item) {
                 <mat-radio-button [value]="item">{{item}}</mat-radio-button>
             }
@@ -1717,7 +1959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{ selector: 'kles-form-radiobutton', template: `
     <div [formGroup]="group">
         <label class="radio-label-padding">{{field.label}}</label>
-        <mat-radio-group matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name">
+        <mat-radio-group matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="ngClass()" [formControlName]="field.name">
             @for (item of options$ | async; track item) {
                 <mat-radio-button [value]="item">{{item}}</mat-radio-button>
             }
@@ -1733,10 +1975,14 @@ let KlesFormCheckboxComponent = class KlesFormCheckboxComponent extends KlesFiel
     ngOnDestroy() {
         super.ngOnDestroy();
     }
+    onChange(e) {
+        this.ui?.get(this.field.name)?.patchValue({ indeterminate: false });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormCheckboxComponent, isStandalone: true, selector: "kles-form-checkbox", usesInheritance: true, ngImport: i0, template: `
+        {{ indeterminate() }}
         <div [formGroup]="group">
-            <mat-checkbox matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="field.ngClass" [(indeterminate)]="field.indeterminate" [color]="field.color" [formControlName]="field.name">{{ field.label }}</mat-checkbox>
+            <mat-checkbox matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [indeterminate]="indeterminate()" (change)="onChange($event)" [color]="color()" [formControlName]="field.name">{{ field.label }}</mat-checkbox>
         </div>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 };
@@ -1746,8 +1992,9 @@ KlesFormCheckboxComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-checkbox', template: `
+        {{ indeterminate() }}
         <div [formGroup]="group">
-            <mat-checkbox matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="field.ngClass" [(indeterminate)]="field.indeterminate" [color]="field.color" [formControlName]="field.name">{{ field.label }}</mat-checkbox>
+            <mat-checkbox matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [indeterminate]="indeterminate()" (change)="onChange($event)" [color]="color()" [formControlName]="field.name">{{ field.label }}</mat-checkbox>
         </div>
     `, standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckbox, MatTooltip] }]
         }] });
@@ -1805,11 +2052,10 @@ class KlesFormArray extends KlesFormControl {
 }
 
 let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFieldAbstract {
-    constructor(fb, viewRef) {
-        super(viewRef);
-        this.fb = fb;
-        this.viewRef = viewRef;
+    constructor() {
+        super(...arguments);
         this.collections = [];
+        this.fb = inject(UntypedFormBuilder);
     }
     ngOnInit() {
         this.formArray = this.group.controls[this.field.name];
@@ -1857,7 +2103,7 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormListFieldComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormListFieldComponent, isStandalone: true, selector: "kles-form-listfield", usesInheritance: true, ngImport: i0, template: `
         <div [formGroup]="group" class="form-element">
             <div class="label">
@@ -1868,32 +2114,35 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
             </div>
 
             <div class="dynamic-form" [formGroupName]="field.name">
-                @for (subGroup of formArray.controls; track subGroup.value._id; let idx = $index;) {
-                <div class="subfields">
-                    @for (subfield of collections[idx]; track subfield.name) {
-                    <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]"> </ng-container>
-                    } @if(collections[idx]){
-                    <button mat-icon-button (click)="deleteField(idx)" color="primary">
-                        <mat-icon>delete_outlined</mat-icon>
-                    </button>
-                    }
-                </div>
-                } @for (validation of field.validations; track validation.name) {
-                <ng-container ngProjectAs="mat-error">
-                    @if (group.get(field.name).hasError(validation.name)) {
-                    <mat-error>{{ validation.message }}</mat-error>
-                    }
-                </ng-container>
-                } @for (validation of field.asyncValidations; track validation.name) {
-                <ng-container ngProjectAs="mat-error">
-                    @if (group.get(field.name).hasError(validation.name)) {
-                    <mat-error>{{ validation.message }}</mat-error>
-                    }
-                </ng-container>
+                @for (subGroup of formArray.controls; track subGroup.value._id; let idx = $index) {
+                    <div class="subfields">
+                        @for (subfield of collections[idx]; track subfield.name) {
+                            <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]"> </ng-container>
+                        }
+                        @if (collections[idx]) {
+                            <button mat-icon-button (click)="deleteField(idx)" color="primary">
+                                <mat-icon>delete_outlined</mat-icon>
+                            </button>
+                        }
+                    </div>
+                }
+                @for (validation of field.validations; track validation.name) {
+                    <ng-container ngProjectAs="mat-error">
+                        @if (group.get(field.name).hasError(validation.name)) {
+                            <mat-error>{{ validation.message }}</mat-error>
+                        }
+                    </ng-container>
+                }
+                @for (validation of field.asyncValidations; track validation.name) {
+                    <ng-container ngProjectAs="mat-error">
+                        @if (group.get(field.name).hasError(validation.name)) {
+                            <mat-error>{{ validation.message }}</mat-error>
+                        }
+                    </ng-container>
                 }
             </div>
         </div>
-    `, isInline: true, styles: [".subfields{display:flex;flex-direction:row;gap:5px}\n", ".label{display:flex;align-items:center;flex-direction:row;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
+    `, isInline: true, styles: [".subfields{display:flex;flex-direction:row;gap:5px}\n", ".label{display:flex;align-items:center;flex-direction:row;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
 };
 KlesFormListFieldComponent = __decorate([
     FieldMapper({ type: 'listfield', factory: (field) => new KlesFormArray(field).create() })
@@ -1910,33 +2159,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             </div>
 
             <div class="dynamic-form" [formGroupName]="field.name">
-                @for (subGroup of formArray.controls; track subGroup.value._id; let idx = $index;) {
-                <div class="subfields">
-                    @for (subfield of collections[idx]; track subfield.name) {
-                    <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]"> </ng-container>
-                    } @if(collections[idx]){
-                    <button mat-icon-button (click)="deleteField(idx)" color="primary">
-                        <mat-icon>delete_outlined</mat-icon>
-                    </button>
-                    }
-                </div>
-                } @for (validation of field.validations; track validation.name) {
-                <ng-container ngProjectAs="mat-error">
-                    @if (group.get(field.name).hasError(validation.name)) {
-                    <mat-error>{{ validation.message }}</mat-error>
-                    }
-                </ng-container>
-                } @for (validation of field.asyncValidations; track validation.name) {
-                <ng-container ngProjectAs="mat-error">
-                    @if (group.get(field.name).hasError(validation.name)) {
-                    <mat-error>{{ validation.message }}</mat-error>
-                    }
-                </ng-container>
+                @for (subGroup of formArray.controls; track subGroup.value._id; let idx = $index) {
+                    <div class="subfields">
+                        @for (subfield of collections[idx]; track subfield.name) {
+                            <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]"> </ng-container>
+                        }
+                        @if (collections[idx]) {
+                            <button mat-icon-button (click)="deleteField(idx)" color="primary">
+                                <mat-icon>delete_outlined</mat-icon>
+                            </button>
+                        }
+                    </div>
+                }
+                @for (validation of field.validations; track validation.name) {
+                    <ng-container ngProjectAs="mat-error">
+                        @if (group.get(field.name).hasError(validation.name)) {
+                            <mat-error>{{ validation.message }}</mat-error>
+                        }
+                    </ng-container>
+                }
+                @for (validation of field.asyncValidations; track validation.name) {
+                    <ng-container ngProjectAs="mat-error">
+                        @if (group.get(field.name).hasError(validation.name)) {
+                            <mat-error>{{ validation.message }}</mat-error>
+                        }
+                    </ng-container>
                 }
             </div>
         </div>
     `, standalone: true, imports: [CommonModule, MatError, MatIcon, KlesDynamicFieldDirective, ReactiveFormsModule], styles: [".subfields{display:flex;flex-direction:row;gap:5px}\n", ".label{display:flex;align-items:center;flex-direction:row;gap:5px}\n"] }]
-        }], ctorParameters: () => [{ type: i2.UntypedFormBuilder }, { type: i0.ViewContainerRef }] });
+        }] });
 
 class KlesFormColorComponent extends KlesFieldAbstract {
     ngOnInit() {
@@ -2013,13 +2265,13 @@ class KlesFormColorComponent extends KlesFieldAbstract {
             [cpColorMode]="field.colorOption.mode"
             [cpOutputFormat]="field.colorOption.format"
             [cpPositionOffset]="field.colorOption.positionOffset"
-            [appearance]="field.appearance"
+            [appearance]="appearance()"
         >
             <input
                 matInput
                 matTooltip="{{ field.tooltip }}"
                 [attr.id]="field.id"
-                [ngClass]="field.ngClass"
+                [ngClass]="ngClass()"
                 [placeholder]="field.placeholder"
                 [value]="group.get(field.name).value"
                 class="colorPicker"
@@ -2051,13 +2303,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [cpColorMode]="field.colorOption.mode"
             [cpOutputFormat]="field.colorOption.format"
             [cpPositionOffset]="field.colorOption.positionOffset"
-            [appearance]="field.appearance"
+            [appearance]="appearance()"
         >
             <input
                 matInput
                 matTooltip="{{ field.tooltip }}"
                 [attr.id]="field.id"
-                [ngClass]="field.ngClass"
+                [ngClass]="ngClass()"
                 [placeholder]="field.placeholder"
                 [value]="group.get(field.name).value"
                 class="colorPicker"
@@ -2268,13 +2520,13 @@ class KlesFormButtonComponent extends KlesFieldAbstract {
         <div [formGroup]="group">
             <kles-button
                 [attr.id]="field.id"
-                [classButton]="field.ngClass"
+                [classButton]="ngClass()"
                 [name]="field.name"
                 [label]="field.label"
-                [color]="field.color"
+                [color]="color()"
                 [attribute]="field.attribute"
-                [icon]="field.icon"
-                [iconSvg]="field.iconSvg"
+                [icon]="icon()"
+                [iconSvg]="iconSvg()"
                 [value]="field.value"
                 [formControlName]="field.name"
                 [tooltip]="field.tooltip"
@@ -2290,13 +2542,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         <div [formGroup]="group">
             <kles-button
                 [attr.id]="field.id"
-                [classButton]="field.ngClass"
+                [classButton]="ngClass()"
                 [name]="field.name"
                 [label]="field.label"
-                [color]="field.color"
+                [color]="color()"
                 [attribute]="field.attribute"
-                [icon]="field.icon"
-                [iconSvg]="field.iconSvg"
+                [icon]="icon()"
+                [iconSvg]="iconSvg()"
                 [value]="field.value"
                 [formControlName]="field.name"
                 [tooltip]="field.tooltip"
@@ -2392,10 +2644,10 @@ class KlesFormButtonCheckerComponent extends KlesFieldAbstract {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormButtonCheckerComponent, isStandalone: true, selector: "kles-form-button-checker", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
         <kles-button-checker
-            [attr.id]="field.id" [classButton]="field.ngClass"
-            [name]="field.name" [label]="field.label" [color]="field.color"
-            [icon]="field.icon"
-            [iconSvg]="field.iconSvg"
+            [attr.id]="field.id" [classButton]="ngClass()"
+            [name]="field.name" [label]="field.label" [color]="color()"
+            [icon]="icon()"
+            [iconSvg]="iconSvg()"
             [value]="field.value"
             [formControlName]="field.name"
             [tooltip]="field.tooltip"
@@ -2410,10 +2662,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{ selector: 'kles-form-button-checker', template: `
     <div [formGroup]="group">
         <kles-button-checker
-            [attr.id]="field.id" [classButton]="field.ngClass"
-            [name]="field.name" [label]="field.label" [color]="field.color"
-            [icon]="field.icon"
-            [iconSvg]="field.iconSvg"
+            [attr.id]="field.id" [classButton]="ngClass()"
+            [name]="field.name" [label]="field.label" [color]="color()"
+            [icon]="icon()"
+            [iconSvg]="iconSvg()"
             [value]="field.value"
             [formControlName]="field.name"
             [tooltip]="field.tooltip"
@@ -2557,12 +2809,12 @@ class KlesFormButtonFileComponent extends KlesFieldAbstract {
         <div [formGroup]="group">
             <kles-button-file
                 [attr.id]="field.id"
-                [classButton]="field.ngClass"
+                [classButton]="ngClass()"
                 [name]="field.name"
                 [label]="field.label"
-                [color]="field.color"
-                [icon]="field.icon"
-                [iconSvg]="field.iconSvg"
+                [color]="color()"
+                [icon]="icon()"
+                [iconSvg]="iconSvg()"
                 [value]="field.value"
                 [formControlName]="field.name"
                 [type]="field.buttonType"
@@ -2579,12 +2831,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         <div [formGroup]="group">
             <kles-button-file
                 [attr.id]="field.id"
-                [classButton]="field.ngClass"
+                [classButton]="ngClass()"
                 [name]="field.name"
                 [label]="field.label"
-                [color]="field.color"
-                [icon]="field.icon"
-                [iconSvg]="field.iconSvg"
+                [color]="color()"
+                [icon]="icon()"
+                [iconSvg]="iconSvg()"
                 [value]="field.value"
                 [formControlName]="field.name"
                 [type]="field.buttonType"
@@ -2605,14 +2857,14 @@ class KlesFormTextareaComponent extends KlesFieldAbstract {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormTextareaComponent, isStandalone: true, selector: "kles-form-textarea", usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="field.color" class="form-element" [appearance]="field.appearance">
+    <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="color()" class="form-element" [appearance]="appearance()">
         @if (field.label) {
             <mat-label>{{field.label}}</mat-label>
         }
 
-        <textarea matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
+        <textarea matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="ngClass()"
         [formControlName]="field.name" cdkTextareaAutosize [placeholder]="field.placeholder"
-        [cdkAutosizeMinRows]="field.textareaAutoSize?.minRows" [cdkAutosizeMaxRows]="field.textareaAutoSize?.maxRows"  [maxlength]="field.maxLength">
+        [cdkAutosizeMinRows]="field.textareaAutoSize?.minRows" [cdkAutosizeMaxRows]="field.textareaAutoSize?.maxRows"  [maxlength]="maxLength()">
         </textarea>
 
         @if (field.subComponents || field.clearable) {
@@ -2623,19 +2875,19 @@ class KlesFormTextareaComponent extends KlesFieldAbstract {
 
         <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
     </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i3$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-textarea', template: `
-    <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="field.color" class="form-element" [appearance]="field.appearance">
+    <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="color()" class="form-element" [appearance]="appearance()">
         @if (field.label) {
             <mat-label>{{field.label}}</mat-label>
         }
 
-        <textarea matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
+        <textarea matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="ngClass()"
         [formControlName]="field.name" cdkTextareaAutosize [placeholder]="field.placeholder"
-        [cdkAutosizeMinRows]="field.textareaAutoSize?.minRows" [cdkAutosizeMaxRows]="field.textareaAutoSize?.maxRows"  [maxlength]="field.maxLength">
+        [cdkAutosizeMinRows]="field.textareaAutoSize?.minRows" [cdkAutosizeMaxRows]="field.textareaAutoSize?.maxRows"  [maxlength]="maxLength()">
         </textarea>
 
         @if (field.subComponents || field.clearable) {
@@ -2658,13 +2910,13 @@ let KlesFormTextComponent = class KlesFormTextComponent extends KlesFieldAbstrac
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormTextComponent, isStandalone: true, selector: "kles-form-text", usesInheritance: true, ngImport: i0, template: `
-        <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
-                {{((field.property && group.controls[field.name].value) ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform:field.pipeTransform}}
+        <span matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+            {{ (field.property && group.controls[field.name].value ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform: field.pipeTransform }}
         </span>
         @if (field.subComponents || isPending()) {
-           <ng-content></ng-content>
+            <ng-content></ng-content>
         }
-`, isInline: true, styles: [":host{display:flex;align-items:center;flex-direction:row;justify-content:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    `, isInline: true, styles: [":host{display:flex;align-items:center;flex-direction:row;justify-content:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 };
 KlesFormTextComponent = __decorate([
     FieldMapper({ type: EnumType.text })
@@ -2672,13 +2924,13 @@ KlesFormTextComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-text', template: `
-        <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
-                {{((field.property && group.controls[field.name].value) ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform:field.pipeTransform}}
+        <span matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+            {{ (field.property && group.controls[field.name].value ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform: field.pipeTransform }}
         </span>
         @if (field.subComponents || isPending()) {
-           <ng-content></ng-content>
+            <ng-content></ng-content>
         }
-`, standalone: true, imports: [CommonModule, KlesTransformPipe, MatTooltip], styles: [":host{display:flex;align-items:center;flex-direction:row;justify-content:inherit}\n"] }]
+    `, standalone: true, imports: [CommonModule, KlesTransformPipe, MatTooltip, ReactiveFormsModule], styles: [":host{display:flex;align-items:center;flex-direction:row;justify-content:inherit}\n"] }]
         }] });
 
 class KlesFormChipComponent extends KlesFieldAbstract {
@@ -2690,9 +2942,9 @@ class KlesFormChipComponent extends KlesFieldAbstract {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormChipComponent, isStandalone: true, selector: "kles-form-chip", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">  
         <mat-chip-listbox>
-            <mat-chip-option [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" selected [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
-                @if (field.icon) {
-                    <mat-icon>{{field.icon}}</mat-icon>
+            <mat-chip-option [color]="color()" matTooltip="{{field.tooltip}}" [attr.id]="field.id" selected [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+                @if (icon()) {
+                    <mat-icon>{{icon()}}</mat-icon>
                 }
                 {{group.controls[field.name].value | klesTransform:field.pipeTransform}}
             </mat-chip-option>
@@ -2705,9 +2957,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{ selector: "kles-form-chip", template: `
     <div [formGroup]="group">  
         <mat-chip-listbox>
-            <mat-chip-option [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" selected [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
-                @if (field.icon) {
-                    <mat-icon>{{field.icon}}</mat-icon>
+            <mat-chip-option [color]="color()" matTooltip="{{field.tooltip}}" [attr.id]="field.id" selected [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+                @if (icon()) {
+                    <mat-icon>{{icon()}}</mat-icon>
                 }
                 {{group.controls[field.name].value | klesTransform:field.pipeTransform}}
             </mat-chip-option>
@@ -2759,6 +3011,29 @@ class KlesFormGroup extends KlesFormControl {
     }
 }
 
+class KlesFormUiGroup extends KlesFormUiControl {
+    create() {
+        const subGroup = new GroupUiState();
+        if (this.field.collections && Array.isArray(this.field.collections)) {
+            this.field.collections.forEach((subfield) => {
+                let ui;
+                if (subfield.type) {
+                    ui =
+                        componentMapper.find((c) => c.type === subfield.type)?.ui({ ...subfield, value: subfield.value || this.field.value?.[subfield.name] }) ||
+                            klesFieldUiFactory({ ...subfield, value: subfield.value || this.field.value?.[subfield.name] });
+                }
+                else {
+                    ui =
+                        componentMapper.find((c) => c.component === subfield.component)?.ui({ ...subfield, value: subfield.value || this.field.value?.[subfield.name] }) ||
+                            klesFieldUiFactory({ ...subfield, value: subfield.value || this.field.value?.[subfield.name] });
+                }
+                subGroup.addUiState(subfield.name, ui);
+            });
+        }
+        return subGroup;
+    }
+}
+
 let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstract {
     constructor() {
         super(...arguments);
@@ -2769,6 +3044,7 @@ let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstr
     }
     ngOnInit() {
         this.subGroup = this.group.controls[this.field.name];
+        this.subUi = this.ui?.get(this.field.name);
         super.ngOnInit();
         this.setOrientationClass();
     }
@@ -2795,214 +3071,234 @@ let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstr
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormGroupComponent, isStandalone: true, selector: "kles-group", host: { properties: { "formGroup": "group", "formGroupName": "field.name", "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `
-        @if(field.label){
-         <h4><span [matTooltip]="field.tooltip || ''" >{{field.label}}</span></h4>
+        @if (field.label) {
+            <h4>
+                <span [matTooltip]="field.tooltip || ''">{{ field.label }}</span>
+            </h4>
         }
-       
+
         @for (subfield of field.collections; track subfield.name) {
             @if (subfield.visible !== false) {
-                <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
-                </ng-container>
+                <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections" [ui]="subUi"> </ng-container>
             }
         }
-`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 };
 KlesFormGroupComponent = __decorate([
-    FieldMapper({ type: EnumType.group, factory: (field) => (new KlesFormGroup(field).create()) })
+    FieldMapper({ type: EnumType.group, factory: (field) => new KlesFormGroup(field).create(), ui: (field) => new KlesFormUiGroup(field).create() })
 ], KlesFormGroupComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormGroupComponent, decorators: [{
             type: Component,
             args: [{ host: { '[formGroup]': 'group', '[formGroupName]': 'field.name' }, selector: 'kles-group', template: `
-        @if(field.label){
-         <h4><span [matTooltip]="field.tooltip || ''" >{{field.label}}</span></h4>
+        @if (field.label) {
+            <h4>
+                <span [matTooltip]="field.tooltip || ''">{{ field.label }}</span>
+            </h4>
         }
-       
+
         @for (subfield of field.collections; track subfield.name) {
             @if (subfield.visible !== false) {
-                <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
-                </ng-container>
+                <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections" [ui]="subUi"> </ng-container>
             }
         }
-`, standalone: true, imports: [CommonModule, KlesDynamicFieldDirective, MatTooltip], styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"] }]
+    `, standalone: true, imports: [CommonModule, KlesDynamicFieldDirective, MatTooltip, ReactiveFormsModule], styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"] }]
         }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class KlesFormInputClearableComponent extends KlesFormInputComponent {
-    constructor(viewRef, intl) {
-        super(viewRef, intl);
-        this.viewRef = viewRef;
-        this.intl = intl;
-    }
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormInputClearableComponent, deps: [{ token: i0.ViewContainerRef }, { token: KlesDynamicFormIntl }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormInputClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormInputClearableComponent, isStandalone: true, selector: "kles-form-input-clearable", usesInheritance: true, ngImport: i0, template: `
-        <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="field.color" class="form-element" [appearance]="field.appearance">
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="color()" class="form-element" [appearance]="appearance()">
             @if (field.label) {
-            <mat-label>{{ field.label }}</mat-label>
-            } @if (field.autocomplete) {
-            <input
-                matInput
-                matTooltip="{{ field.tooltip }}"
-                [attr.id]="field.id"
-                [ngClass]="field.ngClass"
-                [formControlName]="field.name"
-                [placeholder]="field.placeholder"
-                [type]="field.inputType"
-                [maxLength]="field.maxLength"
-                [min]="field.min"
-                [max]="field.max"
-                [step]="field.step"
-                [matAutocomplete]="auto"
-            />
-
-            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
-                @if(filteredOption$ | async; as filteredOption){ @if(filteredOption.loading){
-                <mat-option class="hide-checkbox" disabled>
-                    <div class="loadingSelect">
-                        {{ intl.loading }}...
-                        <mat-spinner class="spinner" diameter="20"></mat-spinner>
-                    </div>
-                </mat-option>
-                }@else{ @if (!field.autocompleteComponent) { @for (option of filteredOption.options; track option) {
-                <mat-option [value]="option">
-                    {{ field.property ? option[field.property] : option }}
-                </mat-option>
-                } } @else { @for (option of filteredOption.options; track option) {
-                <mat-option [value]="option">
-                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field"> </ng-container>
-                </mat-option>
-                } } } }
-            </mat-autocomplete>
+                <mat-label>{{ field.label }}</mat-label>
+            }
+            @if (field.autocomplete) {
+                <input
+                    matInput
+                    matTooltip="{{ field.tooltip }}"
+                    [attr.id]="field.id"
+                    [ngClass]="ngClass()"
+                    [formControlName]="field.name"
+                    [placeholder]="field.placeholder"
+                    [type]="inputType()"
+                    [maxLength]="maxLength()"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="step()"
+                    [matAutocomplete]="auto"
+                />
+
+                <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
+                    @if (filteredOption$ | async; as filteredOption) {
+                        @if (filteredOption.loading) {
+                            <mat-option class="hide-checkbox" disabled>
+                                <div class="loadingSelect">
+                                    {{ intl.loading }}...
+                                    <mat-spinner class="spinner" diameter="20"></mat-spinner>
+                                </div>
+                            </mat-option>
+                        } @else {
+                            @if (!field.autocompleteComponent) {
+                                @for (option of filteredOption.options; track option) {
+                                    <mat-option [value]="option">
+                                        {{ field.property ? option[field.property] : option }}
+                                    </mat-option>
+                                }
+                            } @else {
+                                @for (option of filteredOption.options; track option) {
+                                    <mat-option [value]="option">
+                                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field"> </ng-container>
+                                    </mat-option>
+                                }
+                            }
+                        }
+                    }
+                </mat-autocomplete>
             } @else {
-            <input
-                matInput
-                matTooltip="{{ field.tooltip }}"
-                [attr.id]="field.id"
-                [ngClass]="field.ngClass"
-                [formControlName]="field.name"
-                [placeholder]="field.placeholder"
-                [type]="field.inputType"
-                [maxLength]="field.maxLength"
-                [min]="field.min"
-                [max]="field.max"
-                [step]="field.step"
-            />
-            } @if (!group.get(field.name).disabled) {
-            <button matSuffix mat-icon-button aria-label="Clear" type="button" (click)="group.controls[field.name].reset()">
-                <mat-icon>close</mat-icon>
-            </button>
-            } @if (isPending()) {
-            <mat-spinner matSuffix mode="indeterminate" diameter="17"></mat-spinner>
+                <input
+                    matInput
+                    matTooltip="{{ field.tooltip }}"
+                    [attr.id]="field.id"
+                    [ngClass]="ngClass()"
+                    [formControlName]="field.name"
+                    [placeholder]="field.placeholder"
+                    [type]="inputType()"
+                    [maxLength]="maxLength()"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="step()"
+                />
+            }
+            @if (!group.get(field.name).disabled) {
+                <button matSuffix mat-icon-button aria-label="Clear" type="button" (click)="group.controls[field.name].reset()">
+                    <mat-icon>close</mat-icon>
+                </button>
+            }
+            @if (isPending()) {
+                <mat-spinner matSuffix mode="indeterminate" diameter="17"></mat-spinner>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }] }); }
+    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormInputClearableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-input-clearable', template: `
-        <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="field.color" class="form-element" [appearance]="field.appearance">
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="color()" class="form-element" [appearance]="appearance()">
             @if (field.label) {
-            <mat-label>{{ field.label }}</mat-label>
-            } @if (field.autocomplete) {
-            <input
-                matInput
-                matTooltip="{{ field.tooltip }}"
-                [attr.id]="field.id"
-                [ngClass]="field.ngClass"
-                [formControlName]="field.name"
-                [placeholder]="field.placeholder"
-                [type]="field.inputType"
-                [maxLength]="field.maxLength"
-                [min]="field.min"
-                [max]="field.max"
-                [step]="field.step"
-                [matAutocomplete]="auto"
-            />
-
-            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
-                @if(filteredOption$ | async; as filteredOption){ @if(filteredOption.loading){
-                <mat-option class="hide-checkbox" disabled>
-                    <div class="loadingSelect">
-                        {{ intl.loading }}...
-                        <mat-spinner class="spinner" diameter="20"></mat-spinner>
-                    </div>
-                </mat-option>
-                }@else{ @if (!field.autocompleteComponent) { @for (option of filteredOption.options; track option) {
-                <mat-option [value]="option">
-                    {{ field.property ? option[field.property] : option }}
-                </mat-option>
-                } } @else { @for (option of filteredOption.options; track option) {
-                <mat-option [value]="option">
-                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field"> </ng-container>
-                </mat-option>
-                } } } }
-            </mat-autocomplete>
+                <mat-label>{{ field.label }}</mat-label>
+            }
+            @if (field.autocomplete) {
+                <input
+                    matInput
+                    matTooltip="{{ field.tooltip }}"
+                    [attr.id]="field.id"
+                    [ngClass]="ngClass()"
+                    [formControlName]="field.name"
+                    [placeholder]="field.placeholder"
+                    [type]="inputType()"
+                    [maxLength]="maxLength()"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="step()"
+                    [matAutocomplete]="auto"
+                />
+
+                <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
+                    @if (filteredOption$ | async; as filteredOption) {
+                        @if (filteredOption.loading) {
+                            <mat-option class="hide-checkbox" disabled>
+                                <div class="loadingSelect">
+                                    {{ intl.loading }}...
+                                    <mat-spinner class="spinner" diameter="20"></mat-spinner>
+                                </div>
+                            </mat-option>
+                        } @else {
+                            @if (!field.autocompleteComponent) {
+                                @for (option of filteredOption.options; track option) {
+                                    <mat-option [value]="option">
+                                        {{ field.property ? option[field.property] : option }}
+                                    </mat-option>
+                                }
+                            } @else {
+                                @for (option of filteredOption.options; track option) {
+                                    <mat-option [value]="option">
+                                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field"> </ng-container>
+                                    </mat-option>
+                                }
+                            }
+                        }
+                    }
+                </mat-autocomplete>
             } @else {
-            <input
-                matInput
-                matTooltip="{{ field.tooltip }}"
-                [attr.id]="field.id"
-                [ngClass]="field.ngClass"
-                [formControlName]="field.name"
-                [placeholder]="field.placeholder"
-                [type]="field.inputType"
-                [maxLength]="field.maxLength"
-                [min]="field.min"
-                [max]="field.max"
-                [step]="field.step"
-            />
-            } @if (!group.get(field.name).disabled) {
-            <button matSuffix mat-icon-button aria-label="Clear" type="button" (click)="group.controls[field.name].reset()">
-                <mat-icon>close</mat-icon>
-            </button>
-            } @if (isPending()) {
-            <mat-spinner matSuffix mode="indeterminate" diameter="17"></mat-spinner>
+                <input
+                    matInput
+                    matTooltip="{{ field.tooltip }}"
+                    [attr.id]="field.id"
+                    [ngClass]="ngClass()"
+                    [formControlName]="field.name"
+                    [placeholder]="field.placeholder"
+                    [type]="inputType()"
+                    [maxLength]="maxLength()"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="step()"
+                />
+            }
+            @if (!group.get(field.name).disabled) {
+                <button matSuffix mat-icon-button aria-label="Clear" type="button" (click)="group.controls[field.name].reset()">
+                    <mat-icon>close</mat-icon>
+                </button>
+            }
+            @if (isPending()) {
+                <mat-spinner matSuffix mode="indeterminate" diameter="17"></mat-spinner>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
     `, standalone: true, imports: [CommonModule, ReactiveFormsModule, MatAutocompleteModule, MatErrorMessageDirective, MatProgressSpinner, MatIcon, MatTooltip, KlesComponentDirective, MatOption$1, MatInput, MatLabel$1, MatFormField$1], styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: KlesDynamicFormIntl }] });
+        }] });
 
 class KlesFormIconComponent extends KlesFieldAbstract {
-    ngOnInit() { super.ngOnInit(); }
+    ngOnInit() {
+        super.ngOnInit();
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormIconComponent, isStandalone: true, selector: "kles-form-icon", usesInheritance: true, ngImport: i0, template: `
-        <mat-icon [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
-            {{group.controls[field.name].value}}
+        <mat-icon [color]="color()" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+            {{ group.controls[field.name].value }}
         </mat-icon>
-`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: "kles-form-icon", template: `
-        <mat-icon [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
-            {{group.controls[field.name].value}}
+            args: [{ selector: 'kles-form-icon', template: `
+        <mat-icon [color]="color()" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+            {{ group.controls[field.name].value }}
         </mat-icon>
-`, standalone: true, imports: [CommonModule, MatIcon, MatTooltip] }]
+    `, standalone: true, imports: [CommonModule, MatIcon, MatTooltip, ReactiveFormsModule] }]
         }] });
 
 class KlesFormSelectSearchComponent extends KlesFieldAbstract {
-    constructor(viewRef, ref, intl) {
-        super(viewRef);
-        this.viewRef = viewRef;
-        this.ref = ref;
-        this.intl = intl;
+    constructor() {
+        super(...arguments);
         this.searchControl = new UntypedFormControl();
         this.selectAllControl = new UntypedFormControl(false);
         this.isLoading = signal(false);
         this.optionsFiltered$ = new ReplaySubject(1);
         this.openChange$ = new BehaviorSubject(false);
         this.openClosed$ = new Subject();
+        this.intl = inject(KlesDynamicFormIntl);
+        this.ref = inject(ChangeDetectorRef);
         this.compareFn = (o1, o2) => {
             if (this.field.property && o1 && o2) {
                 return o1[this.field.property] === o2[this.field.property];
@@ -3034,11 +3330,11 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
                 this.options$ = of(this.field.options);
             }
         }
-        this.options$.pipe(takeUntil(this._onDestroy)).subscribe((options) => {
+        this.options$.pipe(takeUntil$1(this._onDestroy)).subscribe((options) => {
             this.optionsFiltered$.next(options);
         });
         this.searchControl.valueChanges
-            .pipe(takeUntil(this._onDestroy), debounceTime(this.field.debounceTime || 0), startWith(this.searchControl.value), switchMap((value) => {
+            .pipe(takeUntil$1(this._onDestroy), debounceTime(this.field.debounceTime || 0), startWith$1(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 }) => {
@@ -3079,7 +3375,7 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
     }
     openChangeEvent() {
         this.openChange$
-            .pipe(takeUntil(this._onDestroy), switchMap((isOpen) => {
+            .pipe(takeUntil$1(this._onDestroy), switchMap((isOpen) => {
             return this.onOpenChange(isOpen);
         }))
             .subscribe((options) => {
@@ -3094,11 +3390,11 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
         if (isOpen) {
             if (this.field.options instanceof Observable) {
                 this.isLoading.set(true);
-                return this.field.options.pipe(takeUntil(this.openClosed$));
+                return this.field.options.pipe(takeUntil$1(this.openClosed$));
             }
             else if (this.field.options instanceof Function) {
                 this.isLoading.set(true);
-                return this.field.options().pipe(takeUntil(this.openClosed$));
+                return this.field.options().pipe(takeUntil$1(this.openClosed$));
             }
             else {
                 return of(this.field.options);
@@ -3177,17 +3473,17 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectSearchComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: KlesDynamicFormIntl }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormSelectSearchComponent, isStandalone: true, selector: "kles-form-select-search", viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance" class="field-bottom">
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()" class="field-bottom">
             @if (field.label) {
-            <mat-label>{{ field.label }}</mat-label>
+                <mat-label>{{ field.label }}</mat-label>
             }
 
             <mat-select
                 matTooltip="{{ field.tooltip }}"
                 [attr.id]="field.id"
-                [ngClass]="field.ngClass"
+                [ngClass]="ngClass()"
                 (openedChange)="openChange($event)"
                 [compareWith]="compareFn"
                 [panelWidth]="field.panelWidth || 'auto'"
@@ -3199,106 +3495,131 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
                 (blur)="onBlur()"
             >
                 @if (field.triggerComponent) {
-                <mat-select-trigger>
-                    <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-                </mat-select-trigger>
-                } @if (field.virtualScroll) {
-                <mat-option>
-                    <ngx-mat-select-search [formControl]="searchControl" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                </mat-option>
-
-                <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="4 * 48">
-                    @if (!isLoading()) { @if (field.multiple) {
-                    <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                        {{ intl.selectAll }}
-                    </mat-checkbox>
-                    } @if (!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>
-
-                    @if (field.multiple) { @for (item of group.controls[field.name].value | slice:0:30; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } } @if (!field.multiple && group.controls[field.name].value) { @for (item of [group?.controls[field.name]?.value]; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } } } @else {
-                    <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-select-trigger>
+                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+                    </mat-select-trigger>
+                }
+                @if (field.virtualScroll) {
+                    <mat-option>
+                        <ngx-mat-select-search [formControl]="searchControl" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
                     </mat-option>
 
-                    @if (field.multiple) { @for (item of group.controls[field.name].value | slice:0:30; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                    } } @if (!field.multiple && group.controls[field.name].value) { @for (item of [group?.controls[field.name]?.value]; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                    } } } } @else {
-                    <mat-option class="hide-checkbox" disabled
-                        ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                    ></mat-option>
-                    }
-                </cdk-virtual-scroll-viewport>
+                    <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="4 * 48">
+                        @if (!isLoading()) {
+                            @if (field.multiple) {
+                                <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
+                                    {{ intl.selectAll }}
+                                </mat-checkbox>
+                            }
+                            @if (!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>
+
+                                @if (field.multiple) {
+                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                        </mat-option>
+                                    }
+                                }
+                                @if (!field.multiple && group.controls[field.name].value) {
+                                    @for (item of [group?.controls[field.name]?.value]; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                        </mat-option>
+                                    }
+                                }
+                            } @else {
+                                <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>
+
+                                @if (field.multiple) {
+                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                        </mat-option>
+                                    }
+                                }
+                                @if (!field.multiple && group.controls[field.name].value) {
+                                    @for (item of [group?.controls[field.name]?.value]; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                        </mat-option>
+                                    }
+                                }
+                            }
+                        } @else {
+                            <mat-option class="hide-checkbox" disabled
+                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                            ></mat-option>
+                        }
+                    </cdk-virtual-scroll-viewport>
                 } @else {
-                <mat-option>
-                    <ngx-mat-select-search [formControl]="searchControl" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                </mat-option>
-
-                @if (!isLoading()) { @if (field.multiple) {
-                <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                    {{ intl.selectAll }}
-                </mat-checkbox>
-                } @if (!field.autocompleteComponent) { @for (item of optionsFiltered$ | async; track item) {
-                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}</mat-option>
-                } } @else { @for (item of optionsFiltered$ | async; track item) {
-                <mat-option [value]="item" [disabled]="item?.disabled">
-                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                </mat-option>
-                } } } @else {
-                <mat-option class="hide-checkbox" disabled
-                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                ></mat-option>
-                }
+                    <mat-option>
+                        <ngx-mat-select-search [formControl]="searchControl" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
+                    </mat-option>
 
-                <ng-template #emptyOption>
-                    <mat-option class="hide-checkbox" disabled
-                        ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                    ></mat-option>
-                </ng-template>
-                }
-            </mat-select>
+                    @if (!isLoading()) {
+                        @if (field.multiple) {
+                            <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
+                                {{ intl.selectAll }}
+                            </mat-checkbox>
+                        }
+                        @if (!field.autocompleteComponent) {
+                            @for (item of optionsFiltered$ | async; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
+                            }
+                        } @else {
+                            @for (item of optionsFiltered$ | async; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                </mat-option>
+                            }
+                        }
+                    } @else {
+                        <mat-option class="hide-checkbox" disabled
+                            ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                        ></mat-option>
+                    }
 
-            @if (field.hint) {
-            <mat-hint>{{ field.hint }}</mat-hint>
-            } @if (field.subComponents || field.clearable || isPending()) {
-            <div matSuffix class="suffix">
-                @if(isPending()){
-                <mat-spinner mode="indeterminate" diameter="21"></mat-spinner>
-                } @if(field.subComponents || field.clearable){
-                <ng-content></ng-content>
+                    <ng-template #emptyOption>
+                        <mat-option class="hide-checkbox" disabled
+                            ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                        ></mat-option>
+                    </ng-template>
                 }
-            </div>
+            </mat-select>
+
+            @if (field.hint) {
+                <mat-hint>{{ field.hint }}</mat-hint>
+            }
+            @if (field.subComponents || field.clearable || isPending()) {
+                <div matSuffix class="suffix">
+                    @if (isPending()) {
+                        <mat-spinner mode="indeterminate" diameter="21"></mat-spinner>
+                    }
+                    @if (field.subComponents || field.clearable) {
+                        <ng-content></ng-content>
+                    }
+                </div>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", "::ng-deep .selectAll{padding:0 16px 0 5px!important;display:flex!important}\n", "::ng-deep .selectAll .mdc-form-field{width:100%}\n", "::ng-deep .selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", "::ng-deep .selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i5$2.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
+    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", "::ng-deep .selectAll{padding:0 16px 0 5px!important;display:flex!important}\n", "::ng-deep .selectAll .mdc-form-field{width:100%}\n", "::ng-deep .selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", "::ng-deep .selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i4$2.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-select-search', template: `
-        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance" class="field-bottom">
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()" class="field-bottom">
             @if (field.label) {
-            <mat-label>{{ field.label }}</mat-label>
+                <mat-label>{{ field.label }}</mat-label>
             }
 
             <mat-select
                 matTooltip="{{ field.tooltip }}"
                 [attr.id]="field.id"
-                [ngClass]="field.ngClass"
+                [ngClass]="ngClass()"
                 (openedChange)="openChange($event)"
                 [compareWith]="compareFn"
                 [panelWidth]="field.panelWidth || 'auto'"
@@ -3310,88 +3631,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 (blur)="onBlur()"
             >
                 @if (field.triggerComponent) {
-                <mat-select-trigger>
-                    <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-                </mat-select-trigger>
-                } @if (field.virtualScroll) {
-                <mat-option>
-                    <ngx-mat-select-search [formControl]="searchControl" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                </mat-option>
-
-                <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="4 * 48">
-                    @if (!isLoading()) { @if (field.multiple) {
-                    <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                        {{ intl.selectAll }}
-                    </mat-checkbox>
-                    } @if (!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>
-
-                    @if (field.multiple) { @for (item of group.controls[field.name].value | slice:0:30; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } } @if (!field.multiple && group.controls[field.name].value) { @for (item of [group?.controls[field.name]?.value]; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } } } @else {
-                    <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-select-trigger>
+                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+                    </mat-select-trigger>
+                }
+                @if (field.virtualScroll) {
+                    <mat-option>
+                        <ngx-mat-select-search [formControl]="searchControl" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
                     </mat-option>
 
-                    @if (field.multiple) { @for (item of group.controls[field.name].value | slice:0:30; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                    } } @if (!field.multiple && group.controls[field.name].value) { @for (item of [group?.controls[field.name]?.value]; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                    <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="4 * 48">
+                        @if (!isLoading()) {
+                            @if (field.multiple) {
+                                <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
+                                    {{ intl.selectAll }}
+                                </mat-checkbox>
+                            }
+                            @if (!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>
+
+                                @if (field.multiple) {
+                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                        </mat-option>
+                                    }
+                                }
+                                @if (!field.multiple && group.controls[field.name].value) {
+                                    @for (item of [group?.controls[field.name]?.value]; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                        </mat-option>
+                                    }
+                                }
+                            } @else {
+                                <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>
+
+                                @if (field.multiple) {
+                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                        </mat-option>
+                                    }
+                                }
+                                @if (!field.multiple && group.controls[field.name].value) {
+                                    @for (item of [group?.controls[field.name]?.value]; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                        </mat-option>
+                                    }
+                                }
+                            }
+                        } @else {
+                            <mat-option class="hide-checkbox" disabled
+                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                            ></mat-option>
+                        }
+                    </cdk-virtual-scroll-viewport>
+                } @else {
+                    <mat-option>
+                        <ngx-mat-select-search [formControl]="searchControl" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
                     </mat-option>
-                    } } } } @else {
-                    <mat-option class="hide-checkbox" disabled
-                        ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                    ></mat-option>
+
+                    @if (!isLoading()) {
+                        @if (field.multiple) {
+                            <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
+                                {{ intl.selectAll }}
+                            </mat-checkbox>
+                        }
+                        @if (!field.autocompleteComponent) {
+                            @for (item of optionsFiltered$ | async; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
+                            }
+                        } @else {
+                            @for (item of optionsFiltered$ | async; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                </mat-option>
+                            }
+                        }
+                    } @else {
+                        <mat-option class="hide-checkbox" disabled
+                            ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                        ></mat-option>
                     }
-                </cdk-virtual-scroll-viewport>
-                } @else {
-                <mat-option>
-                    <ngx-mat-select-search [formControl]="searchControl" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                </mat-option>
-
-                @if (!isLoading()) { @if (field.multiple) {
-                <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                    {{ intl.selectAll }}
-                </mat-checkbox>
-                } @if (!field.autocompleteComponent) { @for (item of optionsFiltered$ | async; track item) {
-                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}</mat-option>
-                } } @else { @for (item of optionsFiltered$ | async; track item) {
-                <mat-option [value]="item" [disabled]="item?.disabled">
-                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                </mat-option>
-                } } } @else {
-                <mat-option class="hide-checkbox" disabled
-                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                ></mat-option>
-                }
 
-                <ng-template #emptyOption>
-                    <mat-option class="hide-checkbox" disabled
-                        ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                    ></mat-option>
-                </ng-template>
+                    <ng-template #emptyOption>
+                        <mat-option class="hide-checkbox" disabled
+                            ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                        ></mat-option>
+                    </ng-template>
                 }
             </mat-select>
 
             @if (field.hint) {
-            <mat-hint>{{ field.hint }}</mat-hint>
-            } @if (field.subComponents || field.clearable || isPending()) {
-            <div matSuffix class="suffix">
-                @if(isPending()){
-                <mat-spinner mode="indeterminate" diameter="21"></mat-spinner>
-                } @if(field.subComponents || field.clearable){
-                <ng-content></ng-content>
-                }
-            </div>
+                <mat-hint>{{ field.hint }}</mat-hint>
+            }
+            @if (field.subComponents || field.clearable || isPending()) {
+                <div matSuffix class="suffix">
+                    @if (isPending()) {
+                        <mat-spinner mode="indeterminate" diameter="21"></mat-spinner>
+                    }
+                    @if (field.subComponents || field.clearable) {
+                        <ng-content></ng-content>
+                    }
+                </div>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
@@ -3413,8 +3759,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         MatFormField,
                         NgxMatSelectSearchModule,
                         MatCheckbox,
+                        MatFormFieldModule,
                     ], styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", "::ng-deep .selectAll{padding:0 16px 0 5px!important;display:flex!important}\n", "::ng-deep .selectAll .mdc-form-field{width:100%}\n", "::ng-deep .selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", "::ng-deep .selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: KlesDynamicFormIntl }], propDecorators: { cdkVirtualScrollViewport: [{
+        }], propDecorators: { cdkVirtualScrollViewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
             }], options: [{
@@ -3473,7 +3820,7 @@ class KlesFormLinkComponent extends KlesFieldAbstract {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormLinkComponent, isStandalone: true, selector: "kles-form-link", usesInheritance: true, ngImport: i0, template: `
-        <a [href]="group.controls[field.name].value" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="field.ngClass">
+        <a [href]="group.controls[field.name].value" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()">
             {{ field.label }}
         </a>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
@@ -3483,7 +3830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{
                     selector: 'kles-form-link',
                     template: `
-        <a [href]="group.controls[field.name].value" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="field.ngClass">
+        <a [href]="group.controls[field.name].value" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()">
             {{ field.label }}
         </a>
     `,
@@ -3502,7 +3849,7 @@ class KlesFormSlideToggleComponent extends KlesFieldAbstract {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormSlideToggleComponent, isStandalone: true, selector: "kles-form-slide-toggle", usesInheritance: true, ngImport: i0, template: `
         <div [formGroup]="group">
-            <mat-slide-toggle matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="field.ngClass" [color]="field.color" [formControlName]="field.name">{{ field.label }}</mat-slide-toggle>
+            <mat-slide-toggle matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{ field.label }}</mat-slide-toggle>
         </div>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
 }
@@ -3510,7 +3857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             type: Component,
             args: [{ selector: 'kles-form-slide-toggle', template: `
         <div [formGroup]="group">
-            <mat-slide-toggle matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="field.ngClass" [color]="field.color" [formControlName]="field.name">{{ field.label }}</mat-slide-toggle>
+            <mat-slide-toggle matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{ field.label }}</mat-slide-toggle>
         </div>
     `, standalone: true, imports: [CommonModule, MatSlideToggle, MatTooltip, ReactiveFormsModule] }]
         }] });
@@ -3767,10 +4114,10 @@ class KlesFormSelectionListComponent extends KlesFieldAbstract {
         else {
             this.options$ = of(this.field.options);
         }
-        this.group.controls[this.field.name].valueChanges.pipe(takeUntil(this._onDestroy)).subscribe((value) => {
+        this.group.controls[this.field.name].valueChanges.pipe(takeUntil$1(this._onDestroy)).subscribe((value) => {
             this.selection.setSelection(Array.isArray(value) ? value : [value], { emitEvent: false });
         });
-        this.selection.changed.pipe(takeUntil(this._onDestroy)).subscribe((change) => {
+        this.selection.changed.pipe(takeUntil$1(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();
@@ -3787,7 +4134,7 @@ class KlesFormSelectionListComponent extends KlesFieldAbstract {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectionListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormSelectionListComponent, isStandalone: true, selector: "kles-form-selection-list", usesInheritance: true, ngImport: i0, template: `
         <div class="margin-top" [formGroup]="group">
-            <mat-selection-list [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="field.ngClass" (selectionChange)="onSelectionChange($event)">
+            <mat-selection-list [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="ngClass()" (selectionChange)="onSelectionChange($event)">
                 @if(options$ | async; as options){ @if(field.virtualScroll){
                 <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 20" style="height:100%">
                     @if (!field.autocompleteComponent) {
@@ -3813,13 +4160,13 @@ class KlesFormSelectionListComponent extends KlesFieldAbstract {
                 }
             </mat-selection-list>
         </div>
-    `, isInline: true, styles: ["mat-selection-list{width:100%;height:250px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
+    `, isInline: true, styles: ["mat-selection-list{width:100%;height:250px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$4.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$4.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectionListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-selection-list', template: `
         <div class="margin-top" [formGroup]="group">
-            <mat-selection-list [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="field.ngClass" (selectionChange)="onSelectionChange($event)">
+            <mat-selection-list [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="ngClass()" (selectionChange)="onSelectionChange($event)">
                 @if(options$ | async; as options){ @if(field.virtualScroll){
                 <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 20" style="height:100%">
                     @if (!field.autocompleteComponent) {
@@ -3857,10 +4204,10 @@ let KlesFormBadgeComponent = class KlesFormBadgeComponent extends KlesFieldAbstr
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormBadgeComponent, isStandalone: true, selector: "kles-form-badge", usesInheritance: true, ngImport: i0, template: `
-    <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" 
-        matBadge="{{group.controls[field.name].value}}" matBadgeOverlap="false" matBadgeColor="{{field.color}}">
+    <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="ngClass()" 
+        matBadge="{{group.controls[field.name].value}}" matBadgeOverlap="false" [matBadgeColor]="color()">
     </span>
-`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i3$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }] }); }
+`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i3$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }] }); }
 };
 KlesFormBadgeComponent = __decorate([
     FieldMapper({ type: EnumType.badge })
@@ -3870,8 +4217,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{
                     selector: 'kles-form-badge',
                     template: `
-    <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" 
-        matBadge="{{group.controls[field.name].value}}" matBadgeOverlap="false" matBadgeColor="{{field.color}}">
+    <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="ngClass()" 
+        matBadge="{{group.controls[field.name].value}}" matBadgeOverlap="false" [matBadgeColor]="color()">
     </span>
 `,
                     standalone: true,
@@ -3898,7 +4245,7 @@ class KlesFormButtonToogleGroupComponent extends KlesFieldAbstract {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormButtonToogleGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormButtonToogleGroupComponent, isStandalone: true, selector: "kles-form-button-toogle-group", usesInheritance: true, ngImport: i0, template: `
         <div [formGroup]="group" class="form-element">
-            <mat-button-toggle-group [formControlName]="field.name" [multiple]="field.multiple" [attr.id]="field.id" [ngClass]="field.ngClass">
+            <mat-button-toggle-group [formControlName]="field.name" [multiple]="field.multiple" [attr.id]="field.id" [ngClass]="ngClass()">
                 @for (item of options$ | async; track item) {
                     <mat-button-toggle [value]="item">
                         {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
@@ -3906,7 +4253,7 @@ class KlesFormButtonToogleGroupComponent extends KlesFieldAbstract {
                 }
             </mat-button-toggle-group>
         </div>
-`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] }); }
+`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormButtonToogleGroupComponent, decorators: [{
             type: Component,
@@ -3914,7 +4261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     selector: 'kles-form-button-toogle-group',
                     template: `
         <div [formGroup]="group" class="form-element">
-            <mat-button-toggle-group [formControlName]="field.name" [multiple]="field.multiple" [attr.id]="field.id" [ngClass]="field.ngClass">
+            <mat-button-toggle-group [formControlName]="field.name" [multiple]="field.multiple" [attr.id]="field.id" [ngClass]="ngClass()">
                 @for (item of options$ | async; track item) {
                     <mat-button-toggle [value]="item">
                         {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
@@ -3928,55 +4275,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }] });
 
+class ArrayUiState extends AbstractUiState {
+    constructor() {
+        super(...arguments);
+        this.states = [];
+    }
+    setValue(value) {
+        value.forEach((newValue, index) => {
+            this.at(index).setValue(newValue);
+        });
+    }
+    patchValue(value) {
+        if (value == null)
+            return;
+        value.forEach((newValue, index) => {
+            if (this.at(index)) {
+                this.at(index).patchValue(newValue);
+            }
+        });
+    }
+    at(index) {
+        return this.states?.[index];
+    }
+    _find(name) {
+        return this.at(name) ?? null;
+    }
+    push(control) {
+        if (Array.isArray(control)) {
+            control.forEach((ctrl) => {
+                this.states.push(ctrl);
+            });
+        }
+        else {
+            this.states.push(control);
+        }
+    }
+}
+
+class KlesFormUiArray extends KlesFormUiControl {
+    create() {
+        const array = new ArrayUiState();
+        if (this.field.value && Array.isArray(this.field.value)) {
+            if (this.field.collections && Array.isArray(this.field.collections)) {
+                this.field.value.forEach(() => {
+                    const group = new GroupUiState();
+                    this.field.collections?.forEach((subfield) => {
+                        let control;
+                        if (subfield.type) {
+                            control = componentMapper.find((c) => c.type === subfield.type)?.ui(subfield) || klesFieldUiFactory(subfield);
+                        }
+                        else {
+                            control = componentMapper.find((c) => c.component === subfield.component)?.ui(subfield) || klesFieldUiFactory(subfield);
+                        }
+                        group.addUiState(subfield.name, control);
+                    });
+                    array.push(group);
+                });
+            }
+        }
+        else {
+            const group = new GroupUiState();
+            this.field.collections?.forEach((subfield) => {
+                let control;
+                if (subfield.type) {
+                    control = componentMapper.find((c) => c.type === subfield.type)?.ui(subfield) || klesFieldUiFactory(subfield);
+                }
+                else {
+                    control = componentMapper.find((c) => c.component === subfield.component)?.ui(subfield) || klesFieldUiFactory(subfield);
+                }
+                group.addUiState(subfield.name, control);
+            });
+            array.push(group);
+        }
+        return array;
+    }
+}
+
 let KlesFormArrayComponent = class KlesFormArrayComponent extends KlesFieldAbstract {
+    constructor() {
+        super();
+        this.formArray = this.group.controls[this.field.name];
+        this.subUi = this.ui?.get(this.field.name);
+    }
     ngOnInit() {
-        // this.subGroup = this.group.controls[this.field.name] as FormGroup;
         super.ngOnInit();
-        this.formArray = this.group.controls[this.field.name];
     }
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormArrayComponent, isStandalone: true, selector: "kles-array", usesInheritance: true, ngImport: i0, template: `
-    <div [formGroup]="group" class="container" [ngClass]="{'container-column': field.direction ==='column'}">
-        <ng-container [formArrayName]="field.name">
-            @for (subGroup of formArray.controls; track subGroup.value._id) {
-                <div class="group-container" [ngClass]="field.direction === 'column' ? 'column': 'row'">
-                    @for (subfield of field.collections; track subfield.name) {
-                        @if (subfield.visible !== false) {
-                            <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
-                            </ng-container>
+        <div [formGroup]="group" class="container" [ngClass]="{ 'container-column': field.direction === 'column' }">
+            <ng-container [formArrayName]="field.name">
+                @for (subGroup of formArray.controls; track subGroup.value._id; let index = $index;) {
+                    <div class="group-container" [ngClass]="field.direction === 'column' ? 'column' : 'row'">
+                        @for (subfield of field.collections; track subfield.name) {
+                            @if (subfield.visible !== false) {
+                                <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [ui]="subUi?.at(index)" [siblingFields]="field.collections"> </ng-container>
+                            }
                         }
-                    }
-                </div>
-            }
-        </ng-container>
-    </div>
-`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".container{display:flex;flex-direction:inherit}\n", ".container-column{gap:10px}\n", ".group-container{display:flex;flex-direction:inherit}\n", ".row{gap:10px;flex-direction:row;align-items:baseline}\n", ".column{flex-direction:column;gap:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
+                    </div>
+                }
+            </ng-container>
+        </div>
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".container{display:flex;flex-direction:inherit}\n", ".container-column{gap:10px}\n", ".group-container{display:flex;flex-direction:inherit}\n", ".row{gap:10px;flex-direction:row;align-items:baseline}\n", ".column{flex-direction:column;gap:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
 };
 KlesFormArrayComponent = __decorate([
-    FieldMapper({ type: EnumType.array, factory: (field) => (new KlesFormArray(field).create()) })
+    FieldMapper({ type: EnumType.array, factory: (field) => new KlesFormArray(field).create(), ui: (field) => new KlesFormUiArray(field).create() })
 ], KlesFormArrayComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormArrayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-array', template: `
-    <div [formGroup]="group" class="container" [ngClass]="{'container-column': field.direction ==='column'}">
-        <ng-container [formArrayName]="field.name">
-            @for (subGroup of formArray.controls; track subGroup.value._id) {
-                <div class="group-container" [ngClass]="field.direction === 'column' ? 'column': 'row'">
-                    @for (subfield of field.collections; track subfield.name) {
-                        @if (subfield.visible !== false) {
-                            <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
-                            </ng-container>
+        <div [formGroup]="group" class="container" [ngClass]="{ 'container-column': field.direction === 'column' }">
+            <ng-container [formArrayName]="field.name">
+                @for (subGroup of formArray.controls; track subGroup.value._id; let index = $index;) {
+                    <div class="group-container" [ngClass]="field.direction === 'column' ? 'column' : 'row'">
+                        @for (subfield of field.collections; track subfield.name) {
+                            @if (subfield.visible !== false) {
+                                <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [ui]="subUi?.at(index)" [siblingFields]="field.collections"> </ng-container>
+                            }
                         }
-                    }
-                </div>
-            }
-        </ng-container>
-    </div>
-`, standalone: true, imports: [CommonModule, KlesDynamicFieldDirective, ReactiveFormsModule], styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".container{display:flex;flex-direction:inherit}\n", ".container-column{gap:10px}\n", ".group-container{display:flex;flex-direction:inherit}\n", ".row{gap:10px;flex-direction:row;align-items:baseline}\n", ".column{flex-direction:column;gap:0px}\n"] }]
-        }] });
+                    </div>
+                }
+            </ng-container>
+        </div>
+    `, standalone: true, imports: [CommonModule, KlesDynamicFieldDirective, ReactiveFormsModule], styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".container{display:flex;flex-direction:inherit}\n", ".container-column{gap:10px}\n", ".group-container{display:flex;flex-direction:inherit}\n", ".row{gap:10px;flex-direction:row;align-items:baseline}\n", ".column{flex-direction:column;gap:0px}\n"] }]
+        }], ctorParameters: () => [] });
 
 class KlesFormRange extends KlesFormControl {
     create() {
@@ -3995,10 +4419,6 @@ class KlesFormRange extends KlesFormControl {
 }
 
 let KlesFormRangeComponent = class KlesFormRangeComponent extends KlesFieldAbstract {
-    // range = new FormGroup({
-    //     start: new FormControl<Date | null>(null),
-    //     end: new FormControl<Date | null>(null),
-    // });
     ngOnInit() {
         super.ngOnInit();
     }
@@ -4007,12 +4427,12 @@ let KlesFormRangeComponent = class KlesFormRangeComponent extends KlesFieldAbstr
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormRangeComponent, isStandalone: true, selector: "kles-form-rangepicker", usesInheritance: true, ngImport: i0, template: `
-        <mat-form-field [subscriptSizing]="field.subscriptSizing" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" [color]="color()" [formGroup]="group" [appearance]="appearance()">
             <mat-label>{{ field.label }}</mat-label>
 
-            <mat-date-range-input [formGroupName]="field.name" [rangePicker]="picker" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="field.ngClass" [min]="field.min" [max]="field.max">
-                <input matStartDate formControlName="start" [placeholder]="(field.placeholder?.start ? field.placeholder?.start : '')" />
-                <input matEndDate formControlName="end" [placeholder]="(field.placeholder?.end ? field.placeholder?.end : '')" />
+            <mat-date-range-input [formGroupName]="field.name" [rangePicker]="picker" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [min]="min()" [max]="max()">
+                <input matStartDate formControlName="start" [placeholder]="field.placeholder?.start ? field.placeholder?.start : ''" />
+                <input matEndDate formControlName="end" [placeholder]="field.placeholder?.end ? field.placeholder?.end : ''" />
             </mat-date-range-input>
 
             <div matSuffix class="suffix">
@@ -4022,12 +4442,12 @@ let KlesFormRangeComponent = class KlesFormRangeComponent extends KlesFieldAbstr
 
             <mat-date-range-picker #picker></mat-date-range-picker>
             @if (field.hint) {
-            <mat-hint>{{ field.hint }}</mat-hint>
+                <mat-hint>{{ field.hint }}</mat-hint>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
+    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
 };
 KlesFormRangeComponent = __decorate([
     FieldMapper({ type: EnumType.range, factory: (field) => new KlesFormRange(field).create() })
@@ -4035,12 +4455,12 @@ KlesFormRangeComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-rangepicker', template: `
-        <mat-form-field [subscriptSizing]="field.subscriptSizing" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" [color]="color()" [formGroup]="group" [appearance]="appearance()">
             <mat-label>{{ field.label }}</mat-label>
 
-            <mat-date-range-input [formGroupName]="field.name" [rangePicker]="picker" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="field.ngClass" [min]="field.min" [max]="field.max">
-                <input matStartDate formControlName="start" [placeholder]="(field.placeholder?.start ? field.placeholder?.start : '')" />
-                <input matEndDate formControlName="end" [placeholder]="(field.placeholder?.end ? field.placeholder?.end : '')" />
+            <mat-date-range-input [formGroupName]="field.name" [rangePicker]="picker" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [min]="min()" [max]="max()">
+                <input matStartDate formControlName="start" [placeholder]="field.placeholder?.start ? field.placeholder?.start : ''" />
+                <input matEndDate formControlName="end" [placeholder]="field.placeholder?.end ? field.placeholder?.end : ''" />
             </mat-date-range-input>
 
             <div matSuffix class="suffix">
@@ -4050,7 +4470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
             <mat-date-range-picker #picker></mat-date-range-picker>
             @if (field.hint) {
-            <mat-hint>{{ field.hint }}</mat-hint>
+                <mat-hint>{{ field.hint }}</mat-hint>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
@@ -4059,12 +4479,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }] });
 
 class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {
-    constructor(viewRef, ref, intl) {
-        super(viewRef, ref, intl);
-        this.viewRef = viewRef;
-        this.ref = ref;
-        this.intl = intl;
-    }
     ngOnInit() {
         this.field.lazy = true;
         this.field.debounceTime = this.field.debounceTime ? this.field.debounceTime : 500;
@@ -4091,7 +4505,7 @@ class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {
     }
     openChangeEvent() {
         this.openChange$
-            .pipe(takeUntil(this._onDestroy), switchMap((isOpen) => {
+            .pipe(takeUntil$1(this._onDestroy), switchMap((isOpen) => {
             return this.onOpenChange(isOpen).pipe(map((options) => ({ options, isOpen })));
         }))
             .subscribe(({ options, isOpen }) => {
@@ -4103,17 +4517,17 @@ class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {
             this.ref.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectLazySearchComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: KlesDynamicFormIntl }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectLazySearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormSelectLazySearchComponent, isStandalone: true, selector: "kles-form-select-lazy-search", usesInheritance: true, ngImport: i0, template: `
-        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance" class="field-bottom">
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()" class="field-bottom">
             @if (field.label) {
-            <mat-label>{{ field.label }}</mat-label>
+                <mat-label>{{ field.label }}</mat-label>
             }
 
             <mat-select
                 matTooltip="{{ field.tooltip }}"
                 [attr.id]="field.id"
-                [ngClass]="field.ngClass"
+                [ngClass]="ngClass()"
                 (openedChange)="openChange($event)"
                 [compareWith]="compareFn"
                 [panelWidth]="field.panelWidth || 'auto'"
@@ -4122,93 +4536,117 @@ class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {
                 [multiple]="field.multiple"
             >
                 @if (field.triggerComponent) {
-                <mat-select-trigger>
-                    <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-                </mat-select-trigger>
-                } @if (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">
-                    @if (!isLoading()) { @if (field.multiple) {
-                    <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                        {{ intl.selectAll }}
-                    </mat-checkbox>
-                    } @if (!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>
-
-                    @if (field.multiple) { @for (item of group.controls[field.name].value | slice:0:30; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } } @if (!field.multiple && group.controls[field.name].value) { @for (item of [group?.controls[field.name]?.value]; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } } } @else {
-                    <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-select-trigger>
+                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+                    </mat-select-trigger>
+                }
+                @if (field.virtualScroll) {
+                    <mat-option>
+                        <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
                     </mat-option>
 
-                    @if (field.multiple) { @for (item of group.controls[field.name].value | slice:0:30; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                    } } @if (!field.multiple && group.controls[field.name].value) { @for (item of [group?.controls[field.name]?.value]; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                    <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="4 * 48">
+                        @if (!isLoading()) {
+                            @if (field.multiple) {
+                                <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
+                                    {{ intl.selectAll }}
+                                </mat-checkbox>
+                            }
+                            @if (!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>
+
+                                @if (field.multiple) {
+                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                        </mat-option>
+                                    }
+                                }
+                                @if (!field.multiple && group.controls[field.name].value) {
+                                    @for (item of [group?.controls[field.name]?.value]; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                        </mat-option>
+                                    }
+                                }
+                            } @else {
+                                <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>
+
+                                @if (field.multiple) {
+                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                        </mat-option>
+                                    }
+                                }
+                                @if (!field.multiple && group.controls[field.name].value) {
+                                    @for (item of [group?.controls[field.name]?.value]; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                        </mat-option>
+                                    }
+                                }
+                            }
+                        } @else {
+                            <mat-option class="hide-checkbox" disabled
+                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                            ></mat-option>
+                        }
+                    </cdk-virtual-scroll-viewport>
+                } @else {
+                    <mat-option>
+                        <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
                     </mat-option>
-                    } } } } @else {
-                    <mat-option class="hide-checkbox" disabled
-                        ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                    ></mat-option>
+
+                    @if (!isLoading()) {
+                        @if (field.multiple) {
+                            <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
+                                {{ intl.selectAll }}
+                            </mat-checkbox>
+                        }
+                        @if (!field.autocompleteComponent) {
+                            @for (item of optionsFiltered$ | async; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
+                            }
+                        } @else {
+                            @for (item of optionsFiltered$ | async; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                </mat-option>
+                            }
+                        }
+                    } @else {
+                        <mat-option class="hide-checkbox" disabled
+                            ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                        ></mat-option>
                     }
-                </cdk-virtual-scroll-viewport>
-                } @else {
-                <mat-option>
-                    <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                </mat-option>
-
-                @if (!isLoading()) { @if (field.multiple) {
-                <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                    {{ intl.selectAll }}
-                </mat-checkbox>
-                } @if (!field.autocompleteComponent) { @for (item of optionsFiltered$ | async; track item) {
-                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}</mat-option>
-                } } @else { @for (item of optionsFiltered$ | async; track item) {
-                <mat-option [value]="item" [disabled]="item?.disabled">
-                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                </mat-option>
-                } } } @else {
-                <mat-option class="hide-checkbox" disabled
-                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                ></mat-option>
-                } }
+                }
             </mat-select>
 
             @if (field.subComponents || field.clearable) {
-            <div matSuffix>
-                <ng-content></ng-content>
-            </div>
+                <div matSuffix>
+                    <ng-content></ng-content>
+                </div>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", ".selectAll{padding:0 16px 0 5px;display:flex!important}\n", ".selectAll .mdc-form-field{width:100%}\n", ".selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", ".selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i5$2.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", ".selectAll{padding:0 16px 0 5px;display:flex!important}\n", ".selectAll .mdc-form-field{width:100%}\n", ".selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", ".selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i4$2.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectLazySearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-select-lazy-search', template: `
-        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance" class="field-bottom">
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()" class="field-bottom">
             @if (field.label) {
-            <mat-label>{{ field.label }}</mat-label>
+                <mat-label>{{ field.label }}</mat-label>
             }
 
             <mat-select
                 matTooltip="{{ field.tooltip }}"
                 [attr.id]="field.id"
-                [ngClass]="field.ngClass"
+                [ngClass]="ngClass()"
                 (openedChange)="openChange($event)"
                 [compareWith]="compareFn"
                 [panelWidth]="field.panelWidth || 'auto'"
@@ -4217,81 +4655,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [multiple]="field.multiple"
             >
                 @if (field.triggerComponent) {
-                <mat-select-trigger>
-                    <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-                </mat-select-trigger>
-                } @if (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">
-                    @if (!isLoading()) { @if (field.multiple) {
-                    <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                        {{ intl.selectAll }}
-                    </mat-checkbox>
-                    } @if (!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>
-
-                    @if (field.multiple) { @for (item of group.controls[field.name].value | slice:0:30; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } } @if (!field.multiple && group.controls[field.name].value) { @for (item of [group?.controls[field.name]?.value]; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        {{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}
-                    </mat-option>
-                    } } } @else {
-                    <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-select-trigger>
+                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+                    </mat-select-trigger>
+                }
+                @if (field.virtualScroll) {
+                    <mat-option>
+                        <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
                     </mat-option>
 
-                    @if (field.multiple) { @for (item of group.controls[field.name].value | slice:0:30; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                    } } @if (!field.multiple && group.controls[field.name].value) { @for (item of [group?.controls[field.name]?.value]; track item) {
-                    <mat-option [value]="item" style="display:none">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                    <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="4 * 48">
+                        @if (!isLoading()) {
+                            @if (field.multiple) {
+                                <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
+                                    {{ intl.selectAll }}
+                                </mat-checkbox>
+                            }
+                            @if (!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>
+
+                                @if (field.multiple) {
+                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                        </mat-option>
+                                    }
+                                }
+                                @if (!field.multiple && group.controls[field.name].value) {
+                                    @for (item of [group?.controls[field.name]?.value]; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                        </mat-option>
+                                    }
+                                }
+                            } @else {
+                                <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>
+
+                                @if (field.multiple) {
+                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                        </mat-option>
+                                    }
+                                }
+                                @if (!field.multiple && group.controls[field.name].value) {
+                                    @for (item of [group?.controls[field.name]?.value]; track item) {
+                                        <mat-option [value]="item" style="display:none">
+                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                        </mat-option>
+                                    }
+                                }
+                            }
+                        } @else {
+                            <mat-option class="hide-checkbox" disabled
+                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                            ></mat-option>
+                        }
+                    </cdk-virtual-scroll-viewport>
+                } @else {
+                    <mat-option>
+                        <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
                     </mat-option>
-                    } } } } @else {
-                    <mat-option class="hide-checkbox" disabled
-                        ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                    ></mat-option>
+
+                    @if (!isLoading()) {
+                        @if (field.multiple) {
+                            <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
+                                {{ intl.selectAll }}
+                            </mat-checkbox>
+                        }
+                        @if (!field.autocompleteComponent) {
+                            @for (item of optionsFiltered$ | async; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
+                            }
+                        } @else {
+                            @for (item of optionsFiltered$ | async; track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                                </mat-option>
+                            }
+                        }
+                    } @else {
+                        <mat-option class="hide-checkbox" disabled
+                            ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
+                        ></mat-option>
                     }
-                </cdk-virtual-scroll-viewport>
-                } @else {
-                <mat-option>
-                    <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                </mat-option>
-
-                @if (!isLoading()) { @if (field.multiple) {
-                <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                    {{ intl.selectAll }}
-                </mat-checkbox>
-                } @if (!field.autocompleteComponent) { @for (item of optionsFiltered$ | async; track item) {
-                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform : field.pipeTransform }}</mat-option>
-                } } @else { @for (item of optionsFiltered$ | async; track item) {
-                <mat-option [value]="item" [disabled]="item?.disabled">
-                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                </mat-option>
-                } } } @else {
-                <mat-option class="hide-checkbox" disabled
-                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                ></mat-option>
-                } }
+                }
             </mat-select>
 
             @if (field.subComponents || field.clearable) {
-            <div matSuffix>
-                <ng-content></ng-content>
-            </div>
+                <div matSuffix>
+                    <ng-content></ng-content>
+                </div>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, standalone: true, imports: [CommonModule, KlesTransformPipe, MatErrorMessageDirective, MatProgressSpinnerModule, MatSelectModule, KlesComponentDirective, ReactiveFormsModule, NgxMatSelectSearchModule, ScrollingModule, MatTooltipModule], styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", ".selectAll{padding:0 16px 0 5px;display:flex!important}\n", ".selectAll .mdc-form-field{width:100%}\n", ".selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", ".selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: KlesDynamicFormIntl }] });
+    `, standalone: true, imports: [CommonModule, KlesTransformPipe, MatErrorMessageDirective, MatFormFieldModule, MatProgressSpinnerModule, MatSelectModule, KlesComponentDirective, ReactiveFormsModule, NgxMatSelectSearchModule, ScrollingModule, MatTooltipModule], styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", ".selectAll{padding:0 16px 0 5px;display:flex!important}\n", ".selectAll .mdc-form-field{width:100%}\n", ".selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", ".selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"] }]
+        }] });
 
 class KlesFabComponent extends KlesButtonBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -4314,7 +4776,7 @@ class KlesFabComponent extends KlesButtonBase {
                     <mat-icon svgIcon="{{iconSvg}}"></mat-icon>
                 }
             </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$3.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFabComponent, decorators: [{
             type: Component,
@@ -4357,10 +4819,10 @@ class KlesFormFabComponent extends KlesFieldAbstract {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormFabComponent, isStandalone: true, selector: "kles-form-fab", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
         <kles-fab
-            [attr.id]="field.id" [classButton]="field.ngClass" 
-            [name]="field.name" [label]="field.label" [color]="field.color"
-            [icon]="field.icon"
-            [iconSvg]="field.iconSvg"
+            [attr.id]="field.id" [classButton]="ngClass()" 
+            [name]="field.name" [label]="field.label" [color]="color()"
+            [icon]="icon()"
+            [iconSvg]="iconSvg()"
             [value]="field.value"
             [formControlName]="field.name"
             [tooltip]="field.tooltip"
@@ -4375,10 +4837,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{ selector: 'kles-form-fab', template: `
     <div [formGroup]="group">
         <kles-fab
-            [attr.id]="field.id" [classButton]="field.ngClass" 
-            [name]="field.name" [label]="field.label" [color]="field.color"
-            [icon]="field.icon"
-            [iconSvg]="field.iconSvg"
+            [attr.id]="field.id" [classButton]="ngClass()" 
+            [name]="field.name" [label]="field.label" [color]="color()"
+            [icon]="icon()"
+            [iconSvg]="iconSvg()"
             [value]="field.value"
             [formControlName]="field.name"
             [tooltip]="field.tooltip"
@@ -4410,7 +4872,7 @@ class KlesMiniFabComponent extends KlesButtonBase {
                     <mat-icon svgIcon="{{iconSvg}}"></mat-icon>
                 }
             </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$3.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesMiniFabComponent, decorators: [{
             type: Component,
@@ -4453,10 +4915,10 @@ class KlesFormMiniFabComponent extends KlesFieldAbstract {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormMiniFabComponent, isStandalone: true, selector: "kles-form-mini-fab", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
         <kles-mini-fab
-            [attr.id]="field.id" [classButton]="field.ngClass" 
-            [name]="field.name" [label]="field.label" [color]="field.color" 
-            [icon]="field.icon"
-            [iconSvg]="field.iconSvg"
+            [attr.id]="field.id" [classButton]="ngClass()" 
+            [name]="field.name" [label]="field.label" [color]="color()" 
+            [icon]="icon()"
+            [iconSvg]="iconSvg()"
             [value]="field.value"
             [formControlName]="field.name"
             [tooltip]="field.tooltip"
@@ -4471,10 +4933,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{ selector: 'kles-form-mini-fab', template: `
     <div [formGroup]="group">
         <kles-mini-fab
-            [attr.id]="field.id" [classButton]="field.ngClass" 
-            [name]="field.name" [label]="field.label" [color]="field.color" 
-            [icon]="field.icon"
-            [iconSvg]="field.iconSvg"
+            [attr.id]="field.id" [classButton]="ngClass()" 
+            [name]="field.name" [label]="field.label" [color]="color()" 
+            [icon]="icon()"
+            [iconSvg]="iconSvg()"
             [value]="field.value"
             [formControlName]="field.name"
             [tooltip]="field.tooltip"
@@ -4501,7 +4963,7 @@ class KlesIconButtonComponent extends KlesButtonBase {
             <mat-icon svgIcon="{{ iconSvg }}"></mat-icon>
             }
         </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesIconButtonComponent, decorators: [{
             type: Component,
@@ -4539,10 +5001,10 @@ class KlesFormIconButtonComponent extends KlesFieldAbstract {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormIconButtonComponent, isStandalone: true, selector: "kles-form-icon-button", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
         <kles-icon-button
-            [attr.id]="field.id" [classButton]="field.ngClass" 
-            [name]="field.name" [color]="field.color" 
-            [icon]="field.icon"
-            [iconSvg]="field.iconSvg"
+            [attr.id]="field.id" [classButton]="ngClass()" 
+            [name]="field.name" [color]="color()" 
+            [icon]="icon()"
+            [iconSvg]="iconSvg()"
             [value]="field.value"
             [formControlName]="field.name"
             [tooltip]="field.tooltip"
@@ -4557,10 +5019,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{ selector: 'kles-form-icon-button', template: `
     <div [formGroup]="group">
         <kles-icon-button
-            [attr.id]="field.id" [classButton]="field.ngClass" 
-            [name]="field.name" [color]="field.color" 
-            [icon]="field.icon"
-            [iconSvg]="field.iconSvg"
+            [attr.id]="field.id" [classButton]="ngClass()" 
+            [name]="field.name" [color]="color()" 
+            [icon]="icon()"
+            [iconSvg]="iconSvg()"
             [value]="field.value"
             [formControlName]="field.name"
             [tooltip]="field.tooltip"
@@ -4595,15 +5057,15 @@ class KlesFormSelectionListSearchComponent extends KlesFieldAbstract {
         if (this.field.options instanceof Observable) {
             this.options$ = this.field.options.pipe(shareReplay(1));
         }
-        this.group.controls[this.field.name].valueChanges.pipe(takeUntil(this._onDestroy)).subscribe((value) => {
+        this.group.controls[this.field.name].valueChanges.pipe(takeUntil$1(this._onDestroy)).subscribe((value) => {
             this.selection.setSelection(Array.isArray(value) ? value : [value], { emitEvent: false });
         });
-        this.selection.changed.pipe(takeUntil(this._onDestroy)).subscribe((change) => {
+        this.selection.changed.pipe(takeUntil$1(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) => {
+        this.optionFiltered$ = this.searchControl.valueChanges.pipe(takeUntil$1(this._onDestroy), startWith$1(null), debounceTime(this.field.debounceTime || 0), distinctUntilChanged(), map((value) => value?.toLowerCase()), switchMap((value) => {
             if (this.field.options instanceof Function) {
                 return this.field.options(value);
             }
@@ -4632,7 +5094,7 @@ class KlesFormSelectionListSearchComponent extends KlesFieldAbstract {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectionListSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KlesFormSelectionListSearchComponent, isStandalone: true, selector: "kles-form-selection-list-search", usesInheritance: true, ngImport: i0, template: `
         <div class="selection-list" [formGroup]="group">
-            <mat-form-field [subscriptSizing]="field.subscriptSizing" [appearance]="field.appearance">
+            <mat-form-field [subscriptSizing]="field.subscriptSizing" [appearance]="appearance()">
                 @if (field.label) {
                 <mat-label>{{ field.label }}</mat-label>
                 }
@@ -4642,7 +5104,7 @@ class KlesFormSelectionListSearchComponent extends KlesFieldAbstract {
                 </button>
             </mat-form-field>
 
-            <mat-selection-list [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="field.ngClass" (selectionChange)="onSelectionChange($event)">
+            <mat-selection-list [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="ngClass()" (selectionChange)="onSelectionChange($event)">
                 @if(optionFiltered$ | async; as options){ @if(field.virtualScroll){
                 <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 20" style="height:100%">
                     @if (!field.autocompleteComponent) {
@@ -4668,13 +5130,13 @@ class KlesFormSelectionListSearchComponent extends KlesFieldAbstract {
                 }
             </mat-selection-list>
         </div>
-    `, isInline: true, styles: [".selection-list{display:flex;flex-direction:column;gap:5px}\n", "mat-selection-list{width:100%;height:250px;overflow:auto;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] }); }
+    `, isInline: true, styles: [".selection-list{display:flex;flex-direction:column;gap:5px}\n", "mat-selection-list{width:100%;height:250px;overflow:auto;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$4.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$4.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormSelectionListSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-selection-list-search', template: `
         <div class="selection-list" [formGroup]="group">
-            <mat-form-field [subscriptSizing]="field.subscriptSizing" [appearance]="field.appearance">
+            <mat-form-field [subscriptSizing]="field.subscriptSizing" [appearance]="appearance()">
                 @if (field.label) {
                 <mat-label>{{ field.label }}</mat-label>
                 }
@@ -4684,7 +5146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 </button>
             </mat-form-field>
 
-            <mat-selection-list [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="field.ngClass" (selectionChange)="onSelectionChange($event)">
+            <mat-selection-list [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="ngClass()" (selectionChange)="onSelectionChange($event)">
                 @if(optionFiltered$ | async; as options){ @if(field.virtualScroll){
                 <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 20" style="height:100%">
                     @if (!field.autocompleteComponent) {
@@ -4816,11 +5278,11 @@ let KlesFormCheckboxIndeterminateComponent = class KlesFormCheckboxIndeterminate
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormCheckboxIndeterminateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormCheckboxIndeterminateComponent, isStandalone: true, selector: "kles-form-checkbox-indeterminate", usesInheritance: true, ngImport: i0, template: `
         <div [formGroup]="group">
-            <kles-checkbox-indeterminate matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="field.ngClass" [color]="field.color" [formControlName]="field.name">{{
+            <kles-checkbox-indeterminate matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{
                 field.label
             }}</kles-checkbox-indeterminate>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "component", type: KlesIndeterminateCheckboxComponent, selector: "kles-checkbox-indeterminate", inputs: ["label", "color"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "component", type: KlesIndeterminateCheckboxComponent, selector: "kles-checkbox-indeterminate", inputs: ["label", "color"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 };
 KlesFormCheckboxIndeterminateComponent = __decorate([
     FieldMapper({ type: EnumType.checkbox })
@@ -4829,60 +5291,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             type: Component,
             args: [{ selector: 'kles-form-checkbox-indeterminate', template: `
         <div [formGroup]="group">
-            <kles-checkbox-indeterminate matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="field.ngClass" [color]="field.color" [formControlName]="field.name">{{
+            <kles-checkbox-indeterminate matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{
                 field.label
             }}</kles-checkbox-indeterminate>
         </div>
     `, standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, KlesIndeterminateCheckboxComponent, MatTooltipModule] }]
         }] });
 
-class KlesFormCopyComponent {
-    constructor(clipBoard) {
-        this.clipBoard = clipBoard;
-    }
-    ngOnInit() {
-        this.tooltipText = this.field.copyTooltip || '';
-    }
-    copy(event) {
-        event.stopPropagation();
-        const copyText = (this.field.property ? this.group.controls[this.field.name].value?.[this.field.property] : this.group.controls[this.field.name].value) || '';
-        this.clipBoard.copy(copyText);
-        this.tooltip.disabled = false;
-        this.tooltip.show();
-        setTimeout(() => {
-            this.tooltip.disabled = true;
-        }, 200);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormCopyComponent, deps: [{ token: i1$2.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormCopyComponent, isStandalone: true, selector: "kles-form-copy", inputs: { field: "field", group: "group", siblingFields: "siblingFields" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: `
-        <button #tooltip="matTooltip" mat-icon-button color="primary" type="button" (click)="copy($event)" [matTooltipDisabled]="true" [matTooltip]="tooltipText" matTooltipPosition="above">
-            <mat-icon>content_copy</mat-icon>
-        </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ClipboardModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormCopyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kles-form-copy',
-                    template: `
-        <button #tooltip="matTooltip" mat-icon-button color="primary" type="button" (click)="copy($event)" [matTooltipDisabled]="true" [matTooltip]="tooltipText" matTooltipPosition="above">
-            <mat-icon>content_copy</mat-icon>
-        </button>
-    `,
-                    standalone: true,
-                    imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule, ClipboardModule],
-                }]
-        }], ctorParameters: () => [{ type: i1$2.Clipboard }], propDecorators: { tooltip: [{
-                type: ViewChild,
-                args: ['tooltip']
-            }], field: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], siblingFields: [{
-                type: Input
-            }] } });
-
 class KlesFileControlComponent {
     constructor() {
         this.disabled = false;
@@ -4969,6 +5384,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
     `, standalone: true, imports: [KlesFileControlComponent, FormsModule, ReactiveFormsModule], styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
+class KlesFormCopyComponent {
+    constructor(clipBoard) {
+        this.clipBoard = clipBoard;
+        this.field = inject(FIELD);
+        this.group = inject(GROUP);
+        this.siblingFields = inject(SIBLING_FIELDS);
+        this.tooltipText = this.field.copyTooltip || '';
+    }
+    copy(event) {
+        event.stopPropagation();
+        const copyText = (this.field.property ? this.group.controls[this.field.name].value?.[this.field.property] : this.group.controls[this.field.name].value) || '';
+        this.clipBoard.copy(copyText);
+        this.tooltip.disabled = false;
+        this.tooltip.show();
+        setTimeout(() => {
+            this.tooltip.disabled = true;
+        }, 1000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormCopyComponent, deps: [{ token: i1$2.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormCopyComponent, isStandalone: true, selector: "kles-form-copy", viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: `
+        <button #tooltip="matTooltip" mat-icon-button color="primary" type="button" (click)="copy($event)" [matTooltipDisabled]="true" [matTooltip]="tooltipText" matTooltipPosition="above">
+            <mat-icon>content_copy</mat-icon>
+        </button>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ClipboardModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormCopyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kles-form-copy',
+                    template: `
+        <button #tooltip="matTooltip" mat-icon-button color="primary" type="button" (click)="copy($event)" [matTooltipDisabled]="true" [matTooltip]="tooltipText" matTooltipPosition="above">
+            <mat-icon>content_copy</mat-icon>
+        </button>
+    `,
+                    standalone: true,
+                    imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule, ClipboardModule],
+                }]
+        }], ctorParameters: () => [{ type: i1$2.Clipboard }], propDecorators: { tooltip: [{
+                type: ViewChild,
+                args: ['tooltip']
+            }] } });
+
 const components = [
     KlesDynamicFormComponent,
     KlesFormLabelComponent,
@@ -5108,10 +5565,7 @@ class KlesMaterialDynamicformsModule {
             KlesFormIconButtonComponent,
             KlesFormSelectionListSearchComponent,
             KlesFormCopyComponent, KlesTransformPipe, ArrayFormatPipe, KlesDynamicFieldDirective, KlesComponentDirective, MatErrorMessageDirective, MatErrorFormDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesMaterialDynamicformsModule, providers: [
-            { provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher },
-            pipes,
-        ], imports: [CommonModule, ReactiveFormsModule, FormsModule, MaterialModule, NgxMatSelectSearchModule, KlesDynamicFormComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesMaterialDynamicformsModule, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }, pipes], imports: [CommonModule, ReactiveFormsModule, FormsModule, MaterialModule, NgxMatSelectSearchModule, KlesDynamicFormComponent,
             KlesFormLabelComponent,
             KlesFormInputComponent,
             KlesFormInputClearableComponent,
@@ -5159,10 +5613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             type: NgModule,
             args: [{
                     imports: [CommonModule, ReactiveFormsModule, FormsModule, MaterialModule, NgxMatSelectSearchModule, components, directives, pipes, colorPicker],
-                    providers: [
-                        { provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher },
-                        pipes,
-                    ],
+                    providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }, pipes],
                     exports: [components, pipes, directives],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
                 }]
@@ -5170,17 +5621,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 class KlesFormPasswordVisibilityComponent {
     constructor() {
-        this.hide = true;
+        this.field = inject(FIELD);
+        this.group = inject(GROUP);
+        this.siblingFields = inject(SIBLING_FIELDS);
+        this.hide = signal(true);
     }
     toggleVisibility(event) {
         event.stopPropagation();
-        this.hide = !this.hide;
-        this.field.inputType = this.hide ? 'password' : 'text';
+        this.hide.set(!this.hide());
+        // this.field.inputType = this.hide ? 'password' : 'text';
+        //TODO
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KlesFormPasswordVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormPasswordVisibilityComponent, isStandalone: true, selector: "kles-form-password-visibility", inputs: { field: "field", group: "group", siblingFields: "siblingFields" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KlesFormPasswordVisibilityComponent, isStandalone: true, selector: "kles-form-password-visibility", ngImport: i0, template: `
         <button [disabled]="group?.get(field?.name).disabled" mat-icon-button aria-label="visibility" type="button" (click)="toggleVisibility($event)">
-            <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
+            <mat-icon>{{ hide() ? 'visibility_off' : 'visibility' }}</mat-icon>
         </button>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
 }
@@ -5190,19 +5645,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     selector: 'kles-form-password-visibility',
                     template: `
         <button [disabled]="group?.get(field?.name).disabled" mat-icon-button aria-label="visibility" type="button" (click)="toggleVisibility($event)">
-            <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
+            <mat-icon>{{ hide() ? 'visibility_off' : 'visibility' }}</mat-icon>
         </button>
     `,
                     standalone: true,
                     imports: [CommonModule, MatIcon, MatIconButton],
                 }]
-        }], propDecorators: { field: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], siblingFields: [{
-                type: Input
-            }] } });
+        }] });
 
 function autocompleteObjectValidator(optional) {
     return (control) => {
@@ -5235,5 +5684,5 @@ function autocompleteStringValidator(validOptions, optional) {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayFormatPipe, EnumButtonAttribute, EnumType, FieldMapper, KlesAbstractFormControl, KlesButtonBase, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesDynamicFormIntl, KlesFabComponent, KlesFieldAbstract, KlesFileControlComponent, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormCheckboxIndeterminateComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormCopyComponent, KlesFormDateComponent, KlesFormErrorStateMatcher, KlesFormFabComponent, KlesFormFileComponent, KlesFormGroup, KlesFormGroupComponent, KlesFormIconButtonComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormMiniFabComponent, KlesFormPasswordVisibilityComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectLazySearchComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSelectionListSearchComponent, KlesFormSlideToggleComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesIconButtonComponent, KlesIndeterminateCheckboxComponent, KlesMaterialDynamicformsModule, KlesMiniFabComponent, KlesSelectionModel, KlesTransformPipe, MatErrorFormDirective, MatErrorMessageDirective, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, isDestroyable, klesFieldControlFactory };
+export { AbstractUiState, ArrayFormatPipe, ArrayUiState, ControlUiState, EnumButtonAttribute, EnumType, FieldMapper, GroupUiState, KlesAbstractFormControl, KlesAbstractFormUiControl, KlesButtonBase, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesDynamicFormIntl, KlesFabComponent, KlesFieldAbstract, KlesFileControlComponent, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormCheckboxIndeterminateComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormCopyComponent, KlesFormDateComponent, KlesFormErrorStateMatcher, KlesFormFabComponent, KlesFormFileComponent, KlesFormGroup, KlesFormGroupComponent, KlesFormIconButtonComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormMiniFabComponent, KlesFormPasswordVisibilityComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectLazySearchComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSelectionListSearchComponent, KlesFormSlideToggleComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesFormUiArray, KlesFormUiControl, KlesFormUiGroup, KlesIconButtonComponent, KlesIndeterminateCheckboxComponent, KlesMaterialDynamicformsModule, KlesMiniFabComponent, KlesSelectionModel, KlesTransformPipe, MatErrorFormDirective, MatErrorMessageDirective, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, isDestroyable, klesFieldControlFactory, klesFieldUiFactory };
 //# sourceMappingURL=3kles-kles-material-dynamicforms.mjs.map