@3kles/kles-material-dynamicforms 15.0.0 → 16.0.3

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

@@ -1,3598 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, Injector, Directive, Input, EventEmitter, Output, Injectable, NgModule, HostBinding, 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 { FormControl, Validators, FormControlDirective, FormControlName, NG_VALUE_ACCESSOR, UntypedFormGroup, UntypedFormControl, FormArray, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { concat, of, Subject, Observable, BehaviorSubject, ReplaySubject } from 'rxjs';
-import { take, catchError, map, takeUntil, startWith, switchMap, debounceTime } from 'rxjs/operators';
-import * as i7$1 from '@angular/material/core';
-import { MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule, MatOption, ErrorStateMatcher } from '@angular/material/core';
-import * as i4 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i4$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i2$1 from '@angular/material/badge';
-import { MatBadgeModule } from '@angular/material/badge';
-import * as i4$3 from '@angular/material/list';
-import { MatListModule } from '@angular/material/list';
-import { MatGridListModule } from '@angular/material/grid-list';
-import * as i5$1 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5$2 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i4$2 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i6 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i5$3 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
-import * as i5$4 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i5 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 i9 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i10 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
-import * as i9$1 from '@angular/material/autocomplete';
-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$2 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 i11 from '@angular/cdk/scrolling';
-import { ScrollingModule, CdkScrollable, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import * as i4$4 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import * as i7 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import * as i3 from '@angular/flex-layout/extended';
-import { __decorate, __awaiter } from 'tslib';
-import * as i3$1 from '@angular/flex-layout/flex';
-import * as i6$1 from '@angular/cdk/text-field';
-import * as i12 from 'ngx-mat-select-search';
-import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
-import { v4 } from 'uuid';
-
-class KlesFormControl {
-    constructor(field) {
-        this.field = field;
-    }
-    create() {
-        const control = new FormControl(this.field.value, {
-            validators: this.bindValidations(this.field.validations || []),
-            asyncValidators: this.bindAsyncValidations(this.field.asyncValidations || []),
-            updateOn: this.field.updateOn || 'change'
-        });
-        if (this.field.disabled) {
-            control.disable();
-        }
-        if (this.field.asyncValue) {
-            concat(of({ value: null, pending: true }), this.field.asyncValue.pipe(take(1), catchError((err) => {
-                console.error(err);
-                return of(null);
-            }), map((value) => ({ value, pending: false })))).subscribe((response) => {
-                this.field.pending = response.pending;
-                if (response.pending) {
-                    control.disable({ emitEvent: false });
-                }
-                else {
-                    if (!this.field.disabled) {
-                        control.enable({ emitEvent: false });
-                    }
-                    control.setValue(response.value);
-                    this.field.value = response.value;
-                }
-            });
-        }
-        return control;
-    }
-    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;
-    }
-}
-
-const klesFieldControlFactory = (field) => {
-    const factory = new KlesFormControl(field);
-    return factory.create();
-};
-
-const componentMapper = [];
-function FieldMapper(config) {
-    return (target) => {
-        componentMapper.push({
-            component: target,
-            type: config.type,
-            factory: config.factory || klesFieldControlFactory
-        });
-    };
-}
-
-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["range"] = "range";
-})(EnumType || (EnumType = {}));
-
-class KlesFormClearComponent {
-    clear(event) {
-        event.stopPropagation();
-        this.group.controls[this.field.name].reset();
-    }
-}
-KlesFormClearComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormClearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-KlesFormClearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: KlesFormClearComponent, selector: "kles-form-clear", ngImport: i0, template: `
-    <button *ngIf="group.get(field.name).value && !group.get(field.name).disabled" mat-icon-button aria-label="Clear" type="button"
-        (click)="clear($event)">
-        <mat-icon>close</mat-icon>
-    </button>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormClearComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kles-form-clear',
-                    template: `
-    <button *ngIf="group.get(field.name).value && !group.get(field.name).disabled" mat-icon-button aria-label="Clear" type="button"
-        (click)="clear($event)">
-        <mat-icon>close</mat-icon>
-    </button>
-    `,
-                }]
-        }] });
-
-class KlesDynamicFieldDirective {
-    constructor(container, injector) {
-        this.container = container;
-        this.injector = injector;
-        this.subComponents = [];
-    }
-    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() {
-        var _a;
-        if (this.componentRef) {
-            this.subComponents.forEach(c => c.destroy());
-            this.subComponents = [];
-            this.componentRef.destroy();
-        }
-        const options = {
-            providers: this.field.dateOptions ? [
-                { provide: MAT_DATE_LOCALE, useValue: this.field.dateOptions.language },
-                { provide: MAT_DATE_FORMATS, useValue: this.field.dateOptions.dateFormat },
-            ] : [],
-            parent: this.injector
-        };
-        const injector = Injector.create(options);
-        if (this.field.clearable) {
-            const composant = this.createSubComponent(this.field.clearableComponent || KlesFormClearComponent);
-            this.subComponents.push(composant);
-        }
-        if (this.field.subComponents) {
-            this.subComponents.push(...this.field.subComponents.map((subComponent) => this.createSubComponent(subComponent)));
-        }
-        this.componentRef = this.container.createComponent(this.field.component
-            || ((_a = componentMapper.find(element => element.type === this.field.type)) === null || _a === void 0 ? void 0 : _a.component), { injector, projectableNodes: [this.subComponents.map(sub => sub.location.nativeElement)] });
-        this.componentRef.instance.field = this.field;
-        this.componentRef.instance.group = this.group;
-        this.componentRef.instance.siblingFields = this.siblingFields;
-    }
-    createSubComponent(componentType) {
-        const component = this.container.createComponent(componentType);
-        component.instance.field = this.field;
-        component.instance.group = this.group;
-        component.instance.siblingFields = this.siblingFields;
-        return component;
-    }
-}
-KlesDynamicFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesDynamicFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-KlesDynamicFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: { field: "field", group: "group", siblingFields: "siblingFields" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesDynamicFieldDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[klesDynamicField]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { field: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], siblingFields: [{
-                type: Input
-            }] } });
-
-const originFormControlNgOnChanges = FormControlDirective.prototype.ngOnChanges;
-FormControlDirective.prototype.ngOnChanges = function () {
-    var _a;
-    this.form.nativeElement = (_a = this.valueAccessor._elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
-    return originFormControlNgOnChanges.apply(this, arguments);
-};
-const originFormControlNameNgOnChanges = FormControlName.prototype.ngOnChanges;
-FormControlName.prototype.ngOnChanges = function () {
-    var _a;
-    const result = originFormControlNameNgOnChanges.apply(this, arguments);
-    this.control.nativeElement = (_a = this.valueAccessor._elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
-    return result;
-};
-class KlesDynamicFormComponent {
-    get value() {
-        return this.form.value;
-    }
-    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';
-    }
-    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) {
-        var _a, _b, _c, _d;
-        if (!((_a = changes.fields) === null || _a === void 0 ? void 0 : _a.firstChange)) {
-            this.updateForm();
-            // this.form = this.createControl();
-            // this.form.controls = {};
-            this._onLoaded.emit();
-        }
-        if (!((_b = changes.validators) === null || _b === void 0 ? void 0 : _b.firstChange) && this.form) {
-            this.form.setValidators(this.validators.map(v => v.validator));
-        }
-        if (!((_c = changes.asyncValidators) === null || _c === void 0 ? void 0 : _c.firstChange) && this.form) {
-            this.form.setAsyncValidators(this.asyncValidators.map(v => v.validator));
-        }
-        if (!((_d = changes.direction) === null || _d === void 0 ? void 0 : _d.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;
-            }
-            if (this.form.controls[field.name]) {
-                const control = this.updateControl(field, this.form.controls[field.name]);
-                this.form.setControl(field.name, control, { emitEvent: false });
-            }
-            else {
-                const control = this.createControl(field);
-                this.form.addControl(field.name, control);
-            }
-        });
-    }
-    updateControl(field, control) {
-        if (field.type === EnumType.array) {
-            const array = control;
-            /*TODO*/
-            return array;
-        }
-        else if (field.type === EnumType.group) {
-            const group = control;
-            if (field.collections && Array.isArray(field.collections)) {
-                field.collections.forEach(subfield => {
-                    if (group.controls[subfield]) {
-                        control = this.updateControl(subfield, group.controls[subfield]);
-                    }
-                    else {
-                        control = this.createControl(subfield);
-                    }
-                    group.setControl(subfield.name, control, { emitEvent: false });
-                });
-            }
-            return group;
-        }
-        else {
-            // control.setValidators(this.bindValidations(field.validations || []));
-            // control.setAsyncValidators(this.bindAsyncValidations(field.asyncValidations || []));
-            // if (field.value && control.value !== field.value) {
-            //     control.setValue(field.value);
-            // }
-            return control;
-        }
-    }
-    createControl(field) {
-        var _a, _b;
-        if (field.type) {
-            return ((_a = componentMapper.find(c => c.type === field.type)) === null || _a === void 0 ? void 0 : _a.factory(field)) || klesFieldControlFactory(field);
-        }
-        else {
-            return ((_b = componentMapper.find(c => c.component === field.component)) === null || _b === void 0 ? void 0 : _b.factory(field)) || klesFieldControlFactory(field);
-        }
-    }
-    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;
-    }
-    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: "15.2.9", ngImport: i0, type: KlesDynamicFormComponent, deps: [{ token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-KlesDynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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;">
-            <ng-container *ngIf="field.visible !== false" class="{{orientationItemClass}}" klesDynamicField [field]="field" [group]="form" [siblingFields]="fields">
-            </ng-container>
-        </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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "15.2.9", 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;">
-            <ng-container *ngIf="field.visible !== false" class="{{orientationItemClass}}" klesDynamicField [field]="field" [group]="form" [siblingFields]="fields">
-            </ng-container>
-        </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: "15.2.9", ngImport: i0, type: KlesComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-KlesComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: KlesComponentDirective, selector: "[klesComponent]", inputs: { component: "component", value: "value", field: "field" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: KlesFormErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-KlesFormErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormErrorStateMatcher });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormErrorStateMatcher, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-class MaterialModule {
-}
-MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", 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,
-        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,
-        MatSlideToggleModule,
-        ColorPickerModule,
-        ScrollingModule,
-        CdkScrollable,
-        MatButtonToggleModule] });
-MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", 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,
-        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,
-        MatSlideToggleModule,
-        ColorPickerModule,
-        ScrollingModule,
-        MatButtonToggleModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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,
-                        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,
-                        MatSlideToggleModule,
-                        ColorPickerModule,
-                        ScrollingModule,
-                        CdkScrollable,
-                        MatButtonToggleModule
-                    ],
-                    providers: [
-                        MatDatepickerModule,
-                        MatDialogModule
-                    ]
-                }]
-        }] });
-
-class KlesFieldAbstract {
-    constructor(viewRef) {
-        this.viewRef = viewRef;
-        this._onDestroy = new Subject();
-    }
-    ngOnInit() {
-        var _a;
-        if (this.field.valueChanges) {
-            this.field.valueChanges(this.field, this.group, this.siblingFields);
-        }
-        (_a = this.group.controls[this.field.name]) === null || _a === void 0 ? void 0 : _a.valueChanges.pipe(takeUntil(this._onDestroy)).subscribe(val => {
-            if (this.field.valueChanges) {
-                this.field.valueChanges(this.field, this.group, this.siblingFields, val);
-            }
-        });
-        if (this.field.directive) {
-            this.directive = new this.field.directive(this.viewRef, this);
-            this.directive.ngOnInit();
-        }
-    }
-    ngAfterViewInit() {
-        var _a;
-        if (this.directive && this.directive.ngAfterViewInit) {
-            (_a = this.directive) === null || _a === void 0 ? void 0 : _a.ngAfterViewInit();
-        }
-        if (this.field.autofocus) {
-            setTimeout(() => {
-                var _a;
-                (_a = this.group.controls[this.field.name]) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
-            });
-            // console.log('result', (<any>this.group.controls[this.field.name]))
-        }
-    }
-    ngOnDestroy() {
-        var _a;
-        (_a = this.directive) === null || _a === void 0 ? void 0 : _a.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: "15.2.9", ngImport: i0, type: KlesFieldAbstract, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-KlesFieldAbstract.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: KlesFieldAbstract, host: { properties: { "attr.klesDirective": "this.directive" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFieldAbstract, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { directive: [{
-                type: HostBinding,
-                args: ['attr.klesDirective']
-            }] } });
-
-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: "15.2.9", ngImport: i0, type: KlesFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i4$2.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: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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 if (this.field.options instanceof Function) {
-            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: "15.2.9", ngImport: i0, type: KlesFormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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>
-
-        <div matSuffix>
-            <ng-content></ng-content>
-        </div>
-
-        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
-            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-        </ng-container>
-        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
-            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-        </ng-container>
-    </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], 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$2.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: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9$1.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.TranslatePipe, name: "translate" }] });
-KlesFormInputComponent = __decorate([
-    FieldMapper({ type: EnumType.input })
-], KlesFormInputComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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>
-
-        <div matSuffix>
-            <ng-content></ng-content>
-        </div>
-
-        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
-            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-        </ng-container>
-        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
-            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-        </ng-container>
-    </mat-form-field>
-    `, styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
-
-let KlesFormSubmitButtonComponent = class KlesFormSubmitButtonComponent extends KlesFieldAbstract {
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-};
-KlesFormSubmitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormSubmitButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormSubmitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-KlesFormSubmitButtonComponent = __decorate([
-    FieldMapper({ type: EnumType.button })
-], KlesFormSubmitButtonComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: KlesTransformPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-KlesTransformPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: KlesTransformPipe, name: "klesTransform" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesTransformPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'klesTransform' }]
-        }] });
-
-let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbstract {
-    constructor(viewRef, ref) {
-        super(viewRef);
-        this.viewRef = viewRef;
-        this.ref = ref;
-        this.isLoading = false;
-        this.openChange$ = new Subject();
-        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.lazy) {
-            this.isLoading = true;
-            if (this.group.controls[this.field.name].value !== undefined && this.group.controls[this.field.name].value !== null) {
-                this.options$ = new BehaviorSubject(Array.isArray(this.group.controls[this.field.name].value) ? this.group.controls[this.field.name].value
-                    : [this.group.controls[this.field.name].value]);
-                this.isLoading = false;
-            }
-            else {
-                this.options$ = new BehaviorSubject([]);
-            }
-            this.openChange$
-                .pipe(takeUntil(this._onDestroy), switchMap((isOpen) => {
-                if (isOpen) {
-                    if (this.field.options instanceof Observable) {
-                        this.isLoading = true;
-                        return this.field.options.pipe(take(1));
-                    }
-                    else if (this.field.options instanceof Function) {
-                        this.isLoading = true;
-                        return this.field.options();
-                    }
-                    else {
-                        return of(this.field.options);
-                    }
-                }
-                else {
-                    return of(this.group.controls[this.field.name].value !== undefined && this.group.controls[this.field.name].value !== null
-                        ? (Array.isArray(this.group.controls[this.field.name].value) ?
-                            this.group.controls[this.field.name].value : [this.group.controls[this.field.name].value]) : []);
-                }
-            }))
-                .subscribe((options) => {
-                this.options$.next(options);
-                this.isLoading = false;
-                this.ref.markForCheck();
-            });
-        }
-        else {
-            if (this.field.options instanceof Observable) {
-                this.options$ = this.field.options;
-            }
-            else if (this.field.options instanceof Function) {
-                this.options$ = this.field.options();
-            }
-            else {
-                this.options$ = of(this.field.options);
-            }
-        }
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-    openChange($event) {
-        if (this.field.lazy) {
-            this.openChange$.next($event);
-            // if ($event) {
-            //     if (!(this.field.options instanceof Observable)) {
-            //         (this.options$ as BehaviorSubject<any[]>).next(this.field.options);
-            //     } else {
-            //         this.isLoading = true;
-            //         this.field.options.pipe(take(1)).subscribe(options => {
-            //             (this.options$ as BehaviorSubject<any[]>).next(options);
-            //             this.isLoading = false;
-            //             this.ref.markForCheck();
-            //         });
-            //     }
-            // } else {
-            //     (this.options$ as BehaviorSubject<any[]>)
-            //         .next(this.group.controls[this.field.name].value !== undefined ? [this.group.controls[this.field.name].value] : []);
-            //     this.ref.markForCheck();
-            //     // this.isLoading = true;
-            // }
-        }
-        if (this.field.virtualScroll) {
-            if ($event) {
-                this.cdkVirtualScrollViewport.scrollToIndex(0);
-                this.cdkVirtualScrollViewport.checkViewportSize();
-            }
-        }
-    }
-};
-KlesFormSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormSelectComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-KlesFormSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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">
-                <ng-container *ngIf="!isLoading; else emptyOption">
-                    <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>
-
-            <ng-container *ngIf="field.autocompleteComponent">
-                <ng-container *ngIf="!isLoading; else emptyOption">
-                        <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-template #emptyOption>
-                <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
-            </ng-template>
-        </ng-container>
-
-        <ng-container *ngIf="field.virtualScroll">
-            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=5*48>
-                <ng-container *ngIf="!field.autocompleteComponent">
-                    <ng-container *ngIf="!isLoading; else emptyOption">
-                        <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>
-
-                    <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">
-                    <ng-container *ngIf="!isLoading; else emptyOption">
-                        <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>
-                    <ng-container *ngIf="field.multiple">
-                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
-                        style="display:none">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                        </mat-option>
-                    </ng-container>
-                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
-                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                        </mat-option>
-                    </ng-container>
-                </ng-container>
-
-                <ng-template #emptyOption>
-                    <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
-                </ng-template>
-            </cdk-virtual-scroll-viewport>
-
-        </ng-container>
-
-        </mat-select>
-
-        <div matSuffix>
-            <ng-content></ng-content>
-        </div>
-        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
-                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-            </ng-container>
-            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
-                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-            </ng-container>
-    </mat-form-field>
-`, isInline: true, styles: ["mat-form-field{width:100%}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
-KlesFormSelectComponent = __decorate([
-    FieldMapper({ type: EnumType.select })
-], KlesFormSelectComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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">
-                <ng-container *ngIf="!isLoading; else emptyOption">
-                    <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>
-
-            <ng-container *ngIf="field.autocompleteComponent">
-                <ng-container *ngIf="!isLoading; else emptyOption">
-                        <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-template #emptyOption>
-                <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
-            </ng-template>
-        </ng-container>
-
-        <ng-container *ngIf="field.virtualScroll">
-            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=5*48>
-                <ng-container *ngIf="!field.autocompleteComponent">
-                    <ng-container *ngIf="!isLoading; else emptyOption">
-                        <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>
-
-                    <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">
-                    <ng-container *ngIf="!isLoading; else emptyOption">
-                        <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>
-                    <ng-container *ngIf="field.multiple">
-                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
-                        style="display:none">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                        </mat-option>
-                    </ng-container>
-                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
-                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                        </mat-option>
-                    </ng-container>
-                </ng-container>
-
-                <ng-template #emptyOption>
-                    <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
-                </ng-template>
-            </cdk-virtual-scroll-viewport>
-
-        </ng-container>
-
-        </mat-select>
-
-        <div matSuffix>
-            <ng-content></ng-content>
-        </div>
-        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
-                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-            </ng-container>
-            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
-                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-            </ng-container>
-    </mat-form-field>
-`, styles: ["mat-form-field{width:100%}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, 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: "15.2.9", ngImport: i0, type: KlesFormDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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"
-        [min]="field.min" [max]="field.max">
-        <div matSuffix>
-            <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
-            <ng-content></ng-content>
-        </div>
-        <mat-datepicker #picker></mat-datepicker>
-        <mat-hint>{{field.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$2.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: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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"
-        [min]="field.min" [max]="field.max">
-        <div matSuffix>
-            <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
-            <ng-content></ng-content>
-        </div>
-        <mat-datepicker #picker></mat-datepicker>
-        <mat-hint>{{field.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: "15.2.9", ngImport: i0, type: KlesFormRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$3.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i5$3.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: KlesFormCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
-KlesFormCheckboxComponent = __decorate([
-    FieldMapper({ type: EnumType.checkbox })
-], KlesFormCheckboxComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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, viewRef) {
-        super(viewRef);
-        this.fb = fb;
-        this.viewRef = viewRef;
-    }
-    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: "15.2.9", ngImport: i0, type: KlesFormListFieldComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-KlesFormListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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 }, { type: i0.ViewContainerRef }]; } });
-
-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: "15.2.9", ngImport: i0, type: KlesFormColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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">
-
-        <div matSuffix>
-            <ng-content></ng-content>
-        </div>
- 
-        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
-            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-        </ng-container>
-        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
-            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-        </ng-container>
-    </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], 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$2.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: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.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.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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">
-
-        <div matSuffix>
-            <ng-content></ng-content>
-        </div>
- 
-        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
-            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-        </ng-container>
-        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
-            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-        </ng-container>
-    </mat-form-field>
-    `, styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
-
-class KlesButtonComponent {
-    constructor() {
-        this.name = '';
-        this.label = '';
-        this.color = 'accent';
-        this.icon = '';
-        this.iconSvg = '';
-        this.disabled = false;
-        this.type = 'submit';
-        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.type = (uiButton.type) ? uiButton.type : 'submit';
-        }
-        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: "15.2.9", ngImport: i0, type: KlesButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-KlesButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: KlesButtonComponent, selector: "kles-button", inputs: { name: "name", label: "label", color: "color", icon: "icon", iconSvg: "iconSvg", disabled: "disabled", type: "type", classButton: "classButton", value: "value", tooltip: "tooltip" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => KlesButtonComponent),
-            multi: true
-        }
-    ], ngImport: i0, template: `
-        <span>
-            <button mat-button [type]="type" [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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kles-button',
-                    template: `
-        <span>
-            <button mat-button [type]="type" [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
-            }], type: [{
-                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: "15.2.9", ngImport: i0, type: KlesFormButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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"
-            [type]="field.buttonType"
-            >
-        </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", "type", "classButton", "value", "tooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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"
-            [type]="field.buttonType"
-            >
-        </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: "15.2.9", ngImport: i0, type: KlesButtonCheckerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesButtonCheckerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: KlesButtonComponent, selector: "kles-button", inputs: ["name", "label", "color", "icon", "iconSvg", "disabled", "type", "classButton", "value", "tooltip"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: KlesFormButtonCheckerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormButtonCheckerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", 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.accept = (uiButton.accept) ? uiButton.accept : this.accept;
-        }
-        this.value = value;
-    }
-    onFileLoad(fileLoadedEvent) {
-        const textFromFileLoaded = fileLoadedEvent.target.result;
-        this.fileContent = textFromFileLoaded;
-    }
-    onFileSelect(input) {
-        return __awaiter(this, void 0, void 0, function* () {
-            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] = yield 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: "15.2.9", ngImport: i0, type: KlesButtonFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesButtonFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: KlesButtonFileComponent, selector: "kles-button-file", inputs: { accept: "accept" }, 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", "type", "classButton", "value", "tooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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']
-            }], accept: [{
-                type: Input
-            }] } });
-
-class KlesFormButtonFileComponent extends KlesFieldAbstract {
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-}
-KlesFormButtonFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormButtonFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormButtonFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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"
-            [type]="field.buttonType"
-            [accept]="field.accept"
-        >
-        </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", inputs: ["accept"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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"
-            [type]="field.buttonType"
-            [accept]="field.accept"
-        >
-        </kles-button-file>
-    </div>
-    ` }]
-        }] });
-
-class KlesFormTextareaComponent extends KlesFieldAbstract {
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-}
-KlesFormTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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>
-
-        <div matSuffix>
-            <ng-content></ng-content>
-        </div>
-
-        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
-            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-        </ng-container>
-        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
-            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-        </ng-container>
-    </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], 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$2.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: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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>
-
-        <div matSuffix>
-            <ng-content></ng-content>
-        </div>
-
-        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
-            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-        </ng-container>
-        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
-            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-        </ng-container>
-    </mat-form-field>
-    `, styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
-
-let KlesFormTextComponent = class KlesFormTextComponent extends KlesFieldAbstract {
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-};
-KlesFormTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i5.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: "15.2.9", 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: "15.2.9", ngImport: i0, type: KlesFormChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: KlesFormChipComponent, selector: "kles-form-chip", usesInheritance: true, ngImport: i0, template: `
-    <div [formGroup]="group">  
-        <mat-chip-listbox>
-            <mat-chip-option [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" selected [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
-                <mat-icon *ngIf="field.icon">{{field.icon}}</mat-icon>
-                {{group.controls[field.name].value | klesTransform:field.pipeTransform}}
-            </mat-chip-option>
-        </mat-chip-listbox>
-    </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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5$4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormChipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "kles-form-chip", template: `
-    <div [formGroup]="group">  
-        <mat-chip-listbox>
-            <mat-chip-option [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" selected [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
-                <mat-icon *ngIf="field.icon">{{field.icon}}</mat-icon>
-                {{group.controls[field.name].value | klesTransform:field.pipeTransform}}
-            </mat-chip-option>
-        </mat-chip-listbox>
-    </div>
-` }]
-        }] });
-
-class KlesFormGroup extends KlesFormControl {
-    create() {
-        const subGroup = new UntypedFormGroup({});
-        if (this.field.collections && Array.isArray(this.field.collections)) {
-            this.field.collections.forEach(subfield => {
-                var _a, _b, _c, _d, _e, _f;
-                let control;
-                if (subfield.type) {
-                    control = ((_a = componentMapper.find(c => c.type === subfield.type)) === null || _a === void 0 ? void 0 : _a.factory(Object.assign(Object.assign({}, subfield), { value: subfield.value || ((_b = this.field.value) === null || _b === void 0 ? void 0 : _b[subfield.name]) })))
-                        || klesFieldControlFactory(Object.assign(Object.assign({}, subfield), { value: subfield.value || ((_c = this.field.value) === null || _c === void 0 ? void 0 : _c[subfield.name]) }));
-                }
-                else {
-                    control = ((_d = componentMapper.find(c => c.component === subfield.component)) === null || _d === void 0 ? void 0 : _d.factory(Object.assign(Object.assign({}, subfield), { value: subfield.value || ((_e = this.field.value) === null || _e === void 0 ? void 0 : _e[subfield.name]) })))
-                        || klesFieldControlFactory(Object.assign(Object.assign({}, subfield), { value: subfield.value || ((_f = this.field.value) === null || _f === void 0 ? void 0 : _f[subfield.name]) }));
-                }
-                subGroup.addControl(subfield.name, control);
-            });
-        }
-        if (this.field.disabled) {
-            subGroup.disable();
-        }
-        return subGroup;
-    }
-}
-
-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: "15.2.9", ngImport: i0, type: KlesFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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">
-            <ng-container *ngFor="let subfield of field.collections;">
-                <ng-container *ngIf="subfield.visible !== false" klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
-                </ng-container>
-            </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: 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.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, factory: (field) => (new KlesFormGroup(field).create()) })
-], KlesFormGroupComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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">
-            <ng-container *ngFor="let subfield of field.collections;">
-                <ng-container *ngIf="subfield.visible !== false" klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
-                </ng-container>
-            </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: "15.2.9", ngImport: i0, type: KlesFormInputClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormInputClearableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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" 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.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.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: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9$1.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.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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" 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: "15.2.9", ngImport: i0, type: KlesFormIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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(viewRef, ref) {
-        super(viewRef);
-        this.viewRef = viewRef;
-        this.ref = ref;
-        this.searchControl = new UntypedFormControl();
-        this.selectAllControl = new UntypedFormControl(false);
-        this.isLoading = false;
-        this.optionsFiltered$ = new ReplaySubject(1);
-        this.openChange$ = new BehaviorSubject(false);
-        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.lazy) {
-            this.isLoading = true;
-            if (this.group.controls[this.field.name].value !== undefined && this.group.controls[this.field.name].value !== null) {
-                this.options$ = new BehaviorSubject(Array.isArray(this.group.controls[this.field.name].value) ? this.group.controls[this.field.name].value : [this.group.controls[this.field.name].value]);
-                this.isLoading = false;
-            }
-            else {
-                this.options$ = new BehaviorSubject([]);
-            }
-            this.openChangeEvent();
-        }
-        else {
-            if (this.field.options instanceof Observable) {
-                this.options$ = this.field.options;
-            }
-            else if (this.field.options instanceof Function) {
-                this.options$ = this.field.options();
-            }
-            else {
-                this.options$ = of(this.field.options);
-            }
-        }
-        this.searchControl.valueChanges.pipe(takeUntil(this._onDestroy), debounceTime(this.field.debounceTime || 0), startWith(this.searchControl.value), switchMap(value => {
-            return concat(of({ loading: true, options: [] }), this.onSearchChange(value).pipe(map((options) => ({ loading: false, options }))));
-        })).subscribe(({ loading, options }) => {
-            this.isLoading = loading;
-            this.optionsFiltered$.next(options);
-            this.ref.markForCheck();
-        });
-        if (this.field.multiple) {
-            this.group.controls[this.field.name]
-                .valueChanges.pipe(takeUntil(this._onDestroy), startWith(this.group.controls[this.field.name].value), map((selected) => (this.field.property ? selected === null || selected === void 0 ? void 0 : selected.map(s => s[this.field.property]) : selected)), switchMap(selected => {
-                return this.optionsFiltered$.pipe(map((options) => options === null || options === void 0 ? void 0 : options.filter((option) => !(option === null || option === void 0 ? void 0 : option.disabled)).map((option) => (this.field.property ? option[this.field.property] : option))), 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 === null || option === void 0 ? void 0 : 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([]);
-        }
-    }
-    openChangeEvent() {
-        this.openChange$
-            .pipe(takeUntil(this._onDestroy), switchMap((isOpen) => {
-            return this.onOpenChange(isOpen);
-        }))
-            .subscribe((options) => {
-            this.options$.next(options);
-            this.isLoading = false;
-            this.ref.markForCheck();
-        });
-    }
-    onOpenChange(isOpen) {
-        if (isOpen) {
-            if (this.field.options instanceof Observable) {
-                this.isLoading = true;
-                return this.field.options.pipe(take(1));
-            }
-            else if (this.field.options instanceof Function) {
-                this.isLoading = true;
-                return this.field.options().pipe(take(1));
-            }
-            else {
-                return of(this.field.options);
-            }
-        }
-        else {
-            return of(this.group.controls[this.field.name].value !== undefined && this.group.controls[this.field.name].value !== null
-                ? (Array.isArray(this.group.controls[this.field.name].value) ?
-                    this.group.controls[this.field.name].value : [this.group.controls[this.field.name].value]) : []);
-        }
-    }
-    onSearchChange(value) {
-        if (value) {
-            const search = value.toLowerCase();
-            return this.options$.pipe(map(options => {
-                return options
-                    .filter(option => {
-                    if (this.field.searchKeys && this.field.searchKeys.length) {
-                        return this.field.searchKeys.some(searchKey => {
-                            if (option[searchKey]) {
-                                return option[searchKey].toString().toLowerCase().indexOf(search) > -1;
-                            }
-                            return false;
-                        }) || (this.field.property ?
-                            option[this.field.property].toString().toLowerCase().indexOf(search) > -1 : false);
-                    }
-                    else {
-                        if (this.field.property) {
-                            return option[this.field.property].toString().toLowerCase().indexOf(search) > -1;
-                        }
-                    }
-                    return option.toString().toLowerCase().indexOf(search) > -1;
-                });
-            }));
-        }
-        else {
-            return this.options$;
-        }
-    }
-    openChange($event) {
-        if (this.field.lazy) {
-            this.openChange$.next($event);
-        }
-        if (this.field.virtualScroll) {
-            if ($event) {
-                this.cdkVirtualScrollViewport.scrollToIndex(0);
-                this.cdkVirtualScrollViewport.checkViewportSize();
-            }
-        }
-    }
-}
-KlesFormSelectSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormSelectSearchComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-KlesFormSelectSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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>
-                <ng-container *ngIf="!isLoading; else emptyOption">
-                    <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
-                    (change)="toggleAllSelection($event)">
-                        {{'selectAll' | translate}}
-                    </mat-checkbox>
-                    <ng-container *ngIf="!field.autocompleteComponent">
-                        <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
-
-                        <ng-container *ngIf="field.multiple">
-                            <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
-                            style="display:none">
-                                {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
-                            </mat-option>
-                        </ng-container>
-
-                        <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
-                            <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
-                                {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
-                            </mat-option>
-                        </ng-container>
-                    </ng-container>
-
-                    <ng-container *ngIf="field.autocompleteComponent">
-                        <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                        </mat-option>
-
-                        <ng-container *ngIf="field.multiple">
-                            <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
-                            style="display:none">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                            </mat-option>
-                        </ng-container>
-
-                        <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
-                            <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
-                                <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                            </mat-option>
-                        </ng-container>
-                    </ng-container>
-                </ng-container>
-                <ng-template #emptyOption>
-                    <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
-                </ng-template>
-            </cdk-virtual-scroll-viewport>
-
-        </ng-container>
-
-        <ng-container *ngIf="!field.virtualScroll">
-            <mat-option>
-                <ngx-mat-select-search [formControl]="searchControl"
-                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
-            </mat-option>
-
-            <ng-container *ngIf="!isLoading; else emptyOption">
-                <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
-                        (change)="toggleAllSelection($event)">
-                        {{'selectAll' | translate}}
-                </mat-checkbox>
-                <ng-container *ngIf="!field.autocompleteComponent">
-                    <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
-                </ng-container>
-
-                <ng-container *ngIf="field.autocompleteComponent">
-                    <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                </ng-container>
-            </ng-container>
-
-            <ng-template #emptyOption>
-                <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
-            </ng-template>
-        </ng-container>
-        </mat-select>
-
-        <div matSuffix>
-            <ng-content></ng-content>
-        </div>
-        
-        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
-                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-            </ng-container>
-            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
-                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-            </ng-container>
-    </mat-form-field>
-`, isInline: true, styles: ["mat-form-field{width:100%}\n", ".selectAll{padding:10px 16px}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i12.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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>
-                <ng-container *ngIf="!isLoading; else emptyOption">
-                    <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
-                    (change)="toggleAllSelection($event)">
-                        {{'selectAll' | translate}}
-                    </mat-checkbox>
-                    <ng-container *ngIf="!field.autocompleteComponent">
-                        <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
-
-                        <ng-container *ngIf="field.multiple">
-                            <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
-                            style="display:none">
-                                {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
-                            </mat-option>
-                        </ng-container>
-
-                        <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
-                            <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
-                                {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
-                            </mat-option>
-                        </ng-container>
-                    </ng-container>
-
-                    <ng-container *ngIf="field.autocompleteComponent">
-                        <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                        </mat-option>
-
-                        <ng-container *ngIf="field.multiple">
-                            <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
-                            style="display:none">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                            </mat-option>
-                        </ng-container>
-
-                        <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
-                            <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
-                                <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                            </mat-option>
-                        </ng-container>
-                    </ng-container>
-                </ng-container>
-                <ng-template #emptyOption>
-                    <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
-                </ng-template>
-            </cdk-virtual-scroll-viewport>
-
-        </ng-container>
-
-        <ng-container *ngIf="!field.virtualScroll">
-            <mat-option>
-                <ngx-mat-select-search [formControl]="searchControl"
-                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
-            </mat-option>
-
-            <ng-container *ngIf="!isLoading; else emptyOption">
-                <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
-                        (change)="toggleAllSelection($event)">
-                        {{'selectAll' | translate}}
-                </mat-checkbox>
-                <ng-container *ngIf="!field.autocompleteComponent">
-                    <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
-                </ng-container>
-
-                <ng-container *ngIf="field.autocompleteComponent">
-                    <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                </ng-container>
-            </ng-container>
-
-            <ng-template #emptyOption>
-                <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
-            </ng-template>
-        </ng-container>
-        </mat-select>
-
-        <div matSuffix>
-            <ng-content></ng-content>
-        </div>
-        
-        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
-                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-            </ng-container>
-            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
-                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-            </ng-container>
-    </mat-form-field>
-`, styles: ["mat-form-field{width:100%}\n", ".selectAll{padding:10px 16px}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, 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: "15.2.9", ngImport: i0, type: KlesFormLineBreakComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormLineBreakComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", 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: "15.2.9", ngImport: i0, type: ArrayFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ArrayFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ArrayFormatPipe, name: "arrayFormat" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: KlesFormLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: KlesFormSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormSlideToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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$ = this.field.options;
-        }
-        else if (this.field.options instanceof Function) {
-            this.options$ = this.field.options();
-        }
-        else {
-            this.options$ = of(this.field.options);
-        }
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-}
-KlesFormSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormSelectionListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "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: "15.2.9", 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: "15.2.9", ngImport: i0, type: KlesFormBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-KlesFormBadgeComponent = __decorate([
-    FieldMapper({ type: EnumType.badge })
-], KlesFormBadgeComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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$ = this.field.options;
-        }
-        else if (this.field.options instanceof Function) {
-            this.options$ = this.field.options();
-        }
-        else {
-            this.options$ = of(this.field.options);
-        }
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-}
-KlesFormButtonToogleGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormButtonToogleGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormButtonToogleGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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$4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$4.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: "15.2.9", 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>
-`
-                }]
-        }] });
-
-class KlesFormArray extends KlesFormControl {
-    create() {
-        const array = new FormArray([], {
-            validators: this.bindValidations(this.field.validations || []),
-            asyncValidators: this.bindAsyncValidations(this.field.asyncValidations || []),
-            updateOn: this.field.updateOn || 'change'
-        });
-        if (this.field.value && Array.isArray(this.field.value)) {
-            if (this.field.collections && Array.isArray(this.field.collections)) {
-                this.field.value.forEach(val => {
-                    const group = new FormGroup({});
-                    group.addControl('_id', new FormControl(v4()));
-                    this.field.collections.forEach(subfield => {
-                        var _a, _b;
-                        const data = val[subfield.name] || null;
-                        // const control = new KlesFormControl({ ...subfield, ...(data && { value: data }) }).create();
-                        let control;
-                        if (subfield.type) {
-                            control = ((_a = componentMapper.find(c => c.type === subfield.type)) === null || _a === void 0 ? void 0 : _a.factory(Object.assign(Object.assign({}, subfield), (data && { value: data }))))
-                                || klesFieldControlFactory(Object.assign(Object.assign({}, subfield), (data && { value: data })));
-                        }
-                        else {
-                            control = ((_b = componentMapper.find(c => c.component === subfield.component)) === null || _b === void 0 ? void 0 : _b.factory(Object.assign(Object.assign({}, subfield), (data && { value: data }))))
-                                || klesFieldControlFactory(Object.assign(Object.assign({}, subfield), (data && { value: data })));
-                        }
-                        group.addControl(subfield.name, control);
-                    });
-                    array.push(group);
-                });
-            }
-        }
-        else {
-            const group = new FormGroup({});
-            this.field.collections.forEach(subfield => {
-                var _a, _b;
-                // const control = new KlesFormControl({ ...subfield }).create();
-                let control;
-                if (subfield.type) {
-                    control = ((_a = componentMapper.find(c => c.type === subfield.type)) === null || _a === void 0 ? void 0 : _a.factory(Object.assign({}, subfield)))
-                        || klesFieldControlFactory(Object.assign({}, subfield));
-                }
-                else {
-                    control = ((_b = componentMapper.find(c => c.component === subfield.component)) === null || _b === void 0 ? void 0 : _b.factory(Object.assign({}, subfield)))
-                        || klesFieldControlFactory(Object.assign({}, subfield));
-                }
-                group.addControl(subfield.name, control);
-            });
-            array.push(group);
-        }
-        if (this.field.disabled) {
-            array.disable();
-        }
-        return array;
-    }
-}
-
-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: "15.2.9", ngImport: i0, type: KlesFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormArrayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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;">
-                    <ng-container *ngIf="subfield.visible !== false"
-                        klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
-                    </ng-container>
-                </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: 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.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, factory: (field) => (new KlesFormArray(field).create()) })
-], KlesFormArrayComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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;">
-                    <ng-container *ngIf="subfield.visible !== false"
-                        klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
-                    </ng-container>
-                </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"] }]
-        }] });
-
-class KlesFormRange extends KlesFormControl {
-    create() {
-        var _a, _b;
-        const range = new FormGroup({
-            start: new FormControl((_a = this.field.value) === null || _a === void 0 ? void 0 : _a.start),
-            end: new FormControl((_b = this.field.value) === null || _b === void 0 ? void 0 : _b.end),
-        }, {
-            validators: this.bindValidations(this.field.validations || []),
-            asyncValidators: this.bindAsyncValidations(this.field.asyncValidations || []),
-        });
-        if (this.field.disabled) {
-            range.disable();
-        }
-        return range;
-    }
-}
-
-let KlesFormRangeComponent = class KlesFormRangeComponent extends KlesFieldAbstract {
-    // range = new FormGroup({
-    //     start: new FormControl<Date | null>(null),
-    //     end: new FormControl<Date | null>(null),
-    // });
-    ngOnInit() { super.ngOnInit(); }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-};
-KlesFormRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-KlesFormRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: KlesFormRangeComponent, selector: "kles-form-rangepicker", usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field [color]="field.color" [formGroup]="group">
-
-        <mat-label>{{field.label}}</mat-label>
-
-        <mat-date-range-input [formGroupName]="field.name" [rangePicker]="picker" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
-        [min]="field.min" [max]="field.max" >
-            <input matStartDate formControlName="start" [placeholder]="(field.placeholder?.start ? field.placeholder?.start : '') | translate">
-            <input matEndDate formControlName="end" [placeholder]="(field.placeholder?.end ? field.placeholder?.end : '') | translate">
-        </mat-date-range-input>
-        
-        <div matSuffix>
-            <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
-            <ng-content></ng-content>
-        </div>
-
-        <mat-date-range-picker #picker></mat-date-range-picker>
-        <mat-hint>{{field.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, 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: 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: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$2.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$2.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
-KlesFormRangeComponent = __decorate([
-    FieldMapper({ type: EnumType.range, factory: (field) => (new KlesFormRange(field).create()) })
-], KlesFormRangeComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormRangeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "kles-form-rangepicker", template: `
-    <mat-form-field [color]="field.color" [formGroup]="group">
-
-        <mat-label>{{field.label}}</mat-label>
-
-        <mat-date-range-input [formGroupName]="field.name" [rangePicker]="picker" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
-        [min]="field.min" [max]="field.max" >
-            <input matStartDate formControlName="start" [placeholder]="(field.placeholder?.start ? field.placeholder?.start : '') | translate">
-            <input matEndDate formControlName="end" [placeholder]="(field.placeholder?.end ? field.placeholder?.end : '') | translate">
-        </mat-date-range-input>
-        
-        <div matSuffix>
-            <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
-            <ng-content></ng-content>
-        </div>
-
-        <mat-date-range-picker #picker></mat-date-range-picker>
-        <mat-hint>{{field.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>
-    `, styles: ["mat-form-field{width:100%}\n"] }]
-        }] });
-
-class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {
-    constructor(viewRef, ref) {
-        super(viewRef, ref);
-        this.viewRef = viewRef;
-        this.ref = ref;
-    }
-    ngOnInit() {
-        this.field.lazy = true;
-        this.field.debounceTime = this.field.debounceTime ? this.field.debounceTime : 500;
-        super.ngOnInit();
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-    onSearchChange(value) {
-        if (this.field.options instanceof Function) {
-            if (this.openChange$.getValue() && this.field.options instanceof Function) {
-                if (value) {
-                    return this.field.options(value).pipe(take(1));
-                }
-                else {
-                    return this.field.options().pipe(take(1));
-                }
-            }
-            return of(this.group.controls[this.field.name].value ? [this.group.controls[this.field.name].value] : []);
-        }
-        else {
-            return super.onSearchChange(value);
-        }
-    }
-    openChangeEvent() {
-        this.openChange$
-            .pipe(takeUntil(this._onDestroy), switchMap((isOpen) => {
-            return this.onOpenChange(isOpen).pipe(map((options) => ({ options, isOpen })));
-        }))
-            .subscribe(({ options, isOpen }) => {
-            if (!isOpen) {
-                this.searchControl.reset(null, { emitEvent: false });
-            }
-            this.optionsFiltered$.next(options);
-            this.isLoading = false;
-            this.ref.markForCheck();
-        });
-    }
-}
-KlesFormSelectLazySearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormSelectLazySearchComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-KlesFormSelectLazySearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: KlesFormSelectLazySearchComponent, selector: "kles-form-select-lazy-search", usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
-        <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
-        (openedChange)="openChange($event)" [compareWith]="compareFn"
-        [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
-        <mat-select-trigger *ngIf="field.triggerComponent">
-            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-        </mat-select-trigger>
-
-        <ng-container *ngIf="field.virtualScroll">
-            <mat-option>
-                <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false"
-                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
-            </mat-option>
-
-            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=4*48>
-                <ng-container *ngIf="!isLoading; else emptyOption">
-                    <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
-                    (change)="toggleAllSelection($event)">
-                        {{'selectAll' | translate}}
-                    </mat-checkbox>
-                    <ng-container *ngIf="!field.autocompleteComponent">
-                        <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
-
-                        <ng-container *ngIf="field.multiple">
-                            <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
-                            style="display:none">
-                                {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
-                            </mat-option>
-                        </ng-container>
-
-                        <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
-                            <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
-                                {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
-                            </mat-option>
-                        </ng-container>
-                    </ng-container>
-
-                    <ng-container *ngIf="field.autocompleteComponent">
-                        <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                        </mat-option>
-
-                        <ng-container *ngIf="field.multiple">
-                            <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
-                            style="display:none">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                            </mat-option>
-                        </ng-container>
-
-                        <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
-                            <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
-                                <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                            </mat-option>
-                        </ng-container>
-                    </ng-container>
-                </ng-container>
-                <ng-template #emptyOption>
-                    <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
-                </ng-template>
-            </cdk-virtual-scroll-viewport>
-
-        </ng-container>
-
-        <ng-container *ngIf="!field.virtualScroll">
-            <mat-option>
-                <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" 
-                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
-            </mat-option>
-
-            <ng-container *ngIf="!isLoading; else emptyOption">
-                <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
-                        (change)="toggleAllSelection($event)">
-                        {{'selectAll' | translate}}
-                </mat-checkbox>
-                <ng-container *ngIf="!field.autocompleteComponent">
-                    <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
-                </ng-container>
-
-                <ng-container *ngIf="field.autocompleteComponent">
-                    <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                </ng-container>
-            </ng-container>
-
-            <ng-template #emptyOption>
-                <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
-            </ng-template>
-        </ng-container>
-        </mat-select>
-
-        <div matSuffix>
-            <ng-content></ng-content>
-        </div>
-        
-        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
-                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-            </ng-container>
-            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
-                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-            </ng-container>
-    </mat-form-field>
-`, isInline: true, styles: ["mat-form-field{width:100%}\n", ".selectAll{padding:10px 16px}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i12.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesFormSelectLazySearchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kles-form-select-lazy-search', template: `
-    <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
-        <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
-        (openedChange)="openChange($event)" [compareWith]="compareFn"
-        [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
-        <mat-select-trigger *ngIf="field.triggerComponent">
-            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-        </mat-select-trigger>
-
-        <ng-container *ngIf="field.virtualScroll">
-            <mat-option>
-                <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false"
-                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
-            </mat-option>
-
-            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=4*48>
-                <ng-container *ngIf="!isLoading; else emptyOption">
-                    <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
-                    (change)="toggleAllSelection($event)">
-                        {{'selectAll' | translate}}
-                    </mat-checkbox>
-                    <ng-container *ngIf="!field.autocompleteComponent">
-                        <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
-
-                        <ng-container *ngIf="field.multiple">
-                            <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
-                            style="display:none">
-                                {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
-                            </mat-option>
-                        </ng-container>
-
-                        <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
-                            <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
-                                {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
-                            </mat-option>
-                        </ng-container>
-                    </ng-container>
-
-                    <ng-container *ngIf="field.autocompleteComponent">
-                        <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                        </mat-option>
-
-                        <ng-container *ngIf="field.multiple">
-                            <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
-                            style="display:none">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                            </mat-option>
-                        </ng-container>
-
-                        <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
-                            <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
-                                <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                            </mat-option>
-                        </ng-container>
-                    </ng-container>
-                </ng-container>
-                <ng-template #emptyOption>
-                    <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
-                </ng-template>
-            </cdk-virtual-scroll-viewport>
-
-        </ng-container>
-
-        <ng-container *ngIf="!field.virtualScroll">
-            <mat-option>
-                <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" 
-                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>
-            </mat-option>
-
-            <ng-container *ngIf="!isLoading; else emptyOption">
-                <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"
-                        (change)="toggleAllSelection($event)">
-                        {{'selectAll' | translate}}
-                </mat-checkbox>
-                <ng-container *ngIf="!field.autocompleteComponent">
-                    <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
-                </ng-container>
-
-                <ng-container *ngIf="field.autocompleteComponent">
-                    <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
-                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                    </mat-option>
-                </ng-container>
-            </ng-container>
-
-            <ng-template #emptyOption>
-                <mat-option class="hide-checkbox" disabled><div fxLayout="row" fxLayoutAlign="space-between center">{{'loading' | translate}}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div></mat-option>
-            </ng-template>
-        </ng-container>
-        </mat-select>
-
-        <div matSuffix>
-            <ng-content></ng-content>
-        </div>
-        
-        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
-                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-            </ng-container>
-            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
-                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
-            </ng-container>
-    </mat-form-field>
-`, styles: ["mat-form-field{width:100%}\n", ".selectAll{padding:10px 16px}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
-
-const components = [
-    KlesDynamicFormComponent,
-    KlesFormLabelComponent,
-    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,
-    KlesFormRangeComponent,
-    KlesFormClearComponent,
-    KlesFormSelectLazySearchComponent
-];
-const directives = [KlesDynamicFieldDirective, KlesComponentDirective];
-const pipes = [KlesTransformPipe, ArrayFormatPipe];
-class KlesMaterialDynamicformsModule {
-}
-KlesMaterialDynamicformsModule.declarations = [
-    components,
-    directives,
-    pipes
-];
-KlesMaterialDynamicformsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KlesMaterialDynamicformsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KlesMaterialDynamicformsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", 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,
-        KlesFormRangeComponent,
-        KlesFormClearComponent,
-        KlesFormSelectLazySearchComponent, 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,
-        KlesFormRangeComponent,
-        KlesFormClearComponent,
-        KlesFormSelectLazySearchComponent, KlesTransformPipe, ArrayFormatPipe, KlesDynamicFieldDirective, KlesComponentDirective, ColorPickerModule] });
-KlesMaterialDynamicformsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", 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, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormDateComponent, KlesFormErrorStateMatcher, KlesFormGroup, KlesFormGroupComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectLazySearchComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSlideToggleComponent, KlesFormSubmitButtonComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesMaterialDynamicformsModule, KlesTransformPipe, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, klesFieldControlFactory };
-//# sourceMappingURL=3kles-kles-material-dynamicforms.mjs.map