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
|
@@ -78,7 +78,8 @@ function DynamicFormComponent_ng_template_3_div_0_ng_container_5_Template(rf, ct
|
|
|
78
78
|
i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
|
-
const _c3 = function (a0) { return { "border": a0 }; };
|
|
81
|
+
const _c3 = function (a0) { return { "border-bottom": a0 }; };
|
|
82
|
+
const _c4 = function (a0) { return { "border": a0 }; };
|
|
82
83
|
function DynamicFormComponent_ng_template_3_div_0_Template(rf, ctx) {
|
|
83
84
|
if (rf & 1) {
|
|
84
85
|
const _r27 = i0.ɵɵgetCurrentView();
|
|
@@ -94,12 +95,15 @@ function DynamicFormComponent_ng_template_3_div_0_Template(rf, ctx) {
|
|
|
94
95
|
}
|
|
95
96
|
if (rf & 2) {
|
|
96
97
|
const ctx_r28 = i0.ɵɵnextContext();
|
|
98
|
+
const formgroup_r14 = ctx_r28.formGroup;
|
|
97
99
|
const field_r12 = ctx_r28.$implicit;
|
|
98
100
|
const control_r13 = ctx_r28.control;
|
|
101
|
+
const ctx_r15 = i0.ɵɵnextContext();
|
|
102
|
+
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" : ""));
|
|
99
103
|
i0.ɵɵadvance(2);
|
|
100
104
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
101
105
|
i0.ɵɵadvance(2);
|
|
102
|
-
i0.ɵɵproperty("type", field_r12.fieldInputType)("formControl", control_r13)("ngStyle", i0.ɵɵpureFunction1(
|
|
106
|
+
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 : "");
|
|
103
107
|
i0.ɵɵadvance(1);
|
|
104
108
|
i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
|
|
105
109
|
}
|
|
@@ -130,12 +134,15 @@ function DynamicFormComponent_ng_template_3_div_1_Template(rf, ctx) {
|
|
|
130
134
|
}
|
|
131
135
|
if (rf & 2) {
|
|
132
136
|
const ctx_r34 = i0.ɵɵnextContext();
|
|
137
|
+
const formgroup_r14 = ctx_r34.formGroup;
|
|
133
138
|
const field_r12 = ctx_r34.$implicit;
|
|
134
139
|
const control_r13 = ctx_r34.control;
|
|
140
|
+
const ctx_r16 = i0.ɵɵnextContext();
|
|
141
|
+
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" : ""));
|
|
135
142
|
i0.ɵɵadvance(2);
|
|
136
143
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
137
144
|
i0.ɵɵadvance(2);
|
|
138
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(
|
|
145
|
+
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);
|
|
139
146
|
i0.ɵɵadvance(1);
|
|
140
147
|
i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
|
|
141
148
|
}
|
|
@@ -179,9 +186,11 @@ function DynamicFormComponent_ng_template_3_div_2_Template(rf, ctx) {
|
|
|
179
186
|
}
|
|
180
187
|
if (rf & 2) {
|
|
181
188
|
const ctx_r44 = i0.ɵɵnextContext();
|
|
189
|
+
const formgroup_r14 = ctx_r44.formGroup;
|
|
182
190
|
const field_r12 = ctx_r44.$implicit;
|
|
183
191
|
const control_r13 = ctx_r44.control;
|
|
184
192
|
const ctx_r17 = i0.ɵɵnextContext();
|
|
193
|
+
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" : ""));
|
|
185
194
|
i0.ɵɵadvance(2);
|
|
186
195
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
187
196
|
i0.ɵɵadvance(2);
|
|
@@ -217,8 +226,11 @@ function DynamicFormComponent_ng_template_3_div_3_Template(rf, ctx) {
|
|
|
217
226
|
}
|
|
218
227
|
if (rf & 2) {
|
|
219
228
|
const ctx_r50 = i0.ɵɵnextContext();
|
|
229
|
+
const formgroup_r14 = ctx_r50.formGroup;
|
|
220
230
|
const field_r12 = ctx_r50.$implicit;
|
|
221
231
|
const control_r13 = ctx_r50.control;
|
|
232
|
+
const ctx_r18 = i0.ɵɵnextContext();
|
|
233
|
+
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" : ""));
|
|
222
234
|
i0.ɵɵadvance(2);
|
|
223
235
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
224
236
|
i0.ɵɵadvance(1);
|
|
@@ -250,7 +262,7 @@ function DynamicFormComponent_ng_template_3_div_4_ng_container_6_Template(rf, ct
|
|
|
250
262
|
i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
|
|
251
263
|
}
|
|
252
264
|
}
|
|
253
|
-
const
|
|
265
|
+
const _c5 = function (a0) { return { "removeable-container": a0 }; };
|
|
254
266
|
function DynamicFormComponent_ng_template_3_div_4_Template(rf, ctx) {
|
|
255
267
|
if (rf & 1) {
|
|
256
268
|
const _r59 = i0.ɵɵgetCurrentView();
|
|
@@ -267,13 +279,15 @@ function DynamicFormComponent_ng_template_3_div_4_Template(rf, ctx) {
|
|
|
267
279
|
}
|
|
268
280
|
if (rf & 2) {
|
|
269
281
|
const ctx_r60 = i0.ɵɵnextContext();
|
|
282
|
+
const formgroup_r14 = ctx_r60.formGroup;
|
|
270
283
|
const field_r12 = ctx_r60.$implicit;
|
|
271
284
|
const control_r13 = ctx_r60.control;
|
|
272
285
|
const ctx_r19 = i0.ɵɵnextContext();
|
|
286
|
+
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" : ""));
|
|
273
287
|
i0.ɵɵadvance(2);
|
|
274
288
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
275
289
|
i0.ɵɵadvance(1);
|
|
276
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(
|
|
290
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c5, field_r12 == null ? null : field_r12.isRemoveable));
|
|
277
291
|
i0.ɵɵadvance(1);
|
|
278
292
|
i0.ɵɵproperty("searchEnabled", false)("width", "140px")("data", field_r12.itemsList)("selectedItem", control_r13.value);
|
|
279
293
|
i0.ɵɵadvance(1);
|
|
@@ -291,7 +305,7 @@ function DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template(rf, ctx)
|
|
|
291
305
|
i0.ɵɵproperty("src", ctx_r64.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
|
|
292
306
|
}
|
|
293
307
|
}
|
|
294
|
-
const
|
|
308
|
+
const _c6 = function (a0) { return { "checkbox-active": a0 }; };
|
|
295
309
|
function DynamicFormComponent_ng_template_3_div_5_div_5_Template(rf, ctx) {
|
|
296
310
|
if (rf & 1) {
|
|
297
311
|
const _r67 = i0.ɵɵgetCurrentView();
|
|
@@ -306,7 +320,7 @@ function DynamicFormComponent_ng_template_3_div_5_div_5_Template(rf, ctx) {
|
|
|
306
320
|
const item_r63 = ctx.$implicit;
|
|
307
321
|
const control_r13 = i0.ɵɵnextContext(2).control;
|
|
308
322
|
const ctx_r61 = i0.ɵɵnextContext();
|
|
309
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3,
|
|
323
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, item_r63.label === (control_r13.value == null ? null : control_r13.value.label)));
|
|
310
324
|
i0.ɵɵadvance(1);
|
|
311
325
|
i0.ɵɵproperty("ngIf", item_r63.label === (control_r13.value == null ? null : control_r13.value.label) && ctx_r61.activeBtnIconUrl);
|
|
312
326
|
i0.ɵɵadvance(2);
|
|
@@ -338,8 +352,11 @@ function DynamicFormComponent_ng_template_3_div_5_Template(rf, ctx) {
|
|
|
338
352
|
}
|
|
339
353
|
if (rf & 2) {
|
|
340
354
|
const ctx_r70 = i0.ɵɵnextContext();
|
|
355
|
+
const formgroup_r14 = ctx_r70.formGroup;
|
|
341
356
|
const field_r12 = ctx_r70.$implicit;
|
|
342
357
|
const control_r13 = ctx_r70.control;
|
|
358
|
+
const ctx_r20 = 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_r20.removeSepratorForSubFields ? "none" : ""));
|
|
343
360
|
i0.ɵɵadvance(2);
|
|
344
361
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
345
362
|
i0.ɵɵadvance(3);
|
|
@@ -371,7 +388,7 @@ function DynamicFormComponent_ng_template_3_div_6_div_5_Template(rf, ctx) {
|
|
|
371
388
|
const item_r73 = ctx.$implicit;
|
|
372
389
|
const control_r13 = i0.ɵɵnextContext(2).control;
|
|
373
390
|
const ctx_r71 = i0.ɵɵnextContext();
|
|
374
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3,
|
|
391
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, ctx_r71.isCheckBoxSelected(item_r73.label, control_r13.value)));
|
|
375
392
|
i0.ɵɵadvance(1);
|
|
376
393
|
i0.ɵɵproperty("ngIf", ctx_r71.isCheckBoxSelected(item_r73.label, control_r13.value) && ctx_r71.activeBtnIconUrl);
|
|
377
394
|
i0.ɵɵadvance(2);
|
|
@@ -403,8 +420,11 @@ function DynamicFormComponent_ng_template_3_div_6_Template(rf, ctx) {
|
|
|
403
420
|
}
|
|
404
421
|
if (rf & 2) {
|
|
405
422
|
const ctx_r80 = i0.ɵɵnextContext();
|
|
423
|
+
const formgroup_r14 = ctx_r80.formGroup;
|
|
406
424
|
const field_r12 = ctx_r80.$implicit;
|
|
407
425
|
const control_r13 = ctx_r80.control;
|
|
426
|
+
const ctx_r21 = i0.ɵɵnextContext();
|
|
427
|
+
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" : ""));
|
|
408
428
|
i0.ɵɵadvance(2);
|
|
409
429
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
410
430
|
i0.ɵɵadvance(3);
|
|
@@ -438,8 +458,11 @@ function DynamicFormComponent_ng_template_3_div_7_Template(rf, ctx) {
|
|
|
438
458
|
}
|
|
439
459
|
if (rf & 2) {
|
|
440
460
|
const ctx_r86 = i0.ɵɵnextContext();
|
|
461
|
+
const formgroup_r14 = ctx_r86.formGroup;
|
|
441
462
|
const field_r12 = ctx_r86.$implicit;
|
|
442
463
|
const control_r13 = ctx_r86.control;
|
|
464
|
+
const ctx_r22 = i0.ɵɵnextContext();
|
|
465
|
+
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" : ""));
|
|
443
466
|
i0.ɵɵadvance(2);
|
|
444
467
|
i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
|
|
445
468
|
i0.ɵɵadvance(1);
|
|
@@ -450,14 +473,14 @@ function DynamicFormComponent_ng_template_3_div_7_Template(rf, ctx) {
|
|
|
450
473
|
}
|
|
451
474
|
function DynamicFormComponent_ng_template_3_Template(rf, ctx) {
|
|
452
475
|
if (rf & 1) {
|
|
453
|
-
i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_div_0_Template, 6,
|
|
454
|
-
i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_1_Template, 6,
|
|
455
|
-
i0.ɵɵtemplate(2, DynamicFormComponent_ng_template_3_div_2_Template, 8,
|
|
456
|
-
i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_3_Template, 5,
|
|
457
|
-
i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_4_Template, 7,
|
|
458
|
-
i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_Template, 7,
|
|
459
|
-
i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_Template, 7,
|
|
460
|
-
i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_7_Template, 5,
|
|
476
|
+
i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_div_0_Template, 6, 12, "div", 10);
|
|
477
|
+
i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_1_Template, 6, 10, "div", 10);
|
|
478
|
+
i0.ɵɵtemplate(2, DynamicFormComponent_ng_template_3_div_2_Template, 8, 10, "div", 11);
|
|
479
|
+
i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_3_Template, 5, 6, "div", 11);
|
|
480
|
+
i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_4_Template, 7, 13, "div", 11);
|
|
481
|
+
i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_Template, 7, 6, "div", 10);
|
|
482
|
+
i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_Template, 7, 6, "div", 10);
|
|
483
|
+
i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_7_Template, 5, 12, "div", 11);
|
|
461
484
|
}
|
|
462
485
|
if (rf & 2) {
|
|
463
486
|
const field_r12 = ctx.$implicit;
|
|
@@ -519,6 +542,7 @@ class DynamicFormComponent {
|
|
|
519
542
|
this.activeBtnIconUrl = "";
|
|
520
543
|
this.calendarIconUrl = "";
|
|
521
544
|
this.removeIconUrl = "";
|
|
545
|
+
this.removeSepratorForSubFields = false;
|
|
522
546
|
/**
|
|
523
547
|
* formUpdated: Emits formValues Object whenever there is a change in the dynamic form.
|
|
524
548
|
*/
|
|
@@ -745,7 +769,7 @@ class DynamicFormComponent {
|
|
|
745
769
|
}
|
|
746
770
|
}
|
|
747
771
|
DynamicFormComponent.ɵfac = function DynamicFormComponent_Factory(t) { return new (t || DynamicFormComponent)(); };
|
|
748
|
-
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) {
|
|
772
|
+
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) {
|
|
749
773
|
if (rf & 1) {
|
|
750
774
|
i0.ɵɵelementStart(0, "form", 0);
|
|
751
775
|
i0.ɵɵelementContainerStart(1, 1);
|
|
@@ -760,11 +784,11 @@ DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dynami
|
|
|
760
784
|
i0.ɵɵadvance(2);
|
|
761
785
|
i0.ɵɵproperty("ngForOf", ctx.getDynamicFieldsControls().controls);
|
|
762
786
|
}
|
|
763
|
-
}, 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}"] });
|
|
787
|
+
}, 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}"] });
|
|
764
788
|
(function () {
|
|
765
789
|
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicFormComponent, [{
|
|
766
790
|
type: Component,
|
|
767
|
-
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"] }]
|
|
791
|
+
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"] }]
|
|
768
792
|
}], function () { return []; }, { formFields: [{
|
|
769
793
|
type: Input
|
|
770
794
|
}], formValues: [{
|
|
@@ -775,6 +799,8 @@ DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dynami
|
|
|
775
799
|
type: Input
|
|
776
800
|
}], removeIconUrl: [{
|
|
777
801
|
type: Input
|
|
802
|
+
}], removeSepratorForSubFields: [{
|
|
803
|
+
type: Input
|
|
778
804
|
}], formUpdated: [{
|
|
779
805
|
type: Output
|
|
780
806
|
}], formValid: [{
|