@3kles/kles-material-dynamicforms 1.1.3 → 1.1.7
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 +76 -12
- 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/directive/dynamic-field.directive.js +3 -1
- package/esm2015/lib/dynamic-form.component.js +30 -9
- package/esm2015/lib/fields/array.component.js +37 -0
- package/esm2015/lib/fields/group.component.js +2 -2
- package/esm2015/lib/fields/select.component.js +8 -2
- package/esm2015/lib/fields/select.search.component.js +8 -2
- package/esm2015/lib/kles-material-dynamicforms.module.js +4 -2
- package/esm2015/public-api.js +2 -1
- package/esm5/lib/directive/dynamic-field.directive.js +3 -1
- package/esm5/lib/dynamic-form.component.js +31 -10
- package/esm5/lib/fields/array.component.js +31 -0
- package/esm5/lib/fields/group.component.js +2 -2
- package/esm5/lib/fields/select.component.js +10 -3
- package/esm5/lib/fields/select.search.component.js +8 -2
- package/esm5/lib/kles-material-dynamicforms.module.js +4 -2
- package/esm5/public-api.js +2 -1
- package/fesm2015/3kles-kles-material-dynamicforms.js +80 -12
- package/fesm2015/3kles-kles-material-dynamicforms.js.map +1 -1
- package/fesm5/3kles-kles-material-dynamicforms.js +77 -14
- package/fesm5/3kles-kles-material-dynamicforms.js.map +1 -1
- package/lib/fields/array.component.d.ts +7 -0
- package/lib/fields/select.component.d.ts +1 -0
- package/lib/fields/select.search.component.d.ts +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -300,16 +300,37 @@
|
|
|
300
300
|
};
|
|
301
301
|
KlesDynamicFormComponent.prototype.createControl = function (field) {
|
|
302
302
|
var _this = this;
|
|
303
|
-
if (field.type === '
|
|
303
|
+
if (field.type === 'array') {
|
|
304
304
|
var array_1 = this.fb.array([]);
|
|
305
|
-
field.value.
|
|
306
|
-
|
|
305
|
+
if (field.value && Array.isArray(field.value)) {
|
|
306
|
+
if (field.collections && Array.isArray(field.collections)) {
|
|
307
|
+
field.value.forEach(function (val) {
|
|
308
|
+
var group = _this.fb.group({});
|
|
309
|
+
field.collections.forEach(function (subfield) {
|
|
310
|
+
var data = val[subfield.name] || null;
|
|
311
|
+
var control = _this.createControl(__assign(__assign({}, subfield), (data && { value: data })));
|
|
312
|
+
group.addControl(subfield.name, control);
|
|
313
|
+
});
|
|
314
|
+
array_1.push(group);
|
|
315
|
+
});
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
else {
|
|
319
|
+
var group_1 = this.fb.group({});
|
|
307
320
|
field.collections.forEach(function (subfield) {
|
|
308
|
-
var control = _this.createControl(subfield);
|
|
309
|
-
|
|
321
|
+
var control = _this.createControl(__assign({}, subfield));
|
|
322
|
+
group_1.addControl(subfield.name, control);
|
|
310
323
|
});
|
|
311
|
-
array_1.push(
|
|
312
|
-
}
|
|
324
|
+
array_1.push(group_1);
|
|
325
|
+
}
|
|
326
|
+
// field.value.forEach((data: any) => {
|
|
327
|
+
// const subGroup = this.fb.group({});
|
|
328
|
+
// field.collections.forEach(subfield => {
|
|
329
|
+
// const control = this.createControl(subfield);
|
|
330
|
+
// subGroup.addControl(subfield.name, control);
|
|
331
|
+
// });
|
|
332
|
+
// array.push(subGroup);
|
|
333
|
+
// });
|
|
313
334
|
return array_1;
|
|
314
335
|
}
|
|
315
336
|
else if (field.type === 'group') {
|
|
@@ -653,7 +674,14 @@
|
|
|
653
674
|
var KlesFormSelectComponent = /** @class */ (function (_super) {
|
|
654
675
|
__extends(KlesFormSelectComponent, _super);
|
|
655
676
|
function KlesFormSelectComponent() {
|
|
656
|
-
|
|
677
|
+
var _this = _super.call(this) || this;
|
|
678
|
+
_this.compareFn = function (o1, o2) {
|
|
679
|
+
if (_this.field.property && o1 && o2) {
|
|
680
|
+
return o1[_this.field.property] === o2[_this.field.property];
|
|
681
|
+
}
|
|
682
|
+
return o1 === o2;
|
|
683
|
+
};
|
|
684
|
+
return _this;
|
|
657
685
|
}
|
|
658
686
|
KlesFormSelectComponent.prototype.ngOnInit = function () {
|
|
659
687
|
_super.prototype.ngOnInit.call(this);
|
|
@@ -681,7 +709,7 @@
|
|
|
681
709
|
KlesFormSelectComponent = __decorate([
|
|
682
710
|
core.Component({
|
|
683
711
|
selector: 'kles-form-select',
|
|
684
|
-
template: "\n <mat-form-field class=\"margin-top\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\"\n (openedChange)=\"openChange($event)\"\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",
|
|
712
|
+
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",
|
|
685
713
|
styles: ['mat-form-field {width: calc(100%)}']
|
|
686
714
|
})
|
|
687
715
|
], KlesFormSelectComponent);
|
|
@@ -860,7 +888,7 @@
|
|
|
860
888
|
KlesFormGroupComponent = __decorate([
|
|
861
889
|
core.Component({
|
|
862
890
|
selector: 'kles-group',
|
|
863
|
-
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\">\n </ng-container>\n </div>\n </div>\n",
|
|
891
|
+
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",
|
|
864
892
|
styles: ['mat-form-field {width: calc(100%)}',
|
|
865
893
|
':host { display:flex; flex-direction: inherit}',
|
|
866
894
|
'.group-container {display:flex; flex-direction: inherit}']
|
|
@@ -892,6 +920,12 @@
|
|
|
892
920
|
_this.selectAllControl = new forms.FormControl(false);
|
|
893
921
|
_this.optionsFiltered$ = new rxjs.ReplaySubject(1);
|
|
894
922
|
_this._onDestroy = new rxjs.Subject();
|
|
923
|
+
_this.compareFn = function (o1, o2) {
|
|
924
|
+
if (_this.field.property && o1 && o2) {
|
|
925
|
+
return o1[_this.field.property] === o2[_this.field.property];
|
|
926
|
+
}
|
|
927
|
+
return o1 === o2;
|
|
928
|
+
};
|
|
895
929
|
return _this;
|
|
896
930
|
}
|
|
897
931
|
KlesFormSelectSearchComponent.prototype.ngOnInit = function () {
|
|
@@ -981,7 +1015,7 @@
|
|
|
981
1015
|
KlesFormSelectSearchComponent = __decorate([
|
|
982
1016
|
core.Component({
|
|
983
1017
|
selector: 'kles-form-select-search',
|
|
984
|
-
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)\"\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",
|
|
1018
|
+
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",
|
|
985
1019
|
styles: ['mat-form-field {width: calc(100%)}', '.selectAll {padding: 10px 16px;}']
|
|
986
1020
|
})
|
|
987
1021
|
], KlesFormSelectSearchComponent);
|
|
@@ -1073,6 +1107,33 @@
|
|
|
1073
1107
|
// <mat-button-toggle value="underline">Underline</mat-button-toggle>
|
|
1074
1108
|
// </mat-button-toggle-group>
|
|
1075
1109
|
|
|
1110
|
+
var KlesFormArrayComponent = /** @class */ (function (_super) {
|
|
1111
|
+
__extends(KlesFormArrayComponent, _super);
|
|
1112
|
+
function KlesFormArrayComponent() {
|
|
1113
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
1114
|
+
}
|
|
1115
|
+
KlesFormArrayComponent.prototype.ngOnInit = function () {
|
|
1116
|
+
// this.subGroup = this.group.controls[this.field.name] as FormGroup;
|
|
1117
|
+
_super.prototype.ngOnInit.call(this);
|
|
1118
|
+
this.formArray = this.group.controls[this.field.name];
|
|
1119
|
+
console.log('on arrive ici');
|
|
1120
|
+
console.log(this.field);
|
|
1121
|
+
console.log(this.formArray);
|
|
1122
|
+
};
|
|
1123
|
+
KlesFormArrayComponent = __decorate([
|
|
1124
|
+
core.Component({
|
|
1125
|
+
selector: 'kles-array',
|
|
1126
|
+
template: "\n <div [formGroup]=\"group\">\n <ng-container [formArrayName]=\"field.name\">\n <div class=\"group-container\" *ngFor=\"let subGroup of formArray.controls let index = index;\"\n [ngClass]=\"field.direction === 'column' ? 'column': 'row'\">\n <ng-container *ngFor=\"let subfield of field.collections;\"\n klesDynamicField [field]=\"subfield\" [group]=\"subGroup\" [siblingFields]=\"field.collections\">\n </ng-container>\n </div>\n </ng-container>\n </div>\n",
|
|
1127
|
+
styles: ['mat-form-field {width: calc(100%)}',
|
|
1128
|
+
':host { display:flex; flex-direction: inherit}',
|
|
1129
|
+
'.group-container {display:flex; flex-direction: inherit}',
|
|
1130
|
+
'.row { gap:10px; flex-direction: row }',
|
|
1131
|
+
'.column { flex-direction: column, gap:0px}']
|
|
1132
|
+
})
|
|
1133
|
+
], KlesFormArrayComponent);
|
|
1134
|
+
return KlesFormArrayComponent;
|
|
1135
|
+
}(KlesFieldAbstract));
|
|
1136
|
+
|
|
1076
1137
|
var componentMapper = {
|
|
1077
1138
|
label: KlesFormLabelComponent,
|
|
1078
1139
|
input: KlesFormInputComponent,
|
|
@@ -1082,6 +1143,7 @@
|
|
|
1082
1143
|
radio: KlesFormRadioComponent,
|
|
1083
1144
|
checkbox: KlesFormCheckboxComponent,
|
|
1084
1145
|
listField: KlesFormListFieldComponent,
|
|
1146
|
+
array: KlesFormArrayComponent,
|
|
1085
1147
|
color: KlesFormColorComponent,
|
|
1086
1148
|
chip: KlesFormChipComponent,
|
|
1087
1149
|
group: KlesFormGroupComponent,
|
|
@@ -1698,7 +1760,8 @@
|
|
|
1698
1760
|
KlesFormLinkComponent,
|
|
1699
1761
|
KlesFormSlideToggleComponent,
|
|
1700
1762
|
KlesFormSelectionListComponent,
|
|
1701
|
-
KlesFormButtonToogleGroupComponent
|
|
1763
|
+
KlesFormButtonToogleGroupComponent,
|
|
1764
|
+
KlesFormArrayComponent
|
|
1702
1765
|
];
|
|
1703
1766
|
var directives = [KlesDynamicFieldDirective, KlesComponentDirective];
|
|
1704
1767
|
var pipes = [KlesTransformPipe, ArrayFormatPipe];
|
|
@@ -1772,6 +1835,7 @@
|
|
|
1772
1835
|
exports.KlesDynamicFieldDirective = KlesDynamicFieldDirective;
|
|
1773
1836
|
exports.KlesDynamicFormComponent = KlesDynamicFormComponent;
|
|
1774
1837
|
exports.KlesFieldAbstract = KlesFieldAbstract;
|
|
1838
|
+
exports.KlesFormArrayComponent = KlesFormArrayComponent;
|
|
1775
1839
|
exports.KlesFormBadgeComponent = KlesFormBadgeComponent;
|
|
1776
1840
|
exports.KlesFormButtonCheckerComponent = KlesFormButtonCheckerComponent;
|
|
1777
1841
|
exports.KlesFormButtonComponent = KlesFormButtonComponent;
|