@stemy/ngx-dynamic-form 12.0.0 → 12.0.2
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/bundles/stemy-ngx-dynamic-form.umd.js +114 -86
- package/bundles/stemy-ngx-dynamic-form.umd.js.map +1 -1
- package/esm2015/ngx-dynamic-form/common-types.js +29 -8
- package/esm2015/ngx-dynamic-form/components/base/dynamic-form-base.component.js +3 -1
- package/esm2015/ngx-dynamic-form/components/dynamic-form/dynamic-form.component.js +13 -4
- package/esm2015/ngx-dynamic-form/components/dynamic-form-file/dynamic-form-file.component.js +7 -14
- package/esm2015/ngx-dynamic-form/components/dynamic-form-group/dynamic-form-group.component.js +9 -2
- package/esm2015/ngx-dynamic-form/components/dynamic-form-input/dynamic-form-input.component.js +4 -11
- package/esm2015/ngx-dynamic-form/components/dynamic-form-model/dynamic-form-model.component.js +2 -2
- package/esm2015/ngx-dynamic-form/components/dynamic-form-select/dynamic-form-select.component.js +2 -2
- package/esm2015/ngx-dynamic-form/components/dynamic-forms/dynamic-forms.component.js +13 -4
- package/esm2015/ngx-dynamic-form/directives/dynamic-form-group.directive.js +1 -3
- package/esm2015/public_api.js +3 -2
- package/esm2015/stemy-ngx-dynamic-form.js +1 -2
- package/fesm2015/stemy-ngx-dynamic-form.js +102 -71
- package/fesm2015/stemy-ngx-dynamic-form.js.map +1 -1
- package/ngx-dynamic-form/common-types.d.ts +17 -7
- package/ngx-dynamic-form/components/base/dynamic-form-base.component.d.ts +1 -0
- package/ngx-dynamic-form/components/dynamic-form-file/dynamic-form-file.component.d.ts +1 -4
- package/ngx-dynamic-form/components/dynamic-form-group/dynamic-form-group.component.d.ts +3 -2
- package/ngx-dynamic-form/components/dynamic-form-input/dynamic-form-input.component.d.ts +0 -3
- package/ngx-dynamic-form/directives/dynamic-form-group.directive.d.ts +1 -2
- package/package.json +1 -1
- package/public_api.d.ts +2 -1
- package/stemy-ngx-dynamic-form.d.ts +0 -1
- package/stemy-ngx-dynamic-form.metadata.json +1 -1
|
@@ -1,15 +1,27 @@
|
|
|
1
|
-
import { InjectionToken, Directive, HostBinding, Injectable,
|
|
1
|
+
import { InjectionToken, Directive, Inject, HostBinding, Injectable, Type, ComponentFactoryResolver, Injector, EventEmitter, ChangeDetectorRef, ElementRef, Renderer2, Input, Output, HostListener, ViewContainerRef, TemplateRef, ContentChild, ContentChildren, Component, ViewChildren, ViewChild, NgModule } from '@angular/core';
|
|
2
2
|
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
3
|
-
import { ObjectUtils, ReflectUtils, UniqueUtils, TimerUtils, FileUtils, FactoryDependencies, StringUtils,
|
|
3
|
+
import { ApiService, LANGUAGE_SERVICE, TOASTER_SERVICE, ObjectUtils, ReflectUtils, UniqueUtils, TimerUtils, FileUtils, FactoryDependencies, StringUtils, ArrayUtils, NgxUtilsModule } from '@stemy/ngx-utils';
|
|
4
4
|
import { __decorate } from 'tslib';
|
|
5
5
|
import { DatePipe, CommonModule } from '@angular/common';
|
|
6
6
|
import { first } from 'rxjs/operators';
|
|
7
7
|
|
|
8
8
|
const FORM_GROUP_TYPE = new InjectionToken("form-group-provider");
|
|
9
9
|
const FORM_CONTROL_PROVIDER = new InjectionToken("form-control-provider");
|
|
10
|
+
const DYNAMIC_FORM = new InjectionToken("dynamic-form-base");
|
|
10
11
|
class FormControlComponent {
|
|
11
|
-
|
|
12
|
-
|
|
12
|
+
constructor(api, form, language, toaster) {
|
|
13
|
+
this.api = api;
|
|
14
|
+
this.form = form;
|
|
15
|
+
this.language = language;
|
|
16
|
+
this.toaster = toaster;
|
|
17
|
+
this.ctrInit();
|
|
18
|
+
}
|
|
19
|
+
ctrInit() {
|
|
20
|
+
}
|
|
21
|
+
ngOnInit() {
|
|
22
|
+
if (!this.control)
|
|
23
|
+
return;
|
|
24
|
+
this.control.form = this.form;
|
|
13
25
|
}
|
|
14
26
|
get data() {
|
|
15
27
|
return (!this.control ? {} : this.control.data);
|
|
@@ -20,6 +32,11 @@ class FormControlComponent {
|
|
|
20
32
|
get meta() {
|
|
21
33
|
return !this.control ? null : this.control.meta;
|
|
22
34
|
}
|
|
35
|
+
get testId() {
|
|
36
|
+
var _a, _b;
|
|
37
|
+
const prefix = ((_a = this.form) === null || _a === void 0 ? void 0 : _a.testId) || "form";
|
|
38
|
+
return `${prefix}-${((_b = this.control) === null || _b === void 0 ? void 0 : _b.id) || "ctrl"}`;
|
|
39
|
+
}
|
|
23
40
|
get inputClass() {
|
|
24
41
|
return true;
|
|
25
42
|
}
|
|
@@ -27,6 +44,12 @@ class FormControlComponent {
|
|
|
27
44
|
FormControlComponent.decorators = [
|
|
28
45
|
{ type: Directive }
|
|
29
46
|
];
|
|
47
|
+
FormControlComponent.ctorParameters = () => [
|
|
48
|
+
{ type: ApiService },
|
|
49
|
+
{ type: undefined, decorators: [{ type: Inject, args: [DYNAMIC_FORM,] }] },
|
|
50
|
+
{ type: undefined, decorators: [{ type: Inject, args: [LANGUAGE_SERVICE,] }] },
|
|
51
|
+
{ type: undefined, decorators: [{ type: Inject, args: [TOASTER_SERVICE,] }] }
|
|
52
|
+
];
|
|
30
53
|
FormControlComponent.propDecorators = {
|
|
31
54
|
inputClass: [{ type: HostBinding, args: ["class.form-input",] }]
|
|
32
55
|
};
|
|
@@ -366,6 +389,7 @@ class DynamicFormControl extends FormControl {
|
|
|
366
389
|
this.control = control;
|
|
367
390
|
this.group = group;
|
|
368
391
|
this.group.addControl(control.id, this);
|
|
392
|
+
this.form = this.group.form;
|
|
369
393
|
this.helper = new DynamicFormControlHelper(this.form, control);
|
|
370
394
|
this.helper.findProvider(this);
|
|
371
395
|
this.valueChanges.subscribe(() => this.group.updateModel(this));
|
|
@@ -386,9 +410,6 @@ class DynamicFormControl extends FormControl {
|
|
|
386
410
|
get meta() {
|
|
387
411
|
return this.helper.meta;
|
|
388
412
|
}
|
|
389
|
-
get form() {
|
|
390
|
-
return this.group.form;
|
|
391
|
-
}
|
|
392
413
|
get injector() {
|
|
393
414
|
return this.form.injector;
|
|
394
415
|
}
|
|
@@ -1021,10 +1042,47 @@ DynamicFormTemplateDirective.propDecorators = {
|
|
|
1021
1042
|
innerFormSuffix: [{ type: Input }]
|
|
1022
1043
|
};
|
|
1023
1044
|
|
|
1045
|
+
class DynamicFormGroupDirective {
|
|
1046
|
+
constructor(vcr, forms) {
|
|
1047
|
+
this.vcr = vcr;
|
|
1048
|
+
this.forms = forms;
|
|
1049
|
+
}
|
|
1050
|
+
get component() {
|
|
1051
|
+
return this.comp;
|
|
1052
|
+
}
|
|
1053
|
+
ngOnChanges(changes) {
|
|
1054
|
+
if (changes.control || changes.form || changes.visible) {
|
|
1055
|
+
if (!this.visible) {
|
|
1056
|
+
this.vcr.clear();
|
|
1057
|
+
this.comp = null;
|
|
1058
|
+
return;
|
|
1059
|
+
}
|
|
1060
|
+
this.comp = this.forms.createGroup(this.vcr);
|
|
1061
|
+
}
|
|
1062
|
+
if (!this.comp)
|
|
1063
|
+
return;
|
|
1064
|
+
this.comp.control = this.control;
|
|
1065
|
+
}
|
|
1066
|
+
}
|
|
1067
|
+
DynamicFormGroupDirective.decorators = [
|
|
1068
|
+
{ type: Directive, args: [{
|
|
1069
|
+
selector: "[form-group]",
|
|
1070
|
+
},] }
|
|
1071
|
+
];
|
|
1072
|
+
DynamicFormGroupDirective.ctorParameters = () => [
|
|
1073
|
+
{ type: ViewContainerRef },
|
|
1074
|
+
{ type: DynamicFormService }
|
|
1075
|
+
];
|
|
1076
|
+
DynamicFormGroupDirective.propDecorators = {
|
|
1077
|
+
control: [{ type: Input, args: ["form-group",] }],
|
|
1078
|
+
visible: [{ type: Input }]
|
|
1079
|
+
};
|
|
1080
|
+
|
|
1024
1081
|
class DynamicFormBaseComponent {
|
|
1025
1082
|
constructor(cdr, formService) {
|
|
1026
1083
|
this.formService = formService;
|
|
1027
1084
|
this.name = "";
|
|
1085
|
+
this.testId = "form";
|
|
1028
1086
|
this.controlTemplates = {};
|
|
1029
1087
|
this.labelTemplates = {};
|
|
1030
1088
|
this.inputTemplates = {};
|
|
@@ -1078,6 +1136,7 @@ DynamicFormBaseComponent.ctorParameters = () => [
|
|
|
1078
1136
|
];
|
|
1079
1137
|
DynamicFormBaseComponent.propDecorators = {
|
|
1080
1138
|
name: [{ type: Input }],
|
|
1139
|
+
testId: [{ type: Input }],
|
|
1081
1140
|
readonly: [{ type: Input }],
|
|
1082
1141
|
updateOn: [{ type: Input }],
|
|
1083
1142
|
classes: [{ type: Input }],
|
|
@@ -1174,8 +1233,17 @@ DynamicFormComponent.decorators = [
|
|
|
1174
1233
|
{ type: Component, args: [{
|
|
1175
1234
|
moduleId: module.id,
|
|
1176
1235
|
selector: "dynamic-form, [dynamic-form]",
|
|
1177
|
-
template: "<ng-template #defaultFieldSetTemplate let-id=\"id\" let-controls=\"controls\" let-fieldSet=\"fieldSet\">\r\n <div [ngClass]=\"['form-fields', 'form-fields-' + id, fieldSet.classes]\">\r\n <ng-container [ngxTemplateOutlet]=\"setPrefixTemplates[fieldSet.id]\" [context]=\"fieldSet\"></ng-container>\r\n <div *ngIf=\"fieldSet.title\" [ngClass]=\"['form-title', fieldSet.titleClasses || '']\">\r\n {{ group.prefix + fieldSet.title | translate }}\r\n </div>\r\n <ng-template #subControls>\r\n <ng-container *ngFor=\"let control of controls\" [form-group]=\"control\" [visible]=\"control.visible\"
|
|
1178
|
-
providers: [
|
|
1236
|
+
template: "<ng-template #defaultFieldSetTemplate let-id=\"id\" let-controls=\"controls\" let-fieldSet=\"fieldSet\">\r\n <div [ngClass]=\"['form-fields', 'form-fields-' + id, fieldSet.classes]\">\r\n <ng-container [ngxTemplateOutlet]=\"setPrefixTemplates[fieldSet.id]\" [context]=\"fieldSet\"></ng-container>\r\n <div *ngIf=\"fieldSet.title\" [ngClass]=\"['form-title', fieldSet.titleClasses || '']\">\r\n {{ group.prefix + fieldSet.title | translate }}\r\n </div>\r\n <ng-template #subControls>\r\n <ng-container *ngFor=\"let control of controls\" [form-group]=\"control\" [visible]=\"control.visible\">\r\n\r\n </ng-container>\r\n </ng-template>\r\n <div *ngIf=\"fieldSet.setClasses; else subControls\" [ngClass]=\"fieldSet.setClasses\">\r\n <div *ngIf=\"fieldSet.controlClasses; else subControls\" [ngClass]=\"fieldSet.controlClasses\">\r\n <ng-container [ngTemplateOutlet]=\"subControls\"></ng-container>\r\n </div>\r\n </div>\r\n <ng-container [ngxTemplateOutlet]=\"setSuffixTemplates[fieldSet.id]\" [context]=\"fieldSet\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #fieldSetsTemplate>\r\n <ng-container *ngFor=\"let fs of formControls | groupBy:'data.fieldSet'\"\r\n [ngxTemplateOutlet]=\"fieldSetTemplate || defaultFieldSetTemplate\"\r\n [context]=\"{form: this, id: fs.group, controls: fs.items, fieldSet: group.formFields[fs.group] || defaultFieldSet}\">\r\n </ng-container>\r\n</ng-template>\r\n<ng-template #defaultWrapperTemplate let-form=\"form\" let-fieldSetsTemplate=\"fieldSetsTemplate\">\r\n <ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n [ngTemplateOutletContext]=\"{form: form, fieldSetsTemplate: fieldSetsTemplate}\"></ng-container>\r\n <form class=\"dynamic-form\" [ngClass]=\"form.classes || ''\" [formGroup]=\"group\" (submit)=\"onFormSubmit()\">\r\n <ng-container [ngTemplateOutlet]=\"fieldSetsTemplate\"></ng-container>\r\n <ng-content></ng-content>\r\n <div *ngIf=\"form.status == 'PENDING'\" class=\"dynamic-form-validator\">\r\n {{ group.prefix + 'message.pending' | translate }}\r\n </div>\r\n <button [ngStyle]=\"{display: 'none'}\">Submit</button>\r\n </form>\r\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n [ngTemplateOutletContext]=\"{form: form, fieldSetsTemplate: fieldSetsTemplate}\"></ng-container>\r\n</ng-template>\r\n<ng-template #loadingTemplate>\r\n <div *ngIf=\"status == 'LOADING'\" class=\"dynamic-form-loader\">\r\n {{ group.prefix + 'message.loading' | translate }}\r\n </div>\r\n</ng-template>\r\n<ng-container [ngTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n [ngTemplateOutletContext]=\"{form: this, fieldSetsTemplate: fieldSetsTemplate}\"\r\n *ngIf=\"status !== 'LOADING'; else loadingTemplate\">\r\n</ng-container>\r\n",
|
|
1237
|
+
providers: [
|
|
1238
|
+
{
|
|
1239
|
+
provide: DynamicFormBaseComponent,
|
|
1240
|
+
useExisting: DynamicFormComponent
|
|
1241
|
+
},
|
|
1242
|
+
{
|
|
1243
|
+
provide: DYNAMIC_FORM,
|
|
1244
|
+
useExisting: DynamicFormComponent
|
|
1245
|
+
}
|
|
1246
|
+
]
|
|
1179
1247
|
},] }
|
|
1180
1248
|
];
|
|
1181
1249
|
DynamicFormComponent.ctorParameters = () => [
|
|
@@ -1300,8 +1368,17 @@ DynamicFormsComponent.decorators = [
|
|
|
1300
1368
|
{ type: Component, args: [{
|
|
1301
1369
|
moduleId: module.id,
|
|
1302
1370
|
selector: "dynamic-forms, [dynamic-forms]",
|
|
1303
|
-
template: "<ng-template #configTemplate let-formTemplate=\"formTemplate\" let-form=\"form\" let-config=\"config\" let-configTemplate>\r\n <div [ngClass]=\"config.classes || ''\">\r\n <ng-container [ngTemplateOutlet]=\"formPrefixTemplates[config.id]\"\r\n [ngTemplateOutletContext]=\"{config: config, form: form}\"></ng-container>\r\n <ng-template #singleFormTemplate>\r\n <div dynamic-form\r\n [hidden]=\"!config.group?.visible\"\r\n [ngClass]=\"config.formClasses || ''\"\r\n [name]=\"config.name || form.name\"\r\n [readonly]=\"form.readonly\"\r\n [updateOn]=\"form.updateOn\"\r\n [classes]=\"config.innerFormClasses\"\r\n [parent]=\"form\"\r\n\r\n [wrapperTemplate]=\"form.wrapperTemplate\"\r\n [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n [controlTemplates]=\"form.controlTemplates\"\r\n\r\n [controlTemplate]=\"form.controlTemplate\"\r\n [labelTemplates]=\"form.labelTemplates\"\r\n [inputTemplates]=\"form.inputTemplates\"\r\n [prefixTemplates]=\"form.prefixTemplates\"\r\n [suffixTemplates]=\"form.suffixTemplates\"\r\n [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n [group]=\"config.group\"\r\n [fieldSets]=\"config.fieldSets\">\r\n <ng-template #prefixTemplate let-subForm=\"form\">\r\n <ng-container [ngTemplateOutlet]=\"form.innerFormPrefixTemplates[config.id]\"\r\n [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n </ng-template>\r\n <ng-template #suffixTemplate let-subForm=\"form\">\r\n <ng-container [ngTemplateOutlet]=\"form.innerFormSuffixTemplates[config.id]\"\r\n [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n <div dynamic-forms\r\n [ngClass]=\"config.formClasses || ''\"\r\n [name]=\"config.name || name\"\r\n [readonly]=\"form.readonly\"\r\n [updateOn]=\"form.updateOn\"\r\n [classes]=\"config.innerFormClasses\"\r\n [parent]=\"form\"\r\n\r\n [wrapperTemplate]=\"form.wrapperTemplate\"\r\n [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n [controlTemplates]=\"form.controlTemplates\"\r\n\r\n [controlTemplate]=\"form.controlTemplate\"\r\n [labelTemplates]=\"form.labelTemplates\"\r\n [inputTemplates]=\"form.inputTemplates\"\r\n [prefixTemplates]=\"form.prefixTemplates\"\r\n [suffixTemplates]=\"form.suffixTemplates\"\r\n [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n [data]=\"config.data\"\r\n [containerTemplate]=\"form.containerTemplate\"\r\n [formPrefixTemplates]=\"form.formPrefixTemplates\"\r\n [formSuffixTemplates]=\"form.formSuffixTemplates\"\r\n [innerFormPrefixTemplates]=\"form.innerFormPrefixTemplates\"\r\n [innerFormSuffixTemplates]=\"form.innerFormSuffixTemplates\"\r\n\r\n *ngIf=\"config.multi; else singleFormTemplate\">\r\n <ng-template #prefixTemplate let-subForm=\"form\">\r\n <ng-container [ngTemplateOutlet]=\"form.innerFormPrefixTemplates[config.id]\"\r\n [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n </ng-template>\r\n <ng-template #suffixTemplate let-subForm=\"form\">\r\n <ng-container [ngTemplateOutlet]=\"form.innerFormSuffixTemplates[config.id]\"\r\n [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n </ng-template>\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"formSuffixTemplates[config.id]\"\r\n [ngTemplateOutletContext]=\"{config: config, form: form}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template let-form=\"form\" let-configTemplate=\"configTemplate\" #defaultContainerTemplate>\r\n <div class=\"dynamic-forms\" [ngClass]=\"classes || ''\">\r\n <ng-container *ngFor=\"let config of form.configs\"\r\n [ngTemplateOutlet]=\"configTemplate\"\r\n [ngTemplateOutletContext]=\"{form: form, config: config}\"></ng-container>\r\n <ng-content></ng-content>\r\n </div>\r\n</ng-template>\r\n<ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n [ngTemplateOutletContext]=\"{form: this}\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"containerTemplate || defaultContainerTemplate\"\r\n [ngTemplateOutletContext]=\"{form: this, configTemplate: configTemplate, defaultContainerTemplate: defaultContainerTemplate}\">\r\n</ng-container>\r\n<ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n [ngTemplateOutletContext]=\"{form: this}\"></ng-container>\r\n",
|
|
1304
|
-
providers: [
|
|
1371
|
+
template: "<ng-template #configTemplate let-formTemplate=\"formTemplate\" let-form=\"form\" let-config=\"config\" let-configTemplate>\r\n <div [ngClass]=\"config.classes || ''\">\r\n <ng-container [ngTemplateOutlet]=\"formPrefixTemplates[config.id]\"\r\n [ngTemplateOutletContext]=\"{config: config, form: form}\"></ng-container>\r\n <ng-template #singleFormTemplate>\r\n <div dynamic-form\r\n [hidden]=\"!config.group?.visible\"\r\n [ngClass]=\"config.formClasses || ''\"\r\n [name]=\"config.name || form.name\"\r\n [testId]=\"testId + '-' + (config.testId || config.name || name)\"\r\n [readonly]=\"form.readonly\"\r\n [updateOn]=\"form.updateOn\"\r\n [classes]=\"config.innerFormClasses\"\r\n [parent]=\"form\"\r\n\r\n [wrapperTemplate]=\"form.wrapperTemplate\"\r\n [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n [controlTemplates]=\"form.controlTemplates\"\r\n\r\n [controlTemplate]=\"form.controlTemplate\"\r\n [labelTemplates]=\"form.labelTemplates\"\r\n [inputTemplates]=\"form.inputTemplates\"\r\n [prefixTemplates]=\"form.prefixTemplates\"\r\n [suffixTemplates]=\"form.suffixTemplates\"\r\n [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n [group]=\"config.group\"\r\n [fieldSets]=\"config.fieldSets\">\r\n <ng-template #prefixTemplate let-subForm=\"form\">\r\n <ng-container [ngTemplateOutlet]=\"form.innerFormPrefixTemplates[config.id]\"\r\n [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n </ng-template>\r\n <ng-template #suffixTemplate let-subForm=\"form\">\r\n <ng-container [ngTemplateOutlet]=\"form.innerFormSuffixTemplates[config.id]\"\r\n [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n <div dynamic-forms\r\n [ngClass]=\"config.formClasses || ''\"\r\n [name]=\"config.name || name\"\r\n [testId]=\"testId + '-' + (config.testId || config.name || name)\"\r\n [readonly]=\"form.readonly\"\r\n [updateOn]=\"form.updateOn\"\r\n [classes]=\"config.innerFormClasses\"\r\n [parent]=\"form\"\r\n\r\n [wrapperTemplate]=\"form.wrapperTemplate\"\r\n [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n [controlTemplates]=\"form.controlTemplates\"\r\n\r\n [controlTemplate]=\"form.controlTemplate\"\r\n [labelTemplates]=\"form.labelTemplates\"\r\n [inputTemplates]=\"form.inputTemplates\"\r\n [prefixTemplates]=\"form.prefixTemplates\"\r\n [suffixTemplates]=\"form.suffixTemplates\"\r\n [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n [data]=\"config.data\"\r\n [containerTemplate]=\"form.containerTemplate\"\r\n [formPrefixTemplates]=\"form.formPrefixTemplates\"\r\n [formSuffixTemplates]=\"form.formSuffixTemplates\"\r\n [innerFormPrefixTemplates]=\"form.innerFormPrefixTemplates\"\r\n [innerFormSuffixTemplates]=\"form.innerFormSuffixTemplates\"\r\n\r\n *ngIf=\"config.multi; else singleFormTemplate\">\r\n <ng-template #prefixTemplate let-subForm=\"form\">\r\n <ng-container [ngTemplateOutlet]=\"form.innerFormPrefixTemplates[config.id]\"\r\n [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n </ng-template>\r\n <ng-template #suffixTemplate let-subForm=\"form\">\r\n <ng-container [ngTemplateOutlet]=\"form.innerFormSuffixTemplates[config.id]\"\r\n [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n </ng-template>\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"formSuffixTemplates[config.id]\"\r\n [ngTemplateOutletContext]=\"{config: config, form: form}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template let-form=\"form\" let-configTemplate=\"configTemplate\" #defaultContainerTemplate>\r\n <div class=\"dynamic-forms\" [ngClass]=\"classes || ''\">\r\n <ng-container *ngFor=\"let config of form.configs\"\r\n [ngTemplateOutlet]=\"configTemplate\"\r\n [ngTemplateOutletContext]=\"{form: form, config: config}\"></ng-container>\r\n <ng-content></ng-content>\r\n </div>\r\n</ng-template>\r\n<ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n [ngTemplateOutletContext]=\"{form: this}\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"containerTemplate || defaultContainerTemplate\"\r\n [ngTemplateOutletContext]=\"{form: this, configTemplate: configTemplate, defaultContainerTemplate: defaultContainerTemplate}\">\r\n</ng-container>\r\n<ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n [ngTemplateOutletContext]=\"{form: this}\"></ng-container>\r\n",
|
|
1372
|
+
providers: [
|
|
1373
|
+
{
|
|
1374
|
+
provide: DynamicFormBaseComponent,
|
|
1375
|
+
useExisting: DynamicFormsComponent
|
|
1376
|
+
},
|
|
1377
|
+
{
|
|
1378
|
+
provide: DYNAMIC_FORM,
|
|
1379
|
+
useExisting: DynamicFormsComponent
|
|
1380
|
+
}
|
|
1381
|
+
]
|
|
1305
1382
|
},] }
|
|
1306
1383
|
];
|
|
1307
1384
|
DynamicFormsComponent.ctorParameters = () => [
|
|
@@ -1320,6 +1397,9 @@ DynamicFormsComponent.propDecorators = {
|
|
|
1320
1397
|
};
|
|
1321
1398
|
|
|
1322
1399
|
class DynamicFormGroupComponent {
|
|
1400
|
+
constructor(form) {
|
|
1401
|
+
this.form = form;
|
|
1402
|
+
}
|
|
1323
1403
|
get classes() {
|
|
1324
1404
|
if (!this.control)
|
|
1325
1405
|
return "form-group";
|
|
@@ -1333,17 +1413,14 @@ DynamicFormGroupComponent.decorators = [
|
|
|
1333
1413
|
template: "<ng-template #labelTemplate>\r\n <label [ngClass]=\"'control-label control-label-' + control.data.labelAlign\" [attr.for]=\"control.formId\">\r\n {{ control.label | translate: control.model }}\r\n </label>\r\n</ng-template>\r\n<ng-template #errorTemplate>\r\n <div class=\"error-message\" *ngIf=\"control.errors && control.touched\">\r\n <span class=\"help-block\" *ngFor=\"let error of control.errors | entries\">\r\n {{ error.key | translate: error.value }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n<ng-template #inputTemplate let-control=\"control\">\r\n <ng-container [form-control]=\"control\"></ng-container>\r\n</ng-template>\r\n<ng-template #defaultControlTemplate\r\n let-context\r\n let-control=\"control\"\r\n let-data=\"control.data\"\r\n let-labelTemplate=\"labelTemplate\"\r\n let-inputTemplate=\"inputTemplate\"\r\n let-prefixTemplate=\"prefixTemplate\"\r\n let-suffixTemplate=\"suffixTemplate\"\r\n let-errorTemplate=\"errorTemplate\">\r\n <ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n [ngTemplateOutletContext]=\"context\"></ng-container>\r\n <ng-container *ngIf=\"control.label && data.labelAlign == 'left'\"\r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"context\">\r\n </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"inputTemplate\"\r\n [ngTemplateOutletContext]=\"context\"></ng-container>\r\n <ng-container *ngIf=\"control.label && data.labelAlign == 'right'\"\r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"context\">\r\n </ng-container>\r\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n [ngTemplateOutletContext]=\"context\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"\r\n [ngTemplateOutletContext]=\"context\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngxTemplateOutlet]=\"form.controlTemplates[control.id] || form.controlTemplate || defaultControlTemplate\"\r\n [context]=\"{\r\n control: control,\r\n labelTemplate: form.labelTemplates[control.id] || labelTemplate,\r\n inputTemplate: form.inputTemplates[control.id] || inputTemplate,\r\n prefixTemplate: form.prefixTemplates[control.id],\r\n suffixTemplate: form.suffixTemplates[control.id],\r\n errorTemplate: errorTemplate\r\n }\">\r\n</ng-container>\r\n"
|
|
1334
1414
|
},] }
|
|
1335
1415
|
];
|
|
1416
|
+
DynamicFormGroupComponent.ctorParameters = () => [
|
|
1417
|
+
{ type: undefined, decorators: [{ type: Inject, args: [DYNAMIC_FORM,] }] }
|
|
1418
|
+
];
|
|
1336
1419
|
DynamicFormGroupComponent.propDecorators = {
|
|
1337
1420
|
classes: [{ type: HostBinding, args: ["class",] }]
|
|
1338
1421
|
};
|
|
1339
1422
|
|
|
1340
1423
|
class DynamicFormFileComponent extends FormControlComponent {
|
|
1341
|
-
constructor(api, toaster) {
|
|
1342
|
-
super();
|
|
1343
|
-
this.api = api;
|
|
1344
|
-
this.toaster = toaster;
|
|
1345
|
-
this.fileImageCache = [];
|
|
1346
|
-
}
|
|
1347
1424
|
// Acceptor for provider
|
|
1348
1425
|
static acceptor(control) {
|
|
1349
1426
|
return control.type == "file";
|
|
@@ -1352,6 +1429,9 @@ class DynamicFormFileComponent extends FormControlComponent {
|
|
|
1352
1429
|
static loader() {
|
|
1353
1430
|
return Promise.resolve();
|
|
1354
1431
|
}
|
|
1432
|
+
ctrInit() {
|
|
1433
|
+
this.fileImageCache = [];
|
|
1434
|
+
}
|
|
1355
1435
|
onSelect(input) {
|
|
1356
1436
|
this.processFiles(input.files);
|
|
1357
1437
|
input.value = "";
|
|
@@ -1437,20 +1517,12 @@ class DynamicFormFileComponent extends FormControlComponent {
|
|
|
1437
1517
|
DynamicFormFileComponent.decorators = [
|
|
1438
1518
|
{ type: Component, args: [{
|
|
1439
1519
|
selector: "dynamic-form-file",
|
|
1440
|
-
template: "<div class=\"upload\">\r\n <input type=\"file\"
|
|
1520
|
+
template: "<div class=\"upload\">\r\n <input type=\"file\"\r\n multiple=\"multiple\"\r\n [attr.data-testid]=\"testId\"\r\n [attr.accept]=\"data.accept\"\r\n (change)=\"onSelect($event.target)\" />\r\n <ul class=\"images\" *ngIf=\"!data.multi\">\r\n <li class=\"image\" *ngIf=\"value\" [ngStyle]=\"{backgroundImage: getUrl(value)}\">\r\n <a class=\"btn btn-delete\" (click)=\"delete()\"></a>\r\n </li>\r\n </ul>\r\n <ul class=\"images\" *ngIf=\"data.multi\">\r\n <li class=\"image\" *ngFor=\"let image of value; let i = index\" [ngStyle]=\"{backgroundImage: getUrl(image)}\">\r\n <a class=\"btn btn-delete\" (click)=\"delete(i)\"></a>\r\n </li>\r\n </ul>\r\n</div>\r\n",
|
|
1441
1521
|
styles: [".upload{display:inline-block}.upload ul{display:inline-flex;list-style:none;margin:10px 0 0;padding:0}.upload ul li{height:100px;width:100px;background:repeating-linear-gradient(45deg,gray,gray 10px,lightgray 10px,lightgray 20px) center center;background-size:cover;border:1px gray solid;margin-right:5px;position:relative}.upload .btn-delete{background:linear-gradient(to bottom,#c8607a,#a64d5a);border-color:#a64d5a;color:#fff;position:absolute;padding:0;right:5px;top:5px;width:20px;height:20px}.upload .btn-delete:before{color:#fff;display:block;position:absolute;top:0;right:6px;content:\"x\"}\n"]
|
|
1442
1522
|
},] }
|
|
1443
|
-
];
|
|
1444
|
-
DynamicFormFileComponent.ctorParameters = () => [
|
|
1445
|
-
{ type: ApiService },
|
|
1446
|
-
{ type: undefined, decorators: [{ type: Inject, args: [TOASTER_SERVICE,] }] }
|
|
1447
1523
|
];
|
|
1448
1524
|
|
|
1449
1525
|
class DynamicFormInputComponent extends FormControlComponent {
|
|
1450
|
-
constructor(language) {
|
|
1451
|
-
super();
|
|
1452
|
-
this.language = language;
|
|
1453
|
-
}
|
|
1454
1526
|
// Acceptor for provider
|
|
1455
1527
|
static acceptor(control) {
|
|
1456
1528
|
return control.type == "input";
|
|
@@ -1502,12 +1574,9 @@ DynamicFormInputComponent.decorators = [
|
|
|
1502
1574
|
{ type: Component, args: [{
|
|
1503
1575
|
moduleId: module.id,
|
|
1504
1576
|
selector: "dynamic-form-input",
|
|
1505
|
-
template: "<ng-container [ngSwitch]=\"data.type\">\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <textarea class=\"form-control\"\r\n rows=\"5\"\r\n [attr.autocomplete]=\"data.autocomplete\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"control.setValue($event)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\">{{ data.placeholder | translate }}</textarea>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <input class=\"form-control\"\r\n type=\"date\"\r\n [attr.autocomplete]=\"data.autocomplete\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"value | date: 'y-MM-dd'\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <input class=\"form-control\"\r\n type=\"number\"\r\n [attr.autocomplete]=\"data.autocomplete\"\r\n [min]=\"data.min\"\r\n [max]=\"data.max\"\r\n [step]=\"data.step\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"control.setValue($event)\"\r\n (blur)=\"onNumberBlur()\"\r\n (focus)=\"control.onFocus()\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <input class=\"form-control\"\r\n type=\"checkbox\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"control.setValue($event)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <input class=\"form-control\"\r\n type=\"text\"\r\n [attr.autocomplete]=\"data.autocomplete\"\r\n [minlength]=\"data.min\"\r\n [maxlength]=\"data.max\"\r\n [placeholder]=\"data.placeholder | translate\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"data.useLanguage ? (value | translate) : value\"\r\n (ngModelChange)=\"onTextChange($event)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <input class=\"form-control\"\r\n [attr.autocomplete]=\"data.autocomplete\"\r\n [minlength]=\"data.min\"\r\n [maxlength]=\"data.max\"\r\n [placeholder]=\"data.placeholder | translate\"\r\n [type]=\"data.type\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"control.setValue($event)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\"/>\r\n </ng-container>\r\n</ng-container>\r\n"
|
|
1577
|
+
template: "<ng-container [ngSwitch]=\"data.type\">\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <textarea class=\"form-control\"\r\n rows=\"5\"\r\n [attr.autocomplete]=\"data.autocomplete\"\r\n [attr.data-testid]=\"testId\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"control.setValue($event)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\">{{ data.placeholder | translate }}</textarea>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <input class=\"form-control\"\r\n type=\"date\"\r\n [attr.autocomplete]=\"data.autocomplete\"\r\n [attr.data-testid]=\"testId\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"value | date: 'y-MM-dd'\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <input class=\"form-control\"\r\n type=\"number\"\r\n [attr.autocomplete]=\"data.autocomplete\"\r\n [attr.data-testid]=\"testId\"\r\n [min]=\"data.min\"\r\n [max]=\"data.max\"\r\n [step]=\"data.step\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"control.setValue($event)\"\r\n (blur)=\"onNumberBlur()\"\r\n (focus)=\"control.onFocus()\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <input class=\"form-control\"\r\n type=\"checkbox\"\r\n [attr.data-testid]=\"testId\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"control.setValue($event)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <input class=\"form-control\"\r\n type=\"text\"\r\n [attr.autocomplete]=\"data.autocomplete\"\r\n [attr.data-testid]=\"testId\"\r\n [minlength]=\"data.min\"\r\n [maxlength]=\"data.max\"\r\n [placeholder]=\"data.placeholder | translate\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"data.useLanguage ? (value | translate) : value\"\r\n (ngModelChange)=\"onTextChange($event)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\"/>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <input class=\"form-control\"\r\n [attr.autocomplete]=\"data.autocomplete\"\r\n [attr.data-testid]=\"testId\"\r\n [minlength]=\"data.min\"\r\n [maxlength]=\"data.max\"\r\n [placeholder]=\"data.placeholder | translate\"\r\n [type]=\"data.type\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"control.setValue($event)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\"/>\r\n </ng-container>\r\n</ng-container>\r\n"
|
|
1506
1578
|
},] }
|
|
1507
1579
|
];
|
|
1508
|
-
DynamicFormInputComponent.ctorParameters = () => [
|
|
1509
|
-
{ type: undefined, decorators: [{ type: Inject, args: [LANGUAGE_SERVICE,] }] }
|
|
1510
|
-
];
|
|
1511
1580
|
DynamicFormInputComponent.propDecorators = {
|
|
1512
1581
|
isChecked: [{ type: HostBinding, args: ["class.checked",] }]
|
|
1513
1582
|
};
|
|
@@ -1578,7 +1647,7 @@ DynamicFormSelectComponent.decorators = [
|
|
|
1578
1647
|
{ type: Component, args: [{
|
|
1579
1648
|
moduleId: module.id,
|
|
1580
1649
|
selector: "dynamic-form-select",
|
|
1581
|
-
template: "<ng-template #selectTemplate let-selected=\"selected\">\r\n <select class=\"form-control\"\r\n [multiple]=\"data.multi\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"data.multi ? value : [value]\"\r\n (ngModelChange)=\"onSelectChange($event)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\">\r\n <option *ngFor=\"let option of meta.options\" [value]=\"option.id\" [disabled]=\"option.selectable == false\">\r\n {{ option.label | translate }}\r\n </option>\r\n </select>\r\n <label class=\"form-control-description\" [attr.for]=\"control.formId\" *ngIf=\"!data.multi && selected?.description\">\r\n {{ selected?.description | translate }}\r\n </label>\r\n</ng-template>\r\n<ng-container [ngSwitch]=\"data.type\">\r\n <ng-container *ngSwitchCase=\"'radio'\">\r\n <ul class=\"radio-group\">\r\n <li *ngFor=\"let option of meta.options\" class=\"radio\">\r\n <label [ngClass]=\"{checked: value == option.id}\">\r\n <input type=\"radio\"\r\n [id]=\"control.formId + '-' + option.id\"\r\n [name]=\"control.formId + '-' + option.id\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled || option.selectable == false\"\r\n [value]=\"option.id\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"onSelectChange(option.id)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\">\r\n {{ option.label | translate }}\r\n </label>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ul class=\"checkbox-group\">\r\n <li *ngFor=\"let option of meta.options\" class=\"checkbox\">\r\n <label [ngClass]=\"{checked: checkValue(option)}\">\r\n <input type=\"checkbox\"\r\n [id]=\"control.formId + '-' + option.id\"\r\n [name]=\"control.formId + '-' + option.id\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled || option.selectable == false\"\r\n [ngModel]=\"checkValue(option)\"\r\n (ngModelChange)=\"onSelectChange(option.id)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\">\r\n {{ option.label | translate }}\r\n </label>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"selectTemplate\" [ngTemplateOutletContext]=\"{selected: meta?.options | find:findOption:value}\">\r\n\r\n </ng-container>\r\n</ng-container>\r\n"
|
|
1650
|
+
template: "<ng-template #selectTemplate let-selected=\"selected\">\r\n <select class=\"form-control\"\r\n [attr.data-testid]=\"testId\"\r\n [multiple]=\"data.multi\"\r\n [id]=\"control.formId\"\r\n [name]=\"control.formId\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled\"\r\n [ngModel]=\"data.multi ? value : [value]\"\r\n (ngModelChange)=\"onSelectChange($event)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\">\r\n <option *ngFor=\"let option of meta.options\" [value]=\"option.id\" [disabled]=\"option.selectable == false\">\r\n {{ option.label | translate }}\r\n </option>\r\n </select>\r\n <label class=\"form-control-description\" [attr.for]=\"control.formId\" *ngIf=\"!data.multi && selected?.description\">\r\n {{ selected?.description | translate }}\r\n </label>\r\n</ng-template>\r\n<ng-container [ngSwitch]=\"data.type\">\r\n <ng-container *ngSwitchCase=\"'radio'\">\r\n <ul class=\"radio-group\">\r\n <li *ngFor=\"let option of meta.options\" class=\"radio\">\r\n <label [ngClass]=\"{checked: value == option.id}\">\r\n <input type=\"radio\"\r\n [attr.data-testid]=\"testId + '-' + option.id\"\r\n [id]=\"control.formId + '-' + option.id\"\r\n [name]=\"control.formId + '-' + option.id\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled || option.selectable == false\"\r\n [value]=\"option.id\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"onSelectChange(option.id)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\">\r\n {{ option.label | translate }}\r\n </label>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ul class=\"checkbox-group\">\r\n <li *ngFor=\"let option of meta.options\" class=\"checkbox\">\r\n <label [ngClass]=\"{checked: checkValue(option)}\">\r\n <input type=\"checkbox\"\r\n [attr.data-testid]=\"testId + '-' + option.id\"\r\n [id]=\"control.formId + '-' + option.id\"\r\n [name]=\"control.formId + '-' + option.id\"\r\n [ngClass]=\"{disabled: control.disabled}\"\r\n [disabled]=\"control.disabled || option.selectable == false\"\r\n [ngModel]=\"checkValue(option)\"\r\n (ngModelChange)=\"onSelectChange(option.id)\"\r\n (blur)=\"control.onBlur()\"\r\n (focus)=\"control.onFocus()\">\r\n {{ option.label | translate }}\r\n </label>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"selectTemplate\" [ngTemplateOutletContext]=\"{selected: meta?.options | find:findOption:value}\">\r\n\r\n </ng-container>\r\n</ng-container>\r\n"
|
|
1582
1651
|
},] }
|
|
1583
1652
|
];
|
|
1584
1653
|
|
|
@@ -1614,51 +1683,13 @@ DynamicFormModelComponent.decorators = [
|
|
|
1614
1683
|
{ type: Component, args: [{
|
|
1615
1684
|
moduleId: module.id,
|
|
1616
1685
|
selector: "dynamic-form-model",
|
|
1617
|
-
template: "<dynamic-form [name]=\"data.name || form.name\"\r\n [group]=\"control\"\r\n [data]=\"value\"\r\n [updateOn]=\"control.updateOn\"\r\n [parent]=\"form\"\r\n\r\n [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n [controlTemplates]=\"form.controlTemplates\"\r\n\r\n [controlTemplate]=\"form.controlTemplate\"\r\n [labelTemplates]=\"form.labelTemplates\"\r\n [inputTemplates]=\"form.inputTemplates\"\r\n [prefixTemplates]=\"form.prefixTemplates\"\r\n [suffixTemplates]=\"form.suffixTemplates\"\r\n [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n #subForm>\r\n <ng-template #wrapperTemplate let-form=\"form\" let-fieldSetsTemplate=\"fieldSetsTemplate\">\r\n <ng-container [ngTemplateOutlet]=\"fieldSetsTemplate\"></ng-container>\r\n </ng-template>\r\n</dynamic-form>\r\n"
|
|
1686
|
+
template: "<dynamic-form [testId]=\"form.testId + '-' + control.id\"\r\n [name]=\"data.name || form.name\"\r\n [group]=\"control\"\r\n [data]=\"value\"\r\n [updateOn]=\"control.updateOn\"\r\n [parent]=\"form\"\r\n\r\n [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n [controlTemplates]=\"form.controlTemplates\"\r\n\r\n [controlTemplate]=\"form.controlTemplate\"\r\n [labelTemplates]=\"form.labelTemplates\"\r\n [inputTemplates]=\"form.inputTemplates\"\r\n [prefixTemplates]=\"form.prefixTemplates\"\r\n [suffixTemplates]=\"form.suffixTemplates\"\r\n [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n #subForm>\r\n <ng-template #wrapperTemplate let-form=\"form\" let-fieldSetsTemplate=\"fieldSetsTemplate\">\r\n <ng-container [ngTemplateOutlet]=\"fieldSetsTemplate\"></ng-container>\r\n </ng-template>\r\n</dynamic-form>\r\n"
|
|
1618
1687
|
},] }
|
|
1619
1688
|
];
|
|
1620
1689
|
DynamicFormModelComponent.propDecorators = {
|
|
1621
1690
|
subForm: [{ type: ViewChild, args: ["subForm",] }]
|
|
1622
1691
|
};
|
|
1623
1692
|
|
|
1624
|
-
class DynamicFormGroupDirective {
|
|
1625
|
-
constructor(vcr, forms) {
|
|
1626
|
-
this.vcr = vcr;
|
|
1627
|
-
this.forms = forms;
|
|
1628
|
-
}
|
|
1629
|
-
get component() {
|
|
1630
|
-
return this.comp;
|
|
1631
|
-
}
|
|
1632
|
-
ngOnChanges(changes) {
|
|
1633
|
-
if (changes.control || changes.form || changes.visible) {
|
|
1634
|
-
if (!this.visible) {
|
|
1635
|
-
this.vcr.clear();
|
|
1636
|
-
this.comp = null;
|
|
1637
|
-
return;
|
|
1638
|
-
}
|
|
1639
|
-
this.comp = this.forms.createGroup(this.vcr);
|
|
1640
|
-
}
|
|
1641
|
-
if (!this.comp)
|
|
1642
|
-
return;
|
|
1643
|
-
this.comp.form = this.form;
|
|
1644
|
-
this.comp.control = this.control;
|
|
1645
|
-
}
|
|
1646
|
-
}
|
|
1647
|
-
DynamicFormGroupDirective.decorators = [
|
|
1648
|
-
{ type: Directive, args: [{
|
|
1649
|
-
selector: "[form-group]",
|
|
1650
|
-
},] }
|
|
1651
|
-
];
|
|
1652
|
-
DynamicFormGroupDirective.ctorParameters = () => [
|
|
1653
|
-
{ type: ViewContainerRef },
|
|
1654
|
-
{ type: DynamicFormService }
|
|
1655
|
-
];
|
|
1656
|
-
DynamicFormGroupDirective.propDecorators = {
|
|
1657
|
-
control: [{ type: Input, args: ["form-group",] }],
|
|
1658
|
-
form: [{ type: Input }],
|
|
1659
|
-
visible: [{ type: Input }]
|
|
1660
|
-
};
|
|
1661
|
-
|
|
1662
1693
|
// --- Components ---
|
|
1663
1694
|
const components = [
|
|
1664
1695
|
DynamicFormsComponent,
|
|
@@ -1727,5 +1758,5 @@ NgxDynamicFormModule.decorators = [
|
|
|
1727
1758
|
* Generated bundle index. Do not edit.
|
|
1728
1759
|
*/
|
|
1729
1760
|
|
|
1730
|
-
export { AsyncSubmitDirective, DynamicFormBaseComponent, DynamicFormComponent, DynamicFormControl, DynamicFormControlDirective, DynamicFormFileComponent, DynamicFormGroup, DynamicFormGroupComponent, DynamicFormInputComponent, DynamicFormModelComponent, DynamicFormSelectComponent, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormsComponent, FORM_CONTROL_PROVIDER, FormControlComponent, FormFieldSet, FormFile, FormInput, FormModel, FormSelect, FormSerializable, FormStatic, FormUtilities, NgxDynamicFormModule, OpenApiService, createFormControl, createFormInput, createFormModel, createFormSelect, createFormStatic, defaultSerializer, defineFormControl, getFormControl, getFormFieldSets, getFormSerializer, provideFormControl, provideFormGroup, FORM_GROUP_TYPE as ɵa, components as ɵb, directives as ɵc, pipes as ɵd
|
|
1761
|
+
export { AsyncSubmitDirective, DYNAMIC_FORM, DynamicFormBaseComponent, DynamicFormComponent, DynamicFormControl, DynamicFormControlDirective, DynamicFormFileComponent, DynamicFormGroup, DynamicFormGroupComponent, DynamicFormGroupDirective, DynamicFormInputComponent, DynamicFormModelComponent, DynamicFormSelectComponent, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormsComponent, FORM_CONTROL_PROVIDER, FormControlComponent, FormFieldSet, FormFile, FormInput, FormModel, FormSelect, FormSerializable, FormStatic, FormUtilities, NgxDynamicFormModule, OpenApiService, createFormControl, createFormInput, createFormModel, createFormSelect, createFormStatic, defaultSerializer, defineFormControl, getFormControl, getFormFieldSets, getFormSerializer, provideFormControl, provideFormGroup, FORM_GROUP_TYPE as ɵa, components as ɵb, directives as ɵc, pipes as ɵd };
|
|
1731
1762
|
//# sourceMappingURL=stemy-ngx-dynamic-form.js.map
|