@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
|
@@ -765,8 +765,9 @@ var KlesFormGroupComponent = /** @class */ (function (_super) {
|
|
|
765
765
|
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",
|
|
766
766
|
styles: ['mat-form-field {width: calc(100%)}',
|
|
767
767
|
':host { display:flex; flex-direction: inherit}',
|
|
768
|
-
'.row { gap:10px;}',
|
|
769
|
-
'.group-container {display:flex; flex-direction: inherit; width: inherit; flex-wrap: wrap}'
|
|
768
|
+
// '.row { gap:10px;}',
|
|
769
|
+
// '.group-container {display:flex; flex-direction: inherit; width: inherit; flex-wrap: wrap}'
|
|
770
|
+
'.group-container {display:flex; flex-direction: inherit; width: inherit;}']
|
|
770
771
|
})
|
|
771
772
|
], KlesFormGroupComponent);
|
|
772
773
|
return KlesFormGroupComponent;
|
|
@@ -893,7 +894,7 @@ var KlesFormSelectSearchComponent = /** @class */ (function (_super) {
|
|
|
893
894
|
KlesFormSelectSearchComponent = __decorate([
|
|
894
895
|
Component({
|
|
895
896
|
selector: 'kles-form-select-search',
|
|
896
|
-
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 <
|
|
897
|
+
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",
|
|
897
898
|
styles: ['mat-form-field {width: calc(100%)}', '.selectAll {padding: 10px 16px;}']
|
|
898
899
|
})
|
|
899
900
|
], KlesFormSelectSearchComponent);
|
|
@@ -1528,7 +1529,7 @@ var KlesFormTextComponent = /** @class */ (function (_super) {
|
|
|
1528
1529
|
KlesFormTextComponent = __decorate([
|
|
1529
1530
|
Component({
|
|
1530
1531
|
selector: 'kles-form-text',
|
|
1531
|
-
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
|
|
1532
|
+
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"
|
|
1532
1533
|
})
|
|
1533
1534
|
], KlesFormTextComponent);
|
|
1534
1535
|
return KlesFormTextComponent;
|