@3kles/kles-material-dynamicforms 1.1.15 → 1.1.18
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 +5 -4
- 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/group.component.js +4 -3
- package/esm2015/lib/fields/select.search.component.js +5 -5
- package/esm2015/lib/fields/text.component.js +5 -5
- package/esm2015/lib/interfaces/field.config.interface.js +1 -1
- package/esm5/lib/fields/group.component.js +4 -3
- package/esm5/lib/fields/select.search.component.js +2 -2
- package/esm5/lib/fields/text.component.js +4 -4
- package/esm5/lib/interfaces/field.config.interface.js +1 -1
- package/fesm2015/3kles-kles-material-dynamicforms.js +9 -8
- package/fesm2015/3kles-kles-material-dynamicforms.js.map +1 -1
- package/fesm5/3kles-kles-material-dynamicforms.js +5 -4
- 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
|
@@ -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\" [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 <
|
|
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 <mat-checkbox *ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n (change)=\"toggleAllSelection($event)\">\n {{'selectAll' | translate}}\n </mat-checkbox>\n <ng-container *ngIf=\"!field.autocompleteComponent\">\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);
|
|
@@ -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;
|