@3kles/kles-material-dynamicforms 1.1.14 → 1.1.17
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.
- package/3kles-kles-material-dynamicforms.metadata.json +1 -1
- package/bundles/3kles-kles-material-dynamicforms.umd.js +11 -10
- package/bundles/3kles-kles-material-dynamicforms.umd.js.map +1 -1
- package/bundles/3kles-kles-material-dynamicforms.umd.min.js +1 -1
- package/bundles/3kles-kles-material-dynamicforms.umd.min.js.map +1 -1
- package/esm2015/lib/fields/checkbox.component.js +2 -2
- package/esm2015/lib/fields/date.component.js +2 -2
- package/esm2015/lib/fields/group.component.js +4 -3
- package/esm2015/lib/fields/input.clearable.component.js +2 -2
- package/esm2015/lib/fields/input.component.js +2 -2
- package/esm2015/lib/fields/select.component.js +2 -2
- package/esm2015/lib/fields/select.search.component.js +2 -2
- package/esm2015/lib/fields/text.component.js +5 -5
- package/esm2015/lib/fields/textarea.component.js +2 -2
- package/esm2015/lib/interfaces/field.config.interface.js +1 -1
- package/esm5/lib/fields/checkbox.component.js +2 -2
- package/esm5/lib/fields/date.component.js +2 -2
- package/esm5/lib/fields/group.component.js +4 -3
- package/esm5/lib/fields/input.clearable.component.js +2 -2
- package/esm5/lib/fields/input.component.js +2 -2
- package/esm5/lib/fields/select.component.js +2 -2
- package/esm5/lib/fields/select.search.component.js +2 -2
- package/esm5/lib/fields/text.component.js +4 -4
- package/esm5/lib/fields/textarea.component.js +2 -2
- package/esm5/lib/interfaces/field.config.interface.js +1 -1
- package/fesm2015/3kles-kles-material-dynamicforms.js +12 -11
- package/fesm2015/3kles-kles-material-dynamicforms.js.map +1 -1
- package/fesm5/3kles-kles-material-dynamicforms.js +11 -10
- package/fesm5/3kles-kles-material-dynamicforms.js.map +1 -1
- package/lib/fields/text.component.d.ts +2 -2
- package/lib/interfaces/field.config.interface.d.ts +1 -0
- package/package.json +1 -1
|
@@ -673,7 +673,7 @@
|
|
|
673
673
|
KlesFormInputComponent = __decorate([
|
|
674
674
|
core.Component({
|
|
675
675
|
selector: 'kles-form-input',
|
|
676
|
-
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 ",
|
|
676
|
+
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 ",
|
|
677
677
|
styles: ['mat-form-field {width: calc(100%)}']
|
|
678
678
|
})
|
|
679
679
|
], KlesFormInputComponent);
|
|
@@ -741,7 +741,7 @@
|
|
|
741
741
|
KlesFormSelectComponent = __decorate([
|
|
742
742
|
core.Component({
|
|
743
743
|
selector: 'kles-form-select',
|
|
744
|
-
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",
|
|
744
|
+
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",
|
|
745
745
|
styles: ['mat-form-field {width: calc(100%)}']
|
|
746
746
|
})
|
|
747
747
|
], KlesFormSelectComponent);
|
|
@@ -760,7 +760,7 @@
|
|
|
760
760
|
KlesFormDateComponent = __decorate([
|
|
761
761
|
core.Component({
|
|
762
762
|
selector: "kles-form-datepicker",
|
|
763
|
-
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 "
|
|
763
|
+
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 "
|
|
764
764
|
})
|
|
765
765
|
], KlesFormDateComponent);
|
|
766
766
|
return KlesFormDateComponent;
|
|
@@ -796,7 +796,7 @@
|
|
|
796
796
|
KlesFormCheckboxComponent = __decorate([
|
|
797
797
|
core.Component({
|
|
798
798
|
selector: "kles-form-checkbox",
|
|
799
|
-
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"
|
|
799
|
+
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"
|
|
800
800
|
})
|
|
801
801
|
], KlesFormCheckboxComponent);
|
|
802
802
|
return KlesFormCheckboxComponent;
|
|
@@ -944,8 +944,9 @@
|
|
|
944
944
|
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",
|
|
945
945
|
styles: ['mat-form-field {width: calc(100%)}',
|
|
946
946
|
':host { display:flex; flex-direction: inherit}',
|
|
947
|
-
'.row { gap:10px;}',
|
|
948
|
-
'.group-container {display:flex; flex-direction: inherit; width: inherit; flex-wrap: wrap}'
|
|
947
|
+
// '.row { gap:10px;}',
|
|
948
|
+
// '.group-container {display:flex; flex-direction: inherit; width: inherit; flex-wrap: wrap}'
|
|
949
|
+
'.group-container {display:flex; flex-direction: inherit; width: inherit;}']
|
|
949
950
|
})
|
|
950
951
|
], KlesFormGroupComponent);
|
|
951
952
|
return KlesFormGroupComponent;
|
|
@@ -1072,7 +1073,7 @@
|
|
|
1072
1073
|
KlesFormSelectSearchComponent = __decorate([
|
|
1073
1074
|
core.Component({
|
|
1074
1075
|
selector: 'kles-form-select-search',
|
|
1075
|
-
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",
|
|
1076
|
+
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",
|
|
1076
1077
|
styles: ['mat-form-field {width: calc(100%)}', '.selectAll {padding: 10px 16px;}']
|
|
1077
1078
|
})
|
|
1078
1079
|
], KlesFormSelectSearchComponent);
|
|
@@ -1686,7 +1687,7 @@
|
|
|
1686
1687
|
KlesFormTextareaComponent = __decorate([
|
|
1687
1688
|
core.Component({
|
|
1688
1689
|
selector: 'kles-form-textarea',
|
|
1689
|
-
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 ",
|
|
1690
|
+
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 ",
|
|
1690
1691
|
styles: ['mat-form-field {width: calc(100%)}']
|
|
1691
1692
|
})
|
|
1692
1693
|
], KlesFormTextareaComponent);
|
|
@@ -1707,7 +1708,7 @@
|
|
|
1707
1708
|
KlesFormTextComponent = __decorate([
|
|
1708
1709
|
core.Component({
|
|
1709
1710
|
selector: 'kles-form-text',
|
|
1710
|
-
template: "\n <span matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n {{(field.property ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform:field.pipeTransform}}\n </span
|
|
1711
|
+
template: "\n <span matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n {{((field.property && group.controls[field.name].value) ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform:field.pipeTransform}}\n </span>\n"
|
|
1711
1712
|
})
|
|
1712
1713
|
], KlesFormTextComponent);
|
|
1713
1714
|
return KlesFormTextComponent;
|
|
@@ -1724,7 +1725,7 @@
|
|
|
1724
1725
|
KlesFormInputClearableComponent = __decorate([
|
|
1725
1726
|
core.Component({
|
|
1726
1727
|
selector: 'kles-form-input-clearable',
|
|
1727
|
-
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 ",
|
|
1728
|
+
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 ",
|
|
1728
1729
|
styles: ['mat-form-field {width: calc(100%)}']
|
|
1729
1730
|
})
|
|
1730
1731
|
], KlesFormInputClearableComponent);
|