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

package/fesm5/3kles-kles-material-dynamicforms.js

@@ -1,1766 +0,0 @@
-import { __assign, __decorate, __extends, __awaiter, __generator } from 'tslib';
-import { EventEmitter, Input, Output, Component, ComponentFactoryResolver, ViewContainerRef, Directive, HostBinding, ViewChild, ViewChildren, NgModule, forwardRef, Pipe, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Validators, FormBuilder, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { Subject, Observable, of, ReplaySubject } from 'rxjs';
-import { takeUntil, startWith, switchMap, map, take } from 'rxjs/operators';
-import { CdkVirtualScrollViewport, ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
-import { MatOption, MatNativeDateModule, ErrorStateMatcher } from '@angular/material/core';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatButtonModule } from '@angular/material/button';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatListModule } from '@angular/material/list';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatChipsModule } from '@angular/material/chips';
-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 { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
-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 { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { ColorPickerModule } from 'ngx-color-picker';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { TranslateModule } from '@ngx-translate/core';
-import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
-
-var EnumType;
-(function (EnumType) {
-    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 || (EnumType = {}));
-
-var KlesDynamicFormComponent = /** @class */ (function () {
-    function KlesDynamicFormComponent(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';
-    }
-    Object.defineProperty(KlesDynamicFormComponent.prototype, "value", {
-        get: function () {
-            return this.form.value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    KlesDynamicFormComponent.prototype.ngOnInit = function () {
-        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();
-    };
-    KlesDynamicFormComponent.prototype.ngOnChanges = function (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(function (v) { return v.validator; }));
-        }
-        if (!((_c = changes.asyncValidators) === null || _c === void 0 ? void 0 : _c.firstChange) && this.form) {
-            this.form.setAsyncValidators(this.asyncValidators.map(function (v) { return 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';
-        }
-    };
-    KlesDynamicFormComponent.prototype.onSubmit = function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.form.valid) {
-            this.submit.emit(this.form.value);
-        }
-        else {
-            this.validateAllFormFields(this.form);
-        }
-    };
-    KlesDynamicFormComponent.prototype.reset = function () {
-        this.form.reset();
-    };
-    KlesDynamicFormComponent.prototype.updateForm = function () {
-        var _this = this;
-        Object.keys(this.form.controls).filter(function (key) {
-            return !_this.fields.map(function (field) { return field.name; }).includes(key);
-        }).forEach(function (key) {
-            _this.form.removeControl(key);
-        });
-        this.fields
-            .filter(function (field) { return !_this.form.controls[field.name]; })
-            .forEach(function (field) {
-            if (field.type === EnumType.lineBreak) {
-                return;
-            }
-            var control = _this.createControl(field);
-            _this.form.addControl(field.name, control);
-        });
-    };
-    KlesDynamicFormComponent.prototype.createControl = function (field) {
-        var _this = this;
-        if (field.type === EnumType.array) {
-            var array_1 = this.fb.array([]);
-            if (field.value && Array.isArray(field.value)) {
-                if (field.collections && Array.isArray(field.collections)) {
-                    field.value.forEach(function (val) {
-                        var group = _this.fb.group({});
-                        field.collections.forEach(function (subfield) {
-                            var data = val[subfield.name] || null;
-                            var control = _this.createControl(__assign(__assign({}, subfield), (data && { value: data })));
-                            group.addControl(subfield.name, control);
-                        });
-                        array_1.push(group);
-                    });
-                }
-            }
-            else {
-                var group_1 = this.fb.group({});
-                field.collections.forEach(function (subfield) {
-                    var control = _this.createControl(__assign({}, subfield));
-                    group_1.addControl(subfield.name, control);
-                });
-                array_1.push(group_1);
-            }
-            // field.value.forEach((data: any) => {
-            //     const subGroup = this.fb.group({});
-            //     field.collections.forEach(subfield => {
-            //         const control = this.createControl(subfield);
-            //         subGroup.addControl(subfield.name, control);
-            //     });
-            //     array.push(subGroup);
-            // });
-            return array_1;
-        }
-        else if (field.type === EnumType.group) {
-            var subGroup_1 = this.fb.group({});
-            if (field.collections && Array.isArray(field.collections)) {
-                field.collections.forEach(function (subfield) {
-                    var control = _this.createControl(subfield);
-                    subGroup_1.addControl(subfield.name, control);
-                });
-            }
-            return subGroup_1;
-        }
-        else {
-            var control = this.fb.control(field.value, {
-                validators: this.bindValidations(field.validations || []),
-                asyncValidators: this.bindAsyncValidations(field.asyncValidations || []),
-                updateOn: field.updateOn || 'change'
-            });
-            if (field.disabled) {
-                control.disable();
-            }
-            return control;
-        }
-    };
-    // private createControl(field: IKlesFieldConfig): AbstractControl {
-    //     if (field.type === 'listField') {
-    //         const array = this.fb.array([]);
-    //         field.value.forEach((data: any) => {
-    //             const subGroup = this.fb.group({});
-    //             field.collections.forEach(subfield => {
-    //                 const control = this.fb.control(
-    //                     data[subfield.name] ? data[subfield.name] : null,
-    //                     this.bindValidations(subfield.validations || []),
-    //                     this.bindAsyncValidations(subfield.asyncValidations || [])
-    //                 );
-    //                 subGroup.addControl(subfield.name, control);
-    //             });
-    //             array.push(subGroup);
-    //         });
-    //         return array;
-    //     } else if (field.type === 'group') {
-    //         const subGroup = this.fb.group({});
-    //         if (field.collections && Array.isArray(field.collections)) {
-    //             field.collections.forEach(subfield => {
-    //                 const control = this.fb.control(
-    //                     subfield.value,
-    //                     this.bindValidations(subfield.validations || []),
-    //                     this.bindAsyncValidations(subfield.asyncValidations || [])
-    //                 );
-    //                 if (subfield.disabled) {
-    //                     control.disable();
-    //                 }
-    //                 subGroup.addControl(subfield.name, control);
-    //             });
-    //         }
-    //         return subGroup;
-    //     } else {
-    //         const control = this.fb.control(
-    //             field.value,
-    //             this.bindValidations(field.validations || []),
-    //             this.bindAsyncValidations(field.asyncValidations || [])
-    //         );
-    //         if (field.disabled) {
-    //             control.disable();
-    //         }
-    //         return control;
-    //     }
-    // }
-    KlesDynamicFormComponent.prototype.createForm = function () {
-        var _this = this;
-        var group = this.fb.group({});
-        this.fields.forEach(function (field) {
-            if (field.type === EnumType.lineBreak) {
-                return;
-            }
-            var control = _this.createControl(field);
-            group.addControl(field.name, control);
-        });
-        group.setValidators(this.validators.map(function (v) { return v.validator; }));
-        group.setAsyncValidators(this.asyncValidators.map(function (v) { return v.validator; }));
-        return group;
-    };
-    KlesDynamicFormComponent.prototype.bindValidations = function (validations) {
-        if (validations.length > 0) {
-            var validList_1 = [];
-            validations.forEach(function (valid) {
-                validList_1.push(valid.validator);
-            });
-            return Validators.compose(validList_1);
-        }
-        return null;
-    };
-    KlesDynamicFormComponent.prototype.bindAsyncValidations = function (validations) {
-        if (validations.length > 0) {
-            var validList_2 = [];
-            validations.forEach(function (valid) {
-                validList_2.push(valid.validator);
-            });
-            return Validators.composeAsync(validList_2);
-        }
-        return null;
-    };
-    KlesDynamicFormComponent.prototype.validateAllFormFields = function (formGroup) {
-        Object.keys(formGroup.controls).forEach(function (field) {
-            var control = formGroup.get(field);
-            control.markAsTouched({ onlySelf: true });
-        });
-    };
-    KlesDynamicFormComponent.ctorParameters = function () { return [
-        { type: FormBuilder }
-    ]; };
-    __decorate([
-        Input()
-    ], KlesDynamicFormComponent.prototype, "fields", void 0);
-    __decorate([
-        Input()
-    ], KlesDynamicFormComponent.prototype, "validators", void 0);
-    __decorate([
-        Input()
-    ], KlesDynamicFormComponent.prototype, "asyncValidators", void 0);
-    __decorate([
-        Output()
-    ], KlesDynamicFormComponent.prototype, "submit", void 0);
-    __decorate([
-        Output()
-    ], KlesDynamicFormComponent.prototype, "_onLoaded", void 0);
-    __decorate([
-        Input()
-    ], KlesDynamicFormComponent.prototype, "direction", void 0);
-    KlesDynamicFormComponent = __decorate([
-        Component({
-            exportAs: 'klesDynamicForm',
-            selector: 'app-kles-dynamic-form',
-            template: "\n    <form class=\"{{orientationClass}}\" [formGroup]=\"form\" (submit)=\"onSubmit($event)\">\n        <ng-container *ngFor=\"let field of fields;\" class=\"{{orientationItemClass}}\" klesDynamicField [field]=\"field\" [group]=\"form\" [siblingFields]=\"fields\">\n        </ng-container>\n        <!--<button (click)=\"reset()\" mat-raised-button color=\"primary\">RESET</button>-->\n    </form>\n    ",
-            styles: [
-                // '.dynamic-form {display: flex; flex-direction: column;}',
-                //'.dynamic-form {display: flex;}',
-                //'.dynamic-form { width: 100%; }',
-                '.dynamic-form-column { display: flex;flex-direction: column; }',
-                '.dynamic-form-column > * { width: 100%; }',
-                '.dynamic-form-row { display: inline-flex;flex-wrap:wrap;gap:10px }',
-                '.dynamic-form-row > * { width: 100%; }',
-                '.dynamic-form-row-item { margin-right: 10px; }',
-                '.dynamic-form-column-item { margin-bottom: 10px; }']
-        })
-    ], KlesDynamicFormComponent);
-    return KlesDynamicFormComponent;
-}());
-
-var KlesComponentDirective = /** @class */ (function () {
-    function KlesComponentDirective(resolver, container) {
-        this.resolver = resolver;
-        this.container = container;
-    }
-    KlesComponentDirective.prototype.ngOnInit = function () {
-        this.buildComponent();
-    };
-    KlesComponentDirective.prototype.ngOnChanges = function (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;
-        }
-    };
-    KlesComponentDirective.prototype.buildComponent = function () {
-        var factory = this.resolver.resolveComponentFactory(this.component);
-        if (this.componentRef)
-            this.componentRef.destroy();
-        this.componentRef = this.container.createComponent(factory);
-        this.componentRef.instance.component = this.component;
-        this.componentRef.instance.value = this.value;
-        this.componentRef.instance.field = this.field;
-    };
-    KlesComponentDirective.ctorParameters = function () { return [
-        { type: ComponentFactoryResolver },
-        { type: ViewContainerRef }
-    ]; };
-    __decorate([
-        Input()
-    ], KlesComponentDirective.prototype, "component", void 0);
-    __decorate([
-        Input()
-    ], KlesComponentDirective.prototype, "value", void 0);
-    __decorate([
-        Input()
-    ], KlesComponentDirective.prototype, "field", void 0);
-    KlesComponentDirective = __decorate([
-        Directive({
-            selector: '[klesComponent]'
-        })
-    ], KlesComponentDirective);
-    return KlesComponentDirective;
-}());
-
-var KlesFieldAbstract = /** @class */ (function () {
-    function KlesFieldAbstract(viewRef) {
-        this.viewRef = viewRef;
-        this._onDestroy = new Subject();
-    }
-    KlesFieldAbstract.prototype.ngOnInit = function () {
-        var _this = this;
-        var _a;
-        // this.applyPipeTransform();
-        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(function (val) {
-            if (_this.field.valueChanges) {
-                _this.field.valueChanges(_this.field, _this.group, _this.siblingFields, val);
-            }
-            // this.applyPipeTransform();
-        });
-        if (this.field.directive) {
-            this.directive = new this.field.directive(this.viewRef, this);
-            this.directive.ngOnInit();
-        }
-    };
-    KlesFieldAbstract.prototype.ngAfterViewInit = function () {
-    };
-    KlesFieldAbstract.prototype.ngOnDestroy = function () {
-        var _a;
-        (_a = this.directive) === null || _a === void 0 ? void 0 : _a.ngOnDestroy();
-        this._onDestroy.next();
-        this._onDestroy.complete();
-    };
-    KlesFieldAbstract.prototype.applyPipeTransform = function () {
-        if (this.group && this.field) {
-            var control_1 = this.group.controls[this.field.name];
-            if (control_1) {
-                var val_1 = this.group.controls[this.field.name].value;
-                if (this.field.pipeTransform) {
-                    this.field.pipeTransform.forEach(function (p) {
-                        var pipeVal = control_1.value;
-                        if (p.options) {
-                            p.options.forEach(function (opt) {
-                                pipeVal = p.pipe.transform(val_1, opt);
-                            });
-                        }
-                        else {
-                            pipeVal = p.pipe.transform(val_1);
-                        }
-                        control_1.patchValue(pipeVal, { onlySelf: true, emitEvent: false });
-                    });
-                }
-            }
-        }
-    };
-    KlesFieldAbstract.ctorParameters = function () { return [
-        { type: ViewContainerRef }
-    ]; };
-    __decorate([
-        HostBinding('attr.klesDirective')
-    ], KlesFieldAbstract.prototype, "directive", void 0);
-    KlesFieldAbstract = __decorate([
-        Directive()
-    ], KlesFieldAbstract);
-    return KlesFieldAbstract;
-}());
-
-var KlesFormLabelComponent = /** @class */ (function (_super) {
-    __extends(KlesFormLabelComponent, _super);
-    function KlesFormLabelComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormLabelComponent.prototype.ngOnInit = function () {
-        this.group.controls[this.field.name].disable();
-        _super.prototype.ngOnInit.call(this);
-    };
-    KlesFormLabelComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormLabelComponent = __decorate([
-        Component({
-            selector: "kles-form-label",
-            template: "\n    <div [formGroup]=\"group\" >\n        <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" \n        [ngClass]=\"field.ngClass\" \n        [ngStyle]=\"{'color':'inherit'}\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\">\n    </div>\n"
-        })
-    ], KlesFormLabelComponent);
-    return KlesFormLabelComponent;
-}(KlesFieldAbstract));
-
-var KlesFormInputComponent = /** @class */ (function (_super) {
-    __extends(KlesFormInputComponent, _super);
-    function KlesFormInputComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormInputComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        if (this.field.options instanceof Observable) {
-            this.options$ = this.field.options;
-        }
-        else {
-            this.options$ = of(this.field.options);
-        }
-        this.filteredOption = this.group.get(this.field.name).valueChanges
-            .pipe(startWith(''), 
-        // map(data => data ? this.filterData(data) : this.field.options.slice())
-        switchMap(function (data) { return data ? _this.filterData(data) : _this.options$; }));
-        if (!this.field.maxLength) {
-            this.field.maxLength = 524288; // Max default input W3C
-        }
-        _super.prototype.ngOnInit.call(this);
-    };
-    KlesFormInputComponent.prototype.isPending = function () {
-        return (this.group.controls[this.field.name].pending || this.field.pending);
-    };
-    KlesFormInputComponent.prototype.filterData = function (value) {
-        var _this = this;
-        var 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(function (options) { return options.filter(function (option) { return 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(function (options) { return options.filter(function (option) { return option.toLowerCase().indexOf(filterValue) === 0; }); }));
-    };
-    KlesFormInputComponent.prototype.displayFn = function (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 : '';
-        }
-    };
-    KlesFormInputComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormInputComponent = __decorate([
-        Component({
-            selector: 'kles-form-input',
-            template: "\n    <mat-form-field [formGroup]=\"group\" [color]=\"field.color\" class=\"form-element\">\n\n        <ng-container *ngIf=\"field.autocomplete; else notAutoComplete\">\n            <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\" \n            [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\"\n            [matAutocomplete]=\"auto\">\n\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\" [panelWidth]=\"this.field.panelWidth\">\n                <ng-container *ngIf=\"!field.autocompleteComponent\">\n                    <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n                        {{field.property ? option[field.property] : option}}\n                    </mat-option>\n                </ng-container>\n\n                <ng-container *ngIf=\"field.autocompleteComponent\">\n                    <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"option\" [field]=\"field\">\n                        </ng-container>\n                    </mat-option>\n                </ng-container>\n            </mat-autocomplete>\n        </ng-container>\n\n        <ng-template #notAutoComplete>\n            <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\"\n            [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\">\n        </ng-template>\n\n        <mat-spinner matSuffix mode=\"indeterminate\" *ngIf=\"isPending()\" diameter=\"17\"></mat-spinner>\n\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ",
-            styles: ['mat-form-field {width: calc(100%)}']
-        })
-    ], KlesFormInputComponent);
-    return KlesFormInputComponent;
-}(KlesFieldAbstract));
-
-var KlesFormSubmitButtonComponent = /** @class */ (function (_super) {
-    __extends(KlesFormSubmitButtonComponent, _super);
-    function KlesFormSubmitButtonComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormSubmitButtonComponent.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-    };
-    KlesFormSubmitButtonComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormSubmitButtonComponent = __decorate([
-        Component({
-            selector: 'kles-submit-button',
-            template: "\n    <div [formGroup]=\"group\">\n        <button matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" type=\"submit\" [disabled]=\"field.disabled\" mat-raised-button color=\"primary\">{{field.label}}</button>\n    </div>\n    "
-        })
-    ], KlesFormSubmitButtonComponent);
-    return KlesFormSubmitButtonComponent;
-}(KlesFieldAbstract));
-
-var KlesFormSelectComponent = /** @class */ (function (_super) {
-    __extends(KlesFormSelectComponent, _super);
-    function KlesFormSelectComponent(viewRef) {
-        var _this = _super.call(this, viewRef) || this;
-        _this.viewRef = viewRef;
-        _this.compareFn = function (o1, o2) {
-            if (_this.field.property && o1 && o2) {
-                return o1[_this.field.property] === o2[_this.field.property];
-            }
-            return o1 === o2;
-        };
-        return _this;
-    }
-    KlesFormSelectComponent.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-        if (!(this.field.options instanceof Observable)) {
-            this.options$ = of(this.field.options);
-        }
-        else {
-            this.options$ = this.field.options;
-        }
-    };
-    KlesFormSelectComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormSelectComponent.prototype.openChange = function ($event) {
-        if (this.field.virtualScroll) {
-            if ($event) {
-                this.cdkVirtualScrollViewport.scrollToIndex(0);
-                this.cdkVirtualScrollViewport.checkViewportSize();
-            }
-        }
-    };
-    KlesFormSelectComponent.ctorParameters = function () { return [
-        { type: ViewContainerRef }
-    ]; };
-    __decorate([
-        ViewChild(CdkVirtualScrollViewport)
-    ], KlesFormSelectComponent.prototype, "cdkVirtualScrollViewport", void 0);
-    __decorate([
-        ViewChildren(MatOption)
-    ], KlesFormSelectComponent.prototype, "options", void 0);
-    KlesFormSelectComponent = __decorate([
-        Component({
-            selector: 'kles-form-select',
-            template: "\n    <mat-form-field class=\"margin-top\" [color]=\"field.color\" [formGroup]=\"group\">\n        <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\"\n        (openedChange)=\"openChange($event)\" [compareWith]=\"compareFn\"\n        [ngClass]=\"field.ngClass\" [placeholder]=\"field.placeholder | translate\" [formControlName]=\"field.name\" [multiple]=\"field.multiple\">\n        <mat-select-trigger *ngIf=\"field.triggerComponent\">\n            <ng-container klesComponent [component]=\"field.triggerComponent\" [value]=\"group.controls[field.name].value\" [field]=\"field\"></ng-container>\n        </mat-select-trigger>\n\n\n        <ng-container *ngIf=\"!field.virtualScroll\">\n            <ng-container *ngIf=\"!field.autocompleteComponent\">\n                <mat-option *ngFor=\"let item of options$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n            </ng-container>\n\n            <ng-container *ngIf=\"field.autocompleteComponent\">\n                <mat-option *ngFor=\"let item of options$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">\n                    <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                </mat-option>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"field.virtualScroll\">\n            <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize || 50\" [style.height.px]=5*48>\n                <ng-container *ngIf=\"!field.autocompleteComponent\">\n                    <mat-option *cdkVirtualFor=\"let item of options$ | async\" [value]=\"item\"  [disabled]=\"item?.disabled\">\n                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                    </mat-option>\n\n                    <ng-container *ngIf=\"field.multiple\">\n                        <mat-option *ngFor=\"let item of group.controls[field.name].value | slice:0:30\" [value]=\"item\"\n                        style=\"display:none\">\n                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                        </mat-option>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!field.multiple && group.controls[field.name].value\">\n                    <mat-option *ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"field.autocompleteComponent\">\n                    <mat-option *cdkVirtualFor=\"let item of options$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                    </mat-option>\n                    <ng-container *ngIf=\"field.multiple\">\n                        <mat-option *ngFor=\"let item of group.controls[field.name].value | slice:0:30\" [value]=\"item\"\n                        style=\"display:none\">\n                            <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                    <ng-container *ngIf=\"!field.multiple && group.controls[field.name].value\">\n                        <mat-option *ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n                            <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n\n        </ng-container>\n\n        </mat-select>\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n            <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n    </mat-form-field>\n",
-            styles: ['mat-form-field {width: calc(100%)}']
-        })
-    ], KlesFormSelectComponent);
-    return KlesFormSelectComponent;
-}(KlesFieldAbstract));
-
-var KlesFormDateComponent = /** @class */ (function (_super) {
-    __extends(KlesFormDateComponent, _super);
-    function KlesFormDateComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormDateComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
-    KlesFormDateComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormDateComponent = __decorate([
-        Component({
-            selector: "kles-form-datepicker",
-            template: "\n    <mat-form-field class=\"demo-full-width margin-top\" [color]=\"field.color\" [formGroup]=\"group\">\n        <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [matDatepicker]=\"picker\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\">\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-hint></mat-hint>\n        \n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        </mat-form-field>\n    "
-        })
-    ], KlesFormDateComponent);
-    return KlesFormDateComponent;
-}(KlesFieldAbstract));
-
-var KlesFormRadioComponent = /** @class */ (function (_super) {
-    __extends(KlesFormRadioComponent, _super);
-    function KlesFormRadioComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormRadioComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
-    KlesFormRadioComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormRadioComponent = __decorate([
-        Component({
-            selector: 'kles-form-radiobutton',
-            template: "\n    <div [formGroup]=\"group\">\n        <label class=\"radio-label-padding\">{{field.label}}</label>\n        <mat-radio-group matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\">\n            <mat-radio-button *ngFor=\"let item of field.options\" [value]=\"item\">{{item}}</mat-radio-button>\n        </mat-radio-group>\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n            <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n    </div>\n"
-        })
-    ], KlesFormRadioComponent);
-    return KlesFormRadioComponent;
-}(KlesFieldAbstract));
-
-var KlesFormCheckboxComponent = /** @class */ (function (_super) {
-    __extends(KlesFormCheckboxComponent, _super);
-    function KlesFormCheckboxComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormCheckboxComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
-    KlesFormCheckboxComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormCheckboxComponent = __decorate([
-        Component({
-            selector: "kles-form-checkbox",
-            template: "\n    <div [formGroup]=\"group\" >  \n        <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>\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n        </ng-container>\n    </div>\n"
-        })
-    ], KlesFormCheckboxComponent);
-    return KlesFormCheckboxComponent;
-}(KlesFieldAbstract));
-
-var KlesFormListFieldComponent = /** @class */ (function (_super) {
-    __extends(KlesFormListFieldComponent, _super);
-    function KlesFormListFieldComponent(fb, viewRef) {
-        var _this = _super.call(this, viewRef) || this;
-        _this.fb = fb;
-        _this.viewRef = viewRef;
-        return _this;
-    }
-    KlesFormListFieldComponent.prototype.ngOnInit = function () {
-        this.formArray = this.group.controls[this.field.name];
-        _super.prototype.ngOnInit.call(this);
-    };
-    KlesFormListFieldComponent.prototype.createFormGroup = function () {
-        var _this = this;
-        var group = this.fb.group({});
-        this.field.collections.forEach(function (item) {
-            var control = _this.fb.control(null, _this.bindValidations(item.validations || []), _this.bindAsyncValidations(item.asyncValidations || []));
-            group.addControl(item.name, control);
-        });
-        return group;
-    };
-    KlesFormListFieldComponent.prototype.deleteField = function (index) {
-        this.formArray.removeAt(index);
-    };
-    KlesFormListFieldComponent.prototype.addField = function () {
-        this.formArray.push(this.createFormGroup());
-    };
-    KlesFormListFieldComponent.prototype.bindValidations = function (validations) {
-        if (validations.length > 0) {
-            var validList_1 = [];
-            validations.forEach(function (valid) {
-                validList_1.push(valid.validator);
-            });
-            return Validators.compose(validList_1);
-        }
-        return null;
-    };
-    KlesFormListFieldComponent.prototype.bindAsyncValidations = function (validations) {
-        if (validations.length > 0) {
-            var validList_2 = [];
-            validations.forEach(function (valid) {
-                validList_2.push(valid.validator);
-            });
-            return Validators.composeAsync(validList_2);
-        }
-        return null;
-    };
-    KlesFormListFieldComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormListFieldComponent.ctorParameters = function () { return [
-        { type: FormBuilder },
-        { type: ViewContainerRef }
-    ]; };
-    KlesFormListFieldComponent = __decorate([
-        Component({
-            selector: 'kles-form-listfield',
-            template: "\n    <div [formGroup]=\"group\" class=\"form-element\">\n        {{field.label | translate}}\n        <button mat-icon-button color=\"primary\" (click)=\"addField()\">\n            <mat-icon>add</mat-icon>\n        </button>\n\n        <div class=\"dynamic-form\" [formGroupName]=\"field.name\">\n            <div *ngFor=\"let subGroup of formArray.controls let index = index;\" fxLayout=\"row\" fxLayoutGap=\"5px\">\n                <ng-container *ngFor=\"let subfield of field.collections;\"\n                    dynamicField [field]=\"subfield\" [group]=\"subGroup\">\n                </ng-container>\n                <button mat-icon-button (click)=\"deleteField(index)\" color=\"primary\">\n                    <mat-icon>delete_outlined</mat-icon>\n                </button>\n            </div>\n            <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n            <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n        </div>\n    </div>\n    "
-        })
-    ], KlesFormListFieldComponent);
-    return KlesFormListFieldComponent;
-}(KlesFieldAbstract));
-
-var KlesFormColorComponent = /** @class */ (function (_super) {
-    __extends(KlesFormColorComponent, _super);
-    function KlesFormColorComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormColorComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
-    KlesFormColorComponent.prototype.invertColor = function (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';
-        }
-        var r = parseInt(hex.slice(0, 2), 16);
-        var g = parseInt(hex.slice(2, 4), 16);
-        var 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
-        var r1 = (255 - r).toString(16);
-        var g1 = (255 - g).toString(16);
-        var b1 = (255 - b).toString(16);
-        // pad each with zeros and return
-        return "#" + r1 + g1 + b1;
-    };
-    KlesFormColorComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormColorComponent = __decorate([
-        Component({
-            selector: 'kles-form-color',
-            template: "\n    <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n        <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [placeholder]=\"field.placeholder | translate\"\n            [colorPicker]=\"group.get(field.name).value\"\n            [value]=\"group.get(field.name).value\"\n            (colorPickerChange)=\"group.get(field.name).setValue($event)\"\n            class=\"colorPicker\"\n            [style.background]=\"group.get(field.name).value\"\n            [style.color]=\"invertColor(group.get(field.name).value,true)\"\n            [formControlName]=\"field.name\">\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ",
-            styles: ['mat-form-field {width: calc(100%)}']
-        })
-    ], KlesFormColorComponent);
-    return KlesFormColorComponent;
-}(KlesFieldAbstract));
-
-var KlesFormChipComponent = /** @class */ (function (_super) {
-    __extends(KlesFormChipComponent, _super);
-    function KlesFormChipComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormChipComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
-    KlesFormChipComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormChipComponent = __decorate([
-        Component({
-            selector: "kles-form-chip",
-            template: "\n    <div [formGroup]=\"group\">  \n        <mat-chip-list>\n            <mat-chip [color]=\"field.color\" matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" selected [ngClass]=\"field.ngClass\" [ngStyle]=\"field.ngStyle\">\n                <mat-icon *ngIf=\"field.icon\">{{field.icon}}</mat-icon>\n                {{group.controls[field.name].value | klesTransform:field.pipeTransform}}\n            </mat-chip>\n        </mat-chip-list>\n    </div>\n"
-        })
-    ], KlesFormChipComponent);
-    return KlesFormChipComponent;
-}(KlesFieldAbstract));
-
-var KlesFormGroupComponent = /** @class */ (function (_super) {
-    __extends(KlesFormGroupComponent, _super);
-    function KlesFormGroupComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormGroupComponent.prototype.ngOnInit = function () {
-        this.subGroup = this.group.controls[this.field.name];
-        _super.prototype.ngOnInit.call(this);
-    };
-    KlesFormGroupComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormGroupComponent = __decorate([
-        Component({
-            selector: 'kles-group',
-            template: "\n    <div [formGroup]=\"group\" class=\"group-container\">\n        <div [formGroupName]=\"field.name\" class=\"group-container\" [style.flex-direction]=\"field.direction || 'inherit'\" [ngClass]=\"field.ngClass\"\n        [ngClass]=\"field.direction === 'column' ? null: 'row'\" >\n            <ng-container *ngFor=\"let subfield of field.collections;\" klesDynamicField [field]=\"subfield\" [group]=\"subGroup\" [siblingFields]=\"field.collections\">\n            </ng-container>\n        </div>\n    </div>\n",
-            styles: ['mat-form-field {width: calc(100%)}',
-                ':host { display:flex; flex-direction: inherit}',
-                // '.row { gap:10px;}',
-                // '.group-container {display:flex; flex-direction: inherit; width: inherit; flex-wrap: wrap}'
-                '.group-container {display:flex; flex-direction: inherit; width: inherit;}']
-        })
-    ], KlesFormGroupComponent);
-    return KlesFormGroupComponent;
-}(KlesFieldAbstract));
-
-var KlesFormIconComponent = /** @class */ (function (_super) {
-    __extends(KlesFormIconComponent, _super);
-    function KlesFormIconComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormIconComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
-    KlesFormIconComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormIconComponent = __decorate([
-        Component({
-            selector: "kles-form-icon",
-            template: "\n        <mat-icon [color]=\"field.color\" matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [ngStyle]=\"field.ngStyle\">\n            {{group.controls[field.name].value}}\n        </mat-icon>\n"
-        })
-    ], KlesFormIconComponent);
-    return KlesFormIconComponent;
-}(KlesFieldAbstract));
-
-var KlesFormSelectSearchComponent = /** @class */ (function (_super) {
-    __extends(KlesFormSelectSearchComponent, _super);
-    function KlesFormSelectSearchComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.searchControl = new FormControl();
-        _this.selectAllControl = new FormControl(false);
-        _this.optionsFiltered$ = new ReplaySubject(1);
-        _this.compareFn = function (o1, o2) {
-            if (_this.field.property && o1 && o2) {
-                return o1[_this.field.property] === o2[_this.field.property];
-            }
-            return o1 === o2;
-        };
-        return _this;
-    }
-    KlesFormSelectSearchComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        _super.prototype.ngOnInit.call(this);
-        if (!(this.field.options instanceof Observable)) {
-            this.options$ = of(this.field.options);
-        }
-        else {
-            this.options$ = this.field.options;
-        }
-        this.searchControl.valueChanges.pipe(startWith(this.searchControl.value), takeUntil(this._onDestroy), switchMap(function (value) {
-            if (value) {
-                var search_1 = value.toLowerCase();
-                return _this.options$.pipe(map(function (options) {
-                    return options
-                        .filter(function (option) {
-                        if (_this.field.searchKeys && _this.field.searchKeys.length) {
-                            return _this.field.searchKeys.some(function (searchKey) {
-                                if (option[searchKey]) {
-                                    return option[searchKey].toString().toLowerCase().indexOf(search_1) > -1;
-                                }
-                                return false;
-                            }) || (_this.field.property ?
-                                option[_this.field.property].toString().toLowerCase().indexOf(search_1) > -1 : false);
-                        }
-                        else {
-                            if (_this.field.property) {
-                                return option[_this.field.property].toString().toLowerCase().indexOf(search_1) > -1;
-                            }
-                        }
-                        return option.toString().toLowerCase().indexOf(search_1) > -1;
-                    });
-                }));
-            }
-            else {
-                return _this.options$;
-            }
-        })).subscribe(this.optionsFiltered$);
-        this.group.controls[this.field.name]
-            .valueChanges.pipe(takeUntil(this._onDestroy), startWith(this.group.controls[this.field.name].value), switchMap(function (selected) {
-            return _this.optionsFiltered$.pipe(map(function (options) { return options.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.disabled); }); }), map(function (options) {
-                if (!selected) {
-                    return false;
-                }
-                if (options.length < selected.length) {
-                    return options.length > 0 && options.every(function (o) { return selected.includes(o); });
-                }
-                else {
-                    return options.length > 0 && options.length === selected.length && selected.every(function (s) { return options.includes(s); });
-                }
-            }));
-        })).subscribe(function (isChecked) {
-            _this.selectAllControl.setValue(isChecked);
-        });
-    };
-    KlesFormSelectSearchComponent.prototype.ngOnDestroy = function () {
-        // this._onDestroy.next();
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormSelectSearchComponent.prototype.toggleAllSelection = function (state) {
-        var _this = this;
-        if (state.checked) {
-            this.optionsFiltered$.pipe(take(1), map(function (options) { return options.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.disabled); }); })).subscribe(function (options) {
-                if (options.length > 0) {
-                    _this.group.controls[_this.field.name].patchValue(options.slice());
-                }
-            });
-        }
-        else {
-            this.group.controls[this.field.name].patchValue([]);
-        }
-    };
-    KlesFormSelectSearchComponent.prototype.openChange = function ($event) {
-        if (this.field.virtualScroll) {
-            if ($event) {
-                this.cdkVirtualScrollViewport.scrollToIndex(0);
-                this.cdkVirtualScrollViewport.checkViewportSize();
-            }
-        }
-    };
-    __decorate([
-        ViewChild(CdkVirtualScrollViewport)
-    ], KlesFormSelectSearchComponent.prototype, "cdkVirtualScrollViewport", void 0);
-    __decorate([
-        ViewChildren(MatOption)
-    ], KlesFormSelectSearchComponent.prototype, "options", void 0);
-    KlesFormSelectSearchComponent = __decorate([
-        Component({
-            selector: 'kles-form-select-search',
-            template: "\n    <mat-form-field class=\"margin-top\" [color]=\"field.color\" [formGroup]=\"group\">\n        <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\"\n        (openedChange)=\"openChange($event)\" [compareWith]=\"compareFn\"\n        [placeholder]=\"field.placeholder | translate\" [formControlName]=\"field.name\" [multiple]=\"field.multiple\">\n        <mat-select-trigger *ngIf=\"field.triggerComponent\">\n            <ng-container klesComponent [component]=\"field.triggerComponent\" [value]=\"group.controls[field.name].value\" [field]=\"field\"></ng-container>\n        </mat-select-trigger>\n\n        <ng-container *ngIf=\"field.virtualScroll\">\n            <mat-option>\n                <ngx-mat-select-search [formControl]=\"searchControl\"\n                placeholderLabel=\"\" noEntriesFoundLabel =\"\"></ngx-mat-select-search>\n            </mat-option>\n                \n            <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize || 50\" [style.height.px]=4*48>\n                <mat-checkbox *ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n                (change)=\"toggleAllSelection($event)\">\n                    {{'selectAll' | translate}}\n                </mat-checkbox>\n                <ng-container *ngIf=\"!field.autocompleteComponent\">\n                    <mat-option *cdkVirtualFor=\"let item of optionsFiltered$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n                    \n                    <ng-container *ngIf=\"field.multiple\">\n                        <mat-option *ngFor=\"let item of group.controls[field.name].value | slice:0:30\" [value]=\"item\"\n                        style=\"display:none\">\n                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                        </mat-option>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!field.multiple && group.controls[field.name].value\">\n                        <mat-option *ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"field.autocompleteComponent\">\n                    <mat-option *cdkVirtualFor=\"let item of optionsFiltered$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                    </mat-option>\n\n                    <ng-container *ngIf=\"field.multiple\">\n                        <mat-option *ngFor=\"let item of group.controls[field.name].value | slice:0:30\" [value]=\"item\"\n                        style=\"display:none\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                        </mat-option>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!field.multiple && group.controls[field.name].value\">\n                        <mat-option *ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n                            <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!field.virtualScroll\">\n           \n            <mat-option>\n                <ngx-mat-select-search [formControl]=\"searchControl\"\n                placeholderLabel=\"\" noEntriesFoundLabel =\"\"></ngx-mat-select-search>\n            </mat-option>\n            \n            <mat-checkbox *ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n                    (change)=\"toggleAllSelection($event)\">\n                    {{'selectAll' | translate}}\n            </mat-checkbox>\n\n            <ng-container *ngIf=\"!field.autocompleteComponent\">\n                <mat-option *ngFor=\"let item of optionsFiltered$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n            </ng-container>\n\n            <ng-container *ngIf=\"field.autocompleteComponent\">\n                <mat-option *ngFor=\"let item of optionsFiltered$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">\n                    <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                </mat-option>\n            </ng-container>\n        </ng-container>\n\n\n        </mat-select>\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n            <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n    </mat-form-field>\n",
-            styles: ['mat-form-field {width: calc(100%)}', '.selectAll {padding: 10px 16px;}']
-        })
-    ], KlesFormSelectSearchComponent);
-    return KlesFormSelectSearchComponent;
-}(KlesFieldAbstract));
-
-var KlesFormLineBreakComponent = /** @class */ (function (_super) {
-    __extends(KlesFormLineBreakComponent, _super);
-    function KlesFormLineBreakComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormLineBreakComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
-    KlesFormLineBreakComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormLineBreakComponent = __decorate([
-        Component({
-            selector: "kles-form-line-break",
-            template: "",
-            styles: [":host{\n            flex-basis: 100%;\n            display: flex;\n            height:0;\n        }"]
-        })
-    ], KlesFormLineBreakComponent);
-    return KlesFormLineBreakComponent;
-}(KlesFieldAbstract));
-
-var KlesFormLinkComponent = /** @class */ (function (_super) {
-    __extends(KlesFormLinkComponent, _super);
-    function KlesFormLinkComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormLinkComponent.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-    };
-    KlesFormLinkComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormLinkComponent = __decorate([
-        Component({
-            selector: 'kles-form-link',
-            template: "\n        <a [href]=\"group.controls[field.name].value\" matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n            {{field.label}}\n        </a>\n"
-        })
-    ], KlesFormLinkComponent);
-    return KlesFormLinkComponent;
-}(KlesFieldAbstract));
-
-var KlesFormSelectionListComponent = /** @class */ (function (_super) {
-    __extends(KlesFormSelectionListComponent, _super);
-    function KlesFormSelectionListComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormSelectionListComponent.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-        if (!(this.field.options instanceof Observable)) {
-            this.options$ = of(this.field.options);
-        }
-        else {
-            this.options$ = this.field.options;
-        }
-    };
-    KlesFormSelectionListComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormSelectionListComponent = __decorate([
-        Component({
-            selector: 'kles-form-selection-list',
-            template: "\n    <div class=\"margin-top\" [formGroup]=\"group\">\n        <mat-selection-list [formControlName]=\"field.name\" [attr.id]=\"field.id\" [multiple]=\"field.multiple\" [ngClass]=\"field.ngClass\">\n            <ng-container *ngIf=\"!field.autocompleteComponent\">\n                <mat-list-option [value]=\"item\" *ngFor=\"let item of options$ | async;\">\n                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                </mat-list-option>\n            </ng-container>\n\n            <ng-container *ngIf=\"field.autocompleteComponent\">\n                <mat-list-option  *ngFor=\"let item of options$ | async;\" [value]=\"item\">\n                    <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                </mat-list-option>\n            </ng-container>\n        </mat-selection-list>\n    </div>\n",
-            styles: ['mat-selection-list {width: calc(100%);height: 250px; overflow:auto}']
-        })
-    ], KlesFormSelectionListComponent);
-    return KlesFormSelectionListComponent;
-}(KlesFieldAbstract));
-
-var KlesFormButtonToogleGroupComponent = /** @class */ (function (_super) {
-    __extends(KlesFormButtonToogleGroupComponent, _super);
-    function KlesFormButtonToogleGroupComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormButtonToogleGroupComponent.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-        if (!(this.field.options instanceof Observable)) {
-            this.options$ = of(this.field.options);
-        }
-        else {
-            this.options$ = this.field.options;
-        }
-    };
-    KlesFormButtonToogleGroupComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormButtonToogleGroupComponent = __decorate([
-        Component({
-            selector: 'kles-form-button-toogle-group',
-            template: "\n        <div [formGroup]=\"group\" class=\"form-element\">\n            <mat-button-toggle-group [formControlName]=\"field.name\" [multiple]=\"field.multiple\"\n            [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n                <mat-button-toggle *ngFor=\"let item of options$ | async\" [value]=\"item\">\n                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                </mat-button-toggle>\n            </mat-button-toggle-group>\n        </div>\n"
-        })
-    ], KlesFormButtonToogleGroupComponent);
-    return KlesFormButtonToogleGroupComponent;
-}(KlesFieldAbstract));
-
-var KlesFormArrayComponent = /** @class */ (function (_super) {
-    __extends(KlesFormArrayComponent, _super);
-    function KlesFormArrayComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormArrayComponent.prototype.ngOnInit = function () {
-        // this.subGroup = this.group.controls[this.field.name] as FormGroup;
-        _super.prototype.ngOnInit.call(this);
-        this.formArray = this.group.controls[this.field.name];
-    };
-    KlesFormArrayComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormArrayComponent = __decorate([
-        Component({
-            selector: 'kles-array',
-            template: "\n    <div [formGroup]=\"group\">\n        <ng-container [formArrayName]=\"field.name\">\n            <div class=\"group-container\" *ngFor=\"let subGroup of formArray.controls let index = index;\"\n            [ngClass]=\"field.direction === 'column' ? 'column': 'row'\">\n                <ng-container *ngFor=\"let subfield of field.collections;\"\n                    klesDynamicField [field]=\"subfield\" [group]=\"subGroup\" [siblingFields]=\"field.collections\">\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n",
-            styles: ['mat-form-field {width: calc(100%)}',
-                ':host { display:flex; flex-direction: inherit}',
-                '.group-container {display:flex; flex-direction: inherit}',
-                '.row { gap:10px; flex-direction: row }',
-                '.column { flex-direction: column, gap:0px}']
-        })
-    ], KlesFormArrayComponent);
-    return KlesFormArrayComponent;
-}(KlesFieldAbstract));
-
-var componentMapper = {
-    label: KlesFormLabelComponent,
-    input: KlesFormInputComponent,
-    button: KlesFormSubmitButtonComponent,
-    select: KlesFormSelectComponent,
-    date: KlesFormDateComponent,
-    radio: KlesFormRadioComponent,
-    checkbox: KlesFormCheckboxComponent,
-    listField: KlesFormListFieldComponent,
-    array: KlesFormArrayComponent,
-    color: KlesFormColorComponent,
-    chip: KlesFormChipComponent,
-    group: KlesFormGroupComponent,
-    icon: KlesFormIconComponent,
-    selectSearch: KlesFormSelectSearchComponent,
-    lineBreak: KlesFormLineBreakComponent,
-    link: KlesFormLinkComponent,
-    selectionList: KlesFormSelectionListComponent,
-    buttonToogleGroup: KlesFormButtonToogleGroupComponent
-};
-var KlesDynamicFieldDirective = /** @class */ (function () {
-    function KlesDynamicFieldDirective(resolver, container) {
-        this.resolver = resolver;
-        this.container = container;
-    }
-    KlesDynamicFieldDirective.prototype.ngOnDestroy = function () {
-        if (this.componentRef)
-            this.componentRef.destroy();
-    };
-    KlesDynamicFieldDirective.prototype.ngOnInit = function () {
-        this.buildComponent();
-    };
-    KlesDynamicFieldDirective.prototype.ngOnChanges = function (changes) {
-        if (changes.group) {
-            this.group = changes.group.currentValue;
-        }
-        if (changes.field) {
-            // if (changes.field.previousValue && changes.field.currentValue.component !== changes.field.previousValue.component) {
-            this.field = changes.field.currentValue;
-            this.buildComponent();
-            // } else {
-            //     this.field = changes.field.currentValue;
-            // }
-        }
-    };
-    KlesDynamicFieldDirective.prototype.buildComponent = function () {
-        var factory = this.resolver.resolveComponentFactory(this.field.component || componentMapper[this.field.type]);
-        if (this.componentRef)
-            this.componentRef.destroy();
-        this.componentRef = this.container.createComponent(factory);
-        this.componentRef.instance.field = this.field;
-        this.componentRef.instance.group = this.group;
-        this.componentRef.instance.siblingFields = this.siblingFields;
-    };
-    KlesDynamicFieldDirective.ctorParameters = function () { return [
-        { type: ComponentFactoryResolver },
-        { type: ViewContainerRef }
-    ]; };
-    __decorate([
-        Input()
-    ], KlesDynamicFieldDirective.prototype, "field", void 0);
-    __decorate([
-        Input()
-    ], KlesDynamicFieldDirective.prototype, "group", void 0);
-    __decorate([
-        Input()
-    ], KlesDynamicFieldDirective.prototype, "siblingFields", void 0);
-    KlesDynamicFieldDirective = __decorate([
-        Directive({
-            selector: '[klesDynamicField]'
-        })
-    ], KlesDynamicFieldDirective);
-    return KlesDynamicFieldDirective;
-}());
-
-var KlesFormErrorStateMatcher = /** @class */ (function () {
-    function KlesFormErrorStateMatcher() {
-    }
-    KlesFormErrorStateMatcher.prototype.isErrorState = function (control, form) {
-        var isSubmitted = form && form.submitted;
-        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
-    };
-    return KlesFormErrorStateMatcher;
-}());
-
-var MaterialModule = /** @class */ (function () {
-    function MaterialModule() {
-    }
-    MaterialModule = __decorate([
-        NgModule({
-            imports: [
-                CommonModule,
-                MatSliderModule,
-                MatButtonModule,
-                MatToolbarModule,
-                MatIconModule,
-                MatSidenavModule,
-                MatBadgeModule,
-                MatListModule,
-                MatGridListModule,
-                MatFormFieldModule,
-                MatInputModule,
-                MatSelectModule,
-                MatRadioModule,
-                MatDatepickerModule,
-                MatChipsModule,
-                MatTooltipModule,
-                MatTableModule,
-                MatPaginatorModule,
-                MatCardModule,
-                MatMenuModule,
-                MatTabsModule,
-                CdkTableModule,
-                MatProgressSpinnerModule,
-                MatCheckboxModule,
-                MatDialogModule,
-                MatAutocompleteModule,
-                MatProgressBarModule,
-                MatSortModule,
-                MatExpansionModule,
-                MatNativeDateModule,
-                MatSnackBarModule,
-                MatTreeModule,
-                MatSliderModule,
-                MatButtonModule,
-                MatSlideToggleModule,
-                ColorPickerModule,
-                MatButtonToggleModule
-            ],
-            exports: [
-                MatButtonModule,
-                MatToolbarModule,
-                MatIconModule,
-                MatSidenavModule,
-                MatBadgeModule,
-                MatListModule,
-                MatGridListModule,
-                MatInputModule,
-                MatFormFieldModule,
-                MatSelectModule,
-                MatRadioModule,
-                MatDatepickerModule,
-                MatChipsModule,
-                MatTooltipModule,
-                MatTableModule,
-                MatPaginatorModule,
-                MatCardModule,
-                MatMenuModule,
-                MatTabsModule,
-                CdkTableModule,
-                MatProgressSpinnerModule,
-                MatCheckboxModule,
-                MatDialogModule,
-                MatAutocompleteModule,
-                MatProgressBarModule,
-                MatSortModule,
-                MatExpansionModule,
-                MatNativeDateModule,
-                MatSnackBarModule,
-                MatTreeModule,
-                MatSliderModule,
-                MatButtonModule,
-                MatSlideToggleModule,
-                ColorPickerModule,
-                ScrollingModule,
-                CdkScrollable,
-                MatButtonToggleModule
-            ],
-            providers: [
-                MatDatepickerModule,
-                MatDialogModule
-            ]
-        })
-    ], MaterialModule);
-    return MaterialModule;
-}());
-
-var KlesButtonComponent = /** @class */ (function () {
-    function KlesButtonComponent() {
-        this.name = '';
-        this.label = '';
-        this.color = 'accent';
-        this.icon = '';
-        this.iconSvg = '';
-        this.disabled = false;
-        this.classButton = '';
-        this.value = {};
-        this.onChange = function () { };
-        this.onTouched = function () { };
-    }
-    KlesButtonComponent_1 = KlesButtonComponent;
-    KlesButtonComponent.prototype.ngOnInit = function () {
-    };
-    KlesButtonComponent.prototype.click = function (event) {
-        this.value.event = this.name;
-        this.onChange(this.value);
-    };
-    KlesButtonComponent.prototype.writeValue = function (value) {
-        if (!value) {
-            value = { event: this.name };
-        }
-        if (!value.event) {
-            value.event = this.name;
-        }
-        if (value.uiButton) {
-            var uiButton = value.uiButton;
-            this.label = (uiButton.label) ? uiButton.label : this.label;
-            this.color = (uiButton.color) ? uiButton.color : this.color;
-            this.icon = (uiButton.icon) ? uiButton.icon : this.icon;
-            this.iconSvg = (uiButton.iconSvg) ? uiButton.iconSvg : this.iconSvg;
-            this.disabled = (uiButton.disabled) ? uiButton.disabled : this.disabled;
-            this.classButton = (uiButton.class) ? uiButton.class : this.classButton;
-        }
-        this.value = value;
-    };
-    KlesButtonComponent.prototype.registerOnChange = function (fn) {
-        this.onChange = fn;
-    };
-    KlesButtonComponent.prototype.registerOnTouched = function (fn) {
-        this.onTouched = fn;
-    };
-    KlesButtonComponent.prototype.setDisabledState = function (isDisabled) {
-        this.disabled = isDisabled;
-    };
-    var KlesButtonComponent_1;
-    __decorate([
-        Input()
-    ], KlesButtonComponent.prototype, "name", void 0);
-    __decorate([
-        Input()
-    ], KlesButtonComponent.prototype, "label", void 0);
-    __decorate([
-        Input()
-    ], KlesButtonComponent.prototype, "color", void 0);
-    __decorate([
-        Input()
-    ], KlesButtonComponent.prototype, "icon", void 0);
-    __decorate([
-        Input()
-    ], KlesButtonComponent.prototype, "iconSvg", void 0);
-    __decorate([
-        Input()
-    ], KlesButtonComponent.prototype, "disabled", void 0);
-    __decorate([
-        Input()
-    ], KlesButtonComponent.prototype, "classButton", void 0);
-    __decorate([
-        Input()
-    ], KlesButtonComponent.prototype, "value", void 0);
-    __decorate([
-        Input()
-    ], KlesButtonComponent.prototype, "tooltip", void 0);
-    KlesButtonComponent = KlesButtonComponent_1 = __decorate([
-        Component({
-            selector: 'kles-button',
-            template: "\n        <span>\n            <button mat-button [ngClass]=\"classButton\" [color]=\"(color)?color:'primary'\" [disabled]=\"disabled\"\n            (click)=\"click($event)\" [matTooltip]=\"tooltip\">\n                {{label | translate}}\n                <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n                <mat-icon svgIcon=\"{{iconSvg}}\" *ngIf=\"iconSvg\"></mat-icon>\n            </button>\n        </span>\n    ",
-            providers: [
-                {
-                    provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(function () { return KlesButtonComponent_1; }),
-                    multi: true
-                }
-            ]
-        })
-    ], KlesButtonComponent);
-    return KlesButtonComponent;
-}());
-
-var KlesFormButtonComponent = /** @class */ (function (_super) {
-    __extends(KlesFormButtonComponent, _super);
-    function KlesFormButtonComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormButtonComponent.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-    };
-    KlesFormButtonComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormButtonComponent = __decorate([
-        Component({
-            selector: 'kles-form-button',
-            template: "\n    <div [formGroup]=\"group\">\n        <kles-button\n            [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n            [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n            [icon]=\"field.icon\"\n            [iconSvg]=\"field.iconSvg\"\n            [value]=\"field.value\"\n            [formControlName]=\"field.name\"\n            [tooltip]=\"field.tooltip\">\n        </kles-button>\n    </div>\n    "
-        })
-    ], KlesFormButtonComponent);
-    return KlesFormButtonComponent;
-}(KlesFieldAbstract));
-
-var KlesButtonCheckerComponent = /** @class */ (function (_super) {
-    __extends(KlesButtonCheckerComponent, _super);
-    function KlesButtonCheckerComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.value = {
-            busy: false,
-            error: [],
-            event: false
-        };
-        return _this;
-    }
-    KlesButtonCheckerComponent_1 = KlesButtonCheckerComponent;
-    KlesButtonCheckerComponent.prototype.countError = function () {
-        return (this.value.error) ? this.value.error.length : 0;
-    };
-    var KlesButtonCheckerComponent_1;
-    KlesButtonCheckerComponent = KlesButtonCheckerComponent_1 = __decorate([
-        Component({
-            selector: 'kles-button-checker',
-            template: "\n        <span *ngIf=\"value.error && !value.busy\">\n            <kles-button \n                [classButton]=\"classButton\" \n                [name]=\"name\" [label]=\"label\" [color]=\"color\" \n                [icon]=\"icon\" [iconSvg]=\"iconSvg\"\n                [value]=\"value\" \n                [tooltip]=\"tooltip\"\n                [disabled]=\"disabled\"\n                matBadge=\"{{countError()}}\" (click)=\"click($event)\">\n            </kles-button>\n        </span>\n        <span style=\"text-align: center;\">\n            <span style=\"text-align: center;margin-right: 10px\" *ngIf=\"value.busy||false\">\n                <mat-spinner [diameter]=\"25\"></mat-spinner>\n            </span>\n            <span *ngIf=\"value.message\" style=\"margin-right: 10px\">\n                {{value.message|translate}}\n            </span>\n        </span>\n    ",
-            providers: [
-                {
-                    provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(function () { return KlesButtonCheckerComponent_1; }),
-                    multi: true
-                }
-            ]
-        })
-    ], KlesButtonCheckerComponent);
-    return KlesButtonCheckerComponent;
-}(KlesButtonComponent));
-
-var KlesFormButtonCheckerComponent = /** @class */ (function (_super) {
-    __extends(KlesFormButtonCheckerComponent, _super);
-    function KlesFormButtonCheckerComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormButtonCheckerComponent.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-    };
-    KlesFormButtonCheckerComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormButtonCheckerComponent = __decorate([
-        Component({
-            selector: 'kles-form-button-checker',
-            template: "\n    <div [formGroup]=\"group\">\n        <kles-button-checker\n            [attr.id]=\"field.id\" [classButton]=\"field.ngClass\"\n            [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\"\n            [icon]=\"field.icon\"\n            [iconSvg]=\"field.iconSvg\"\n            [value]=\"field.value\"\n            [formControlName]=\"field.name\"\n            [tooltip]=\"field.tooltip\">\n        </kles-button-checker>\n    </div>\n    "
-        })
-    ], KlesFormButtonCheckerComponent);
-    return KlesFormButtonCheckerComponent;
-}(KlesFieldAbstract));
-
-var KlesButtonFileComponent = /** @class */ (function (_super) {
-    __extends(KlesButtonFileComponent, _super);
-    function KlesButtonFileComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.accept = '*.*';
-        _this.fileReader = new FileReader();
-        _this.value = {};
-        return _this;
-    }
-    KlesButtonFileComponent_1 = KlesButtonFileComponent;
-    KlesButtonFileComponent.prototype.click = function (event) {
-        this.file.nativeElement.click();
-    };
-    KlesButtonFileComponent.prototype.writeValue = function (value) {
-        if (!value) {
-            value = { event: this.name };
-        }
-        if (!value.event) {
-            value.event = this.name;
-        }
-        if (value.uiButton) {
-            var uiButton = value.uiButton;
-            this.label = (uiButton.label) ? uiButton.label : this.label;
-            this.color = (uiButton.color) ? uiButton.color : this.color;
-            this.icon = (uiButton.icon) ? uiButton.icon : this.icon;
-            this.iconSvg = (uiButton.iconSvg) ? uiButton.iconSvg : this.iconSvg;
-            this.disabled = (uiButton.disabled) ? uiButton.disabled : this.disabled;
-            this.classButton = (uiButton.class) ? uiButton.class : this.classButton;
-        }
-        this.value = value;
-    };
-    KlesButtonFileComponent.prototype.onFileLoad = function (fileLoadedEvent) {
-        var textFromFileLoaded = fileLoadedEvent.target.result;
-        this.fileContent = textFromFileLoaded;
-    };
-    KlesButtonFileComponent.prototype.onFileSelect = function (input) {
-        return __awaiter(this, void 0, void 0, function () {
-            var files, fileContent, i, _a, _b, e_1;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        if (!(input.files.length > 0)) return [3 /*break*/, 8];
-                        files = input.files;
-                        fileContent = [];
-                        if (!(files && files.length)) return [3 /*break*/, 7];
-                        i = 0;
-                        _c.label = 1;
-                    case 1:
-                        if (!(i < files.length)) return [3 /*break*/, 6];
-                        _c.label = 2;
-                    case 2:
-                        _c.trys.push([2, 4, , 5]);
-                        _a = fileContent;
-                        _b = i;
-                        return [4 /*yield*/, this.readUploadedFile(files[i])];
-                    case 3:
-                        _a[_b] = _c.sent();
-                        return [3 /*break*/, 5];
-                    case 4:
-                        e_1 = _c.sent();
-                        return [3 /*break*/, 5];
-                    case 5:
-                        i++;
-                        return [3 /*break*/, 1];
-                    case 6:
-                        if (fileContent.length === 1) {
-                            fileContent = fileContent[0];
-                        }
-                        _c.label = 7;
-                    case 7:
-                        this.value.event = this.name;
-                        this.value.fileContent = fileContent;
-                        this.onChange(this.value);
-                        input.value = '';
-                        _c.label = 8;
-                    case 8: return [2 /*return*/];
-                }
-            });
-        });
-    };
-    KlesButtonFileComponent.prototype.readUploadedFile = function (inputFile) {
-        var temporaryFileReader = new FileReader();
-        return new Promise(function (resolve, reject) {
-            temporaryFileReader.onerror = function () {
-                temporaryFileReader.abort();
-                var error = new DOMException('Problem parsing input file.');
-                reject(error);
-            };
-            temporaryFileReader.onload = function () {
-                resolve(temporaryFileReader.result);
-            };
-            temporaryFileReader.readAsArrayBuffer(inputFile);
-        });
-    };
-    var KlesButtonFileComponent_1;
-    __decorate([
-        ViewChild('file')
-    ], KlesButtonFileComponent.prototype, "file", void 0);
-    KlesButtonFileComponent = KlesButtonFileComponent_1 = __decorate([
-        Component({
-            selector: 'kles-button-file',
-            template: "\n        <input type=\"file\" #file style=\"display: none\" accept=\"{{accept}}\" (change)=\"onFileSelect($event.target)\" multiple />\n        <kles-button \n            [classButton]=\"classButton\" \n            [name]=\"name\" [label]=\"label\" [color]=\"color\" \n            [icon]=\"icon\" [iconSvg]=\"iconSvg\"\n            [disabled]=\"disabled\"\n            [value]=\"value\" (click)=\"click($event)\">\n        </kles-button>\n    ",
-            providers: [
-                {
-                    provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(function () { return KlesButtonFileComponent_1; }),
-                    multi: true
-                }
-            ]
-        })
-    ], KlesButtonFileComponent);
-    return KlesButtonFileComponent;
-}(KlesButtonComponent));
-
-var KlesFormButtonFileComponent = /** @class */ (function (_super) {
-    __extends(KlesFormButtonFileComponent, _super);
-    function KlesFormButtonFileComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormButtonFileComponent.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-    };
-    KlesFormButtonFileComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormButtonFileComponent = __decorate([
-        Component({
-            selector: 'kles-form-button-file',
-            template: "\n    <div [formGroup]=\"group\">\n        <kles-button-file\n            [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n            [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n            [icon]=\"field.icon\"\n            [iconSvg]=\"field.iconSvg\"\n            [value]=\"field.value\"\n            [formControlName]=\"field.name\">\n        </kles-button-file>\n    </div>\n    "
-        })
-    ], KlesFormButtonFileComponent);
-    return KlesFormButtonFileComponent;
-}(KlesFieldAbstract));
-
-var KlesFormTextareaComponent = /** @class */ (function (_super) {
-    __extends(KlesFormTextareaComponent, _super);
-    function KlesFormTextareaComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormTextareaComponent.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-    };
-    KlesFormTextareaComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormTextareaComponent = __decorate([
-        Component({
-            selector: 'kles-form-textarea',
-            template: "\n    <mat-form-field [formGroup]=\"group\" [color]=\"field.color\" class=\"form-element\">\n        <textarea matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" \n        [formControlName]=\"field.name\" cdkTextareaAutosize [placeholder]=\"field.placeholder | translate\"\n        [cdkAutosizeMinRows]=\"field.textareaAutoSize?.minRows\" [cdkAutosizeMaxRows]=\"field.textareaAutoSize?.maxRows\"  [maxlength]=\"field.maxLength\">\n        </textarea>\n\n\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ",
-            styles: ['mat-form-field {width: calc(100%)}']
-        })
-    ], KlesFormTextareaComponent);
-    return KlesFormTextareaComponent;
-}(KlesFieldAbstract));
-
-var KlesFormTextComponent = /** @class */ (function (_super) {
-    __extends(KlesFormTextComponent, _super);
-    function KlesFormTextComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormTextComponent.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-    };
-    KlesFormTextComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormTextComponent = __decorate([
-        Component({
-            selector: 'kles-form-text',
-            template: "\n    <span matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n        {{((field.property && group.controls[field.name].value) ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform:field.pipeTransform}}\n    </span>\n"
-        })
-    ], KlesFormTextComponent);
-    return KlesFormTextComponent;
-}(KlesFieldAbstract));
-
-var KlesFormInputClearableComponent = /** @class */ (function (_super) {
-    __extends(KlesFormInputClearableComponent, _super);
-    function KlesFormInputClearableComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormInputClearableComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormInputClearableComponent = __decorate([
-        Component({
-            selector: 'kles-form-input-clearable',
-            template: "\n    <mat-form-field [formGroup]=\"group\" [color]=\"field.color\" class=\"form-element\">\n\n        <ng-container *ngIf=\"field.autocomplete; else notAutoComplete\">\n            <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\"\n            [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\"\n            [matAutocomplete]=\"auto\">\n\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\" [panelWidth]=\"this.field.panelWidth\">\n                <ng-container *ngIf=\"!field.autocompleteComponent\">\n                    <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n                        {{field.property ? option[field.property] : option}}\n                    </mat-option>\n                </ng-container>\n\n                <ng-container *ngIf=\"field.autocompleteComponent\">\n                    <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"option\" [field]=\"field\">\n                        </ng-container>\n                    </mat-option>\n                </ng-container>\n            </mat-autocomplete>\n        </ng-container>\n\n        <ng-template #notAutoComplete>\n            <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\"\n            [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\">\n        </ng-template>\n        <button *ngIf=\"!group.get(field.name).disabled\" mat-button matSuffix mat-icon-button aria-label=\"Clear\" type=\"button\"\n            (click)=\"group.controls[field.name].reset();\">\n            <mat-icon>close</mat-icon>\n        </button>\n\n        <mat-spinner matSuffix mode=\"indeterminate\" *ngIf=\"isPending()\" diameter=\"17\"></mat-spinner>\n\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ",
-            styles: ['mat-form-field {width: calc(100%)}']
-        })
-    ], KlesFormInputClearableComponent);
-    return KlesFormInputClearableComponent;
-}(KlesFormInputComponent));
-
-var KlesTransformPipe = /** @class */ (function () {
-    function KlesTransformPipe() {
-    }
-    KlesTransformPipe.prototype.transform = function (value, pipes) {
-        if (pipes && pipes.length > 0) {
-            return pipes.reduce(function (acc, p) {
-                if (p.options) {
-                    p.options.forEach(function (opt) {
-                        acc = p.pipe.transform(acc, opt);
-                    });
-                }
-                else {
-                    acc = p.pipe.transform(acc);
-                }
-                return acc;
-            }, value);
-        }
-        return value;
-    };
-    KlesTransformPipe = __decorate([
-        Pipe({ name: 'klesTransform' })
-    ], KlesTransformPipe);
-    return KlesTransformPipe;
-}());
-
-var ArrayFormatPipe = /** @class */ (function () {
-    function ArrayFormatPipe() {
-    }
-    ArrayFormatPipe.prototype.transform = function (values, property) {
-        if (values && Array.isArray(values)) {
-            if (property) {
-                return values.map(function (value) { return value[property]; }).filter(Boolean).join(', ');
-            }
-            else {
-                return values.join(', ');
-            }
-        }
-        return '';
-    };
-    ArrayFormatPipe = __decorate([
-        Pipe({ name: 'arrayFormat' })
-    ], ArrayFormatPipe);
-    return ArrayFormatPipe;
-}());
-
-var KlesFormSlideToggleComponent = /** @class */ (function (_super) {
-    __extends(KlesFormSlideToggleComponent, _super);
-    function KlesFormSlideToggleComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormSlideToggleComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
-    KlesFormSlideToggleComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormSlideToggleComponent = __decorate([
-        Component({
-            selector: 'kles-form-slide-toggle',
-            template: "\n    <div [formGroup]=\"group\" >\n        <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>\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n        </ng-container>\n    </div>\n"
-        })
-    ], KlesFormSlideToggleComponent);
-    return KlesFormSlideToggleComponent;
-}(KlesFieldAbstract));
-
-var KlesFormBadgeComponent = /** @class */ (function (_super) {
-    __extends(KlesFormBadgeComponent, _super);
-    function KlesFormBadgeComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    KlesFormBadgeComponent.prototype.ngOnInit = function () {
-        _super.prototype.ngOnInit.call(this);
-    };
-    KlesFormBadgeComponent.prototype.ngOnDestroy = function () {
-        _super.prototype.ngOnDestroy.call(this);
-    };
-    KlesFormBadgeComponent = __decorate([
-        Component({
-            selector: 'kles-form-badge',
-            template: "\n    <span matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" \n        matBadge=\"{{group.controls[field.name].value}}\" matBadgeOverlap=\"false\" matBadgeColor=\"{{field.color}}\">\n    </span>\n"
-        })
-    ], KlesFormBadgeComponent);
-    return KlesFormBadgeComponent;
-}(KlesFieldAbstract));
-
-var 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
-];
-var directives = [KlesDynamicFieldDirective, KlesComponentDirective];
-var pipes = [KlesTransformPipe, ArrayFormatPipe];
-var KlesMaterialDynamicformsModule = /** @class */ (function () {
-    function KlesMaterialDynamicformsModule() {
-    }
-    KlesMaterialDynamicformsModule = __decorate([
-        NgModule({
-            declarations: [
-                components,
-                directives,
-                pipes
-            ],
-            imports: [
-                CommonModule,
-                ReactiveFormsModule,
-                TranslateModule,
-                FlexLayoutModule,
-                FormsModule,
-                MaterialModule,
-                ColorPickerModule,
-                NgxMatSelectSearchModule
-            ],
-            providers: [
-                { provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher },
-                pipes
-            ],
-            entryComponents: [
-                components
-            ],
-            exports: [
-                components,
-                pipes,
-                directives,
-                ColorPickerModule
-            ],
-            schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
-        })
-    ], KlesMaterialDynamicformsModule);
-    return KlesMaterialDynamicformsModule;
-}());
-
-function autocompleteObjectValidator(optional) {
-    return function (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 function (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, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesFieldAbstract, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormChipComponent, KlesFormColorComponent, KlesFormDateComponent, KlesFormErrorStateMatcher, KlesFormGroupComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormRadioComponent, KlesFormSelectComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSlideToggleComponent, KlesFormSubmitButtonComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesMaterialDynamicformsModule, KlesTransformPipe, autocompleteObjectValidator, autocompleteStringValidator, MaterialModule as ɵa };
-//# sourceMappingURL=3kles-kles-material-dynamicforms.js.map