@3kles/kles-material-dynamicforms 1.1.10 → 1.1.13

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

@@ -2,8 +2,8 @@ import { __assign, __decorate, __extends, __awaiter, __generator } from 'tslib';
 import { EventEmitter, Input, Output, Component, ComponentFactoryResolver, ViewContainerRef, Directive, ViewChild, ViewChildren, NgModule, forwardRef, Pipe, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Validators, FormBuilder, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { Observable, of, ReplaySubject, Subject } from 'rxjs';
-import { startWith, switchMap, map, takeUntil, take } from 'rxjs/operators';
+import { Subject, Observable, of, ReplaySubject } from 'rxjs';
+import { takeUntil, startWith, switchMap, map, take } from 'rxjs/operators';
 import { CdkVirtualScrollViewport, ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
 import { MatOption, MatNativeDateModule, ErrorStateMatcher } from '@angular/material/core';
 import { MatSliderModule } from '@angular/material/slider';
@@ -366,6 +366,7 @@ var KlesComponentDirective = /** @class */ (function () {
 
 var KlesFieldAbstract = /** @class */ (function () {
     function KlesFieldAbstract() {
+        this._onDestroy = new Subject();
     }
     KlesFieldAbstract.prototype.ngOnInit = function () {
         var _this = this;
@@ -374,7 +375,7 @@ var KlesFieldAbstract = /** @class */ (function () {
         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) {
+        (_a = this.group.controls[this.field.name]) === null || _a === void 0 ? void 0 : _a.valueChanges.pipe(takeUntil(this._onDestroy)).subscribe(function (val) {
             if (_this.field.valueChanges) {
                 _this.field.valueChanges(_this.field, _this.group, _this.siblingFields, val);
             }
@@ -383,6 +384,10 @@ var KlesFieldAbstract = /** @class */ (function () {
     };
     KlesFieldAbstract.prototype.ngAfterViewInit = function () {
     };
+    KlesFieldAbstract.prototype.ngOnDestroy = function () {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    };
     KlesFieldAbstract.prototype.applyPipeTransform = function () {
         if (this.group && this.field) {
             var control_1 = this.group.controls[this.field.name];
@@ -417,6 +422,9 @@ var KlesFormLabelComponent = /** @class */ (function (_super) {
         this.group.controls[this.field.name].disable();
         _super.prototype.ngOnInit.call(this);
     };
+    KlesFormLabelComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormLabelComponent = __decorate([
         Component({
             selector: "kles-form-label",
@@ -480,6 +488,9 @@ var KlesFormInputComponent = /** @class */ (function (_super) {
             return value ? value : '';
         }
     };
+    KlesFormInputComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormInputComponent = __decorate([
         Component({
             selector: 'kles-form-input',
@@ -498,6 +509,9 @@ var KlesFormSubmitButtonComponent = /** @class */ (function (_super) {
     KlesFormSubmitButtonComponent.prototype.ngOnInit = function () {
         _super.prototype.ngOnInit.call(this);
     };
+    KlesFormSubmitButtonComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormSubmitButtonComponent = __decorate([
         Component({
             selector: 'kles-submit-button',
@@ -528,6 +542,9 @@ var KlesFormSelectComponent = /** @class */ (function (_super) {
             this.options$ = this.field.options;
         }
     };
+    KlesFormSelectComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormSelectComponent.prototype.openChange = function ($event) {
         if (this.field.virtualScroll) {
             if ($event) {
@@ -545,7 +562,7 @@ var KlesFormSelectComponent = /** @class */ (function (_super) {
     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",
+            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\" [disabled]=\"item?.disabled\">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n            </ng-container>\n\n            <ng-container *ngIf=\"field.autocompleteComponent\">\n                <mat-option *ngFor=\"let item of options$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">\n                    <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                </mat-option>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"field.virtualScroll\">\n            <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize || 50\" [style.height.px]=5*48>\n                <ng-container *ngIf=\"!field.autocompleteComponent\">\n                    <mat-option *cdkVirtualFor=\"let item of options$ | async\" [value]=\"item\"  [disabled]=\"item?.disabled\">\n                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                    </mat-option>\n\n                    <ng-container *ngIf=\"field.multiple\">\n                        <mat-option *ngFor=\"let item of group.controls[field.name].value | slice:0:30\" [value]=\"item\"\n                        style=\"display:none\">\n                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                        </mat-option>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!field.multiple && group.controls[field.name].value\">\n                    <mat-option *ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"field.autocompleteComponent\">\n                    <mat-option *cdkVirtualFor=\"let item of options$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                    </mat-option>\n                    <ng-container *ngIf=\"field.multiple\">\n                        <mat-option *ngFor=\"let item of group.controls[field.name].value | slice:0:30\" [value]=\"item\"\n                        style=\"display:none\">\n                            <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                    <ng-container *ngIf=\"!field.multiple && group.controls[field.name].value\">\n                        <mat-option *ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n                            <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n\n        </ng-container>\n\n        </mat-select>\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n            <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n    </mat-form-field>\n",
             styles: ['mat-form-field {width: calc(100%)}']
         })
     ], KlesFormSelectComponent);
@@ -558,6 +575,9 @@ var KlesFormDateComponent = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     KlesFormDateComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
+    KlesFormDateComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormDateComponent = __decorate([
         Component({
             selector: "kles-form-datepicker",
@@ -573,9 +593,12 @@ var KlesFormRadioComponent = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     KlesFormRadioComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
+    KlesFormRadioComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormRadioComponent = __decorate([
         Component({
-            selector: "kles-form-radiobutton",
+            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);
@@ -588,6 +611,9 @@ var KlesFormCheckboxComponent = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     KlesFormCheckboxComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
+    KlesFormCheckboxComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormCheckboxComponent = __decorate([
         Component({
             selector: "kles-form-checkbox",
@@ -643,6 +669,9 @@ var KlesFormListFieldComponent = /** @class */ (function (_super) {
         }
         return null;
     };
+    KlesFormListFieldComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormListFieldComponent.ctorParameters = function () { return [
         { type: FormBuilder }
     ]; };
@@ -687,6 +716,9 @@ var KlesFormColorComponent = /** @class */ (function (_super) {
         // pad each with zeros and return
         return "#" + r1 + g1 + b1;
     };
+    KlesFormColorComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormColorComponent = __decorate([
         Component({
             selector: 'kles-form-color',
@@ -703,6 +735,9 @@ var KlesFormChipComponent = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     KlesFormChipComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
+    KlesFormChipComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormChipComponent = __decorate([
         Component({
             selector: "kles-form-chip",
@@ -721,6 +756,9 @@ var KlesFormGroupComponent = /** @class */ (function (_super) {
         this.subGroup = this.group.controls[this.field.name];
         _super.prototype.ngOnInit.call(this);
     };
+    KlesFormGroupComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormGroupComponent = __decorate([
         Component({
             selector: 'kles-group',
@@ -739,6 +777,9 @@ var KlesFormIconComponent = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     KlesFormIconComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
+    KlesFormIconComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormIconComponent = __decorate([
         Component({
             selector: "kles-form-icon",
@@ -755,7 +796,6 @@ var KlesFormSelectSearchComponent = /** @class */ (function (_super) {
         _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];
@@ -803,7 +843,7 @@ var KlesFormSelectSearchComponent = /** @class */ (function (_super) {
         })).subscribe(this.optionsFiltered$);
         this.group.controls[this.field.name]
             .valueChanges.pipe(takeUntil(this._onDestroy), startWith(this.group.controls[this.field.name].value), switchMap(function (selected) {
-            return _this.optionsFiltered$.pipe(map(function (options) {
+            return _this.optionsFiltered$.pipe(map(function (options) { return options.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.disabled); }); }), map(function (options) {
                 if (!selected) {
                     return false;
                 }
@@ -819,12 +859,13 @@ var KlesFormSelectSearchComponent = /** @class */ (function (_super) {
         });
     };
     KlesFormSelectSearchComponent.prototype.ngOnDestroy = function () {
-        this._onDestroy.next();
+        // this._onDestroy.next();
+        _super.prototype.ngOnDestroy.call(this);
     };
     KlesFormSelectSearchComponent.prototype.toggleAllSelection = function (state) {
         var _this = this;
         if (state.checked) {
-            this.optionsFiltered$.pipe(take(1)).subscribe(function (options) {
+            this.optionsFiltered$.pipe(take(1), map(function (options) { return options.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.disabled); }); })).subscribe(function (options) {
                 if (options.length > 0) {
                     _this.group.controls[_this.field.name].patchValue(options.slice());
                 }
@@ -851,7 +892,7 @@ var KlesFormSelectSearchComponent = /** @class */ (function (_super) {
     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",
+            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\" [disabled]=\"item?.disabled\">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n                    \n                    <ng-container *ngIf=\"field.multiple\">\n                        <mat-option *ngFor=\"let item of group.controls[field.name].value | slice:0:30\" [value]=\"item\"\n                        style=\"display:none\">\n                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                        </mat-option>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!field.multiple && group.controls[field.name].value\">\n                        <mat-option *ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"field.autocompleteComponent\">\n                    <mat-option *cdkVirtualFor=\"let item of optionsFiltered$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                    </mat-option>\n\n                    <ng-container *ngIf=\"field.multiple\">\n                        <mat-option *ngFor=\"let item of group.controls[field.name].value | slice:0:30\" [value]=\"item\"\n                        style=\"display:none\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                        </mat-option>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!field.multiple && group.controls[field.name].value\">\n                        <mat-option *ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n                            <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"!field.virtualScroll\">\n           \n            <mat-option>\n                <ngx-mat-select-search [formControl]=\"searchControl\"\n                placeholderLabel=\"\" noEntriesFoundLabel =\"\"></ngx-mat-select-search>\n            </mat-option>\n            \n            <mat-checkbox *ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n                    (change)=\"toggleAllSelection($event)\">\n                    {{'selectAll' | translate}}\n            </mat-checkbox>\n\n            <ng-container *ngIf=\"!field.autocompleteComponent\">\n                <mat-option *ngFor=\"let item of optionsFiltered$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n            </ng-container>\n\n            <ng-container *ngIf=\"field.autocompleteComponent\">\n                <mat-option *ngFor=\"let item of optionsFiltered$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">\n                    <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                </mat-option>\n            </ng-container>\n        </ng-container>\n\n\n        </mat-select>\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n            <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n    </mat-form-field>\n",
             styles: ['mat-form-field {width: calc(100%)}', '.selectAll {padding: 10px 16px;}']
         })
     ], KlesFormSelectSearchComponent);
@@ -864,6 +905,9 @@ var KlesFormLineBreakComponent = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     KlesFormLineBreakComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
+    KlesFormLineBreakComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormLineBreakComponent = __decorate([
         Component({
             selector: "kles-form-line-break",
@@ -882,6 +926,9 @@ var KlesFormLinkComponent = /** @class */ (function (_super) {
     KlesFormLinkComponent.prototype.ngOnInit = function () {
         _super.prototype.ngOnInit.call(this);
     };
+    KlesFormLinkComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormLinkComponent = __decorate([
         Component({
             selector: 'kles-form-link',
@@ -905,6 +952,9 @@ var KlesFormSelectionListComponent = /** @class */ (function (_super) {
             this.options$ = this.field.options;
         }
     };
+    KlesFormSelectionListComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormSelectionListComponent = __decorate([
         Component({
             selector: 'kles-form-selection-list',
@@ -929,6 +979,9 @@ var KlesFormButtonToogleGroupComponent = /** @class */ (function (_super) {
             this.options$ = this.field.options;
         }
     };
+    KlesFormButtonToogleGroupComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormButtonToogleGroupComponent = __decorate([
         Component({
             selector: 'kles-form-button-toogle-group',
@@ -937,11 +990,6 @@ var KlesFormButtonToogleGroupComponent = /** @class */ (function (_super) {
     ], 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 KlesFormArrayComponent = /** @class */ (function (_super) {
     __extends(KlesFormArrayComponent, _super);
@@ -952,9 +1000,9 @@ var KlesFormArrayComponent = /** @class */ (function (_super) {
         // this.subGroup = this.group.controls[this.field.name] as FormGroup;
         _super.prototype.ngOnInit.call(this);
         this.formArray = this.group.controls[this.field.name];
-        console.log('on arrive ici');
-        console.log(this.field);
-        console.log(this.formArray);
+    };
+    KlesFormArrayComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
     };
     KlesFormArrayComponent = __decorate([
         Component({
@@ -1003,7 +1051,6 @@ var KlesDynamicFieldDirective = /** @class */ (function () {
         this.buildComponent();
     };
     KlesDynamicFieldDirective.prototype.ngOnChanges = function (changes) {
-        console.log('ngOnCHange', changes);
         if (changes.group) {
             this.group = changes.group.currentValue;
         }
@@ -1247,10 +1294,13 @@ var KlesFormButtonComponent = /** @class */ (function (_super) {
     KlesFormButtonComponent.prototype.ngOnInit = function () {
         _super.prototype.ngOnInit.call(this);
     };
+    KlesFormButtonComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormButtonComponent = __decorate([
         Component({
             selector: 'kles-form-button',
-            template: "\n    <div [formGroup]=\"group\">\n        <kles-button \n            [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n            [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n            [icon]=\"field.icon\"\n            [iconSvg]=\"field.iconSvg\"\n            [value]=\"field.value\"\n            [formControlName]=\"field.name\"\n            [tooltip]=\"field.tooltip\">\n        </kles-button>\n    </div>\n    "
+            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;
@@ -1296,10 +1346,13 @@ var KlesFormButtonCheckerComponent = /** @class */ (function (_super) {
     KlesFormButtonCheckerComponent.prototype.ngOnInit = function () {
         _super.prototype.ngOnInit.call(this);
     };
+    KlesFormButtonCheckerComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormButtonCheckerComponent = __decorate([
         Component({
             selector: 'kles-form-button-checker',
-            template: "\n    <div [formGroup]=\"group\">\n        <kles-button-checker\n            [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n            [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n            [icon]=\"field.icon\"\n            [iconSvg]=\"field.iconSvg\"\n            [value]=\"field.value\"\n            [formControlName]=\"field.name\"\n            [tooltip]=\"field.tooltip\">\n        </kles-button-checker>\n    </div>\n    "
+            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;
@@ -1350,10 +1403,6 @@ var KlesButtonFileComponent = /** @class */ (function (_super) {
                         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:
@@ -1431,6 +1480,9 @@ var KlesFormButtonFileComponent = /** @class */ (function (_super) {
     KlesFormButtonFileComponent.prototype.ngOnInit = function () {
         _super.prototype.ngOnInit.call(this);
     };
+    KlesFormButtonFileComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormButtonFileComponent = __decorate([
         Component({
             selector: 'kles-form-button-file',
@@ -1448,6 +1500,9 @@ var KlesFormTextareaComponent = /** @class */ (function (_super) {
     KlesFormTextareaComponent.prototype.ngOnInit = function () {
         _super.prototype.ngOnInit.call(this);
     };
+    KlesFormTextareaComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormTextareaComponent = __decorate([
         Component({
             selector: 'kles-form-textarea',
@@ -1466,6 +1521,9 @@ var KlesFormTextComponent = /** @class */ (function (_super) {
     KlesFormTextComponent.prototype.ngOnInit = function () {
         _super.prototype.ngOnInit.call(this);
     };
+    KlesFormTextComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormTextComponent = __decorate([
         Component({
             selector: 'kles-form-text',
@@ -1480,10 +1538,13 @@ var KlesFormInputClearableComponent = /** @class */ (function (_super) {
     function KlesFormInputClearableComponent() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    KlesFormInputClearableComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormInputClearableComponent = __decorate([
         Component({
             selector: 'kles-form-input-clearable',
-            template: "\n    <mat-form-field [formGroup]=\"group\" 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    ",
+            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 *ngIf=\"!group.get(field.name).disabled\" mat-button matSuffix mat-icon-button aria-label=\"Clear\" type=\"button\"\n            (click)=\"group.controls[field.name].reset();\">\n            <mat-icon>close</mat-icon>\n        </button>\n\n        <mat-spinner matSuffix mode=\"indeterminate\" *ngIf=\"isPending()\" diameter=\"17\"></mat-spinner>\n\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ",
             styles: ['mat-form-field {width: calc(100%)}']
         })
     ], KlesFormInputClearableComponent);
@@ -1541,10 +1602,13 @@ var KlesFormSlideToggleComponent = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     KlesFormSlideToggleComponent.prototype.ngOnInit = function () { _super.prototype.ngOnInit.call(this); };
+    KlesFormSlideToggleComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormSlideToggleComponent = __decorate([
         Component({
-            selector: "kles-form-slide-toggle",
-            template: "\n    <div [formGroup]=\"group\" >  \n        <mat-slide-toggle matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [color]=\"field.color\" [formControlName]=\"field.name\">{{field.label | translate}}</mat-slide-toggle>\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n        </ng-container>\n    </div>\n"
+            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;
@@ -1558,10 +1622,13 @@ var KlesFormBadgeComponent = /** @class */ (function (_super) {
     KlesFormBadgeComponent.prototype.ngOnInit = function () {
         _super.prototype.ngOnInit.call(this);
     };
+    KlesFormBadgeComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+    };
     KlesFormBadgeComponent = __decorate([
         Component({
             selector: 'kles-form-badge',
-            template: "\n    <span matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" \n        matBadge=\"{{group.controls[field.name].value}}\" matBadgeOverlap=\"false\" matBadgeColor=\"{{field.color}}\">\n    </span> \n"
+            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;