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

package/bundles/3kles-kles-material-dynamicforms.umd.js

@@ -545,6 +545,7 @@
 
     var KlesFieldAbstract = /** @class */ (function () {
         function KlesFieldAbstract() {
+            this._onDestroy = new rxjs.Subject();
         }
         KlesFieldAbstract.prototype.ngOnInit = function () {
             var _this = this;
@@ -553,7 +554,7 @@
             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(operators.takeUntil(this._onDestroy)).subscribe(function (val) {
                 if (_this.field.valueChanges) {
                     _this.field.valueChanges(_this.field, _this.group, _this.siblingFields, val);
                 }
@@ -562,6 +563,10 @@
         };
         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];
@@ -596,6 +601,9 @@
             this.group.controls[this.field.name].disable();
             _super.prototype.ngOnInit.call(this);
         };
+        KlesFormLabelComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormLabelComponent = __decorate([
             core.Component({
                 selector: "kles-form-label",
@@ -659,6 +667,9 @@
                 return value ? value : '';
             }
         };
+        KlesFormInputComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormInputComponent = __decorate([
             core.Component({
                 selector: 'kles-form-input',
@@ -677,6 +688,9 @@
         KlesFormSubmitButtonComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
         };
+        KlesFormSubmitButtonComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormSubmitButtonComponent = __decorate([
             core.Component({
                 selector: 'kles-submit-button',
@@ -707,6 +721,9 @@
                 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) {
@@ -724,7 +741,7 @@
         KlesFormSelectComponent = __decorate([
             core.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);
@@ -737,6 +754,9 @@
             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([
             core.Component({
                 selector: "kles-form-datepicker",
@@ -752,9 +772,12 @@
             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([
             core.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);
@@ -767,6 +790,9 @@
             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([
             core.Component({
                 selector: "kles-form-checkbox",
@@ -822,6 +848,9 @@
             }
             return null;
         };
+        KlesFormListFieldComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormListFieldComponent.ctorParameters = function () { return [
             { type: forms.FormBuilder }
         ]; };
@@ -866,6 +895,9 @@
             // pad each with zeros and return
             return "#" + r1 + g1 + b1;
         };
+        KlesFormColorComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormColorComponent = __decorate([
             core.Component({
                 selector: 'kles-form-color',
@@ -882,6 +914,9 @@
             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([
             core.Component({
                 selector: "kles-form-chip",
@@ -900,6 +935,9 @@
             this.subGroup = this.group.controls[this.field.name];
             _super.prototype.ngOnInit.call(this);
         };
+        KlesFormGroupComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormGroupComponent = __decorate([
             core.Component({
                 selector: 'kles-group',
@@ -918,6 +956,9 @@
             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([
             core.Component({
                 selector: "kles-form-icon",
@@ -934,7 +975,6 @@
             _this.searchControl = new forms.FormControl();
             _this.selectAllControl = new forms.FormControl(false);
             _this.optionsFiltered$ = new rxjs.ReplaySubject(1);
-            _this._onDestroy = new rxjs.Subject();
             _this.compareFn = function (o1, o2) {
                 if (_this.field.property && o1 && o2) {
                     return o1[_this.field.property] === o2[_this.field.property];
@@ -982,7 +1022,7 @@
             })).subscribe(this.optionsFiltered$);
             this.group.controls[this.field.name]
                 .valueChanges.pipe(operators.takeUntil(this._onDestroy), operators.startWith(this.group.controls[this.field.name].value), operators.switchMap(function (selected) {
-                return _this.optionsFiltered$.pipe(operators.map(function (options) {
+                return _this.optionsFiltered$.pipe(operators.map(function (options) { return options.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.disabled); }); }), operators.map(function (options) {
                     if (!selected) {
                         return false;
                     }
@@ -998,12 +1038,13 @@
             });
         };
         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(operators.take(1)).subscribe(function (options) {
+                this.optionsFiltered$.pipe(operators.take(1), operators.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());
                     }
@@ -1030,7 +1071,7 @@
         KlesFormSelectSearchComponent = __decorate([
             core.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);
@@ -1043,6 +1084,9 @@
             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([
             core.Component({
                 selector: "kles-form-line-break",
@@ -1061,6 +1105,9 @@
         KlesFormLinkComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
         };
+        KlesFormLinkComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormLinkComponent = __decorate([
             core.Component({
                 selector: 'kles-form-link',
@@ -1084,6 +1131,9 @@
                 this.options$ = this.field.options;
             }
         };
+        KlesFormSelectionListComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormSelectionListComponent = __decorate([
             core.Component({
                 selector: 'kles-form-selection-list',
@@ -1108,6 +1158,9 @@
                 this.options$ = this.field.options;
             }
         };
+        KlesFormButtonToogleGroupComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormButtonToogleGroupComponent = __decorate([
             core.Component({
                 selector: 'kles-form-button-toogle-group',
@@ -1116,11 +1169,6 @@
         ], 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);
@@ -1131,9 +1179,9 @@
             // 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([
             core.Component({
@@ -1182,7 +1230,6 @@
             this.buildComponent();
         };
         KlesDynamicFieldDirective.prototype.ngOnChanges = function (changes) {
-            console.log('ngOnCHange', changes);
             if (changes.group) {
                 this.group = changes.group.currentValue;
             }
@@ -1426,10 +1473,13 @@
         KlesFormButtonComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
         };
+        KlesFormButtonComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormButtonComponent = __decorate([
             core.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;
@@ -1475,10 +1525,13 @@
         KlesFormButtonCheckerComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
         };
+        KlesFormButtonCheckerComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormButtonCheckerComponent = __decorate([
             core.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;
@@ -1529,10 +1582,6 @@
                             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:
@@ -1610,6 +1659,9 @@
         KlesFormButtonFileComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
         };
+        KlesFormButtonFileComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormButtonFileComponent = __decorate([
             core.Component({
                 selector: 'kles-form-button-file',
@@ -1627,6 +1679,9 @@
         KlesFormTextareaComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
         };
+        KlesFormTextareaComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormTextareaComponent = __decorate([
             core.Component({
                 selector: 'kles-form-textarea',
@@ -1645,6 +1700,9 @@
         KlesFormTextComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
         };
+        KlesFormTextComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormTextComponent = __decorate([
             core.Component({
                 selector: 'kles-form-text',
@@ -1659,10 +1717,13 @@
         function KlesFormInputClearableComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        KlesFormInputClearableComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormInputClearableComponent = __decorate([
             core.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);
@@ -1720,10 +1781,13 @@
             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([
             core.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;
@@ -1737,10 +1801,13 @@
         KlesFormBadgeComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
         };
+        KlesFormBadgeComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
         KlesFormBadgeComponent = __decorate([
             core.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;