mis-crystal-design-system 14.0.48 → 14.0.50

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.
Files changed (13) hide show
  1. package/async-search-dropdown/async-dropdown.component.d.ts +1 -1
  2. package/dynamic-form/dynamic-form.component.d.ts +1 -1
  3. package/esm2020/async-search-dropdown/async-dropdown.component.mjs +8 -5
  4. package/esm2020/dynamic-form/dynamic-form.component.mjs +164 -155
  5. package/fesm2015/mis-crystal-design-system-async-search-dropdown.mjs +7 -4
  6. package/fesm2015/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
  7. package/fesm2015/mis-crystal-design-system-dynamic-form.mjs +163 -154
  8. package/fesm2015/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
  9. package/fesm2020/mis-crystal-design-system-async-search-dropdown.mjs +7 -4
  10. package/fesm2020/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
  11. package/fesm2020/mis-crystal-design-system-dynamic-form.mjs +163 -154
  12. package/fesm2020/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
  13. package/package.json +1 -1
package/fesm2020/mis-crystal-design-system-dynamic-form.mjs CHANGED
@@ -23,13 +23,14 @@ function DynamicFormComponent_ng_container_2_div_2_ng_container_1_Template(rf, c
23
23
  i0.ɵɵelementContainerEnd();
24
24
  } if (rf & 2) {
25
25
  const subFieldControl_r9 = ctx.$implicit;
26
- const ctx_r10 = i0.ɵɵnextContext(2);
27
- const i_r6 = ctx_r10.index;
28
- const fieldControl_r5 = ctx_r10.$implicit;
26
+ const j_r10 = ctx.index;
27
+ const ctx_r11 = i0.ɵɵnextContext(2);
28
+ const i_r6 = ctx_r11.index;
29
+ const fieldControl_r5 = ctx_r11.$implicit;
29
30
  const ctx_r8 = i0.ɵɵnextContext();
30
31
  const _r1 = i0.ɵɵreference(4);
31
32
  i0.ɵɵadvance(1);
32
- i0.ɵɵproperty("ngTemplateOutlet", _r1)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, ctx_r8.formFields[i_r6].subFields[ctx_r8.findSelectedIndex(ctx_r8.formFields[i_r6] == null ? null : ctx_r8.formFields[i_r6].subFields, fieldControl_r5.controls.value.value.value)], subFieldControl_r9));
33
+ i0.ɵɵproperty("ngTemplateOutlet", _r1)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, ctx_r8.findSelectedSubFieldConfig(ctx_r8.formFields[i_r6] == null ? null : ctx_r8.formFields[i_r6].subFields, fieldControl_r5.controls.value.value.value, j_r10), subFieldControl_r9));
33
34
  } }
34
35
  function DynamicFormComponent_ng_container_2_div_2_Template(rf, ctx) { if (rf & 1) {
35
36
  i0.ɵɵelementStart(0, "div", 8);
@@ -61,228 +62,228 @@ const _c2 = function (a0) { return { $implicit: a0 }; };
61
62
  function DynamicFormComponent_ng_template_3_div_0_ng_container_5_Template(rf, ctx) { if (rf & 1) {
62
63
  i0.ɵɵelementContainer(0, 6);
63
64
  } if (rf & 2) {
64
- const control_r13 = i0.ɵɵnextContext(2).control;
65
+ const control_r14 = i0.ɵɵnextContext(2).control;
65
66
  i0.ɵɵnextContext();
66
67
  const _r3 = i0.ɵɵreference(6);
67
- i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
68
+ i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r14.errors));
68
69
  } }
69
70
  const _c3 = function (a0) { return { "border-bottom": a0 }; };
70
71
  const _c4 = function (a0) { return { "border": a0 }; };
71
72
  function DynamicFormComponent_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1) {
72
- const _r27 = i0.ɵɵgetCurrentView();
73
+ const _r28 = i0.ɵɵgetCurrentView();
73
74
  i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
74
75
  i0.ɵɵtext(2);
75
76
  i0.ɵɵelementEnd();
76
77
  i0.ɵɵelement(3, "div", 14);
77
78
  i0.ɵɵelementStart(4, "input", 15);
78
- i0.ɵɵlistener("ngModelChange", function DynamicFormComponent_ng_template_3_div_0_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r26 = i0.ɵɵnextContext(); const field_r12 = ctx_r26.$implicit; const formgroup_r14 = ctx_r26.formGroup; const ctx_r25 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r25.updateSubDynamicFields(field_r12, formgroup_r14, $event)); });
79
+ i0.ɵɵlistener("ngModelChange", function DynamicFormComponent_ng_template_3_div_0_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r27 = i0.ɵɵnextContext(); const field_r13 = ctx_r27.$implicit; const formgroup_r15 = ctx_r27.formGroup; const ctx_r26 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r26.updateSubDynamicFields(field_r13, formgroup_r15, $event)); });
79
80
  i0.ɵɵelementEnd();
80
81
  i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_0_ng_container_5_Template, 1, 4, "ng-container", 16);
81
82
  i0.ɵɵelementEnd();
82
83
  } if (rf & 2) {
83
- const ctx_r28 = i0.ɵɵnextContext();
84
- const formgroup_r14 = ctx_r28.formGroup;
85
- const field_r12 = ctx_r28.$implicit;
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" : ""));
84
+ const ctx_r29 = i0.ɵɵnextContext();
85
+ const formgroup_r15 = ctx_r29.formGroup;
86
+ const field_r13 = ctx_r29.$implicit;
87
+ const control_r14 = ctx_r29.control;
88
+ const ctx_r16 = i0.ɵɵnextContext();
89
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c3, (formgroup_r15 == null ? null : formgroup_r15.controls == null ? null : formgroup_r15.controls.subFields == null ? null : formgroup_r15.controls.subFields.controls == null ? null : formgroup_r15.controls.subFields.controls.length) && ctx_r16.removeSepratorForSubFields ? "none" : ""));
89
90
  i0.ɵɵadvance(2);
90
- i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
91
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
91
92
  i0.ɵɵadvance(2);
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 : "");
93
+ i0.ɵɵproperty("type", field_r13.fieldInputType)("formControl", control_r14)("ngStyle", i0.ɵɵpureFunction1(10, _c4, control_r14.touched && control_r14.errors ? "1px solid #B00020" : ""))("placeholder", field_r13.placeholderText ? field_r13.placeholderText : "Input Text")("min", field_r13.fieldInputType === "number" ? 0 : "");
93
94
  i0.ɵɵadvance(1);
94
- i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
95
+ i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
95
96
  } }
96
97
  function DynamicFormComponent_ng_template_3_div_1_ng_container_5_Template(rf, ctx) { if (rf & 1) {
97
98
  i0.ɵɵelementContainer(0, 6);
98
99
  } if (rf & 2) {
99
- const control_r13 = i0.ɵɵnextContext(2).control;
100
+ const control_r14 = i0.ɵɵnextContext(2).control;
100
101
  i0.ɵɵnextContext();
101
102
  const _r3 = i0.ɵɵreference(6);
102
- i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
103
+ i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r14.errors));
103
104
  } }
104
105
  function DynamicFormComponent_ng_template_3_div_1_Template(rf, ctx) { if (rf & 1) {
105
- const _r33 = i0.ɵɵgetCurrentView();
106
+ const _r34 = i0.ɵɵgetCurrentView();
106
107
  i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
107
108
  i0.ɵɵtext(2);
108
109
  i0.ɵɵelementEnd();
109
110
  i0.ɵɵelement(3, "div", 14);
110
111
  i0.ɵɵelementStart(4, "textarea", 17);
111
- i0.ɵɵlistener("ngModelChange", function DynamicFormComponent_ng_template_3_div_1_Template_textarea_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r32 = i0.ɵɵnextContext(); const field_r12 = ctx_r32.$implicit; const formgroup_r14 = ctx_r32.formGroup; const ctx_r31 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r31.updateSubDynamicFields(field_r12, formgroup_r14, $event)); });
112
+ i0.ɵɵlistener("ngModelChange", function DynamicFormComponent_ng_template_3_div_1_Template_textarea_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r33 = i0.ɵɵnextContext(); const field_r13 = ctx_r33.$implicit; const formgroup_r15 = ctx_r33.formGroup; const ctx_r32 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r32.updateSubDynamicFields(field_r13, formgroup_r15, $event)); });
112
113
  i0.ɵɵelementEnd();
113
114
  i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_1_ng_container_5_Template, 1, 4, "ng-container", 16);
114
115
  i0.ɵɵelementEnd();
115
116
  } if (rf & 2) {
116
- const ctx_r34 = i0.ɵɵnextContext();
117
- const formgroup_r14 = ctx_r34.formGroup;
118
- const field_r12 = ctx_r34.$implicit;
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" : ""));
117
+ const ctx_r35 = i0.ɵɵnextContext();
118
+ const formgroup_r15 = ctx_r35.formGroup;
119
+ const field_r13 = ctx_r35.$implicit;
120
+ const control_r14 = ctx_r35.control;
121
+ const ctx_r17 = i0.ɵɵnextContext();
122
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(6, _c3, (formgroup_r15 == null ? null : formgroup_r15.controls == null ? null : formgroup_r15.controls.subFields == null ? null : formgroup_r15.controls.subFields.controls == null ? null : formgroup_r15.controls.subFields.controls.length) && ctx_r17.removeSepratorForSubFields ? "none" : ""));
122
123
  i0.ɵɵadvance(2);
123
- i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
124
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
124
125
  i0.ɵɵadvance(2);
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);
126
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c4, control_r14.touched && control_r14.errors ? "1px solid #B00020" : ""))("placeholder", field_r13.placeholderText ? field_r13.placeholderText : "Input Text")("formControl", control_r14);
126
127
  i0.ɵɵadvance(1);
127
- i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
128
+ i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
128
129
  } }
129
130
  function DynamicFormComponent_ng_template_3_div_2_img_6_Template(rf, ctx) { if (rf & 1) {
130
- const _r39 = i0.ɵɵgetCurrentView();
131
+ const _r40 = i0.ɵɵgetCurrentView();
131
132
  i0.ɵɵelementStart(0, "img", 24);
132
- i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_2_img_6_Template_img_click_0_listener() { i0.ɵɵrestoreView(_r39); i0.ɵɵnextContext(); const _r35 = i0.ɵɵreference(5); return i0.ɵɵresetView(_r35.click()); });
133
+ i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_2_img_6_Template_img_click_0_listener() { i0.ɵɵrestoreView(_r40); i0.ɵɵnextContext(); const _r36 = i0.ɵɵreference(5); return i0.ɵɵresetView(_r36.click()); });
133
134
  i0.ɵɵelementEnd();
134
135
  } if (rf & 2) {
135
- const ctx_r36 = i0.ɵɵnextContext(3);
136
- i0.ɵɵproperty("src", ctx_r36.calendarIconUrl, i0.ɵɵsanitizeUrl);
136
+ const ctx_r37 = i0.ɵɵnextContext(3);
137
+ i0.ɵɵproperty("src", ctx_r37.calendarIconUrl, i0.ɵɵsanitizeUrl);
137
138
  } }
138
139
  function DynamicFormComponent_ng_template_3_div_2_ng_container_7_Template(rf, ctx) { if (rf & 1) {
139
140
  i0.ɵɵelementContainer(0, 6);
140
141
  } if (rf & 2) {
141
- const control_r13 = i0.ɵɵnextContext(2).control;
142
+ const control_r14 = i0.ɵɵnextContext(2).control;
142
143
  i0.ɵɵnextContext();
143
144
  const _r3 = i0.ɵɵreference(6);
144
- i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
145
+ i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r14.errors));
145
146
  } }
146
147
  function DynamicFormComponent_ng_template_3_div_2_Template(rf, ctx) { if (rf & 1) {
147
- const _r43 = i0.ɵɵgetCurrentView();
148
+ const _r44 = i0.ɵɵgetCurrentView();
148
149
  i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
149
150
  i0.ɵɵtext(2);
150
151
  i0.ɵɵelementEnd();
151
152
  i0.ɵɵelementStart(3, "div", 20)(4, "input", 21, 22);
152
- i0.ɵɵlistener("dateChange", function DynamicFormComponent_ng_template_3_div_2_Template_input_dateChange_4_listener($event) { i0.ɵɵrestoreView(_r43); const control_r13 = i0.ɵɵnextContext().control; return i0.ɵɵresetView(control_r13.setValue($event)); });
153
+ i0.ɵɵlistener("dateChange", function DynamicFormComponent_ng_template_3_div_2_Template_input_dateChange_4_listener($event) { i0.ɵɵrestoreView(_r44); const control_r14 = i0.ɵɵnextContext().control; return i0.ɵɵresetView(control_r14.setValue($event)); });
153
154
  i0.ɵɵelementEnd();
154
155
  i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_2_img_6_Template, 1, 1, "img", 23);
155
156
  i0.ɵɵelementEnd();
156
157
  i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_2_ng_container_7_Template, 1, 4, "ng-container", 16);
157
158
  i0.ɵɵelementEnd();
158
159
  } if (rf & 2) {
159
- const ctx_r44 = i0.ɵɵnextContext();
160
- const formgroup_r14 = ctx_r44.formGroup;
161
- const field_r12 = ctx_r44.$implicit;
162
- const control_r13 = ctx_r44.control;
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" : ""));
160
+ const ctx_r45 = i0.ɵɵnextContext();
161
+ const formgroup_r15 = ctx_r45.formGroup;
162
+ const field_r13 = ctx_r45.$implicit;
163
+ const control_r14 = ctx_r45.control;
164
+ const ctx_r18 = i0.ɵɵnextContext();
165
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c3, (formgroup_r15 == null ? null : formgroup_r15.controls == null ? null : formgroup_r15.controls.subFields == null ? null : formgroup_r15.controls.subFields.controls == null ? null : formgroup_r15.controls.subFields.controls.length) && ctx_r18.removeSepratorForSubFields ? "none" : ""));
165
166
  i0.ɵɵadvance(2);
166
- i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
167
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
167
168
  i0.ɵɵadvance(2);
168
- i0.ɵɵproperty("dpConfig", field_r12.fieldConfig)("selectedDate", control_r13.value)("offsetY", 0)("value", control_r13.value);
169
+ i0.ɵɵproperty("dpConfig", field_r13.fieldConfig)("selectedDate", control_r14.value)("offsetY", 0)("value", control_r14.value);
169
170
  i0.ɵɵadvance(2);
170
- i0.ɵɵproperty("ngIf", ctx_r17.calendarIconUrl);
171
+ i0.ɵɵproperty("ngIf", ctx_r18.calendarIconUrl);
171
172
  i0.ɵɵadvance(1);
172
- i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
173
+ i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
173
174
  } }
174
175
  function DynamicFormComponent_ng_template_3_div_3_ng_container_4_Template(rf, ctx) { if (rf & 1) {
175
176
  i0.ɵɵelementContainer(0, 6);
176
177
  } if (rf & 2) {
177
- const control_r13 = i0.ɵɵnextContext(2).control;
178
+ const control_r14 = i0.ɵɵnextContext(2).control;
178
179
  i0.ɵɵnextContext();
179
180
  const _r3 = i0.ɵɵreference(6);
180
- i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
181
+ i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r14.errors));
181
182
  } }
182
183
  function DynamicFormComponent_ng_template_3_div_3_Template(rf, ctx) { if (rf & 1) {
183
- const _r49 = i0.ɵɵgetCurrentView();
184
+ const _r50 = i0.ɵɵgetCurrentView();
184
185
  i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
185
186
  i0.ɵɵtext(2);
186
187
  i0.ɵɵelementEnd();
187
188
  i0.ɵɵelementStart(3, "mis-switch", 25);
188
- i0.ɵɵlistener("valueChanged", function DynamicFormComponent_ng_template_3_div_3_Template_mis_switch_valueChanged_3_listener($event) { i0.ɵɵrestoreView(_r49); const ctx_r48 = i0.ɵɵnextContext(); const field_r12 = ctx_r48.$implicit; const formgroup_r14 = ctx_r48.formGroup; const ctx_r47 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r47.updateSubDynamicFields(field_r12, formgroup_r14, $event)); });
189
+ i0.ɵɵlistener("valueChanged", function DynamicFormComponent_ng_template_3_div_3_Template_mis_switch_valueChanged_3_listener($event) { i0.ɵɵrestoreView(_r50); const ctx_r49 = i0.ɵɵnextContext(); const field_r13 = ctx_r49.$implicit; const formgroup_r15 = ctx_r49.formGroup; const ctx_r48 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r48.updateSubDynamicFields(field_r13, formgroup_r15, $event)); });
189
190
  i0.ɵɵelementEnd();
190
191
  i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_3_ng_container_4_Template, 1, 4, "ng-container", 16);
191
192
  i0.ɵɵelementEnd();
192
193
  } if (rf & 2) {
193
- const ctx_r50 = i0.ɵɵnextContext();
194
- const formgroup_r14 = ctx_r50.formGroup;
195
- const field_r12 = ctx_r50.$implicit;
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" : ""));
194
+ const ctx_r51 = i0.ɵɵnextContext();
195
+ const formgroup_r15 = ctx_r51.formGroup;
196
+ const field_r13 = ctx_r51.$implicit;
197
+ const control_r14 = ctx_r51.control;
198
+ const ctx_r19 = i0.ɵɵnextContext();
199
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c3, (formgroup_r15 == null ? null : formgroup_r15.controls == null ? null : formgroup_r15.controls.subFields == null ? null : formgroup_r15.controls.subFields.controls == null ? null : formgroup_r15.controls.subFields.controls.length) && ctx_r19.removeSepratorForSubFields ? "none" : ""));
199
200
  i0.ɵɵadvance(2);
200
- i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
201
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
201
202
  i0.ɵɵadvance(1);
202
- i0.ɵɵproperty("control", control_r13);
203
+ i0.ɵɵproperty("control", control_r14);
203
204
  i0.ɵɵadvance(1);
204
- i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
205
+ i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
205
206
  } }
206
207
  function DynamicFormComponent_ng_template_3_div_4_img_5_Template(rf, ctx) { if (rf & 1) {
207
- const _r55 = i0.ɵɵgetCurrentView();
208
+ const _r56 = i0.ɵɵgetCurrentView();
208
209
  i0.ɵɵelementStart(0, "img", 29);
209
- i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_4_img_5_Template_img_click_0_listener() { i0.ɵɵrestoreView(_r55); const field_r12 = i0.ɵɵnextContext(2).$implicit; const ctx_r53 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r53.fieldRemoved.emit(field_r12)); });
210
+ i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_4_img_5_Template_img_click_0_listener() { i0.ɵɵrestoreView(_r56); const field_r13 = i0.ɵɵnextContext(2).$implicit; const ctx_r54 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r54.fieldRemoved.emit(field_r13)); });
210
211
  i0.ɵɵelementEnd();
211
212
  } if (rf & 2) {
212
- const ctx_r51 = i0.ɵɵnextContext(3);
213
- i0.ɵɵproperty("src", ctx_r51.removeIconUrl, i0.ɵɵsanitizeUrl);
213
+ const ctx_r52 = i0.ɵɵnextContext(3);
214
+ i0.ɵɵproperty("src", ctx_r52.removeIconUrl, i0.ɵɵsanitizeUrl);
214
215
  } }
215
216
  function DynamicFormComponent_ng_template_3_div_4_ng_container_6_Template(rf, ctx) { if (rf & 1) {
216
217
  i0.ɵɵelementContainer(0, 6);
217
218
  } if (rf & 2) {
218
- const control_r13 = i0.ɵɵnextContext(2).control;
219
+ const control_r14 = i0.ɵɵnextContext(2).control;
219
220
  i0.ɵɵnextContext();
220
221
  const _r3 = i0.ɵɵreference(6);
221
- i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
222
+ i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r14.errors));
222
223
  } }
223
224
  const _c5 = function (a0) { return { "removeable-container": a0 }; };
224
225
  function DynamicFormComponent_ng_template_3_div_4_Template(rf, ctx) { if (rf & 1) {
225
- const _r59 = i0.ɵɵgetCurrentView();
226
+ const _r60 = i0.ɵɵgetCurrentView();
226
227
  i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
227
228
  i0.ɵɵtext(2);
228
229
  i0.ɵɵelementEnd();
229
230
  i0.ɵɵelementStart(3, "div", 26)(4, "mis-dropdown", 27);
230
- i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_div_4_Template_mis_dropdown_onChange_4_listener($event) { i0.ɵɵrestoreView(_r59); const ctx_r58 = i0.ɵɵnextContext(); const field_r12 = ctx_r58.$implicit; const control_r13 = ctx_r58.control; const formgroup_r14 = ctx_r58.formGroup; const ctx_r57 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r57.updateSelectedValueForSingleSelect(field_r12, control_r13, formgroup_r14, $event)); });
231
+ i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_div_4_Template_mis_dropdown_onChange_4_listener($event) { i0.ɵɵrestoreView(_r60); const ctx_r59 = i0.ɵɵnextContext(); const field_r13 = ctx_r59.$implicit; const control_r14 = ctx_r59.control; const formgroup_r15 = ctx_r59.formGroup; const ctx_r58 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r58.updateSelectedValueForSingleSelect(field_r13, control_r14, formgroup_r15, $event)); });
231
232
  i0.ɵɵelementEnd();
232
233
  i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_4_img_5_Template, 1, 1, "img", 28);
233
234
  i0.ɵɵelementEnd();
234
235
  i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_4_ng_container_6_Template, 1, 4, "ng-container", 16);
235
236
  i0.ɵɵelementEnd();
236
237
  } if (rf & 2) {
237
- const ctx_r60 = i0.ɵɵnextContext();
238
- const formgroup_r14 = ctx_r60.formGroup;
239
- const field_r12 = ctx_r60.$implicit;
240
- const control_r13 = ctx_r60.control;
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" : ""));
238
+ const ctx_r61 = i0.ɵɵnextContext();
239
+ const formgroup_r15 = ctx_r61.formGroup;
240
+ const field_r13 = ctx_r61.$implicit;
241
+ const control_r14 = ctx_r61.control;
242
+ const ctx_r20 = i0.ɵɵnextContext();
243
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(9, _c3, (formgroup_r15 == null ? null : formgroup_r15.controls == null ? null : formgroup_r15.controls.subFields == null ? null : formgroup_r15.controls.subFields.controls == null ? null : formgroup_r15.controls.subFields.controls.length) && ctx_r20.removeSepratorForSubFields ? "none" : ""));
243
244
  i0.ɵɵadvance(2);
244
- i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
245
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
245
246
  i0.ɵɵadvance(1);
246
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c5, field_r12 == null ? null : field_r12.isRemoveable));
247
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c5, field_r13 == null ? null : field_r13.isRemoveable));
247
248
  i0.ɵɵadvance(1);
248
- i0.ɵɵproperty("searchEnabled", false)("width", "140px")("data", field_r12.itemsList)("selectedItem", control_r13.value);
249
+ i0.ɵɵproperty("searchEnabled", false)("width", "140px")("data", field_r13.itemsList)("selectedItem", control_r14.value);
249
250
  i0.ɵɵadvance(1);
250
- i0.ɵɵproperty("ngIf", field_r12.isRemoveable && ctx_r19.removeIconUrl);
251
+ i0.ɵɵproperty("ngIf", field_r13.isRemoveable && ctx_r20.removeIconUrl);
251
252
  i0.ɵɵadvance(1);
252
- i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
253
+ i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
253
254
  } }
254
255
  function DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template(rf, ctx) { if (rf & 1) {
255
256
  i0.ɵɵelement(0, "img", 34);
256
257
  } if (rf & 2) {
257
- const ctx_r64 = i0.ɵɵnextContext(4);
258
- i0.ɵɵproperty("src", ctx_r64.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
258
+ const ctx_r65 = i0.ɵɵnextContext(4);
259
+ i0.ɵɵproperty("src", ctx_r65.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
259
260
  } }
260
261
  const _c6 = function (a0) { return { "checkbox-active": a0 }; };
261
262
  function DynamicFormComponent_ng_template_3_div_5_div_5_Template(rf, ctx) { if (rf & 1) {
262
- const _r67 = i0.ɵɵgetCurrentView();
263
+ const _r68 = i0.ɵɵgetCurrentView();
263
264
  i0.ɵɵelementStart(0, "div", 32);
264
- i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_5_div_5_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r67); const item_r63 = restoredCtx.$implicit; const ctx_r66 = i0.ɵɵnextContext(2); const field_r12 = ctx_r66.$implicit; const control_r13 = ctx_r66.control; const formgroup_r14 = ctx_r66.formGroup; const ctx_r65 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r65.updateSelectedValueForSingleSelect(field_r12, control_r13, formgroup_r14, item_r63)); });
265
+ i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_5_div_5_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r68); const item_r64 = restoredCtx.$implicit; const ctx_r67 = i0.ɵɵnextContext(2); const field_r13 = ctx_r67.$implicit; const control_r14 = ctx_r67.control; const formgroup_r15 = ctx_r67.formGroup; const ctx_r66 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r66.updateSelectedValueForSingleSelect(field_r13, control_r14, formgroup_r15, item_r64)); });
265
266
  i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template, 1, 1, "img", 33);
266
267
  i0.ɵɵelementStart(2, "p", 19);
267
268
  i0.ɵɵtext(3);
268
269
  i0.ɵɵelementEnd()();
269
270
  } if (rf & 2) {
270
- const item_r63 = ctx.$implicit;
271
- const control_r13 = i0.ɵɵnextContext(2).control;
272
- const ctx_r61 = i0.ɵɵnextContext();
273
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, item_r63.label === (control_r13.value == null ? null : control_r13.value.label)));
271
+ const item_r64 = ctx.$implicit;
272
+ const control_r14 = i0.ɵɵnextContext(2).control;
273
+ const ctx_r62 = i0.ɵɵnextContext();
274
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, item_r64.label === (control_r14.value == null ? null : control_r14.value.label)));
274
275
  i0.ɵɵadvance(1);
275
- i0.ɵɵproperty("ngIf", item_r63.label === (control_r13.value == null ? null : control_r13.value.label) && ctx_r61.activeBtnIconUrl);
276
+ i0.ɵɵproperty("ngIf", item_r64.label === (control_r14.value == null ? null : control_r14.value.label) && ctx_r62.activeBtnIconUrl);
276
277
  i0.ɵɵadvance(2);
277
- i0.ɵɵtextInterpolate(item_r63.label);
278
+ i0.ɵɵtextInterpolate(item_r64.label);
278
279
  } }
279
280
  function DynamicFormComponent_ng_template_3_div_5_ng_container_6_Template(rf, ctx) { if (rf & 1) {
280
281
  i0.ɵɵelementContainer(0, 6);
281
282
  } if (rf & 2) {
282
- const control_r13 = i0.ɵɵnextContext(2).control;
283
+ const control_r14 = i0.ɵɵnextContext(2).control;
283
284
  i0.ɵɵnextContext();
284
285
  const _r3 = i0.ɵɵreference(6);
285
- i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
286
+ i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r14.errors));
286
287
  } }
287
288
  function DynamicFormComponent_ng_template_3_div_5_Template(rf, ctx) { if (rf & 1) {
288
289
  i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
@@ -295,50 +296,50 @@ function DynamicFormComponent_ng_template_3_div_5_Template(rf, ctx) { if (rf & 1
295
296
  i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_5_ng_container_6_Template, 1, 4, "ng-container", 16);
296
297
  i0.ɵɵelementEnd();
297
298
  } if (rf & 2) {
298
- const ctx_r70 = i0.ɵɵnextContext();
299
- const formgroup_r14 = ctx_r70.formGroup;
300
- const field_r12 = ctx_r70.$implicit;
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" : ""));
299
+ const ctx_r71 = i0.ɵɵnextContext();
300
+ const formgroup_r15 = ctx_r71.formGroup;
301
+ const field_r13 = ctx_r71.$implicit;
302
+ const control_r14 = ctx_r71.control;
303
+ const ctx_r21 = i0.ɵɵnextContext();
304
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c3, (formgroup_r15 == null ? null : formgroup_r15.controls == null ? null : formgroup_r15.controls.subFields == null ? null : formgroup_r15.controls.subFields.controls == null ? null : formgroup_r15.controls.subFields.controls.length) && ctx_r21.removeSepratorForSubFields ? "none" : ""));
304
305
  i0.ɵɵadvance(2);
305
- i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
306
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
306
307
  i0.ɵɵadvance(3);
307
- i0.ɵɵproperty("ngForOf", field_r12.itemsList);
308
+ i0.ɵɵproperty("ngForOf", field_r13.itemsList);
308
309
  i0.ɵɵadvance(1);
309
- i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
310
+ i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
310
311
  } }
311
312
  function DynamicFormComponent_ng_template_3_div_6_div_5_img_1_Template(rf, ctx) { if (rf & 1) {
312
313
  i0.ɵɵelement(0, "img", 34);
313
314
  } if (rf & 2) {
314
- const ctx_r74 = i0.ɵɵnextContext(4);
315
- i0.ɵɵproperty("src", ctx_r74.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
315
+ const ctx_r75 = i0.ɵɵnextContext(4);
316
+ i0.ɵɵproperty("src", ctx_r75.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
316
317
  } }
317
318
  function DynamicFormComponent_ng_template_3_div_6_div_5_Template(rf, ctx) { if (rf & 1) {
318
- const _r77 = i0.ɵɵgetCurrentView();
319
+ const _r78 = i0.ɵɵgetCurrentView();
319
320
  i0.ɵɵelementStart(0, "div", 32);
320
- i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_6_div_5_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r77); const item_r73 = restoredCtx.$implicit; const ctx_r76 = i0.ɵɵnextContext(2); const field_r12 = ctx_r76.$implicit; const control_r13 = ctx_r76.control; const formgroup_r14 = ctx_r76.formGroup; const ctx_r75 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r75.updateSelectedValueForMultiSelect(field_r12, control_r13, formgroup_r14, [item_r73])); });
321
+ i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_6_div_5_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r78); const item_r74 = restoredCtx.$implicit; const ctx_r77 = i0.ɵɵnextContext(2); const field_r13 = ctx_r77.$implicit; const control_r14 = ctx_r77.control; const formgroup_r15 = ctx_r77.formGroup; const ctx_r76 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r76.updateSelectedValueForMultiSelect(field_r13, control_r14, formgroup_r15, [item_r74])); });
321
322
  i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_6_div_5_img_1_Template, 1, 1, "img", 33);
322
323
  i0.ɵɵelementStart(2, "p", 19);
323
324
  i0.ɵɵtext(3);
324
325
  i0.ɵɵelementEnd()();
325
326
  } if (rf & 2) {
326
- const item_r73 = ctx.$implicit;
327
- const control_r13 = i0.ɵɵnextContext(2).control;
328
- const ctx_r71 = i0.ɵɵnextContext();
329
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, ctx_r71.isCheckBoxSelected(item_r73.label, control_r13.value)));
327
+ const item_r74 = ctx.$implicit;
328
+ const control_r14 = i0.ɵɵnextContext(2).control;
329
+ const ctx_r72 = i0.ɵɵnextContext();
330
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, ctx_r72.isCheckBoxSelected(item_r74.label, control_r14.value)));
330
331
  i0.ɵɵadvance(1);
331
- i0.ɵɵproperty("ngIf", ctx_r71.isCheckBoxSelected(item_r73.label, control_r13.value) && ctx_r71.activeBtnIconUrl);
332
+ i0.ɵɵproperty("ngIf", ctx_r72.isCheckBoxSelected(item_r74.label, control_r14.value) && ctx_r72.activeBtnIconUrl);
332
333
  i0.ɵɵadvance(2);
333
- i0.ɵɵtextInterpolate(item_r73.label);
334
+ i0.ɵɵtextInterpolate(item_r74.label);
334
335
  } }
335
336
  function DynamicFormComponent_ng_template_3_div_6_ng_container_6_Template(rf, ctx) { if (rf & 1) {
336
337
  i0.ɵɵelementContainer(0, 6);
337
338
  } if (rf & 2) {
338
- const control_r13 = i0.ɵɵnextContext(2).control;
339
+ const control_r14 = i0.ɵɵnextContext(2).control;
339
340
  i0.ɵɵnextContext();
340
341
  const _r3 = i0.ɵɵreference(6);
341
- i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
342
+ i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r14.errors));
342
343
  } }
343
344
  function DynamicFormComponent_ng_template_3_div_6_Template(rf, ctx) { if (rf & 1) {
344
345
  i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
@@ -351,50 +352,50 @@ function DynamicFormComponent_ng_template_3_div_6_Template(rf, ctx) { if (rf & 1
351
352
  i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_ng_container_6_Template, 1, 4, "ng-container", 16);
352
353
  i0.ɵɵelementEnd();
353
354
  } if (rf & 2) {
354
- const ctx_r80 = i0.ɵɵnextContext();
355
- const formgroup_r14 = ctx_r80.formGroup;
356
- const field_r12 = ctx_r80.$implicit;
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" : ""));
355
+ const ctx_r81 = i0.ɵɵnextContext();
356
+ const formgroup_r15 = ctx_r81.formGroup;
357
+ const field_r13 = ctx_r81.$implicit;
358
+ const control_r14 = ctx_r81.control;
359
+ const ctx_r22 = i0.ɵɵnextContext();
360
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c3, (formgroup_r15 == null ? null : formgroup_r15.controls == null ? null : formgroup_r15.controls.subFields == null ? null : formgroup_r15.controls.subFields.controls == null ? null : formgroup_r15.controls.subFields.controls.length) && ctx_r22.removeSepratorForSubFields ? "none" : ""));
360
361
  i0.ɵɵadvance(2);
361
- i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
362
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
362
363
  i0.ɵɵadvance(3);
363
- i0.ɵɵproperty("ngForOf", field_r12.itemsList);
364
+ i0.ɵɵproperty("ngForOf", field_r13.itemsList);
364
365
  i0.ɵɵadvance(1);
365
- i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
366
+ i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
366
367
  } }
367
368
  function DynamicFormComponent_ng_template_3_div_7_ng_container_4_Template(rf, ctx) { if (rf & 1) {
368
369
  i0.ɵɵelementContainer(0, 6);
369
370
  } if (rf & 2) {
370
- const control_r13 = i0.ɵɵnextContext(2).control;
371
+ const control_r14 = i0.ɵɵnextContext(2).control;
371
372
  i0.ɵɵnextContext();
372
373
  const _r3 = i0.ɵɵreference(6);
373
- i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
374
+ i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r14.errors));
374
375
  } }
375
376
  function DynamicFormComponent_ng_template_3_div_7_Template(rf, ctx) { if (rf & 1) {
376
- const _r85 = i0.ɵɵgetCurrentView();
377
+ const _r86 = i0.ɵɵgetCurrentView();
377
378
  i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
378
379
  i0.ɵɵtext(2);
379
380
  i0.ɵɵelementEnd();
380
381
  i0.ɵɵelementStart(3, "mis-multi-select-dropdown", 35);
381
- i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_div_7_Template_mis_multi_select_dropdown_onChange_3_listener($event) { i0.ɵɵrestoreView(_r85); const ctx_r84 = i0.ɵɵnextContext(); const field_r12 = ctx_r84.$implicit; const control_r13 = ctx_r84.control; const formgroup_r14 = ctx_r84.formGroup; const ctx_r83 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r83.updateSelectedValueForMultiSelect(field_r12, control_r13, formgroup_r14, $event)); });
382
+ i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_div_7_Template_mis_multi_select_dropdown_onChange_3_listener($event) { i0.ɵɵrestoreView(_r86); const ctx_r85 = i0.ɵɵnextContext(); const field_r13 = ctx_r85.$implicit; const control_r14 = ctx_r85.control; const formgroup_r15 = ctx_r85.formGroup; const ctx_r84 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r84.updateSelectedValueForMultiSelect(field_r13, control_r14, formgroup_r15, $event)); });
382
383
  i0.ɵɵelementEnd();
383
384
  i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_7_ng_container_4_Template, 1, 4, "ng-container", 16);
384
385
  i0.ɵɵelementEnd();
385
386
  } if (rf & 2) {
386
- const ctx_r86 = i0.ɵɵnextContext();
387
- const formgroup_r14 = ctx_r86.formGroup;
388
- const field_r12 = ctx_r86.$implicit;
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" : ""));
387
+ const ctx_r87 = i0.ɵɵnextContext();
388
+ const formgroup_r15 = ctx_r87.formGroup;
389
+ const field_r13 = ctx_r87.$implicit;
390
+ const control_r14 = ctx_r87.control;
391
+ const ctx_r23 = i0.ɵɵnextContext();
392
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c3, (formgroup_r15 == null ? null : formgroup_r15.controls == null ? null : formgroup_r15.controls.subFields == null ? null : formgroup_r15.controls.subFields.controls == null ? null : formgroup_r15.controls.subFields.controls.length) && ctx_r23.removeSepratorForSubFields ? "none" : ""));
392
393
  i0.ɵɵadvance(2);
393
- i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
394
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
394
395
  i0.ɵɵadvance(1);
395
- i0.ɵɵproperty("width", "140px")("showSelectedCount", true)("dropdownListWidth", "256px")("searchEnabled", false)("hideApplyButton", true)("data", field_r12.itemsList)("selectedItems", control_r13.value);
396
+ i0.ɵɵproperty("width", "140px")("showSelectedCount", true)("dropdownListWidth", "256px")("searchEnabled", false)("hideApplyButton", true)("data", field_r13.itemsList)("selectedItems", control_r14.value);
396
397
  i0.ɵɵadvance(1);
397
- i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
398
+ i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
398
399
  } }
399
400
  function DynamicFormComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
400
401
  i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_div_0_Template, 6, 12, "div", 10);
@@ -406,22 +407,22 @@ function DynamicFormComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
406
407
  i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_Template, 7, 6, "div", 10);
407
408
  i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_7_Template, 5, 12, "div", 11);
408
409
  } if (rf & 2) {
409
- const field_r12 = ctx.$implicit;
410
- i0.ɵɵproperty("ngIf", field_r12.fieldType === "input" && (field_r12.fieldInputType === "text" || field_r12.fieldInputType === "number"));
410
+ const field_r13 = ctx.$implicit;
411
+ i0.ɵɵproperty("ngIf", field_r13.fieldType === "input" && (field_r13.fieldInputType === "text" || field_r13.fieldInputType === "number"));
411
412
  i0.ɵɵadvance(1);
412
- i0.ɵɵproperty("ngIf", field_r12.fieldType === "input" && field_r12.fieldInputType === "textarea");
413
+ i0.ɵɵproperty("ngIf", field_r13.fieldType === "input" && field_r13.fieldInputType === "textarea");
413
414
  i0.ɵɵadvance(1);
414
- i0.ɵɵproperty("ngIf", field_r12.fieldType === "input" && field_r12.fieldInputType === "date");
415
+ i0.ɵɵproperty("ngIf", field_r13.fieldType === "input" && field_r13.fieldInputType === "date");
415
416
  i0.ɵɵadvance(1);
416
- i0.ɵɵproperty("ngIf", field_r12.fieldType === "boolean" && field_r12.fieldInputType === "toggle");
417
+ i0.ɵɵproperty("ngIf", field_r13.fieldType === "boolean" && field_r13.fieldInputType === "toggle");
417
418
  i0.ɵɵadvance(1);
418
- i0.ɵɵproperty("ngIf", field_r12.fieldType === "singleSelect" && field_r12.fieldInputType === "dropdown");
419
+ i0.ɵɵproperty("ngIf", field_r13.fieldType === "singleSelect" && field_r13.fieldInputType === "dropdown");
419
420
  i0.ɵɵadvance(1);
420
- i0.ɵɵproperty("ngIf", field_r12.fieldType === "singleSelect" && field_r12.fieldInputType === "radio");
421
+ i0.ɵɵproperty("ngIf", field_r13.fieldType === "singleSelect" && field_r13.fieldInputType === "radio");
421
422
  i0.ɵɵadvance(1);
422
- i0.ɵɵproperty("ngIf", field_r12.fieldType === "multiSelect" && field_r12.fieldInputType === "checkbox");
423
+ i0.ɵɵproperty("ngIf", field_r13.fieldType === "multiSelect" && field_r13.fieldInputType === "checkbox");
423
424
  i0.ɵɵadvance(1);
424
- i0.ɵɵproperty("ngIf", field_r12.fieldType === "multiSelect" && field_r12.fieldInputType === "dropdown");
425
+ i0.ɵɵproperty("ngIf", field_r13.fieldType === "multiSelect" && field_r13.fieldInputType === "dropdown");
425
426
  } }
426
427
  function DynamicFormComponent_ng_template_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
427
428
  i0.ɵɵelementContainerStart(0);
@@ -431,9 +432,9 @@ function DynamicFormComponent_ng_template_5_ng_container_1_Template(rf, ctx) { i
431
432
  i0.ɵɵelement(3, "div", 38);
432
433
  i0.ɵɵelementContainerEnd();
433
434
  } if (rf & 2) {
434
- const error_r89 = ctx.$implicit;
435
+ const error_r90 = ctx.$implicit;
435
436
  i0.ɵɵadvance(2);
436
- i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r89.value, " ");
437
+ i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r90.value, " ");
437
438
  } }
438
439
  function DynamicFormComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
439
440
  i0.ɵɵelementStart(0, "div", 36);
@@ -441,9 +442,9 @@ function DynamicFormComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
441
442
  i0.ɵɵpipe(2, "keyvalue");
442
443
  i0.ɵɵelementEnd();
443
444
  } if (rf & 2) {
444
- const errors_r87 = ctx.$implicit;
445
+ const errors_r88 = ctx.$implicit;
445
446
  i0.ɵɵadvance(1);
446
- i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r87));
447
+ i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r88));
447
448
  } }
448
449
  class DynamicFormComponent {
449
450
  constructor() {
@@ -505,8 +506,11 @@ class DynamicFormComponent {
505
506
  if (fieldValue.subFields?.length > 0) {
506
507
  let formattedSubFieldsValues = {};
507
508
  fieldValue.subFields.forEach((subFieldValue, subIndex) => {
508
- let subFormField = this.formFields[index].subFields[subIndex];
509
- formattedSubFieldsValues[subFormField.configName] = this.mapFormFieldToFormValue(subFormField, subFieldValue);
509
+ this.formFields[index].subFields.filter(item => {
510
+ return item.parentConfigValue === formattedValue;
511
+ }).forEach(subFormField => {
512
+ formattedSubFieldsValues[subFormField.configName] = this.mapFormFieldToFormValue(subFormField, subFieldValue);
513
+ });
510
514
  });
511
515
  dynamicFieldsValue[this.formFields[index].configName] = {
512
516
  value: formattedValue,
@@ -571,9 +575,14 @@ class DynamicFormComponent {
571
575
  isCheckBoxSelected(value, selectedValues) {
572
576
  return selectedValues.findIndex(item => item.label === value) > -1;
573
577
  }
574
- findSelectedIndex(subfields, value) {
575
- const selectedIndex = subfields.findIndex(item => item.parentConfigValue === value);
576
- return selectedIndex !== -1 ? selectedIndex : 0;
578
+ findSelectedSubFieldConfig(subfields, value, subFieldIndex) {
579
+ try {
580
+ const selectedSubFieldConfig = subfields.filter(item => item.parentConfigValue === value)[subFieldIndex];
581
+ return selectedSubFieldConfig;
582
+ }
583
+ catch (e) {
584
+ throw new Error('Subfield index not found');
585
+ }
577
586
  }
578
587
  matchParentConfig(subfields, value) {
579
588
  if (!subfields || subfields.length === 0) {
@@ -693,7 +702,7 @@ DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dynami
693
702
  } }, 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}"] });
694
703
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicFormComponent, [{
695
704
  type: Component,
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 &nbsp;\" + 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"] }]
705
+ 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; let j = index\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: findSelectedSubFieldConfig(formFields[i]?.subFields, fieldControl.controls.value.value.value,j),\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 &nbsp;\" + 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"] }]
697
706
  }], function () { return []; }, { formFields: [{
698
707
  type: Input
699
708
  }], formValues: [{