mis-crystal-design-system 14.0.45 → 14.0.46
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/dynamic-form/dynamic-form.component.d.ts +2 -1
- package/esm2020/dynamic-form/dynamic-form.component.mjs +46 -20
- package/fesm2015/mis-crystal-design-system-dynamic-form.mjs +45 -19
- package/fesm2015/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-dynamic-form.mjs +45 -19
- package/fesm2020/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -66,7 +66,8 @@ function DynamicFormComponent_ng_template_3_div_0_ng_container_5_Template(rf, ct
|
|
|
66
66
|
const _r3 = i0.ɵɵreference(6);
|
|
67
67
|
i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
|
|
68
68
|
} }
|
|
69
|
-
const _c3 = function (a0) { return { "border": a0 }; };
|
|
69
|
+
const _c3 = function (a0) { return { "border-bottom": a0 }; };
|
|
70
|
+
const _c4 = function (a0) { return { "border": a0 }; };
|
|
70
71
|
function DynamicFormComponent_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1) {
|
|
71
72
|
const _r27 = i0.ɵɵgetCurrentView();
|
|
72
73
|
i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
|
|
@@ -80,12 +81,15 @@ function DynamicFormComponent_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1
|
|
|
80
81
|
i0.ɵɵelementEnd();
|
|
81
82
|
} if (rf & 2) {
|
|
82
83
|
const ctx_r28 = i0.ɵɵnextContext();
|
|
84
|
+
const formgroup_r14 = ctx_r28.formGroup;
|
|
83
85
|
const field_r12 = ctx_r28.$implicit;
|
|
84
86
|
const control_r13 = ctx_r28.control;
|
|
87
|
+
const ctx_r15 = i0.ɵɵnextContext();
|
|
88
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r15.removeSepratorForSubFields ? "none" : ""));
|
|
85
89
|
i0.ɵɵadvance(2);
|
|
86
90
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
87
91
|
i0.ɵɵadvance(2);
|
|
88
|
-
i0.ɵɵproperty("type", field_r12.fieldInputType)("formControl", control_r13)("ngStyle", i0.ɵɵpureFunction1(
|
|
92
|
+
i0.ɵɵproperty("type", field_r12.fieldInputType)("formControl", control_r13)("ngStyle", i0.ɵɵpureFunction1(10, _c4, control_r13.touched && control_r13.errors ? "1px solid #B00020" : ""))("placeholder", field_r12.placeholderText ? field_r12.placeholderText : "Input Text")("min", field_r12.fieldInputType === "number" ? 0 : "");
|
|
89
93
|
i0.ɵɵadvance(1);
|
|
90
94
|
i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
|
|
91
95
|
} }
|
|
@@ -110,12 +114,15 @@ function DynamicFormComponent_ng_template_3_div_1_Template(rf, ctx) { if (rf & 1
|
|
|
110
114
|
i0.ɵɵelementEnd();
|
|
111
115
|
} if (rf & 2) {
|
|
112
116
|
const ctx_r34 = i0.ɵɵnextContext();
|
|
117
|
+
const formgroup_r14 = ctx_r34.formGroup;
|
|
113
118
|
const field_r12 = ctx_r34.$implicit;
|
|
114
119
|
const control_r13 = ctx_r34.control;
|
|
120
|
+
const ctx_r16 = i0.ɵɵnextContext();
|
|
121
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(6, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r16.removeSepratorForSubFields ? "none" : ""));
|
|
115
122
|
i0.ɵɵadvance(2);
|
|
116
123
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
117
124
|
i0.ɵɵadvance(2);
|
|
118
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(
|
|
125
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c4, control_r13.touched && control_r13.errors ? "1px solid #B00020" : ""))("placeholder", field_r12.placeholderText ? field_r12.placeholderText : "Input Text")("formControl", control_r13);
|
|
119
126
|
i0.ɵɵadvance(1);
|
|
120
127
|
i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
|
|
121
128
|
} }
|
|
@@ -150,9 +157,11 @@ function DynamicFormComponent_ng_template_3_div_2_Template(rf, ctx) { if (rf & 1
|
|
|
150
157
|
i0.ɵɵelementEnd();
|
|
151
158
|
} if (rf & 2) {
|
|
152
159
|
const ctx_r44 = i0.ɵɵnextContext();
|
|
160
|
+
const formgroup_r14 = ctx_r44.formGroup;
|
|
153
161
|
const field_r12 = ctx_r44.$implicit;
|
|
154
162
|
const control_r13 = ctx_r44.control;
|
|
155
163
|
const ctx_r17 = i0.ɵɵnextContext();
|
|
164
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r17.removeSepratorForSubFields ? "none" : ""));
|
|
156
165
|
i0.ɵɵadvance(2);
|
|
157
166
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
158
167
|
i0.ɵɵadvance(2);
|
|
@@ -182,8 +191,11 @@ function DynamicFormComponent_ng_template_3_div_3_Template(rf, ctx) { if (rf & 1
|
|
|
182
191
|
i0.ɵɵelementEnd();
|
|
183
192
|
} if (rf & 2) {
|
|
184
193
|
const ctx_r50 = i0.ɵɵnextContext();
|
|
194
|
+
const formgroup_r14 = ctx_r50.formGroup;
|
|
185
195
|
const field_r12 = ctx_r50.$implicit;
|
|
186
196
|
const control_r13 = ctx_r50.control;
|
|
197
|
+
const ctx_r18 = i0.ɵɵnextContext();
|
|
198
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r18.removeSepratorForSubFields ? "none" : ""));
|
|
187
199
|
i0.ɵɵadvance(2);
|
|
188
200
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
189
201
|
i0.ɵɵadvance(1);
|
|
@@ -208,7 +220,7 @@ function DynamicFormComponent_ng_template_3_div_4_ng_container_6_Template(rf, ct
|
|
|
208
220
|
const _r3 = i0.ɵɵreference(6);
|
|
209
221
|
i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
|
|
210
222
|
} }
|
|
211
|
-
const
|
|
223
|
+
const _c5 = function (a0) { return { "removeable-container": a0 }; };
|
|
212
224
|
function DynamicFormComponent_ng_template_3_div_4_Template(rf, ctx) { if (rf & 1) {
|
|
213
225
|
const _r59 = i0.ɵɵgetCurrentView();
|
|
214
226
|
i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
|
|
@@ -223,13 +235,15 @@ function DynamicFormComponent_ng_template_3_div_4_Template(rf, ctx) { if (rf & 1
|
|
|
223
235
|
i0.ɵɵelementEnd();
|
|
224
236
|
} if (rf & 2) {
|
|
225
237
|
const ctx_r60 = i0.ɵɵnextContext();
|
|
238
|
+
const formgroup_r14 = ctx_r60.formGroup;
|
|
226
239
|
const field_r12 = ctx_r60.$implicit;
|
|
227
240
|
const control_r13 = ctx_r60.control;
|
|
228
241
|
const ctx_r19 = i0.ɵɵnextContext();
|
|
242
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(9, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r19.removeSepratorForSubFields ? "none" : ""));
|
|
229
243
|
i0.ɵɵadvance(2);
|
|
230
244
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
231
245
|
i0.ɵɵadvance(1);
|
|
232
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(
|
|
246
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c5, field_r12 == null ? null : field_r12.isRemoveable));
|
|
233
247
|
i0.ɵɵadvance(1);
|
|
234
248
|
i0.ɵɵproperty("searchEnabled", false)("width", "140px")("data", field_r12.itemsList)("selectedItem", control_r13.value);
|
|
235
249
|
i0.ɵɵadvance(1);
|
|
@@ -243,7 +257,7 @@ function DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template(rf, ctx)
|
|
|
243
257
|
const ctx_r64 = i0.ɵɵnextContext(4);
|
|
244
258
|
i0.ɵɵproperty("src", ctx_r64.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
|
|
245
259
|
} }
|
|
246
|
-
const
|
|
260
|
+
const _c6 = function (a0) { return { "checkbox-active": a0 }; };
|
|
247
261
|
function DynamicFormComponent_ng_template_3_div_5_div_5_Template(rf, ctx) { if (rf & 1) {
|
|
248
262
|
const _r67 = i0.ɵɵgetCurrentView();
|
|
249
263
|
i0.ɵɵelementStart(0, "div", 32);
|
|
@@ -256,7 +270,7 @@ function DynamicFormComponent_ng_template_3_div_5_div_5_Template(rf, ctx) { if (
|
|
|
256
270
|
const item_r63 = ctx.$implicit;
|
|
257
271
|
const control_r13 = i0.ɵɵnextContext(2).control;
|
|
258
272
|
const ctx_r61 = i0.ɵɵnextContext();
|
|
259
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3,
|
|
273
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, item_r63.label === (control_r13.value == null ? null : control_r13.value.label)));
|
|
260
274
|
i0.ɵɵadvance(1);
|
|
261
275
|
i0.ɵɵproperty("ngIf", item_r63.label === (control_r13.value == null ? null : control_r13.value.label) && ctx_r61.activeBtnIconUrl);
|
|
262
276
|
i0.ɵɵadvance(2);
|
|
@@ -282,8 +296,11 @@ function DynamicFormComponent_ng_template_3_div_5_Template(rf, ctx) { if (rf & 1
|
|
|
282
296
|
i0.ɵɵelementEnd();
|
|
283
297
|
} if (rf & 2) {
|
|
284
298
|
const ctx_r70 = i0.ɵɵnextContext();
|
|
299
|
+
const formgroup_r14 = ctx_r70.formGroup;
|
|
285
300
|
const field_r12 = ctx_r70.$implicit;
|
|
286
301
|
const control_r13 = ctx_r70.control;
|
|
302
|
+
const ctx_r20 = i0.ɵɵnextContext();
|
|
303
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r20.removeSepratorForSubFields ? "none" : ""));
|
|
287
304
|
i0.ɵɵadvance(2);
|
|
288
305
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
289
306
|
i0.ɵɵadvance(3);
|
|
@@ -309,7 +326,7 @@ function DynamicFormComponent_ng_template_3_div_6_div_5_Template(rf, ctx) { if (
|
|
|
309
326
|
const item_r73 = ctx.$implicit;
|
|
310
327
|
const control_r13 = i0.ɵɵnextContext(2).control;
|
|
311
328
|
const ctx_r71 = i0.ɵɵnextContext();
|
|
312
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3,
|
|
329
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, ctx_r71.isCheckBoxSelected(item_r73.label, control_r13.value)));
|
|
313
330
|
i0.ɵɵadvance(1);
|
|
314
331
|
i0.ɵɵproperty("ngIf", ctx_r71.isCheckBoxSelected(item_r73.label, control_r13.value) && ctx_r71.activeBtnIconUrl);
|
|
315
332
|
i0.ɵɵadvance(2);
|
|
@@ -335,8 +352,11 @@ function DynamicFormComponent_ng_template_3_div_6_Template(rf, ctx) { if (rf & 1
|
|
|
335
352
|
i0.ɵɵelementEnd();
|
|
336
353
|
} if (rf & 2) {
|
|
337
354
|
const ctx_r80 = i0.ɵɵnextContext();
|
|
355
|
+
const formgroup_r14 = ctx_r80.formGroup;
|
|
338
356
|
const field_r12 = ctx_r80.$implicit;
|
|
339
357
|
const control_r13 = ctx_r80.control;
|
|
358
|
+
const ctx_r21 = i0.ɵɵnextContext();
|
|
359
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r21.removeSepratorForSubFields ? "none" : ""));
|
|
340
360
|
i0.ɵɵadvance(2);
|
|
341
361
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
342
362
|
i0.ɵɵadvance(3);
|
|
@@ -364,8 +384,11 @@ function DynamicFormComponent_ng_template_3_div_7_Template(rf, ctx) { if (rf & 1
|
|
|
364
384
|
i0.ɵɵelementEnd();
|
|
365
385
|
} if (rf & 2) {
|
|
366
386
|
const ctx_r86 = i0.ɵɵnextContext();
|
|
387
|
+
const formgroup_r14 = ctx_r86.formGroup;
|
|
367
388
|
const field_r12 = ctx_r86.$implicit;
|
|
368
389
|
const control_r13 = ctx_r86.control;
|
|
390
|
+
const ctx_r22 = i0.ɵɵnextContext();
|
|
391
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r22.removeSepratorForSubFields ? "none" : ""));
|
|
369
392
|
i0.ɵɵadvance(2);
|
|
370
393
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
371
394
|
i0.ɵɵadvance(1);
|
|
@@ -374,14 +397,14 @@ function DynamicFormComponent_ng_template_3_div_7_Template(rf, ctx) { if (rf & 1
|
|
|
374
397
|
i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
|
|
375
398
|
} }
|
|
376
399
|
function DynamicFormComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
|
|
377
|
-
i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_div_0_Template, 6,
|
|
378
|
-
i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_1_Template, 6,
|
|
379
|
-
i0.ɵɵtemplate(2, DynamicFormComponent_ng_template_3_div_2_Template, 8,
|
|
380
|
-
i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_3_Template, 5,
|
|
381
|
-
i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_4_Template, 7,
|
|
382
|
-
i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_Template, 7,
|
|
383
|
-
i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_Template, 7,
|
|
384
|
-
i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_7_Template, 5,
|
|
400
|
+
i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_div_0_Template, 6, 12, "div", 10);
|
|
401
|
+
i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_1_Template, 6, 10, "div", 10);
|
|
402
|
+
i0.ɵɵtemplate(2, DynamicFormComponent_ng_template_3_div_2_Template, 8, 10, "div", 11);
|
|
403
|
+
i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_3_Template, 5, 6, "div", 11);
|
|
404
|
+
i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_4_Template, 7, 13, "div", 11);
|
|
405
|
+
i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_Template, 7, 6, "div", 10);
|
|
406
|
+
i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_Template, 7, 6, "div", 10);
|
|
407
|
+
i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_7_Template, 5, 12, "div", 11);
|
|
385
408
|
} if (rf & 2) {
|
|
386
409
|
const field_r12 = ctx.$implicit;
|
|
387
410
|
i0.ɵɵproperty("ngIf", field_r12.fieldType === "input" && (field_r12.fieldInputType === "text" || field_r12.fieldInputType === "number"));
|
|
@@ -435,6 +458,7 @@ class DynamicFormComponent {
|
|
|
435
458
|
this.activeBtnIconUrl = "";
|
|
436
459
|
this.calendarIconUrl = "";
|
|
437
460
|
this.removeIconUrl = "";
|
|
461
|
+
this.removeSepratorForSubFields = false;
|
|
438
462
|
/**
|
|
439
463
|
* formUpdated: Emits formValues Object whenever there is a change in the dynamic form.
|
|
440
464
|
*/
|
|
@@ -654,7 +678,7 @@ class DynamicFormComponent {
|
|
|
654
678
|
}
|
|
655
679
|
}
|
|
656
680
|
DynamicFormComponent.ɵfac = function DynamicFormComponent_Factory(t) { return new (t || DynamicFormComponent)(); };
|
|
657
|
-
DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DynamicFormComponent, selectors: [["mis-dynamic-form"]], inputs: { formFields: "formFields", formValues: "formValues", activeBtnIconUrl: "activeBtnIconUrl", calendarIconUrl: "calendarIconUrl", removeIconUrl: "removeIconUrl" }, outputs: { formUpdated: "formUpdated", formValid: "formValid", formInitialized: "formInitialized", fieldRemoved: "fieldRemoved" }, decls: 7, vars: 2, consts: [[3, "formGroup"], ["formArrayName", "dynamicFields"], [3, "formGroupName", 4, "ngFor", "ngForOf"], ["dynamicField", ""], ["dynamicFieldErrors", ""], [3, "formGroupName"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "sub-dynamic-form", 4, "ngIf"], [1, "sub-dynamic-form"], [4, "ngFor", "ngForOf"], ["class", "dynamic-field multi-line-field-container", 4, "ngIf"], ["class", "dynamic-field single-line-field-container", 4, "ngIf"], [1, "dynamic-field", "multi-line-field-container"], [1, "h7", "field-title-sm"], [2, "flex-basis", "100%"], [1, "input-field", "ip-text", 3, "type", "formControl", "ngStyle", "placeholder", "min", "ngModelChange"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["type", "text", 1, "input-field", "ip-textarea", 3, "ngStyle", "placeholder", "formControl", "ngModelChange"], [1, "dynamic-field", "single-line-field-container"], [1, "h6"], [1, "date-picker-container"], ["readonly", "", "misTzDp", "", 1, "date-picker", 3, "dpConfig", "selectedDate", "offsetY", "value", "dateChange"], ["dp", ""], ["alt", "data-picker", "class", "date-picker-icon", 3, "src", "click", 4, "ngIf"], ["alt", "data-picker", 1, "date-picker-icon", 3, "src", "click"], [3, "control", "valueChanged"], [3, "ngClass"], [3, "searchEnabled", "width", "data", "selectedItem", "onChange"], ["class", "remove-icon", 3, "src", "click", 4, "ngIf"], [1, "remove-icon", 3, "src", "click"], ["id", "checkboxes-container"], ["class", "radio-checkbox-common", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "radio-checkbox-common", 3, "ngClass", "click"], ["alt", "", 3, "src", 4, "ngIf"], ["alt", "", 3, "src"], [3, "width", "showSelectedCount", "dropdownListWidth", "searchEnabled", "hideApplyButton", "data", "selectedItems", "onChange"], ["id", "error-messages-container"], [1, "h8"], [2, "flex-basis", "100%", "height", "0"]], template: function DynamicFormComponent_Template(rf, ctx) { if (rf & 1) {
|
|
681
|
+
DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DynamicFormComponent, selectors: [["mis-dynamic-form"]], inputs: { formFields: "formFields", formValues: "formValues", activeBtnIconUrl: "activeBtnIconUrl", calendarIconUrl: "calendarIconUrl", removeIconUrl: "removeIconUrl", removeSepratorForSubFields: "removeSepratorForSubFields" }, outputs: { formUpdated: "formUpdated", formValid: "formValid", formInitialized: "formInitialized", fieldRemoved: "fieldRemoved" }, decls: 7, vars: 2, consts: [[3, "formGroup"], ["formArrayName", "dynamicFields"], [3, "formGroupName", 4, "ngFor", "ngForOf"], ["dynamicField", ""], ["dynamicFieldErrors", ""], [3, "formGroupName"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "sub-dynamic-form", 4, "ngIf"], [1, "sub-dynamic-form"], [4, "ngFor", "ngForOf"], ["class", "dynamic-field multi-line-field-container", 3, "ngStyle", 4, "ngIf"], ["class", "dynamic-field single-line-field-container", 3, "ngStyle", 4, "ngIf"], [1, "dynamic-field", "multi-line-field-container", 3, "ngStyle"], [1, "h7", "field-title-sm"], [2, "flex-basis", "100%"], [1, "input-field", "ip-text", 3, "type", "formControl", "ngStyle", "placeholder", "min", "ngModelChange"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["type", "text", 1, "input-field", "ip-textarea", 3, "ngStyle", "placeholder", "formControl", "ngModelChange"], [1, "dynamic-field", "single-line-field-container", 3, "ngStyle"], [1, "h6"], [1, "date-picker-container"], ["readonly", "", "misTzDp", "", 1, "date-picker", 3, "dpConfig", "selectedDate", "offsetY", "value", "dateChange"], ["dp", ""], ["alt", "data-picker", "class", "date-picker-icon", 3, "src", "click", 4, "ngIf"], ["alt", "data-picker", 1, "date-picker-icon", 3, "src", "click"], [3, "control", "valueChanged"], [3, "ngClass"], [3, "searchEnabled", "width", "data", "selectedItem", "onChange"], ["class", "remove-icon", 3, "src", "click", 4, "ngIf"], [1, "remove-icon", 3, "src", "click"], ["id", "checkboxes-container"], ["class", "radio-checkbox-common", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "radio-checkbox-common", 3, "ngClass", "click"], ["alt", "", 3, "src", 4, "ngIf"], ["alt", "", 3, "src"], [3, "width", "showSelectedCount", "dropdownListWidth", "searchEnabled", "hideApplyButton", "data", "selectedItems", "onChange"], ["id", "error-messages-container"], [1, "h8"], [2, "flex-basis", "100%", "height", "0"]], template: function DynamicFormComponent_Template(rf, ctx) { if (rf & 1) {
|
|
658
682
|
i0.ɵɵelementStart(0, "form", 0);
|
|
659
683
|
i0.ɵɵelementContainerStart(1, 1);
|
|
660
684
|
i0.ɵɵtemplate(2, DynamicFormComponent_ng_container_2_Template, 3, 8, "ng-container", 2);
|
|
@@ -666,10 +690,10 @@ DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dynami
|
|
|
666
690
|
i0.ɵɵproperty("formGroup", ctx.dynamicForm);
|
|
667
691
|
i0.ɵɵadvance(2);
|
|
668
692
|
i0.ɵɵproperty("ngForOf", ctx.getDynamicFieldsControls().controls);
|
|
669
|
-
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormControlDirective, i2.FormGroupDirective, i2.FormGroupName, i2.FormArrayName, i3.DropdownComponent, i4.SwitchComponent, i5.MultiSelectDropdownComponent, i6.TzDatepickerDirective, i1.KeyValuePipe], styles: ["p[_ngcontent-%COMP%]{margin:0;cursor:default} .main-container{margin:0;max-width:100%}.sub-dynamic-form[_ngcontent-%COMP%]{padding-left:24px}.dynamic-field[_ngcontent-%COMP%] .container{height:32px!important}.single-line-field-container[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm[_ngcontent-%COMP%]{margin-bottom:8px;cursor:default}.input-field[_ngcontent-%COMP%]{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text[_ngcontent-%COMP%]{height:44px;padding:8px 12px}.ip-textarea[_ngcontent-%COMP%]{max-height:94px;padding:8px}input[_ngcontent-%COMP%]:focus{outline:none}input[_ngcontent-%COMP%]::placeholder{color:var(--grey-seperators)}textarea[_ngcontent-%COMP%]:focus{outline:none}.date-picker-container[_ngcontent-%COMP%]{position:relative;width:140px}.date-picker-container[_ngcontent-%COMP%] .date-picker[_ngcontent-%COMP%]{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container[_ngcontent-%COMP%] .date-picker[_ngcontent-%COMP%]:hover{background-color:var(--grey-hover)}.date-picker-container[_ngcontent-%COMP%] .date-picker-icon[_ngcontent-%COMP%]{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form[_ngcontent-%COMP%] .dynamic-field[_ngcontent-%COMP%]:last-child{border-bottom:none!important}#checkboxes-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{color:var(--text-muted);cursor:pointer}.radio-checkbox-common[_ngcontent-%COMP%] img[_ngcontent-%COMP%]{margin-right:8px}.checkbox-active[_ngcontent-%COMP%]{background-color:var(--pmry-500)}.checkbox-active[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{color:var(--text-white)}#error-messages-container[_ngcontent-%COMP%]{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{color:var(--sem-error)}.removeable-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.removeable-container[_ngcontent-%COMP%] .remove-icon[_ngcontent-%COMP%]{cursor:pointer;margin-left:8px;max-width:24px}"] });
|
|
693
|
+
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormControlDirective, i2.FormGroupDirective, i2.FormGroupName, i2.FormArrayName, i3.DropdownComponent, i4.SwitchComponent, i5.MultiSelectDropdownComponent, i6.TzDatepickerDirective, i1.KeyValuePipe], styles: ["p[_ngcontent-%COMP%]{margin:0;cursor:default} .main-container{margin:0;max-width:100%}.sub-dynamic-form[_ngcontent-%COMP%]{padding-left:24px;border-bottom:1px solid var(--grey-seperators)}.dynamic-field[_ngcontent-%COMP%] .container{height:32px!important}.single-line-field-container[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm[_ngcontent-%COMP%]{margin-bottom:8px;cursor:default}.input-field[_ngcontent-%COMP%]{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text[_ngcontent-%COMP%]{height:44px;padding:8px 12px}.ip-textarea[_ngcontent-%COMP%]{max-height:94px;padding:8px}input[_ngcontent-%COMP%]:focus{outline:none}input[_ngcontent-%COMP%]::placeholder{color:var(--grey-seperators)}textarea[_ngcontent-%COMP%]:focus{outline:none}.date-picker-container[_ngcontent-%COMP%]{position:relative;width:140px}.date-picker-container[_ngcontent-%COMP%] .date-picker[_ngcontent-%COMP%]{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container[_ngcontent-%COMP%] .date-picker[_ngcontent-%COMP%]:hover{background-color:var(--grey-hover)}.date-picker-container[_ngcontent-%COMP%] .date-picker-icon[_ngcontent-%COMP%]{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form[_ngcontent-%COMP%] .dynamic-field[_ngcontent-%COMP%]:last-child{border-bottom:none!important}#checkboxes-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{color:var(--text-muted);cursor:pointer}.radio-checkbox-common[_ngcontent-%COMP%] img[_ngcontent-%COMP%]{margin-right:8px}.checkbox-active[_ngcontent-%COMP%]{background-color:var(--pmry-500)}.checkbox-active[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{color:var(--text-white)}#error-messages-container[_ngcontent-%COMP%]{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{color:var(--sem-error)}.removeable-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.removeable-container[_ngcontent-%COMP%] .remove-icon[_ngcontent-%COMP%]{cursor:pointer;margin-left:8px;max-width:24px}"] });
|
|
670
694
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicFormComponent, [{
|
|
671
695
|
type: Component,
|
|
672
|
-
args: [{ selector: "mis-dynamic-form", template: "<form [formGroup]=\"dynamicForm\">\n <ng-container formArrayName=\"dynamicFields\">\n <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: formFields[i],\n formGroup: fieldControl,\n control: fieldControl.controls.value\n }\"\n >\n </ng-container>\n <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && (!!formFields[i]?.subFields && formFields[i]?.subFields?.length > 0 && matchParentConfig(formFields[i]?.subFields, fieldControl.controls.value.value.value))\">\n <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls;\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: formFields[i].subFields[findSelectedIndex(formFields[i]?.subFields, fieldControl.controls.value.value.value)],\n control: subFieldControl\n }\">\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\" \n [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" \n [min]=\"field.fieldInputType === 'number' ? 0 : '' \"/>\n <ng-container *ngIf=\"control.touched && control.errors\"\n [ngTemplateOutlet]=\"dynamicFieldErrors\" \n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n >\n </ng-container>\n </div>\n\n <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <textarea class=\"input-field ip-textarea\" type=\"text\"\n [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'input' fieldInputType: 'date' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <div class=\"date-picker-container\">\n <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n [value]=\"control.value\" #dp />\n <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n (click)=\"dp.click()\" />\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <div [ngClass]=\"{'removeable-container' : field?.isRemoveable}\">\n <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n </mis-dropdown>\n <img *ngIf=\"field.isRemoveable && removeIconUrl\" class=\"remove-icon\" [src]=\"removeIconUrl\" (click)=\"fieldRemoved.emit(field)\">\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n <div id=\"error-messages-container\">\n <ng-container *ngFor=\"let error of errors | keyvalue\">\n <p class=\"h8\">\n {{\" \u2022 \" + error.value}}\n </p>\n <div style=\"flex-basis: 100%; height: 0\"></div>\n </ng-container>\n </div>\n</ng-template>", styles: ["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}.removeable-container{display:flex;justify-content:center;align-items:center}.removeable-container .remove-icon{cursor:pointer;margin-left:8px;max-width:24px}\n"] }]
|
|
696
|
+
args: [{ selector: "mis-dynamic-form", template: "<form [formGroup]=\"dynamicForm\">\n <ng-container formArrayName=\"dynamicFields\">\n <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: formFields[i],\n formGroup: fieldControl,\n control: fieldControl.controls.value\n }\"\n >\n </ng-container>\n <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && (!!formFields[i]?.subFields && formFields[i]?.subFields?.length > 0 && matchParentConfig(formFields[i]?.subFields, fieldControl.controls.value.value.value))\">\n <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls;\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: formFields[i].subFields[findSelectedIndex(formFields[i]?.subFields, fieldControl.controls.value.value.value)],\n control: subFieldControl\n }\">\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n <div class=\"dynamic-field multi-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\" \n [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" \n [min]=\"field.fieldInputType === 'number' ? 0 : '' \"/>\n <ng-container *ngIf=\"control.touched && control.errors\"\n [ngTemplateOutlet]=\"dynamicFieldErrors\" \n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n >\n </ng-container>\n </div>\n\n <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n <div class=\"dynamic-field multi-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <textarea class=\"input-field ip-textarea\" type=\"text\"\n [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'input' fieldInputType: 'date' -->\n <div class=\"dynamic-field single-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <div class=\"date-picker-container\">\n <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n [value]=\"control.value\" #dp />\n <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n (click)=\"dp.click()\" />\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n <div class=\"dynamic-field single-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n <div class=\"dynamic-field single-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <div [ngClass]=\"{'removeable-container' : field?.isRemoveable}\">\n <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n </mis-dropdown>\n <img *ngIf=\"field.isRemoveable && removeIconUrl\" class=\"remove-icon\" [src]=\"removeIconUrl\" (click)=\"fieldRemoved.emit(field)\">\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n <div class=\"dynamic-field multi-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n <div class=\"dynamic-field multi-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n <div class=\"dynamic-field single-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n <div id=\"error-messages-container\">\n <ng-container *ngFor=\"let error of errors | keyvalue\">\n <p class=\"h8\">\n {{\" \u2022 \" + error.value}}\n </p>\n <div style=\"flex-basis: 100%; height: 0\"></div>\n </ng-container>\n </div>\n</ng-template>", styles: ["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px;border-bottom:1px solid var(--grey-seperators)}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}.removeable-container{display:flex;justify-content:center;align-items:center}.removeable-container .remove-icon{cursor:pointer;margin-left:8px;max-width:24px}\n"] }]
|
|
673
697
|
}], function () { return []; }, { formFields: [{
|
|
674
698
|
type: Input
|
|
675
699
|
}], formValues: [{
|
|
@@ -680,6 +704,8 @@ DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dynami
|
|
|
680
704
|
type: Input
|
|
681
705
|
}], removeIconUrl: [{
|
|
682
706
|
type: Input
|
|
707
|
+
}], removeSepratorForSubFields: [{
|
|
708
|
+
type: Input
|
|
683
709
|
}], formUpdated: [{
|
|
684
710
|
type: Output
|
|
685
711
|
}], formValid: [{
|