@3kles/kles-material-dynamicforms 1.1.20 → 14.0.1

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

@@ -0,0 +1,2826 @@
+import * as i0 from '@angular/core';
+import { Directive, Input, EventEmitter, Component, Output, Injectable, NgModule, Pipe, ViewChild, ViewChildren, 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, NG_VALUE_ACCESSOR, UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i6 from '@angular/material/core';
+import { MatNativeDateModule, MatOption, ErrorStateMatcher } from '@angular/material/core';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i4$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i4$2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i2$1 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
+import * as i4$4 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import { MatGridListModule } from '@angular/material/grid-list';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i6$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5$2 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i5$3 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i7 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+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 i8 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i6$2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import * as i9 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTreeModule } from '@angular/material/tree';
+import * as i6$3 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i7$2 from 'ngx-color-picker';
+import { ColorPickerModule } from 'ngx-color-picker';
+import * as i8$1 from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkScrollable, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import * as i4$5 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import * as i7$1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { Subject, Observable, of, ReplaySubject } from 'rxjs';
+import { takeUntil, startWith, switchMap, map, take } from 'rxjs/operators';
+import * as i3 from '@angular/flex-layout/extended';
+import { __decorate } from 'tslib';
+import * as i3$1 from '@angular/flex-layout/flex';
+import * as i4$3 from '@angular/cdk/text-field';
+import * as i10 from 'ngx-mat-select-search';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+
+var EnumType;
+(function (EnumType) {
+    EnumType["input"] = "input";
+    EnumType["select"] = "select";
+    EnumType["text"] = "text";
+    EnumType["button"] = "button";
+    EnumType["checkbox"] = "checkbox";
+    EnumType["number"] = "number";
+    EnumType["time"] = "time";
+    EnumType["date"] = "date";
+    EnumType["color"] = "color";
+    EnumType["list"] = "list";
+    EnumType["multi"] = "multi";
+    EnumType["array"] = "array";
+    EnumType["group"] = "group";
+    EnumType["lineBreak"] = "lineBreak";
+    EnumType["badge"] = "badge";
+})(EnumType || (EnumType = {}));
+
+const componentMapper = [];
+function FieldMapper(config) {
+    return (target) => {
+        componentMapper.push({ component: target, type: config.type });
+    };
+}
+
+class KlesDynamicFieldDirective {
+    constructor(container) {
+        this.container = container;
+    }
+    ngOnDestroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
+    }
+    ngOnInit() {
+        this.buildComponent();
+    }
+    ngOnChanges(changes) {
+        if (changes.group) {
+            this.group = changes.group.currentValue;
+        }
+        if (changes.field) {
+            this.field = changes.field.currentValue;
+            this.buildComponent();
+        }
+    }
+    buildComponent() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
+        this.componentRef = this.container.createComponent(this.field.component
+            || componentMapper.find(element => element.type === this.field.type)?.component);
+        this.componentRef.instance.field = this.field;
+        this.componentRef.instance.group = this.group;
+        this.componentRef.instance.siblingFields = this.siblingFields;
+    }
+}
+KlesDynamicFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesDynamicFieldDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+KlesDynamicFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.2", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: { field: "field", group: "group", siblingFields: "siblingFields" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesDynamicFieldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[klesDynamicField]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { field: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], siblingFields: [{
+                type: Input
+            }] } });
+
+class KlesDynamicFormComponent {
+    constructor(fb) {
+        this.fb = fb;
+        this.fields = [];
+        this.validators = [];
+        this.asyncValidators = [];
+        // tslint:disable-next-line: no-output-native
+        this.submit = new EventEmitter();
+        this._onLoaded = new EventEmitter();
+        this.direction = 'column';
+        this.orientationClass = 'dynamic-form-column';
+        this.orientationItemClass = 'dynamic-form-column-item';
+    }
+    get value() {
+        return this.form.value;
+    }
+    ngOnInit() {
+        this.form = this.createForm();
+        this.orientationClass = this.direction === 'row' ? 'dynamic-form-row' : 'dynamic-form-column';
+        this.orientationItemClass = this.direction === 'row' ? 'dynamic-form-row-item' : 'dynamic-form-column-item';
+        this._onLoaded.emit();
+    }
+    ngOnChanges(changes) {
+        if (!changes.fields?.firstChange) {
+            this.updateForm();
+            // this.form = this.createControl();
+            // this.form.controls = {};
+            this._onLoaded.emit();
+        }
+        if (!changes.validators?.firstChange && this.form) {
+            this.form.setValidators(this.validators.map(v => v.validator));
+        }
+        if (!changes.asyncValidators?.firstChange && this.form) {
+            this.form.setAsyncValidators(this.asyncValidators.map(v => v.validator));
+        }
+        if (!changes.direction?.firstChange) {
+            this.orientationClass = this.direction === 'row' ? 'dynamic-form-row' : 'dynamic-form-column';
+            this.orientationItemClass = this.direction === 'row' ? 'dynamic-form-row-item' : 'dynamic-form-column-item';
+        }
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.form.valid) {
+            this.submit.emit(this.form.value);
+        }
+        else {
+            this.validateAllFormFields(this.form);
+        }
+    }
+    reset() {
+        this.form.reset();
+    }
+    updateForm() {
+        Object.keys(this.form.controls).filter(key => {
+            return !this.fields.map(field => field.name).includes(key);
+        }).forEach(key => {
+            this.form.removeControl(key);
+        });
+        this.fields
+            .filter(field => !this.form.controls[field.name])
+            .forEach(field => {
+            if (field.type === EnumType.lineBreak) {
+                return;
+            }
+            const control = this.createControl(field);
+            this.form.addControl(field.name, control);
+        });
+    }
+    createControl(field) {
+        if (field.type === EnumType.array) {
+            const array = this.fb.array([]);
+            if (field.value && Array.isArray(field.value)) {
+                if (field.collections && Array.isArray(field.collections)) {
+                    field.value.forEach(val => {
+                        const group = this.fb.group({});
+                        field.collections.forEach(subfield => {
+                            const data = val[subfield.name] || null;
+                            const control = this.createControl({ ...subfield, ...(data && { value: data }) });
+                            group.addControl(subfield.name, control);
+                        });
+                        array.push(group);
+                    });
+                }
+            }
+            else {
+                const group = this.fb.group({});
+                field.collections.forEach(subfield => {
+                    const control = this.createControl({ ...subfield });
+                    group.addControl(subfield.name, control);
+                });
+                array.push(group);
+            }
+            // field.value.forEach((data: any) => {
+            //     const subGroup = this.fb.group({});
+            //     field.collections.forEach(subfield => {
+            //         const control = this.createControl(subfield);
+            //         subGroup.addControl(subfield.name, control);
+            //     });
+            //     array.push(subGroup);
+            // });
+            return array;
+        }
+        else if (field.type === EnumType.group) {
+            const subGroup = this.fb.group({});
+            if (field.collections && Array.isArray(field.collections)) {
+                field.collections.forEach(subfield => {
+                    const control = this.createControl(subfield);
+                    subGroup.addControl(subfield.name, control);
+                });
+            }
+            return subGroup;
+        }
+        else {
+            const control = this.fb.control(field.value, {
+                validators: this.bindValidations(field.validations || []),
+                asyncValidators: this.bindAsyncValidations(field.asyncValidations || []),
+                updateOn: field.updateOn || 'change'
+            });
+            if (field.disabled) {
+                control.disable();
+            }
+            return control;
+        }
+    }
+    // private createControl(field: IKlesFieldConfig): AbstractControl {
+    //     if (field.type === 'listField') {
+    //         const array = this.fb.array([]);
+    //         field.value.forEach((data: any) => {
+    //             const subGroup = this.fb.group({});
+    //             field.collections.forEach(subfield => {
+    //                 const control = this.fb.control(
+    //                     data[subfield.name] ? data[subfield.name] : null,
+    //                     this.bindValidations(subfield.validations || []),
+    //                     this.bindAsyncValidations(subfield.asyncValidations || [])
+    //                 );
+    //                 subGroup.addControl(subfield.name, control);
+    //             });
+    //             array.push(subGroup);
+    //         });
+    //         return array;
+    //     } else if (field.type === 'group') {
+    //         const subGroup = this.fb.group({});
+    //         if (field.collections && Array.isArray(field.collections)) {
+    //             field.collections.forEach(subfield => {
+    //                 const control = this.fb.control(
+    //                     subfield.value,
+    //                     this.bindValidations(subfield.validations || []),
+    //                     this.bindAsyncValidations(subfield.asyncValidations || [])
+    //                 );
+    //                 if (subfield.disabled) {
+    //                     control.disable();
+    //                 }
+    //                 subGroup.addControl(subfield.name, control);
+    //             });
+    //         }
+    //         return subGroup;
+    //     } else {
+    //         const control = this.fb.control(
+    //             field.value,
+    //             this.bindValidations(field.validations || []),
+    //             this.bindAsyncValidations(field.asyncValidations || [])
+    //         );
+    //         if (field.disabled) {
+    //             control.disable();
+    //         }
+    //         return control;
+    //     }
+    // }
+    createForm() {
+        const group = this.fb.group({});
+        this.fields.forEach(field => {
+            if (field.type === EnumType.lineBreak) {
+                return;
+            }
+            const control = this.createControl(field);
+            group.addControl(field.name, control);
+        });
+        group.setValidators(this.validators.map(v => v.validator));
+        group.setAsyncValidators(this.asyncValidators.map(v => v.validator));
+        return group;
+    }
+    bindValidations(validations) {
+        if (validations.length > 0) {
+            const validList = [];
+            validations.forEach(valid => {
+                validList.push(valid.validator);
+            });
+            return Validators.compose(validList);
+        }
+        return null;
+    }
+    bindAsyncValidations(validations) {
+        if (validations.length > 0) {
+            const validList = [];
+            validations.forEach(valid => {
+                validList.push(valid.validator);
+            });
+            return Validators.composeAsync(validList);
+        }
+        return null;
+    }
+    validateAllFormFields(formGroup) {
+        Object.keys(formGroup.controls).forEach(field => {
+            const control = formGroup.get(field);
+            control.markAsTouched({ onlySelf: true });
+        });
+    }
+}
+KlesDynamicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesDynamicFormComponent, deps: [{ token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+KlesDynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesDynamicFormComponent, selector: "app-kles-dynamic-form", inputs: { fields: "fields", validators: "validators", asyncValidators: "asyncValidators", direction: "direction" }, outputs: { submit: "submit", _onLoaded: "_onLoaded" }, exportAs: ["klesDynamicForm"], usesOnChanges: true, ngImport: i0, template: `
+    <form class="{{orientationClass}}" [formGroup]="form" (submit)="onSubmit($event)">
+        <ng-container *ngFor="let field of fields;" class="{{orientationItemClass}}" klesDynamicField [field]="field" [group]="form" [siblingFields]="fields">
+        </ng-container>
+        <!--<button (click)="reset()" mat-raised-button color="primary">RESET</button>-->
+    </form>
+    `, isInline: true, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-row-item{margin-right:10px}\n", ".dynamic-form-column-item{margin-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesDynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'klesDynamicForm', selector: 'app-kles-dynamic-form', template: `
+    <form class="{{orientationClass}}" [formGroup]="form" (submit)="onSubmit($event)">
+        <ng-container *ngFor="let field of fields;" class="{{orientationItemClass}}" klesDynamicField [field]="field" [group]="form" [siblingFields]="fields">
+        </ng-container>
+        <!--<button (click)="reset()" mat-raised-button color="primary">RESET</button>-->
+    </form>
+    `, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-row-item{margin-right:10px}\n", ".dynamic-form-column-item{margin-bottom:10px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.UntypedFormBuilder }]; }, propDecorators: { fields: [{
+                type: Input
+            }], validators: [{
+                type: Input
+            }], asyncValidators: [{
+                type: Input
+            }], submit: [{
+                type: Output
+            }], _onLoaded: [{
+                type: Output
+            }], direction: [{
+                type: Input
+            }] } });
+
+class KlesComponentDirective {
+    constructor(container) {
+        this.container = container;
+    }
+    ngOnInit() {
+        this.buildComponent();
+    }
+    ngOnChanges(changes) {
+        if (changes.component && !changes.component.isFirstChange()) {
+            this.component = changes.component.currentValue;
+            this.buildComponent();
+        }
+        if (changes.value && !changes.value.isFirstChange()) {
+            this.value = changes.value.currentValue;
+            this.componentRef.instance.value = this.value;
+        }
+    }
+    buildComponent() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
+        this.componentRef = this.container.createComponent(this.component);
+        this.componentRef.instance.component = this.component;
+        this.componentRef.instance.value = this.value;
+        this.componentRef.instance.field = this.field;
+    }
+}
+KlesComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+KlesComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.2", type: KlesComponentDirective, selector: "[klesComponent]", inputs: { component: "component", value: "value", field: "field" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesComponentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[klesComponent]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { component: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], field: [{
+                type: Input
+            }] } });
+
+class KlesFormErrorStateMatcher {
+    constructor() {
+    }
+    isErrorState(control, form) {
+        const isSubmitted = form && form.submitted;
+        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+    }
+}
+KlesFormErrorStateMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KlesFormErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormErrorStateMatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormErrorStateMatcher, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class MaterialModule {
+}
+MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: MaterialModule, imports: [CommonModule,
+        MatSliderModule,
+        MatButtonModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatSidenavModule,
+        MatBadgeModule,
+        MatListModule,
+        MatGridListModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatRadioModule,
+        MatDatepickerModule,
+        MatChipsModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatCardModule,
+        MatMenuModule,
+        MatTabsModule,
+        CdkTableModule,
+        MatProgressSpinnerModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatAutocompleteModule,
+        MatProgressBarModule,
+        MatSortModule,
+        MatExpansionModule,
+        MatNativeDateModule,
+        MatSnackBarModule,
+        MatTreeModule,
+        MatSliderModule,
+        MatButtonModule,
+        MatSlideToggleModule,
+        ColorPickerModule,
+        MatButtonToggleModule], exports: [MatButtonModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatSidenavModule,
+        MatBadgeModule,
+        MatListModule,
+        MatGridListModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatRadioModule,
+        MatDatepickerModule,
+        MatChipsModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatCardModule,
+        MatMenuModule,
+        MatTabsModule,
+        CdkTableModule,
+        MatProgressSpinnerModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatAutocompleteModule,
+        MatProgressBarModule,
+        MatSortModule,
+        MatExpansionModule,
+        MatNativeDateModule,
+        MatSnackBarModule,
+        MatTreeModule,
+        MatSliderModule,
+        MatButtonModule,
+        MatSlideToggleModule,
+        ColorPickerModule,
+        ScrollingModule,
+        CdkScrollable,
+        MatButtonToggleModule] });
+MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: MaterialModule, providers: [
+        MatDatepickerModule,
+        MatDialogModule
+    ], imports: [CommonModule,
+        MatSliderModule,
+        MatButtonModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatSidenavModule,
+        MatBadgeModule,
+        MatListModule,
+        MatGridListModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatRadioModule,
+        MatDatepickerModule,
+        MatChipsModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatCardModule,
+        MatMenuModule,
+        MatTabsModule,
+        CdkTableModule,
+        MatProgressSpinnerModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatAutocompleteModule,
+        MatProgressBarModule,
+        MatSortModule,
+        MatExpansionModule,
+        MatNativeDateModule,
+        MatSnackBarModule,
+        MatTreeModule,
+        MatSliderModule,
+        MatButtonModule,
+        MatSlideToggleModule,
+        ColorPickerModule,
+        MatButtonToggleModule, MatButtonModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatSidenavModule,
+        MatBadgeModule,
+        MatListModule,
+        MatGridListModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatRadioModule,
+        MatDatepickerModule,
+        MatChipsModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatCardModule,
+        MatMenuModule,
+        MatTabsModule,
+        CdkTableModule,
+        MatProgressSpinnerModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatAutocompleteModule,
+        MatProgressBarModule,
+        MatSortModule,
+        MatExpansionModule,
+        MatNativeDateModule,
+        MatSnackBarModule,
+        MatTreeModule,
+        MatSliderModule,
+        MatButtonModule,
+        MatSlideToggleModule,
+        ColorPickerModule,
+        ScrollingModule,
+        MatButtonToggleModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatSliderModule,
+                        MatButtonModule,
+                        MatToolbarModule,
+                        MatIconModule,
+                        MatSidenavModule,
+                        MatBadgeModule,
+                        MatListModule,
+                        MatGridListModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatRadioModule,
+                        MatDatepickerModule,
+                        MatChipsModule,
+                        MatTooltipModule,
+                        MatTableModule,
+                        MatPaginatorModule,
+                        MatCardModule,
+                        MatMenuModule,
+                        MatTabsModule,
+                        CdkTableModule,
+                        MatProgressSpinnerModule,
+                        MatCheckboxModule,
+                        MatDialogModule,
+                        MatAutocompleteModule,
+                        MatProgressBarModule,
+                        MatSortModule,
+                        MatExpansionModule,
+                        MatNativeDateModule,
+                        MatSnackBarModule,
+                        MatTreeModule,
+                        MatSliderModule,
+                        MatButtonModule,
+                        MatSlideToggleModule,
+                        ColorPickerModule,
+                        MatButtonToggleModule
+                    ],
+                    exports: [
+                        MatButtonModule,
+                        MatToolbarModule,
+                        MatIconModule,
+                        MatSidenavModule,
+                        MatBadgeModule,
+                        MatListModule,
+                        MatGridListModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatRadioModule,
+                        MatDatepickerModule,
+                        MatChipsModule,
+                        MatTooltipModule,
+                        MatTableModule,
+                        MatPaginatorModule,
+                        MatCardModule,
+                        MatMenuModule,
+                        MatTabsModule,
+                        CdkTableModule,
+                        MatProgressSpinnerModule,
+                        MatCheckboxModule,
+                        MatDialogModule,
+                        MatAutocompleteModule,
+                        MatProgressBarModule,
+                        MatSortModule,
+                        MatExpansionModule,
+                        MatNativeDateModule,
+                        MatSnackBarModule,
+                        MatTreeModule,
+                        MatSliderModule,
+                        MatButtonModule,
+                        MatSlideToggleModule,
+                        ColorPickerModule,
+                        ScrollingModule,
+                        CdkScrollable,
+                        MatButtonToggleModule
+                    ],
+                    providers: [
+                        MatDatepickerModule,
+                        MatDialogModule
+                    ]
+                }]
+        }] });
+
+class KlesFieldAbstract {
+    constructor() {
+        this._onDestroy = new Subject();
+    }
+    ngOnInit() {
+        // this.applyPipeTransform();
+        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 => {
+            if (this.field.valueChanges) {
+                this.field.valueChanges(this.field, this.group, this.siblingFields, val);
+            }
+            // this.applyPipeTransform();
+        });
+    }
+    ngAfterViewInit() {
+    }
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    }
+    applyPipeTransform() {
+        if (this.group && this.field) {
+            const control = this.group.controls[this.field.name];
+            if (control) {
+                const val = this.group.controls[this.field.name].value;
+                if (this.field.pipeTransform) {
+                    this.field.pipeTransform.forEach(p => {
+                        let pipeVal = control.value;
+                        if (p.options) {
+                            p.options.forEach(opt => {
+                                pipeVal = p.pipe.transform(val, opt);
+                            });
+                        }
+                        else {
+                            pipeVal = p.pipe.transform(val);
+                        }
+                        control.patchValue(pipeVal, { onlySelf: true, emitEvent: false });
+                    });
+                }
+            }
+        }
+    }
+}
+KlesFieldAbstract.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFieldAbstract, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+KlesFieldAbstract.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.2", type: KlesFieldAbstract, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFieldAbstract, decorators: [{
+            type: Directive
+        }] });
+
+class KlesFormLabelComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        this.group.controls[this.field.name].disable();
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormLabelComponent, 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 | translate" [type]="field.inputType">
+    </div>
+`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { 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"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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 | translate" [type]="field.inputType">
+    </div>
+`
+                }]
+        }] });
+
+let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        if (this.field.options instanceof Observable) {
+            this.options$ = this.field.options;
+        }
+        else {
+            this.options$ = of(this.field.options);
+        }
+        this.filteredOption = this.group.get(this.field.name).valueChanges
+            .pipe(startWith(''), 
+        // map(data => data ? this.filterData(data) : this.field.options.slice())
+        switchMap(data => data ? this.filterData(data) : this.options$));
+        if (!this.field.maxLength) {
+            this.field.maxLength = 524288; // Max default input W3C
+        }
+        super.ngOnInit();
+    }
+    isPending() {
+        return (this.group.controls[this.field.name].pending || this.field.pending);
+    }
+    filterData(value) {
+        let filterValue;
+        if (typeof value === 'string' && Object.prototype.toString.call(value) === '[object String]') {
+            filterValue = value.toLowerCase();
+        }
+        else {
+            filterValue = value[this.field.property].toLowerCase();
+        }
+        if (this.field.property) {
+            return this.options$
+                .pipe(map(options => options.filter(option => option[this.field.property].toLowerCase().indexOf(filterValue) === 0)));
+            // return this.field.options
+            //     .filter(data => data[this.field.property].toLowerCase().indexOf(filterValue) === 0);
+        }
+        // return this.field.options.filter(data => data.toLowerCase().indexOf(filterValue) === 0);
+        return this.options$.pipe(map(options => options.filter(option => option.toLowerCase().indexOf(filterValue) === 0)));
+    }
+    displayFn(value) {
+        if (this.field.displayWith) {
+            return this.field.displayWith(value);
+        }
+        else {
+            if (value && this.field && this.field.property) {
+                return value[this.field.property] ? value[this.field.property] : '';
+            }
+            return value ? value : '';
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+};
+KlesFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormInputComponent, selector: "kles-form-input", usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
+
+        <ng-container *ngIf="field.autocomplete; else notAutoComplete">
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [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">
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        {{field.property ? option[field.property] : option}}
+                    </mat-option>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
+                        </ng-container>
+                    </mat-option>
+                </ng-container>
+            </mat-autocomplete>
+        </ng-container>
+
+        <ng-template #notAutoComplete>
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
+        </ng-template>
+
+        <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
+
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+    </mat-form-field>
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] });
+KlesFormInputComponent = __decorate([
+    FieldMapper({ type: EnumType.input })
+], KlesFormInputComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-input', template: `
+    <mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
+
+        <ng-container *ngIf="field.autocomplete; else notAutoComplete">
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [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">
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        {{field.property ? option[field.property] : option}}
+                    </mat-option>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
+                        </ng-container>
+                    </mat-option>
+                </ng-container>
+            </mat-autocomplete>
+        </ng-container>
+
+        <ng-template #notAutoComplete>
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
+        </ng-template>
+
+        <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
+
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+    </mat-form-field>
+    `, styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+let KlesFormSubmitButtonComponent = class KlesFormSubmitButtonComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+};
+KlesFormSubmitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormSubmitButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormSubmitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormSubmitButtonComponent, selector: "kles-submit-button", usesInheritance: true, ngImport: i0, template: `
+    <div [formGroup]="group">
+        <button matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" type="submit" [disabled]="field.disabled" mat-raised-button color="primary">{{field.label}}</button>
+    </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+KlesFormSubmitButtonComponent = __decorate([
+    FieldMapper({ type: EnumType.button })
+], KlesFormSubmitButtonComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormSubmitButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-submit-button', template: `
+    <div [formGroup]="group">
+        <button matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" type="submit" [disabled]="field.disabled" mat-raised-button color="primary">{{field.label}}</button>
+    </div>
+    ` }]
+        }] });
+
+class KlesTransformPipe {
+    transform(value, pipes) {
+        if (pipes && pipes.length > 0) {
+            return pipes.reduce((acc, p) => {
+                if (p.options) {
+                    p.options.forEach(opt => {
+                        acc = p.pipe.transform(acc, opt);
+                    });
+                }
+                else {
+                    acc = p.pipe.transform(acc);
+                }
+                return acc;
+            }, value);
+        }
+        return value;
+    }
+}
+KlesTransformPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesTransformPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+KlesTransformPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: KlesTransformPipe, name: "klesTransform" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesTransformPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'klesTransform' }]
+        }] });
+
+let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbstract {
+    constructor() {
+        super();
+        this.compareFn = (o1, o2) => {
+            if (this.field.property && o1 && o2) {
+                return o1[this.field.property] === o2[this.field.property];
+            }
+            return o1 === o2;
+        };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (!(this.field.options instanceof Observable)) {
+            this.options$ = of(this.field.options);
+        }
+        else {
+            this.options$ = this.field.options;
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    openChange($event) {
+        if (this.field.virtualScroll) {
+            if ($event) {
+                this.cdkVirtualScrollViewport.scrollToIndex(0);
+                this.cdkVirtualScrollViewport.checkViewportSize();
+            }
+        }
+    }
+};
+KlesFormSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KlesFormSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormSelectComponent, 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 class="margin-top" [color]="field.color" [formGroup]="group">
+        <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id"
+        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
+        <mat-select-trigger *ngIf="field.triggerComponent">
+            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+        </mat-select-trigger>
+
+
+        <ng-container *ngIf="!field.virtualScroll">
+            <ng-container *ngIf="!field.autocompleteComponent">
+                <mat-option *ngFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
+            </ng-container>
+
+            <ng-container *ngIf="field.autocompleteComponent">
+                <mat-option *ngFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
+                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                </mat-option>
+            </ng-container>
+        </ng-container>
+
+        <ng-container *ngIf="field.virtualScroll">
+            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=5*48>
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item"  [disabled]="item?.disabled">
+                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                    </mat-option>
+
+                    <ng-container *ngIf="field.multiple">
+                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                        style="display:none">
+                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                        </mat-option>
+                    </ng-container>
+
+                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                    <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                        </mat-option>
+                    </ng-container>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                    </mat-option>
+                    <ng-container *ngIf="field.multiple">
+                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                        style="display:none">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+                    </ng-container>
+                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+                    </ng-container>
+                </ng-container>
+            </cdk-virtual-scroll-viewport>
+
+        </ng-container>
+
+        </mat-select>
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+    </mat-form-field>
+`, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i5$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i8$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
+KlesFormSelectComponent = __decorate([
+    FieldMapper({ type: EnumType.select })
+], KlesFormSelectComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-select', template: `
+    <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
+        <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id"
+        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
+        <mat-select-trigger *ngIf="field.triggerComponent">
+            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+        </mat-select-trigger>
+
+
+        <ng-container *ngIf="!field.virtualScroll">
+            <ng-container *ngIf="!field.autocompleteComponent">
+                <mat-option *ngFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
+            </ng-container>
+
+            <ng-container *ngIf="field.autocompleteComponent">
+                <mat-option *ngFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
+                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                </mat-option>
+            </ng-container>
+        </ng-container>
+
+        <ng-container *ngIf="field.virtualScroll">
+            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=5*48>
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item"  [disabled]="item?.disabled">
+                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                    </mat-option>
+
+                    <ng-container *ngIf="field.multiple">
+                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                        style="display:none">
+                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                        </mat-option>
+                    </ng-container>
+
+                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                    <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                        </mat-option>
+                    </ng-container>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                    </mat-option>
+                    <ng-container *ngIf="field.multiple">
+                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                        style="display:none">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+                    </ng-container>
+                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+                    </ng-container>
+                </ng-container>
+            </cdk-virtual-scroll-viewport>
+
+        </ng-container>
+
+        </mat-select>
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+    </mat-form-field>
+`, styles: ["mat-form-field{width:100%}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { cdkVirtualScrollViewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }], options: [{
+                type: ViewChildren,
+                args: [MatOption]
+            }] } });
+
+class KlesFormDateComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormDateComponent, selector: "kles-form-datepicker", usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field class="demo-full-width margin-top" [color]="field.color" [formGroup]="group">
+        <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder | translate">
+        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+        <mat-hint></mat-hint>
+        
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        </mat-form-field>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "kles-form-datepicker", template: `
+    <mat-form-field class="demo-full-width margin-top" [color]="field.color" [formGroup]="group">
+        <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder | translate">
+        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+        <mat-hint></mat-hint>
+        
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        </mat-form-field>
+    ` }]
+        }] });
+
+class KlesFormRadioComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormRadioComponent, 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-button *ngFor="let item of field.options" [value]="item">{{item}}</mat-radio-button>
+        </mat-radio-group>
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+    </div>
+`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i5$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i5$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormRadioComponent, decorators: [{
+            type: Component,
+            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-button *ngFor="let item of field.options" [value]="item">{{item}}</mat-radio-button>
+        </mat-radio-group>
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+    </div>
+` }]
+        }] });
+
+let KlesFormCheckboxComponent = class KlesFormCheckboxComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+};
+KlesFormCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormCheckboxComponent, selector: "kles-form-checkbox", usesInheritance: true, ngImport: i0, template: `
+    <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 | translate}}</mat-checkbox>
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>
+        </ng-container>
+    </div>
+`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] });
+KlesFormCheckboxComponent = __decorate([
+    FieldMapper({ type: EnumType.checkbox })
+], KlesFormCheckboxComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-checkbox', template: `
+    <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 | translate}}</mat-checkbox>
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>
+        </ng-container>
+    </div>
+` }]
+        }] });
+
+class KlesFormListFieldComponent extends KlesFieldAbstract {
+    constructor(fb) {
+        super();
+        this.fb = fb;
+    }
+    ngOnInit() {
+        this.formArray = this.group.controls[this.field.name];
+        super.ngOnInit();
+    }
+    createFormGroup() {
+        const group = this.fb.group({});
+        this.field.collections.forEach(item => {
+            const control = this.fb.control(null, this.bindValidations(item.validations || []), this.bindAsyncValidations(item.asyncValidations || []));
+            group.addControl(item.name, control);
+        });
+        return group;
+    }
+    deleteField(index) {
+        this.formArray.removeAt(index);
+    }
+    addField() {
+        this.formArray.push(this.createFormGroup());
+    }
+    bindValidations(validations) {
+        if (validations.length > 0) {
+            const validList = [];
+            validations.forEach(valid => {
+                validList.push(valid.validator);
+            });
+            return Validators.compose(validList);
+        }
+        return null;
+    }
+    bindAsyncValidations(validations) {
+        if (validations.length > 0) {
+            const validList = [];
+            validations.forEach(valid => {
+                validList.push(valid.validator);
+            });
+            return Validators.composeAsync(validList);
+        }
+        return null;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormListFieldComponent, deps: [{ token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+KlesFormListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormListFieldComponent, selector: "kles-form-listfield", usesInheritance: true, ngImport: i0, template: `
+    <div [formGroup]="group" class="form-element">
+        {{field.label | translate}}
+        <button mat-icon-button color="primary" (click)="addField()">
+            <mat-icon>add</mat-icon>
+        </button>
+
+        <div class="dynamic-form" [formGroupName]="field.name">
+            <div *ngFor="let subGroup of formArray.controls let index = index;" fxLayout="row" fxLayoutGap="5px">
+                <ng-container *ngFor="let subfield of field.collections;"
+                    dynamicField [field]="subfield" [group]="subGroup">
+                </ng-container>
+                <button mat-icon-button (click)="deleteField(index)" color="primary">
+                    <mat-icon>delete_outlined</mat-icon>
+                </button>
+            </div>
+            <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+        </div>
+    </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormListFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-listfield', template: `
+    <div [formGroup]="group" class="form-element">
+        {{field.label | translate}}
+        <button mat-icon-button color="primary" (click)="addField()">
+            <mat-icon>add</mat-icon>
+        </button>
+
+        <div class="dynamic-form" [formGroupName]="field.name">
+            <div *ngFor="let subGroup of formArray.controls let index = index;" fxLayout="row" fxLayoutGap="5px">
+                <ng-container *ngFor="let subfield of field.collections;"
+                    dynamicField [field]="subfield" [group]="subGroup">
+                </ng-container>
+                <button mat-icon-button (click)="deleteField(index)" color="primary">
+                    <mat-icon>delete_outlined</mat-icon>
+                </button>
+            </div>
+            <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+        </div>
+    </div>
+    ` }]
+        }], ctorParameters: function () { return [{ type: i2.UntypedFormBuilder }]; } });
+
+class KlesFormColorComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    invertColor(hex, bw) {
+        if (hex.indexOf('#') === 0) {
+            hex = hex.slice(1);
+        }
+        // convert 3-digit hex to 6-digits.
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        if (hex.length !== 6) {
+            return '#000000';
+        }
+        let r = parseInt(hex.slice(0, 2), 16);
+        let g = parseInt(hex.slice(2, 4), 16);
+        let b = parseInt(hex.slice(4, 6), 16);
+        if (bw) {
+            return (r * 0.299 + g * 0.587 + b * 0.114) > 186
+                ? '#000000'
+                : '#FFFFFF';
+        }
+        // invert color components
+        const r1 = (255 - r).toString(16);
+        const g1 = (255 - g).toString(16);
+        const b1 = (255 - b).toString(16);
+        // pad each with zeros and return
+        return "#" + r1 + g1 + b1;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormColorComponent, selector: "kles-form-color", usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field [formGroup]="group" class="form-element">
+        <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate"
+            [colorPicker]="group.get(field.name).value"
+            [value]="group.get(field.name).value"
+            (colorPickerChange)="group.get(field.name).setValue($event)"
+            class="colorPicker"
+            [style.background]="group.get(field.name).value"
+            [style.color]="invertColor(group.get(field.name).value,true)"
+            [formControlName]="field.name">
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+    </mat-form-field>
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i7$2.ColorPickerDirective, selector: "[colorPicker]", inputs: ["cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpPresetLabel", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "colorPicker", "cpPresetColors"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormColorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-color', template: `
+    <mat-form-field [formGroup]="group" class="form-element">
+        <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate"
+            [colorPicker]="group.get(field.name).value"
+            [value]="group.get(field.name).value"
+            (colorPickerChange)="group.get(field.name).setValue($event)"
+            class="colorPicker"
+            [style.background]="group.get(field.name).value"
+            [style.color]="invertColor(group.get(field.name).value,true)"
+            [formControlName]="field.name">
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+    </mat-form-field>
+    `, styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+class KlesButtonComponent {
+    constructor() {
+        this.name = '';
+        this.label = '';
+        this.color = 'accent';
+        this.icon = '';
+        this.iconSvg = '';
+        this.disabled = false;
+        this.classButton = '';
+        this.value = {};
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    ngOnInit() {
+    }
+    click(event) {
+        this.value.event = this.name;
+        this.onChange(this.value);
+    }
+    writeValue(value) {
+        if (!value) {
+            value = { event: this.name };
+        }
+        if (!value.event) {
+            value.event = this.name;
+        }
+        if (value.uiButton) {
+            const uiButton = value.uiButton;
+            this.label = (uiButton.label) ? uiButton.label : this.label;
+            this.color = (uiButton.color) ? uiButton.color : this.color;
+            this.icon = (uiButton.icon) ? uiButton.icon : this.icon;
+            this.iconSvg = (uiButton.iconSvg) ? uiButton.iconSvg : this.iconSvg;
+            this.disabled = (uiButton.disabled) ? uiButton.disabled : this.disabled;
+            this.classButton = (uiButton.class) ? uiButton.class : this.classButton;
+        }
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+}
+KlesButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KlesButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesButtonComponent, selector: "kles-button", inputs: { name: "name", label: "label", color: "color", icon: "icon", iconSvg: "iconSvg", disabled: "disabled", classButton: "classButton", value: "value", tooltip: "tooltip" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => KlesButtonComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: `
+        <span>
+            <button mat-button [ngClass]="classButton" [color]="(color)?color:'primary'" [disabled]="disabled"
+            (click)="click($event)" [matTooltip]="tooltip">
+                {{label | translate}}
+                <mat-icon *ngIf="icon">{{icon}}</mat-icon>
+                <mat-icon svgIcon="{{iconSvg}}" *ngIf="iconSvg"></mat-icon>
+            </button>
+        </span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kles-button',
+                    template: `
+        <span>
+            <button mat-button [ngClass]="classButton" [color]="(color)?color:'primary'" [disabled]="disabled"
+            (click)="click($event)" [matTooltip]="tooltip">
+                {{label | translate}}
+                <mat-icon *ngIf="icon">{{icon}}</mat-icon>
+                <mat-icon svgIcon="{{iconSvg}}" *ngIf="iconSvg"></mat-icon>
+            </button>
+        </span>
+    `,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => KlesButtonComponent),
+                            multi: true
+                        }
+                    ]
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconSvg: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], classButton: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }] } });
+
+class KlesFormButtonComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormButtonComponent, selector: "kles-form-button", usesInheritance: true, ngImport: i0, template: `
+    <div [formGroup]="group">
+        <kles-button
+            [attr.id]="field.id" [classButton]="field.ngClass" 
+            [name]="field.name" [label]="field.label" [color]="field.color" 
+            [icon]="field.icon"
+            [iconSvg]="field.iconSvg"
+            [value]="field.value"
+            [formControlName]="field.name"
+            [tooltip]="field.tooltip">
+        </kles-button>
+    </div>
+    `, isInline: true, dependencies: [{ 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: KlesButtonComponent, selector: "kles-button", inputs: ["name", "label", "color", "icon", "iconSvg", "disabled", "classButton", "value", "tooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-button', template: `
+    <div [formGroup]="group">
+        <kles-button
+            [attr.id]="field.id" [classButton]="field.ngClass" 
+            [name]="field.name" [label]="field.label" [color]="field.color" 
+            [icon]="field.icon"
+            [iconSvg]="field.iconSvg"
+            [value]="field.value"
+            [formControlName]="field.name"
+            [tooltip]="field.tooltip">
+        </kles-button>
+    </div>
+    ` }]
+        }] });
+
+class KlesButtonCheckerComponent extends KlesButtonComponent {
+    constructor() {
+        super(...arguments);
+        this.value = {
+            busy: false,
+            error: [],
+            event: false
+        };
+    }
+    countError() {
+        return (this.value.error) ? this.value.error.length : 0;
+    }
+}
+KlesButtonCheckerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesButtonCheckerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesButtonCheckerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesButtonCheckerComponent, selector: "kles-button-checker", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => KlesButtonCheckerComponent),
+            multi: true
+        }
+    ], usesInheritance: true, ngImport: i0, template: `
+        <span *ngIf="value.error && !value.busy">
+            <kles-button 
+                [classButton]="classButton" 
+                [name]="name" [label]="label" [color]="color" 
+                [icon]="icon" [iconSvg]="iconSvg"
+                [value]="value" 
+                [tooltip]="tooltip"
+                [disabled]="disabled"
+                matBadge="{{countError()}}" (click)="click($event)">
+            </kles-button>
+        </span>
+        <span style="text-align: center;">
+            <span style="text-align: center;margin-right: 10px" *ngIf="value.busy||false">
+                <mat-spinner [diameter]="25"></mat-spinner>
+            </span>
+            <span *ngIf="value.message" style="margin-right: 10px">
+                {{value.message|translate}}
+            </span>
+        </span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: KlesButtonComponent, selector: "kles-button", inputs: ["name", "label", "color", "icon", "iconSvg", "disabled", "classButton", "value", "tooltip"] }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesButtonCheckerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kles-button-checker',
+                    template: `
+        <span *ngIf="value.error && !value.busy">
+            <kles-button 
+                [classButton]="classButton" 
+                [name]="name" [label]="label" [color]="color" 
+                [icon]="icon" [iconSvg]="iconSvg"
+                [value]="value" 
+                [tooltip]="tooltip"
+                [disabled]="disabled"
+                matBadge="{{countError()}}" (click)="click($event)">
+            </kles-button>
+        </span>
+        <span style="text-align: center;">
+            <span style="text-align: center;margin-right: 10px" *ngIf="value.busy||false">
+                <mat-spinner [diameter]="25"></mat-spinner>
+            </span>
+            <span *ngIf="value.message" style="margin-right: 10px">
+                {{value.message|translate}}
+            </span>
+        </span>
+    `,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => KlesButtonCheckerComponent),
+                            multi: true
+                        }
+                    ]
+                }]
+        }] });
+
+class KlesFormButtonCheckerComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormButtonCheckerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormButtonCheckerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormButtonCheckerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormButtonCheckerComponent, 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"
+            [value]="field.value"
+            [formControlName]="field.name"
+            [tooltip]="field.tooltip">
+        </kles-button-checker>
+    </div>
+    `, isInline: true, dependencies: [{ 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: KlesButtonCheckerComponent, selector: "kles-button-checker" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormButtonCheckerComponent, decorators: [{
+            type: Component,
+            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"
+            [value]="field.value"
+            [formControlName]="field.name"
+            [tooltip]="field.tooltip">
+        </kles-button-checker>
+    </div>
+    ` }]
+        }] });
+
+class KlesButtonFileComponent extends KlesButtonComponent {
+    constructor() {
+        super(...arguments);
+        this.accept = '*.*';
+        this.fileReader = new FileReader();
+        this.value = {};
+    }
+    click(event) {
+        this.file.nativeElement.click();
+    }
+    writeValue(value) {
+        if (!value) {
+            value = { event: this.name };
+        }
+        if (!value.event) {
+            value.event = this.name;
+        }
+        if (value.uiButton) {
+            const uiButton = value.uiButton;
+            this.label = (uiButton.label) ? uiButton.label : this.label;
+            this.color = (uiButton.color) ? uiButton.color : this.color;
+            this.icon = (uiButton.icon) ? uiButton.icon : this.icon;
+            this.iconSvg = (uiButton.iconSvg) ? uiButton.iconSvg : this.iconSvg;
+            this.disabled = (uiButton.disabled) ? uiButton.disabled : this.disabled;
+            this.classButton = (uiButton.class) ? uiButton.class : this.classButton;
+        }
+        this.value = value;
+    }
+    onFileLoad(fileLoadedEvent) {
+        const textFromFileLoaded = fileLoadedEvent.target.result;
+        this.fileContent = textFromFileLoaded;
+    }
+    async onFileSelect(input) {
+        if (input.files.length > 0) {
+            const files = input.files;
+            let fileContent = [];
+            if (files && files.length) {
+                for (let i = 0; i < files.length; i++) {
+                    try {
+                        fileContent[i] = await this.readUploadedFile(files[i]);
+                    }
+                    catch (e) {
+                    }
+                }
+                if (fileContent.length === 1) {
+                    fileContent = fileContent[0];
+                }
+            }
+            this.value.event = this.name;
+            this.value.fileContent = fileContent;
+            this.onChange(this.value);
+            input.value = '';
+        }
+    }
+    readUploadedFile(inputFile) {
+        const temporaryFileReader = new FileReader();
+        return new Promise((resolve, reject) => {
+            temporaryFileReader.onerror = () => {
+                temporaryFileReader.abort();
+                const error = new DOMException('Problem parsing input file.');
+                reject(error);
+            };
+            temporaryFileReader.onload = () => {
+                resolve(temporaryFileReader.result);
+            };
+            temporaryFileReader.readAsArrayBuffer(inputFile);
+        });
+    }
+}
+KlesButtonFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesButtonFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesButtonFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesButtonFileComponent, selector: "kles-button-file", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => KlesButtonFileComponent),
+            multi: true
+        }
+    ], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <input type="file" #file style="display: none" accept="{{accept}}" (change)="onFileSelect($event.target)" multiple />
+        <kles-button 
+            [classButton]="classButton" 
+            [name]="name" [label]="label" [color]="color" 
+            [icon]="icon" [iconSvg]="iconSvg"
+            [disabled]="disabled"
+            [value]="value" (click)="click($event)">
+        </kles-button>
+    `, isInline: true, dependencies: [{ kind: "component", type: KlesButtonComponent, selector: "kles-button", inputs: ["name", "label", "color", "icon", "iconSvg", "disabled", "classButton", "value", "tooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesButtonFileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kles-button-file',
+                    template: `
+        <input type="file" #file style="display: none" accept="{{accept}}" (change)="onFileSelect($event.target)" multiple />
+        <kles-button 
+            [classButton]="classButton" 
+            [name]="name" [label]="label" [color]="color" 
+            [icon]="icon" [iconSvg]="iconSvg"
+            [disabled]="disabled"
+            [value]="value" (click)="click($event)">
+        </kles-button>
+    `,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => KlesButtonFileComponent),
+                            multi: true
+                        }
+                    ]
+                }]
+        }], propDecorators: { file: [{
+                type: ViewChild,
+                args: ['file']
+            }] } });
+
+class KlesFormButtonFileComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormButtonFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormButtonFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormButtonFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormButtonFileComponent, selector: "kles-form-button-file", usesInheritance: true, ngImport: i0, template: `
+    <div [formGroup]="group">
+        <kles-button-file
+            [attr.id]="field.id" [classButton]="field.ngClass" 
+            [name]="field.name" [label]="field.label" [color]="field.color" 
+            [icon]="field.icon"
+            [iconSvg]="field.iconSvg"
+            [value]="field.value"
+            [formControlName]="field.name">
+        </kles-button-file>
+    </div>
+    `, isInline: true, dependencies: [{ 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: KlesButtonFileComponent, selector: "kles-button-file" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormButtonFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-button-file', template: `
+    <div [formGroup]="group">
+        <kles-button-file
+            [attr.id]="field.id" [classButton]="field.ngClass" 
+            [name]="field.name" [label]="field.label" [color]="field.color" 
+            [icon]="field.icon"
+            [iconSvg]="field.iconSvg"
+            [value]="field.value"
+            [formControlName]="field.name">
+        </kles-button-file>
+    </div>
+    ` }]
+        }] });
+
+class KlesFormTextareaComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormTextareaComponent, selector: "kles-form-textarea", usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
+        <textarea matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" 
+        [formControlName]="field.name" cdkTextareaAutosize [placeholder]="field.placeholder | translate"
+        [cdkAutosizeMinRows]="field.textareaAutoSize?.minRows" [cdkAutosizeMaxRows]="field.textareaAutoSize?.maxRows"  [maxlength]="field.maxLength">
+        </textarea>
+
+
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+    </mat-form-field>
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-textarea', template: `
+    <mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
+        <textarea matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" 
+        [formControlName]="field.name" cdkTextareaAutosize [placeholder]="field.placeholder | translate"
+        [cdkAutosizeMinRows]="field.textareaAutoSize?.minRows" [cdkAutosizeMaxRows]="field.textareaAutoSize?.maxRows"  [maxlength]="field.maxLength">
+        </textarea>
+
+
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+    </mat-form-field>
+    `, styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+let KlesFormTextComponent = class KlesFormTextComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+};
+KlesFormTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormTextComponent, selector: "kles-form-text", usesInheritance: true, ngImport: i0, template: `
+    <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass">
+        {{((field.property && group.controls[field.name].value) ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform:field.pipeTransform}}
+    </span>
+`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
+KlesFormTextComponent = __decorate([
+    FieldMapper({ type: EnumType.text })
+], KlesFormTextComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kles-form-text',
+                    template: `
+    <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass">
+        {{((field.property && group.controls[field.name].value) ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform:field.pipeTransform}}
+    </span>
+`
+                }]
+        }] });
+
+class KlesFormChipComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormChipComponent, selector: "kles-form-chip", usesInheritance: true, ngImport: i0, template: `
+    <div [formGroup]="group">  
+        <mat-chip-list>
+            <mat-chip [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" selected [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
+                <mat-icon *ngIf="field.icon">{{field.icon}}</mat-icon>
+                {{group.controls[field.name].value | klesTransform:field.pipeTransform}}
+            </mat-chip>
+        </mat-chip-list>
+    </div>
+`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i5$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "kles-form-chip", template: `
+    <div [formGroup]="group">  
+        <mat-chip-list>
+            <mat-chip [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" selected [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
+                <mat-icon *ngIf="field.icon">{{field.icon}}</mat-icon>
+                {{group.controls[field.name].value | klesTransform:field.pipeTransform}}
+            </mat-chip>
+        </mat-chip-list>
+    </div>
+` }]
+        }] });
+
+let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        this.subGroup = this.group.controls[this.field.name];
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+};
+KlesFormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormGroupComponent, selector: "kles-group", usesInheritance: true, ngImport: i0, template: `
+    <div [formGroup]="group" class="group-container">
+        <div [formGroupName]="field.name" class="group-container" [style.flex-direction]="field.direction || 'inherit'" [ngClass]="field.ngClass"
+        [ngClass]="field.direction === 'column' ? null: 'row'" >
+            <ng-container *ngFor="let subfield of field.collections;" klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
+            </ng-container>
+        </div>
+    </div>
+`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".group-container{display:flex;flex-direction:inherit;width:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: 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"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }] });
+KlesFormGroupComponent = __decorate([
+    FieldMapper({ type: EnumType.group })
+], KlesFormGroupComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-group', template: `
+    <div [formGroup]="group" class="group-container">
+        <div [formGroupName]="field.name" class="group-container" [style.flex-direction]="field.direction || 'inherit'" [ngClass]="field.ngClass"
+        [ngClass]="field.direction === 'column' ? null: 'row'" >
+            <ng-container *ngFor="let subfield of field.collections;" klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
+            </ng-container>
+        </div>
+    </div>
+`, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".group-container{display:flex;flex-direction:inherit;width:inherit}\n"] }]
+        }] });
+
+class KlesFormInputClearableComponent extends KlesFormInputComponent {
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormInputClearableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormInputClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormInputClearableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormInputClearableComponent, selector: "kles-form-input-clearable", usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
+
+        <ng-container *ngIf="field.autocomplete; else notAutoComplete">
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [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">
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        {{field.property ? option[field.property] : option}}
+                    </mat-option>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
+                        </ng-container>
+                    </mat-option>
+                </ng-container>
+            </mat-autocomplete>
+        </ng-container>
+
+        <ng-template #notAutoComplete>
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
+        </ng-template>
+        <button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"
+            (click)="group.controls[field.name].reset();">
+            <mat-icon>close</mat-icon>
+        </button>
+
+        <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
+
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+    </mat-form-field>
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormInputClearableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-input-clearable', template: `
+    <mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
+
+        <ng-container *ngIf="field.autocomplete; else notAutoComplete">
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [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">
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        {{field.property ? option[field.property] : option}}
+                    </mat-option>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
+                        </ng-container>
+                    </mat-option>
+                </ng-container>
+            </mat-autocomplete>
+        </ng-container>
+
+        <ng-template #notAutoComplete>
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
+        </ng-template>
+        <button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"
+            (click)="group.controls[field.name].reset();">
+            <mat-icon>close</mat-icon>
+        </button>
+
+        <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
+
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+    </mat-form-field>
+    `, styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+class KlesFormIconComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormIconComponent, 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>
+`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", 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}}
+        </mat-icon>
+` }]
+        }] });
+
+class KlesFormSelectSearchComponent extends KlesFieldAbstract {
+    constructor() {
+        super(...arguments);
+        this.searchControl = new UntypedFormControl();
+        this.selectAllControl = new UntypedFormControl(false);
+        this.optionsFiltered$ = new ReplaySubject(1);
+        this.compareFn = (o1, o2) => {
+            if (this.field.property && o1 && o2) {
+                return o1[this.field.property] === o2[this.field.property];
+            }
+            return o1 === o2;
+        };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (!(this.field.options instanceof Observable)) {
+            this.options$ = of(this.field.options);
+        }
+        else {
+            this.options$ = this.field.options;
+        }
+        this.searchControl.valueChanges.pipe(startWith(this.searchControl.value), takeUntil(this._onDestroy), switchMap(value => {
+            if (value) {
+                const search = value.toLowerCase();
+                return this.options$.pipe(map(options => {
+                    return options
+                        .filter(option => {
+                        if (this.field.searchKeys && this.field.searchKeys.length) {
+                            return this.field.searchKeys.some(searchKey => {
+                                if (option[searchKey]) {
+                                    return option[searchKey].toString().toLowerCase().indexOf(search) > -1;
+                                }
+                                return false;
+                            }) || (this.field.property ?
+                                option[this.field.property].toString().toLowerCase().indexOf(search) > -1 : false);
+                        }
+                        else {
+                            if (this.field.property) {
+                                return option[this.field.property].toString().toLowerCase().indexOf(search) > -1;
+                            }
+                        }
+                        return option.toString().toLowerCase().indexOf(search) > -1;
+                    });
+                }));
+            }
+            else {
+                return this.options$;
+            }
+        })).subscribe(this.optionsFiltered$);
+        this.group.controls[this.field.name]
+            .valueChanges.pipe(takeUntil(this._onDestroy), startWith(this.group.controls[this.field.name].value), switchMap(selected => {
+            return this.optionsFiltered$.pipe(map((options) => options.filter((option) => !option?.disabled)), map(options => {
+                if (!selected) {
+                    return false;
+                }
+                if (options.length < selected.length) {
+                    return options.length > 0 && options.every(o => selected.includes(o));
+                }
+                else {
+                    return options.length > 0 && options.length === selected.length && selected.every(s => options.includes(s));
+                }
+            }));
+        })).subscribe(isChecked => {
+            this.selectAllControl.setValue(isChecked);
+        });
+    }
+    ngOnDestroy() {
+        // this._onDestroy.next();
+        super.ngOnDestroy();
+    }
+    toggleAllSelection(state) {
+        if (state.checked) {
+            this.optionsFiltered$.pipe(take(1), map((options) => options.filter((option) => !option?.disabled))).subscribe(options => {
+                if (options.length > 0) {
+                    this.group.controls[this.field.name].patchValue(options.slice());
+                }
+            });
+        }
+        else {
+            this.group.controls[this.field.name].patchValue([]);
+        }
+    }
+    openChange($event) {
+        if (this.field.virtualScroll) {
+            if ($event) {
+                this.cdkVirtualScrollViewport.scrollToIndex(0);
+                this.cdkVirtualScrollViewport.checkViewportSize();
+            }
+        }
+    }
+}
+KlesFormSelectSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormSelectSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormSelectSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormSelectSearchComponent, 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 class="margin-top" [color]="field.color" [formGroup]="group">
+        <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
+        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
+        <mat-select-trigger *ngIf="field.triggerComponent">
+            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+        </mat-select-trigger>
+
+        <ng-container *ngIf="field.virtualScroll">
+            <mat-option>
+                <ngx-mat-select-search [formControl]="searchControl"
+                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
+            </mat-option>
+                
+            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=4*48>
+                <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
+                (change)="toggleAllSelection($event)">
+                    {{'selectAll' | translate}}
+                </mat-checkbox>
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
+                    
+                    <ng-container *ngIf="field.multiple">
+                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                        style="display:none">
+                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                        </mat-option>
+                    </ng-container>
+
+                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                        </mat-option>
+                    </ng-container>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                    </mat-option>
+
+                    <ng-container *ngIf="field.multiple">
+                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                        style="display:none">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+                    </ng-container>
+
+                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+                    </ng-container>
+                </ng-container>
+            </cdk-virtual-scroll-viewport>
+
+        </ng-container>
+
+        <ng-container *ngIf="!field.virtualScroll">
+           
+            <mat-option>
+                <ngx-mat-select-search [formControl]="searchControl"
+                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
+            </mat-option>
+            
+            <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
+                    (change)="toggleAllSelection($event)">
+                    {{'selectAll' | translate}}
+            </mat-checkbox>
+
+            <ng-container *ngIf="!field.autocompleteComponent">
+                <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
+            </ng-container>
+
+            <ng-container *ngIf="field.autocompleteComponent">
+                <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
+                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                </mat-option>
+            </ng-container>
+        </ng-container>
+
+
+        </mat-select>
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+    </mat-form-field>
+`, isInline: true, styles: ["mat-form-field{width:100%}\n", ".selectAll{padding:10px 16px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i5$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i8$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i8$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i10.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormSelectSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-select-search', template: `
+    <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
+        <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
+        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
+        <mat-select-trigger *ngIf="field.triggerComponent">
+            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+        </mat-select-trigger>
+
+        <ng-container *ngIf="field.virtualScroll">
+            <mat-option>
+                <ngx-mat-select-search [formControl]="searchControl"
+                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
+            </mat-option>
+                
+            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=4*48>
+                <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
+                (change)="toggleAllSelection($event)">
+                    {{'selectAll' | translate}}
+                </mat-checkbox>
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
+                    
+                    <ng-container *ngIf="field.multiple">
+                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                        style="display:none">
+                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                        </mat-option>
+                    </ng-container>
+
+                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                        </mat-option>
+                    </ng-container>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                    </mat-option>
+
+                    <ng-container *ngIf="field.multiple">
+                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                        style="display:none">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+                    </ng-container>
+
+                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+                    </ng-container>
+                </ng-container>
+            </cdk-virtual-scroll-viewport>
+
+        </ng-container>
+
+        <ng-container *ngIf="!field.virtualScroll">
+           
+            <mat-option>
+                <ngx-mat-select-search [formControl]="searchControl"
+                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
+            </mat-option>
+            
+            <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
+                    (change)="toggleAllSelection($event)">
+                    {{'selectAll' | translate}}
+            </mat-checkbox>
+
+            <ng-container *ngIf="!field.autocompleteComponent">
+                <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
+            </ng-container>
+
+            <ng-container *ngIf="field.autocompleteComponent">
+                <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
+                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                </mat-option>
+            </ng-container>
+        </ng-container>
+
+
+        </mat-select>
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+            </ng-container>
+    </mat-form-field>
+`, styles: ["mat-form-field{width:100%}\n", ".selectAll{padding:10px 16px}\n"] }]
+        }], propDecorators: { cdkVirtualScrollViewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }], options: [{
+                type: ViewChildren,
+                args: [MatOption]
+            }] } });
+
+let KlesFormLineBreakComponent = class KlesFormLineBreakComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+};
+KlesFormLineBreakComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormLineBreakComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormLineBreakComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormLineBreakComponent, selector: "kles-form-line-break", usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{flex-basis:100%;display:flex;height:0}\n"] });
+KlesFormLineBreakComponent = __decorate([
+    FieldMapper({ type: EnumType.lineBreak })
+], KlesFormLineBreakComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormLineBreakComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-line-break', template: ``, styles: [":host{flex-basis:100%;display:flex;height:0}\n"] }]
+        }] });
+
+class ArrayFormatPipe {
+    transform(values, property) {
+        if (values && Array.isArray(values)) {
+            if (property) {
+                return values.map(value => value[property]).filter(Boolean).join(', ');
+            }
+            else {
+                return values.join(', ');
+            }
+        }
+        return '';
+    }
+}
+ArrayFormatPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ArrayFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ArrayFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: ArrayFormatPipe, name: "arrayFormat" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ArrayFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'arrayFormat' }]
+        }] });
+
+class KlesFormLinkComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormLinkComponent, 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">
+            {{field.label}}
+        </a>
+`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormLinkComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kles-form-link',
+                    template: `
+        <a [href]="group.controls[field.name].value" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass">
+            {{field.label}}
+        </a>
+`
+                }]
+        }] });
+
+class KlesFormSlideToggleComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormSlideToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormSlideToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormSlideToggleComponent, 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 | translate}}</mat-slide-toggle>
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>
+        </ng-container>
+    </div>
+`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i7$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormSlideToggleComponent, decorators: [{
+            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 | translate}}</mat-slide-toggle>
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>
+        </ng-container>
+    </div>
+` }]
+        }] });
+
+class KlesFormSelectionListComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+        if (!(this.field.options instanceof Observable)) {
+            this.options$ = of(this.field.options);
+        }
+        else {
+            this.options$ = this.field.options;
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormSelectionListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormSelectionListComponent, selector: "kles-form-selection-list", usesInheritance: true, ngImport: i0, template: `
+    <div class="margin-top" [formGroup]="group">
+        <mat-selection-list [formControlName]="field.name" [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="field.ngClass">
+            <ng-container *ngIf="!field.autocompleteComponent">
+                <mat-list-option [value]="item" *ngFor="let item of options$ | async;">
+                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                </mat-list-option>
+            </ng-container>
+
+            <ng-container *ngIf="field.autocompleteComponent">
+                <mat-list-option  *ngFor="let item of options$ | async;" [value]="item">
+                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                </mat-list-option>
+            </ng-container>
+        </mat-selection-list>
+    </div>
+`, isInline: true, styles: ["mat-selection-list{width:100%;height:250px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4$4.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$4.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormSelectionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-selection-list', template: `
+    <div class="margin-top" [formGroup]="group">
+        <mat-selection-list [formControlName]="field.name" [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="field.ngClass">
+            <ng-container *ngIf="!field.autocompleteComponent">
+                <mat-list-option [value]="item" *ngFor="let item of options$ | async;">
+                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                </mat-list-option>
+            </ng-container>
+
+            <ng-container *ngIf="field.autocompleteComponent">
+                <mat-list-option  *ngFor="let item of options$ | async;" [value]="item">
+                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                </mat-list-option>
+            </ng-container>
+        </mat-selection-list>
+    </div>
+`, styles: ["mat-selection-list{width:100%;height:250px;overflow:auto}\n"] }]
+        }] });
+
+let KlesFormBadgeComponent = class KlesFormBadgeComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+};
+KlesFormBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormBadgeComponent, 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>
+`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+KlesFormBadgeComponent = __decorate([
+    FieldMapper({ type: EnumType.badge })
+], KlesFormBadgeComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormBadgeComponent, decorators: [{
+            type: Component,
+            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>
+`
+                }]
+        }] });
+
+class KlesFormButtonToogleGroupComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+        if (!(this.field.options instanceof Observable)) {
+            this.options$ = of(this.field.options);
+        }
+        else {
+            this.options$ = this.field.options;
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormButtonToogleGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormButtonToogleGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormButtonToogleGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormButtonToogleGroupComponent, 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 *ngFor="let item of options$ | async" [value]="item">
+                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                </mat-button-toggle>
+            </mat-button-toggle-group>
+        </div>
+`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormButtonToogleGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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 *ngFor="let item of options$ | async" [value]="item">
+                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                </mat-button-toggle>
+            </mat-button-toggle-group>
+        </div>
+`
+                }]
+        }] });
+
+let KlesFormArrayComponent = class KlesFormArrayComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        // this.subGroup = this.group.controls[this.field.name] as FormGroup;
+        super.ngOnInit();
+        this.formArray = this.group.controls[this.field.name];
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+};
+KlesFormArrayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormArrayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormArrayComponent, selector: "kles-array", usesInheritance: true, ngImport: i0, template: `
+    <div [formGroup]="group">
+        <ng-container [formArrayName]="field.name">
+            <div class="group-container" *ngFor="let subGroup of formArray.controls let index = index;"
+            [ngClass]="field.direction === 'column' ? 'column': 'row'">
+                <ng-container *ngFor="let subfield of field.collections;"
+                    klesDynamicField [field]="subfield" [group]="subGroup" [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", ".group-container{display:flex;flex-direction:inherit}\n", ".row{gap:10px;flex-direction:row}\n", ".column{flex-direction:column;gap:0px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: 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"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }] });
+KlesFormArrayComponent = __decorate([
+    FieldMapper({ type: EnumType.array })
+], KlesFormArrayComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormArrayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-array', template: `
+    <div [formGroup]="group">
+        <ng-container [formArrayName]="field.name">
+            <div class="group-container" *ngFor="let subGroup of formArray.controls let index = index;"
+            [ngClass]="field.direction === 'column' ? 'column': 'row'">
+                <ng-container *ngFor="let subfield of field.collections;"
+                    klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
+                </ng-container>
+            </div>
+        </ng-container>
+    </div>
+`, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".group-container{display:flex;flex-direction:inherit}\n", ".row{gap:10px;flex-direction:row}\n", ".column{flex-direction:column;gap:0px}\n"] }]
+        }] });
+
+const components = [
+    KlesDynamicFormComponent,
+    KlesFormLabelComponent,
+    KlesFormInputComponent,
+    KlesFormInputClearableComponent,
+    KlesFormSubmitButtonComponent,
+    KlesFormBadgeComponent,
+    KlesButtonComponent,
+    KlesFormButtonComponent,
+    KlesButtonCheckerComponent,
+    KlesFormButtonCheckerComponent,
+    KlesButtonFileComponent,
+    KlesFormButtonFileComponent,
+    KlesFormSelectComponent,
+    KlesFormDateComponent,
+    KlesFormRadioComponent,
+    KlesFormCheckboxComponent,
+    KlesFormListFieldComponent,
+    KlesFormColorComponent,
+    KlesFormTextareaComponent,
+    KlesFormTextComponent,
+    KlesFormChipComponent,
+    KlesFormGroupComponent,
+    KlesFormIconComponent,
+    KlesFormSelectSearchComponent,
+    KlesFormLineBreakComponent,
+    KlesFormLinkComponent,
+    KlesFormSlideToggleComponent,
+    KlesFormSelectionListComponent,
+    KlesFormButtonToogleGroupComponent,
+    KlesFormArrayComponent
+];
+const directives = [KlesDynamicFieldDirective, KlesComponentDirective];
+const pipes = [KlesTransformPipe, ArrayFormatPipe];
+class KlesMaterialDynamicformsModule {
+}
+KlesMaterialDynamicformsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesMaterialDynamicformsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KlesMaterialDynamicformsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: KlesMaterialDynamicformsModule, declarations: [KlesDynamicFormComponent,
+        KlesFormLabelComponent,
+        KlesFormInputComponent,
+        KlesFormInputClearableComponent,
+        KlesFormSubmitButtonComponent,
+        KlesFormBadgeComponent,
+        KlesButtonComponent,
+        KlesFormButtonComponent,
+        KlesButtonCheckerComponent,
+        KlesFormButtonCheckerComponent,
+        KlesButtonFileComponent,
+        KlesFormButtonFileComponent,
+        KlesFormSelectComponent,
+        KlesFormDateComponent,
+        KlesFormRadioComponent,
+        KlesFormCheckboxComponent,
+        KlesFormListFieldComponent,
+        KlesFormColorComponent,
+        KlesFormTextareaComponent,
+        KlesFormTextComponent,
+        KlesFormChipComponent,
+        KlesFormGroupComponent,
+        KlesFormIconComponent,
+        KlesFormSelectSearchComponent,
+        KlesFormLineBreakComponent,
+        KlesFormLinkComponent,
+        KlesFormSlideToggleComponent,
+        KlesFormSelectionListComponent,
+        KlesFormButtonToogleGroupComponent,
+        KlesFormArrayComponent, KlesDynamicFieldDirective, KlesComponentDirective, KlesTransformPipe, ArrayFormatPipe], imports: [CommonModule,
+        ReactiveFormsModule,
+        TranslateModule,
+        FlexLayoutModule,
+        FormsModule,
+        MaterialModule,
+        ColorPickerModule,
+        NgxMatSelectSearchModule], exports: [KlesDynamicFormComponent,
+        KlesFormLabelComponent,
+        KlesFormInputComponent,
+        KlesFormInputClearableComponent,
+        KlesFormSubmitButtonComponent,
+        KlesFormBadgeComponent,
+        KlesButtonComponent,
+        KlesFormButtonComponent,
+        KlesButtonCheckerComponent,
+        KlesFormButtonCheckerComponent,
+        KlesButtonFileComponent,
+        KlesFormButtonFileComponent,
+        KlesFormSelectComponent,
+        KlesFormDateComponent,
+        KlesFormRadioComponent,
+        KlesFormCheckboxComponent,
+        KlesFormListFieldComponent,
+        KlesFormColorComponent,
+        KlesFormTextareaComponent,
+        KlesFormTextComponent,
+        KlesFormChipComponent,
+        KlesFormGroupComponent,
+        KlesFormIconComponent,
+        KlesFormSelectSearchComponent,
+        KlesFormLineBreakComponent,
+        KlesFormLinkComponent,
+        KlesFormSlideToggleComponent,
+        KlesFormSelectionListComponent,
+        KlesFormButtonToogleGroupComponent,
+        KlesFormArrayComponent, KlesTransformPipe, ArrayFormatPipe, KlesDynamicFieldDirective, KlesComponentDirective, ColorPickerModule] });
+KlesMaterialDynamicformsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesMaterialDynamicformsModule, providers: [
+        { provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher },
+        pipes
+    ], imports: [CommonModule,
+        ReactiveFormsModule,
+        TranslateModule,
+        FlexLayoutModule,
+        FormsModule,
+        MaterialModule,
+        ColorPickerModule,
+        NgxMatSelectSearchModule, ColorPickerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesMaterialDynamicformsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        components,
+                        directives,
+                        pipes
+                    ],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        FlexLayoutModule,
+                        FormsModule,
+                        MaterialModule,
+                        ColorPickerModule,
+                        NgxMatSelectSearchModule
+                    ],
+                    providers: [
+                        { provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher },
+                        pipes
+                    ],
+                    exports: [
+                        components,
+                        pipes,
+                        directives,
+                        ColorPickerModule
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+                }]
+        }] });
+
+function autocompleteObjectValidator(optional) {
+    return (control) => {
+        if ((control.value === null || control.value === undefined) && !optional)
+            return { 'invalidAutocompleteObject': { value: control.value } };
+        if (typeof control.value === 'string') {
+            if (control.value === '' && optional)
+                return null;
+            return { 'invalidAutocompleteObject': { value: control.value } };
+        }
+        return null; /* valid option selected */
+    };
+}
+function autocompleteStringValidator(validOptions, optional) {
+    return (control) => {
+        if ((control.value === '' || control.value === null) && optional)
+            return null;
+        if (validOptions.indexOf(control.value) !== -1) {
+            return null; /* valid option selected */
+        }
+        return { 'invalidAutocompleteString': { value: control.value } };
+    };
+}
+
+/*
+ * Public API Surface of kles-material-dynamicforms
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ArrayFormatPipe, EnumType, FieldMapper, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesFieldAbstract, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormChipComponent, KlesFormColorComponent, KlesFormDateComponent, KlesFormErrorStateMatcher, KlesFormGroupComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormRadioComponent, KlesFormSelectComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSlideToggleComponent, KlesFormSubmitButtonComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesMaterialDynamicformsModule, KlesTransformPipe, autocompleteObjectValidator, autocompleteStringValidator, componentMapper };
+//# sourceMappingURL=3kles-kles-material-dynamicforms.mjs.map