@3kles/kles-material-dynamicforms 1.1.11 → 1.1.14
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 +8 -7
- package/bundles/3kles-kles-material-dynamicforms.umd.js.map +1 -1
- package/bundles/3kles-kles-material-dynamicforms.umd.min.js +2 -2
- package/bundles/3kles-kles-material-dynamicforms.umd.min.js.map +1 -1
- package/esm2015/lib/fields/group.component.js +5 -3
- package/esm2015/lib/fields/input.clearable.component.js +2 -2
- package/esm2015/lib/fields/select.component.js +5 -5
- package/esm2015/lib/fields/select.search.component.js +7 -7
- package/esm5/lib/fields/group.component.js +4 -3
- package/esm5/lib/fields/input.clearable.component.js +2 -2
- package/esm5/lib/fields/select.component.js +2 -2
- package/esm5/lib/fields/select.search.component.js +4 -4
- package/fesm2015/3kles-kles-material-dynamicforms.js +15 -13
- package/fesm2015/3kles-kles-material-dynamicforms.js.map +1 -1
- package/fesm5/3kles-kles-material-dynamicforms.js +8 -7
- package/fesm5/3kles-kles-material-dynamicforms.js.map +1 -1
- package/package.json +1 -1
|
@@ -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\">{{(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",
|
|
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",
|
|
745
745
|
styles: ['mat-form-field {width: calc(100%)}']
|
|
746
746
|
})
|
|
747
747
|
], KlesFormSelectComponent);
|
|
@@ -941,10 +941,11 @@
|
|
|
941
941
|
KlesFormGroupComponent = __decorate([
|
|
942
942
|
core.Component({
|
|
943
943
|
selector: 'kles-group',
|
|
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 <ng-container *ngFor=\"let subfield of field.collections;\" klesDynamicField [field]=\"subfield\" [group]=\"subGroup\" [siblingFields]=\"field.collections\">\n </ng-container>\n </div>\n </div>\n",
|
|
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
|
-
'.
|
|
947
|
+
'.row { gap:10px;}',
|
|
948
|
+
'.group-container {display:flex; flex-direction: inherit; width: inherit; flex-wrap: wrap}']
|
|
948
949
|
})
|
|
949
950
|
], KlesFormGroupComponent);
|
|
950
951
|
return KlesFormGroupComponent;
|
|
@@ -1022,7 +1023,7 @@
|
|
|
1022
1023
|
})).subscribe(this.optionsFiltered$);
|
|
1023
1024
|
this.group.controls[this.field.name]
|
|
1024
1025
|
.valueChanges.pipe(operators.takeUntil(this._onDestroy), operators.startWith(this.group.controls[this.field.name].value), operators.switchMap(function (selected) {
|
|
1025
|
-
return _this.optionsFiltered$.pipe(operators.map(function (options) {
|
|
1026
|
+
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) {
|
|
1026
1027
|
if (!selected) {
|
|
1027
1028
|
return false;
|
|
1028
1029
|
}
|
|
@@ -1044,7 +1045,7 @@
|
|
|
1044
1045
|
KlesFormSelectSearchComponent.prototype.toggleAllSelection = function (state) {
|
|
1045
1046
|
var _this = this;
|
|
1046
1047
|
if (state.checked) {
|
|
1047
|
-
this.optionsFiltered$.pipe(operators.take(1)).subscribe(function (options) {
|
|
1048
|
+
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) {
|
|
1048
1049
|
if (options.length > 0) {
|
|
1049
1050
|
_this.group.controls[_this.field.name].patchValue(options.slice());
|
|
1050
1051
|
}
|
|
@@ -1071,7 +1072,7 @@
|
|
|
1071
1072
|
KlesFormSelectSearchComponent = __decorate([
|
|
1072
1073
|
core.Component({
|
|
1073
1074
|
selector: 'kles-form-select-search',
|
|
1074
|
-
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",
|
|
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",
|
|
1075
1076
|
styles: ['mat-form-field {width: calc(100%)}', '.selectAll {padding: 10px 16px;}']
|
|
1076
1077
|
})
|
|
1077
1078
|
], KlesFormSelectSearchComponent);
|
|
@@ -1723,7 +1724,7 @@
|
|
|
1723
1724
|
KlesFormInputClearableComponent = __decorate([
|
|
1724
1725
|
core.Component({
|
|
1725
1726
|
selector: 'kles-form-input-clearable',
|
|
1726
|
-
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 ",
|
|
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 ",
|
|
1727
1728
|
styles: ['mat-form-field {width: calc(100%)}']
|
|
1728
1729
|
})
|
|
1729
1730
|
], KlesFormInputClearableComponent);
|