npm - @3kles/kles-material-dynamicforms - Versions diffs - 1.1.12 → 1.1.15 - Mend

@3kles/kles-material-dynamicforms 1.1.12 → 1.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

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

@@ -673,7 +673,7 @@
         KlesFormInputComponent = __decorate([
             core.Component({
                 selector: 'kles-form-input',
-                template: "\n    <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n\n        <ng-container *ngIf=\"field.autocomplete; else notAutoComplete\">\n            <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\" \n            [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\"\n            [matAutocomplete]=\"auto\">\n\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\" [panelWidth]=\"this.field.panelWidth\">\n                <ng-container *ngIf=\"!field.autocompleteComponent\">\n                    <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n                        {{field.property ? option[field.property] : option}}\n                    </mat-option>\n                </ng-container>\n\n                <ng-container *ngIf=\"field.autocompleteComponent\">\n                    <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"option\" [field]=\"field\">\n                        </ng-container>\n                    </mat-option>\n                </ng-container>\n            </mat-autocomplete>\n        </ng-container>\n\n        <ng-template #notAutoComplete>\n            <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\"\n            [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\">\n        </ng-template>\n\n        <mat-spinner matSuffix mode=\"indeterminate\" *ngIf=\"isPending()\" diameter=\"17\"></mat-spinner>\n\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ",
+                template: "\n    <mat-form-field [formGroup]=\"group\" [color]=\"field.color\" class=\"form-element\">\n\n        <ng-container *ngIf=\"field.autocomplete; else notAutoComplete\">\n            <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\" \n            [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\"\n            [matAutocomplete]=\"auto\">\n\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\" [panelWidth]=\"this.field.panelWidth\">\n                <ng-container *ngIf=\"!field.autocompleteComponent\">\n                    <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n                        {{field.property ? option[field.property] : option}}\n                    </mat-option>\n                </ng-container>\n\n                <ng-container *ngIf=\"field.autocompleteComponent\">\n                    <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"option\" [field]=\"field\">\n                        </ng-container>\n                    </mat-option>\n                </ng-container>\n            </mat-autocomplete>\n        </ng-container>\n\n        <ng-template #notAutoComplete>\n            <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\"\n            [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\">\n        </ng-template>\n\n        <mat-spinner matSuffix mode=\"indeterminate\" *ngIf=\"isPending()\" diameter=\"17\"></mat-spinner>\n\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ",
                 styles: ['mat-form-field {width: calc(100%)}']
             })
         ], KlesFormInputComponent);
@@ -741,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\" [color]=\"field.color\" [formGroup]=\"group\">\n        <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\"\n        (openedChange)=\"openChange($event)\" [compareWith]=\"compareFn\"\n        [ngClass]=\"field.ngClass\" [placeholder]=\"field.placeholder | translate\" [formControlName]=\"field.name\" [multiple]=\"field.multiple\">\n        <mat-select-trigger *ngIf=\"field.triggerComponent\">\n            <ng-container klesComponent [component]=\"field.triggerComponent\" [value]=\"group.controls[field.name].value\" [field]=\"field\"></ng-container>\n        </mat-select-trigger>\n\n\n        <ng-container *ngIf=\"!field.virtualScroll\">\n            <ng-container *ngIf=\"!field.autocompleteComponent\">\n                <mat-option *ngFor=\"let item of options$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n            </ng-container>\n\n            <ng-container *ngIf=\"field.autocompleteComponent\">\n                <mat-option *ngFor=\"let item of options$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">\n                    <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                </mat-option>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"field.virtualScroll\">\n            <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize || 50\" [style.height.px]=5*48>\n                <ng-container *ngIf=\"!field.autocompleteComponent\">\n                    <mat-option *cdkVirtualFor=\"let item of options$ | async\" [value]=\"item\"  [disabled]=\"item?.disabled\">\n                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                    </mat-option>\n\n                    <ng-container *ngIf=\"field.multiple\">\n                        <mat-option *ngFor=\"let item of group.controls[field.name].value | slice:0:30\" [value]=\"item\"\n                        style=\"display:none\">\n                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                        </mat-option>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!field.multiple && group.controls[field.name].value\">\n                    <mat-option *ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"field.autocompleteComponent\">\n                    <mat-option *cdkVirtualFor=\"let item of options$ | async\" [value]=\"item\" [disabled]=\"item?.disabled\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                    </mat-option>\n                    <ng-container *ngIf=\"field.multiple\">\n                        <mat-option *ngFor=\"let item of group.controls[field.name].value | slice:0:30\" [value]=\"item\"\n                        style=\"display:none\">\n                            <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                    <ng-container *ngIf=\"!field.multiple && group.controls[field.name].value\">\n                        <mat-option *ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n                            <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n\n        </ng-container>\n\n        </mat-select>\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n            <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n                <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n            </ng-container>\n    </mat-form-field>\n",
                 styles: ['mat-form-field {width: calc(100%)}']
             })
         ], KlesFormSelectComponent);
@@ -760,7 +760,7 @@
         KlesFormDateComponent = __decorate([
             core.Component({
                 selector: "kles-form-datepicker",
-                template: "\n    <mat-form-field class=\"demo-full-width margin-top\" [formGroup]=\"group\">\n        <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [matDatepicker]=\"picker\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\">\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-hint></mat-hint>\n        \n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        </mat-form-field>\n    "
+                template: "\n    <mat-form-field class=\"demo-full-width margin-top\" [color]=\"field.color\" [formGroup]=\"group\">\n        <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [matDatepicker]=\"picker\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\">\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-hint></mat-hint>\n        \n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        </mat-form-field>\n    "
             })
         ], KlesFormDateComponent);
         return KlesFormDateComponent;
@@ -796,7 +796,7 @@
         KlesFormCheckboxComponent = __decorate([
             core.Component({
                 selector: "kles-form-checkbox",
-                template: "\n    <div [formGroup]=\"group\" >  \n        <mat-checkbox matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [indeterminate]=\"field.indeterminate\" [formControlName]=\"field.name\">{{field.label | translate}}</mat-checkbox>\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n        </ng-container>\n    </div>\n"
+                template: "\n    <div [formGroup]=\"group\" >  \n        <mat-checkbox matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [indeterminate]=\"field.indeterminate\" [color]=\"field.color\" [formControlName]=\"field.name\">{{field.label | translate}}</mat-checkbox>\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n        </ng-container>\n    </div>\n"
             })
         ], KlesFormCheckboxComponent);
         return KlesFormCheckboxComponent;
@@ -941,10 +941,11 @@
         KlesFormGroupComponent = __decorate([
             core.Component({
                 selector: 'kles-group',
-                template: "\n    <div [formGroup]=\"group\" class=\"group-container\">\n        <div [formGroupName]=\"field.name\" class=\"group-container\" [style.flex-direction]=\"field.direction || 'inherit'\" [ngClass]=\"field.ngClass\" >\n            <ng-container *ngFor=\"let subfield of field.collections;\" klesDynamicField [field]=\"subfield\" [group]=\"subGroup\" [siblingFields]=\"field.collections\">\n            </ng-container>\n        </div>\n    </div>\n",
+                template: "\n    <div [formGroup]=\"group\" class=\"group-container\">\n        <div [formGroupName]=\"field.name\" class=\"group-container\" [style.flex-direction]=\"field.direction || 'inherit'\" [ngClass]=\"field.ngClass\"\n        [ngClass]=\"field.direction === 'column' ? null: 'row'\" >\n            <ng-container *ngFor=\"let subfield of field.collections;\" klesDynamicField [field]=\"subfield\" [group]=\"subGroup\" [siblingFields]=\"field.collections\">\n            </ng-container>\n        </div>\n    </div>\n",
                 styles: ['mat-form-field {width: calc(100%)}',
                     ':host { display:flex; flex-direction: inherit}',
-                    '.group-container {display:flex; flex-direction: inherit}']
+                    '.row { gap:10px;}',
+                    '.group-container {display:flex; flex-direction: inherit; width: inherit; flex-wrap: wrap}']
             })
         ], KlesFormGroupComponent);
         return KlesFormGroupComponent;
@@ -1022,7 +1023,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;
                     }
@@ -1044,7 +1045,7 @@
         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());
                     }
@@ -1071,7 +1072,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\" [color]=\"field.color\" [formGroup]=\"group\">\n        <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\"\n        (openedChange)=\"openChange($event)\" [compareWith]=\"compareFn\"\n        [placeholder]=\"field.placeholder | translate\" [formControlName]=\"field.name\" [multiple]=\"field.multiple\">\n        <mat-select-trigger *ngIf=\"field.triggerComponent\">\n            <ng-container klesComponent [component]=\"field.triggerComponent\" [value]=\"group.controls[field.name].value\" [field]=\"field\"></ng-container>\n        </mat-select-trigger>\n\n        <ng-container *ngIf=\"field.virtualScroll\">\n            <mat-option>\n                <ngx-mat-select-search [formControl]=\"searchControl\"\n                placeholderLabel=\"\" noEntriesFoundLabel =\"\"></ngx-mat-select-search>\n            </mat-option>\n                \n            <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize || 50\" [style.height.px]=4*48>\n                <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);
@@ -1685,7 +1686,7 @@
         KlesFormTextareaComponent = __decorate([
             core.Component({
                 selector: 'kles-form-textarea',
-                template: "\n    <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n        <textarea matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" \n        [formControlName]=\"field.name\" cdkTextareaAutosize [placeholder]=\"field.placeholder | translate\"\n        [cdkAutosizeMinRows]=\"field.textareaAutoSize?.minRows\" [cdkAutosizeMaxRows]=\"field.textareaAutoSize?.maxRows\"  [maxlength]=\"field.maxLength\">\n        </textarea>\n\n\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ",
+                template: "\n    <mat-form-field [formGroup]=\"group\" [color]=\"field.color\" class=\"form-element\">\n        <textarea matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" \n        [formControlName]=\"field.name\" cdkTextareaAutosize [placeholder]=\"field.placeholder | translate\"\n        [cdkAutosizeMinRows]=\"field.textareaAutoSize?.minRows\" [cdkAutosizeMaxRows]=\"field.textareaAutoSize?.maxRows\"  [maxlength]=\"field.maxLength\">\n        </textarea>\n\n\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ",
                 styles: ['mat-form-field {width: calc(100%)}']
             })
         ], KlesFormTextareaComponent);
@@ -1723,7 +1724,7 @@
         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 *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    ",
+                template: "\n    <mat-form-field [formGroup]=\"group\" [color]=\"field.color\" class=\"form-element\">\n\n        <ng-container *ngIf=\"field.autocomplete; else notAutoComplete\">\n            <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\"\n            [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\"\n            [matAutocomplete]=\"auto\">\n\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\" [panelWidth]=\"this.field.panelWidth\">\n                <ng-container *ngIf=\"!field.autocompleteComponent\">\n                    <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n                        {{field.property ? option[field.property] : option}}\n                    </mat-option>\n                </ng-container>\n\n                <ng-container *ngIf=\"field.autocompleteComponent\">\n                    <mat-option *ngFor=\"let option of filteredOption | async\" [value]=\"option\">\n                        <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"option\" [field]=\"field\">\n                        </ng-container>\n                    </mat-option>\n                </ng-container>\n            </mat-autocomplete>\n        </ng-container>\n\n        <ng-template #notAutoComplete>\n            <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder | translate\" [type]=\"field.inputType\"\n            [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\">\n        </ng-template>\n        <button *ngIf=\"!group.get(field.name).disabled\" mat-button matSuffix mat-icon-button aria-label=\"Clear\" type=\"button\"\n            (click)=\"group.controls[field.name].reset();\">\n            <mat-icon>close</mat-icon>\n        </button>\n\n        <mat-spinner matSuffix mode=\"indeterminate\" *ngIf=\"isPending()\" diameter=\"17\"></mat-spinner>\n\n        <ng-container *ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n            <mat-error *ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ",
                 styles: ['mat-form-field {width: calc(100%)}']
             })
         ], KlesFormInputClearableComponent);