@3kles/kles-material-dynamicforms 1.1.0 → 1.1.4

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

@@ -43,1545 +43,1566 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 
-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 === 'lineBreak') {
-                return;
-            }
-            var control = _this.createControl(field);
-            _this.form.addControl(field.name, control);
-        });
-    };
-    KlesDynamicFormComponent.prototype.createControl = function (field) {
-        var _this = this;
-        if (field.type === 'listField') {
-            var array_1 = this.fb.array([]);
-            field.value.forEach(function (data) {
-                var subGroup = _this.fb.group({});
-                field.collections.forEach(function (subfield) {
-                    var control = _this.createControl(subfield);
-                    subGroup.addControl(subfield.name, control);
-                });
-                array_1.push(subGroup);
-            });
-            return array_1;
-        }
-        else if (field.type === '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, this.bindValidations(field.validations || []), this.bindAsyncValidations(field.asyncValidations || []));
-            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 === '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 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 === 'lineBreak') {
+                return;
+            }
+            var control = _this.createControl(field);
+            _this.form.addControl(field.name, control);
+        });
+    };
+    KlesDynamicFormComponent.prototype.createControl = function (field) {
+        var _this = this;
+        if (field.type === 'listField') {
+            var array_1 = this.fb.array([]);
+            field.value.forEach(function (data) {
+                var subGroup = _this.fb.group({});
+                field.collections.forEach(function (subfield) {
+                    var control = _this.createControl(subfield);
+                    subGroup.addControl(subfield.name, control);
+                });
+                array_1.push(subGroup);
+            });
+            return array_1;
+        }
+        else if (field.type === '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 === '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;
-    };
-    KlesComponentDirective.ctorParameters = function () { return [
-        { type: ComponentFactoryResolver },
-        { type: ViewContainerRef }
-    ]; };
-    __decorate([
-        Input()
-    ], KlesComponentDirective.prototype, "component", void 0);
-    __decorate([
-        Input()
-    ], KlesComponentDirective.prototype, "value", void 0);
-    KlesComponentDirective = __decorate([
-        Directive({
-            selector: '[klesComponent]'
-        })
-    ], KlesComponentDirective);
-    return KlesComponentDirective;
+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() {
-    }
-    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().subscribe(function (val) {
-            if (_this.field.valueChanges) {
-                _this.field.valueChanges(_this.field, _this.group, _this.siblingFields, val);
-            }
-            // this.applyPipeTransform();
-        });
-    };
-    KlesFieldAbstract.prototype.ngAfterViewInit = function () {
-    };
-    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 });
-                    });
-                }
-            }
-        }
-    };
-    return KlesFieldAbstract;
+var KlesFieldAbstract = /** @class */ (function () {
+    function KlesFieldAbstract() {
+    }
+    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().subscribe(function (val) {
+            if (_this.field.valueChanges) {
+                _this.field.valueChanges(_this.field, _this.group, _this.siblingFields, val);
+            }
+            // this.applyPipeTransform();
+        });
+    };
+    KlesFieldAbstract.prototype.ngAfterViewInit = function () {
+    };
+    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 });
+                    });
+                }
+            }
+        }
+    };
+    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 = __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;
+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 = __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 = __decorate([
-        Component({
-            selector: 'kles-form-input',
-            template: "\n    <mat-form-field [formGroup]=\"group\" 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\">\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;
+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 = __decorate([
+        Component({
+            selector: 'kles-form-input',
+            template: "\n    <mat-form-field [formGroup]=\"group\" 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 = __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;
+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 = __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() {
-        return _super.call(this) || 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.openChange = function ($event) {
-        if (this.field.virtualScroll) {
-            if ($event) {
-                this.cdkVirtualScrollViewport.scrollToIndex(0);
-                this.cdkVirtualScrollViewport.checkViewportSize();
-            }
-        }
-    };
-    __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\" [formGroup]=\"group\">\n        <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\"\n        (openedChange)=\"openChange($event)\"\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\"></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\">{{(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\">\n                    <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></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\">\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\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></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\"></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\"></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;
+var KlesFormSelectComponent = /** @class */ (function (_super) {
+    __extends(KlesFormSelectComponent, _super);
+    function KlesFormSelectComponent() {
+        var _this = _super.call(this) || this;
+        _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.openChange = function ($event) {
+        if (this.field.virtualScroll) {
+            if ($event) {
+                this.cdkVirtualScrollViewport.scrollToIndex(0);
+                this.cdkVirtualScrollViewport.checkViewportSize();
+            }
+        }
+    };
+    __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\" [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\">{{(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\">\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\">\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\">\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 = __decorate([
-        Component({
-            selector: "kles-form-datepicker",
-            template: "\n    <mat-form-field class=\"demo-full-width margin-top\" [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;
+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 = __decorate([
+        Component({
+            selector: "kles-form-datepicker",
+            template: "\n    <mat-form-field class=\"demo-full-width margin-top\" [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 = __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;
+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 = __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 = __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\" [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;
+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 = __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\" [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) {
-        var _this = _super.call(this) || this;
-        _this.fb = fb;
-        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.ctorParameters = function () { return [
-        { type: FormBuilder }
-    ]; };
-    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;
+var KlesFormListFieldComponent = /** @class */ (function (_super) {
+    __extends(KlesFormListFieldComponent, _super);
+    function KlesFormListFieldComponent(fb) {
+        var _this = _super.call(this) || this;
+        _this.fb = fb;
+        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.ctorParameters = function () { return [
+        { type: FormBuilder }
+    ]; };
+    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 = __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;
+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 = __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 = __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;
+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 = __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 = __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            <ng-container *ngFor=\"let subfield of field.collections;\" klesDynamicField [field]=\"subfield\" [group]=\"subGroup\">\n            </ng-container>\n        </div>\n    </div>\n",
-            styles: ['mat-form-field {width: calc(100%)}',
-                ':host { display:flex; flex-direction: inherit}',
-                '.group-container {display:flex; flex-direction: inherit}']
-        })
-    ], KlesFormGroupComponent);
-    return KlesFormGroupComponent;
+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 = __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            <ng-container *ngFor=\"let subfield of field.collections;\" klesDynamicField [field]=\"subfield\" [group]=\"subGroup\">\n            </ng-container>\n        </div>\n    </div>\n",
+            styles: ['mat-form-field {width: calc(100%)}',
+                ':host { display:flex; flex-direction: inherit}',
+                '.group-container {display:flex; flex-direction: 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 = __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;
+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 = __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._onDestroy = new Subject();
-        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) {
-                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();
-    };
-    KlesFormSelectSearchComponent.prototype.toggleAllSelection = function (state) {
-        var _this = this;
-        if (state.checked) {
-            this.optionsFiltered$.pipe(take(1)).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\" [formGroup]=\"group\">\n        <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\"\n        (openedChange)=\"openChange($event)\" \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\"></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                <ng-container *ngIf=\"!field.autocompleteComponent\">\n                    <mat-checkbox *ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n                    (change)=\"toggleAllSelection($event)\">\n                        {{'selectAll' | translate}}\n                    </mat-checkbox>\n                    <mat-option *cdkVirtualFor=\"let item of optionsFiltered$ | async\" [value]=\"item\">{{(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\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></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\"></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\"></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\">{{(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\">\n                    <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></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;
+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._onDestroy = new Subject();
+        _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) {
+                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();
+    };
+    KlesFormSelectSearchComponent.prototype.toggleAllSelection = function (state) {
+        var _this = this;
+        if (state.checked) {
+            this.optionsFiltered$.pipe(take(1)).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\" [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                <ng-container *ngIf=\"!field.autocompleteComponent\">\n                    <mat-checkbox *ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n                    (change)=\"toggleAllSelection($event)\">\n                        {{'selectAll' | translate}}\n                    </mat-checkbox>\n                    <mat-option *cdkVirtualFor=\"let item of optionsFiltered$ | async\" [value]=\"item\">{{(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\">\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\">{{(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\">\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 = __decorate([
-        Component({
-            selector: "kles-form-line-break",
-            template: "",
-            styles: [":host{\n            flex-basis: 100%;\n            display: flex;\n            height:0;\n        }"]
-        })
-    ], KlesFormLineBreakComponent);
-    return KlesFormLineBreakComponent;
+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 = __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 = __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;
+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 = __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 = __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\"></ng-container>\n                </mat-list-option>\n            </ng-container>\n        </mat-selection-list>\n\n    </div>\n",
-            styles: ['mat-selection-list {width: calc(100%);height: 250px; overflow:auto}']
-        })
-    ], KlesFormSelectionListComponent);
-    return KlesFormSelectionListComponent;
+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 = __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 = __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));
-// <mat-button-toggle-group [formControlName]="field.name">
-//                 <mat-button-toggle value="bold">Bold</mat-button-toggle>
-//                 <mat-button-toggle value="italic">Italic</mat-button-toggle>
-//                 <mat-button-toggle value="underline">Underline</mat-button-toggle>
+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 = __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));
+// <mat-button-toggle-group [formControlName]="field.name">
+//                 <mat-button-toggle value="bold">Bold</mat-button-toggle>
+//                 <mat-button-toggle value="italic">Italic</mat-button-toggle>
+//                 <mat-button-toggle value="underline">Underline</mat-button-toggle>
 //             </mat-button-toggle-group>
 
-var componentMapper = {
-    label: KlesFormLabelComponent,
-    input: KlesFormInputComponent,
-    button: KlesFormSubmitButtonComponent,
-    select: KlesFormSelectComponent,
-    date: KlesFormDateComponent,
-    radio: KlesFormRadioComponent,
-    checkbox: KlesFormCheckboxComponent,
-    listField: KlesFormListFieldComponent,
-    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 componentMapper = {
+    label: KlesFormLabelComponent,
+    input: KlesFormInputComponent,
+    button: KlesFormSubmitButtonComponent,
+    select: KlesFormSelectComponent,
+    date: KlesFormDateComponent,
+    radio: KlesFormRadioComponent,
+    checkbox: KlesFormCheckboxComponent,
+    listField: KlesFormListFieldComponent,
+    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 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 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 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 = __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;
+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 = __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;
+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 = __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;
+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 = __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];
-                        console.log('Filename: ' + files[0].name);
-                        console.log('Type: ' + files[0].type);
-                        console.log('Size: ' + files[0].size + ' bytes');
-                        console.log('Files=', files.length);
-                        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;
+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];
+                        console.log('Filename: ' + files[0].name);
+                        console.log('Type: ' + files[0].type);
+                        console.log('Size: ' + files[0].size + ' bytes');
+                        console.log('Files=', files.length);
+                        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 = __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;
+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 = __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 = __decorate([
-        Component({
-            selector: 'kles-form-textarea',
-            template: "\n    <mat-form-field [formGroup]=\"group\" 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\">\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;
+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 = __decorate([
+        Component({
+            selector: 'kles-form-textarea',
+            template: "\n    <mat-form-field [formGroup]=\"group\" 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 = __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[field.property] : group.controls[field.name].value) | klesTransform:field.pipeTransform}}\n    </span> \n"
-        })
-    ], KlesFormTextComponent);
-    return KlesFormTextComponent;
+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 = __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[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 = __decorate([
-        Component({
-            selector: 'kles-form-input-clearable',
-            template: "\n    <mat-form-field [formGroup]=\"group\" 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\">\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 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;
+var KlesFormInputClearableComponent = /** @class */ (function (_super) {
+    __extends(KlesFormInputClearableComponent, _super);
+    function KlesFormInputClearableComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    KlesFormInputClearableComponent = __decorate([
+        Component({
+            selector: 'kles-form-input-clearable',
+            template: "\n    <mat-form-field [formGroup]=\"group\" 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 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 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 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 = __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;
+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 = __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 = __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;
+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 = __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
-];
-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;
+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
+];
+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 } };
-    };
+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
+/*
+ * Public API Surface of kles-material-dynamicforms
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { ArrayFormatPipe, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesFieldAbstract, 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 };