mis-crystal-design-system 14.0.53 → 14.0.54-test

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 (11) hide show
  1. package/esm2020/dropdown/dropdown.component.mjs +18 -15
  2. package/esm2020/dynamic-form/dynamic-form.component.mjs +223 -159
  3. package/fesm2015/mis-crystal-design-system-dropdown.mjs +17 -14
  4. package/fesm2015/mis-crystal-design-system-dropdown.mjs.map +1 -1
  5. package/fesm2015/mis-crystal-design-system-dynamic-form.mjs +237 -157
  6. package/fesm2015/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
  7. package/fesm2020/mis-crystal-design-system-dropdown.mjs +17 -14
  8. package/fesm2020/mis-crystal-design-system-dropdown.mjs.map +1 -1
  9. package/fesm2020/mis-crystal-design-system-dynamic-form.mjs +222 -158
  10. package/fesm2020/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
  11. package/package.json +1 -1
package/fesm2020/mis-crystal-design-system-dynamic-form.mjs CHANGED
@@ -58,8 +58,13 @@ function DynamicFormComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
58
58
  i0.ɵɵadvance(1);
59
59
  i0.ɵɵproperty("ngIf", fieldControl_r5.value && (!!(ctx_r0.formFields[i_r6] == null ? null : ctx_r0.formFields[i_r6].subFields) && (ctx_r0.formFields[i_r6] == null ? null : ctx_r0.formFields[i_r6].subFields == null ? null : ctx_r0.formFields[i_r6].subFields.length) > 0 && ctx_r0.matchParentConfig(ctx_r0.formFields[i_r6] == null ? null : ctx_r0.formFields[i_r6].subFields, fieldControl_r5.controls.value.value.value)));
60
60
  } }
61
+ function DynamicFormComponent_ng_template_3_div_0_span_3_Template(rf, ctx) { if (rf & 1) {
62
+ i0.ɵɵelementStart(0, "span");
63
+ i0.ɵɵtext(1, " *");
64
+ i0.ɵɵelementEnd();
65
+ } }
61
66
  const _c2 = function (a0) { return { $implicit: a0 }; };
62
- function DynamicFormComponent_ng_template_3_div_0_ng_container_5_Template(rf, ctx) { if (rf & 1) {
67
+ function DynamicFormComponent_ng_template_3_div_0_ng_container_6_Template(rf, ctx) { if (rf & 1) {
63
68
  i0.ɵɵelementContainer(0, 6);
64
69
  } if (rf & 2) {
65
70
  const control_r14 = i0.ɵɵnextContext(2).control;
@@ -70,31 +75,39 @@ function DynamicFormComponent_ng_template_3_div_0_ng_container_5_Template(rf, ct
70
75
  const _c3 = function (a0) { return { "border-bottom": a0 }; };
71
76
  const _c4 = function (a0) { return { "border": a0 }; };
72
77
  function DynamicFormComponent_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1) {
73
- const _r28 = i0.ɵɵgetCurrentView();
78
+ const _r29 = i0.ɵɵgetCurrentView();
74
79
  i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
75
80
  i0.ɵɵtext(2);
81
+ i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_0_span_3_Template, 2, 0, "span", 14);
76
82
  i0.ɵɵelementEnd();
77
- i0.ɵɵelement(3, "div", 14);
78
- i0.ɵɵelementStart(4, "input", 15);
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)); });
83
+ i0.ɵɵelement(4, "div", 15);
84
+ i0.ɵɵelementStart(5, "input", 16);
85
+ i0.ɵɵlistener("ngModelChange", function DynamicFormComponent_ng_template_3_div_0_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r28 = i0.ɵɵnextContext(); const field_r13 = ctx_r28.$implicit; const formgroup_r15 = ctx_r28.formGroup; const ctx_r27 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r27.updateSubDynamicFields(field_r13, formgroup_r15, $event)); });
80
86
  i0.ɵɵelementEnd();
81
- i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_0_ng_container_5_Template, 1, 4, "ng-container", 16);
87
+ i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_0_ng_container_6_Template, 1, 4, "ng-container", 17);
82
88
  i0.ɵɵelementEnd();
83
89
  } if (rf & 2) {
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;
90
+ const ctx_r30 = i0.ɵɵnextContext();
91
+ const formgroup_r15 = ctx_r30.formGroup;
92
+ const field_r13 = ctx_r30.$implicit;
93
+ const control_r14 = ctx_r30.control;
88
94
  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" : ""));
95
+ 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_r16.removeSepratorForSubFields ? "none" : ""));
90
96
  i0.ɵɵadvance(2);
91
97
  i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
98
+ i0.ɵɵadvance(1);
99
+ i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
92
100
  i0.ɵɵadvance(2);
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 : "");
101
+ i0.ɵɵproperty("type", field_r13.fieldInputType)("formControl", control_r14)("ngStyle", i0.ɵɵpureFunction1(11, _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 : "");
94
102
  i0.ɵɵadvance(1);
95
103
  i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
96
104
  } }
97
- function DynamicFormComponent_ng_template_3_div_1_ng_container_5_Template(rf, ctx) { if (rf & 1) {
105
+ function DynamicFormComponent_ng_template_3_div_1_span_3_Template(rf, ctx) { if (rf & 1) {
106
+ i0.ɵɵelementStart(0, "span");
107
+ i0.ɵɵtext(1, " *");
108
+ i0.ɵɵelementEnd();
109
+ } }
110
+ function DynamicFormComponent_ng_template_3_div_1_ng_container_6_Template(rf, ctx) { if (rf & 1) {
98
111
  i0.ɵɵelementContainer(0, 6);
99
112
  } if (rf & 2) {
100
113
  const control_r14 = i0.ɵɵnextContext(2).control;
@@ -103,40 +116,48 @@ function DynamicFormComponent_ng_template_3_div_1_ng_container_5_Template(rf, ct
103
116
  i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r14.errors));
104
117
  } }
105
118
  function DynamicFormComponent_ng_template_3_div_1_Template(rf, ctx) { if (rf & 1) {
106
- const _r34 = i0.ɵɵgetCurrentView();
119
+ const _r36 = i0.ɵɵgetCurrentView();
107
120
  i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
108
121
  i0.ɵɵtext(2);
122
+ i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_1_span_3_Template, 2, 0, "span", 14);
109
123
  i0.ɵɵelementEnd();
110
- i0.ɵɵelement(3, "div", 14);
111
- i0.ɵɵelementStart(4, "textarea", 17);
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)); });
124
+ i0.ɵɵelement(4, "div", 15);
125
+ i0.ɵɵelementStart(5, "textarea", 18);
126
+ i0.ɵɵlistener("ngModelChange", function DynamicFormComponent_ng_template_3_div_1_Template_textarea_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r35 = i0.ɵɵnextContext(); const field_r13 = ctx_r35.$implicit; const formgroup_r15 = ctx_r35.formGroup; const ctx_r34 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r34.updateSubDynamicFields(field_r13, formgroup_r15, $event)); });
113
127
  i0.ɵɵelementEnd();
114
- i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_1_ng_container_5_Template, 1, 4, "ng-container", 16);
128
+ i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_1_ng_container_6_Template, 1, 4, "ng-container", 17);
115
129
  i0.ɵɵelementEnd();
116
130
  } if (rf & 2) {
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;
131
+ const ctx_r37 = i0.ɵɵnextContext();
132
+ const formgroup_r15 = ctx_r37.formGroup;
133
+ const field_r13 = ctx_r37.$implicit;
134
+ const control_r14 = ctx_r37.control;
121
135
  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" : ""));
136
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(7, _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" : ""));
123
137
  i0.ɵɵadvance(2);
124
- i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
138
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, "");
139
+ i0.ɵɵadvance(1);
140
+ i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
125
141
  i0.ɵɵadvance(2);
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);
142
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(9, _c4, control_r14.touched && control_r14.errors ? "1px solid #B00020" : ""))("placeholder", field_r13.placeholderText ? field_r13.placeholderText : "Input Text")("formControl", control_r14);
127
143
  i0.ɵɵadvance(1);
128
144
  i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
129
145
  } }
130
- function DynamicFormComponent_ng_template_3_div_2_img_6_Template(rf, ctx) { if (rf & 1) {
131
- const _r40 = i0.ɵɵgetCurrentView();
132
- i0.ɵɵelementStart(0, "img", 24);
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()); });
146
+ function DynamicFormComponent_ng_template_3_div_2_span_3_Template(rf, ctx) { if (rf & 1) {
147
+ i0.ɵɵelementStart(0, "span");
148
+ i0.ɵɵtext(1, " *");
149
+ i0.ɵɵelementEnd();
150
+ } }
151
+ function DynamicFormComponent_ng_template_3_div_2_img_7_Template(rf, ctx) { if (rf & 1) {
152
+ const _r43 = i0.ɵɵgetCurrentView();
153
+ i0.ɵɵelementStart(0, "img", 25);
154
+ i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_2_img_7_Template_img_click_0_listener() { i0.ɵɵrestoreView(_r43); i0.ɵɵnextContext(); const _r39 = i0.ɵɵreference(6); return i0.ɵɵresetView(_r39.click()); });
134
155
  i0.ɵɵelementEnd();
135
156
  } if (rf & 2) {
136
- const ctx_r37 = i0.ɵɵnextContext(3);
137
- i0.ɵɵproperty("src", ctx_r37.calendarIconUrl, i0.ɵɵsanitizeUrl);
157
+ const ctx_r40 = i0.ɵɵnextContext(3);
158
+ i0.ɵɵproperty("src", ctx_r40.calendarIconUrl, i0.ɵɵsanitizeUrl);
138
159
  } }
139
- function DynamicFormComponent_ng_template_3_div_2_ng_container_7_Template(rf, ctx) { if (rf & 1) {
160
+ function DynamicFormComponent_ng_template_3_div_2_ng_container_8_Template(rf, ctx) { if (rf & 1) {
140
161
  i0.ɵɵelementContainer(0, 6);
141
162
  } if (rf & 2) {
142
163
  const control_r14 = i0.ɵɵnextContext(2).control;
@@ -145,26 +166,29 @@ function DynamicFormComponent_ng_template_3_div_2_ng_container_7_Template(rf, ct
145
166
  i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r14.errors));
146
167
  } }
147
168
  function DynamicFormComponent_ng_template_3_div_2_Template(rf, ctx) { if (rf & 1) {
148
- const _r44 = i0.ɵɵgetCurrentView();
149
- i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
169
+ const _r47 = i0.ɵɵgetCurrentView();
170
+ i0.ɵɵelementStart(0, "div", 19)(1, "p", 20);
150
171
  i0.ɵɵtext(2);
172
+ i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_2_span_3_Template, 2, 0, "span", 14);
151
173
  i0.ɵɵelementEnd();
152
- i0.ɵɵelementStart(3, "div", 20)(4, "input", 21, 22);
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)); });
174
+ i0.ɵɵelementStart(4, "div", 21)(5, "input", 22, 23);
175
+ i0.ɵɵlistener("dateChange", function DynamicFormComponent_ng_template_3_div_2_Template_input_dateChange_5_listener($event) { i0.ɵɵrestoreView(_r47); const control_r14 = i0.ɵɵnextContext().control; return i0.ɵɵresetView(control_r14.setValue($event)); });
154
176
  i0.ɵɵelementEnd();
155
- i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_2_img_6_Template, 1, 1, "img", 23);
177
+ i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_2_img_7_Template, 1, 1, "img", 24);
156
178
  i0.ɵɵelementEnd();
157
- i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_2_ng_container_7_Template, 1, 4, "ng-container", 16);
179
+ i0.ɵɵtemplate(8, DynamicFormComponent_ng_template_3_div_2_ng_container_8_Template, 1, 4, "ng-container", 17);
158
180
  i0.ɵɵelementEnd();
159
181
  } if (rf & 2) {
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;
182
+ const ctx_r48 = i0.ɵɵnextContext();
183
+ const formgroup_r15 = ctx_r48.formGroup;
184
+ const field_r13 = ctx_r48.$implicit;
185
+ const control_r14 = ctx_r48.control;
164
186
  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" : ""));
187
+ 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_r18.removeSepratorForSubFields ? "none" : ""));
166
188
  i0.ɵɵadvance(2);
167
189
  i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
190
+ i0.ɵɵadvance(1);
191
+ i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
168
192
  i0.ɵɵadvance(2);
169
193
  i0.ɵɵproperty("dpConfig", field_r13.fieldConfig)("selectedDate", control_r14.value)("offsetY", 0)("value", control_r14.value);
170
194
  i0.ɵɵadvance(2);
@@ -172,7 +196,12 @@ function DynamicFormComponent_ng_template_3_div_2_Template(rf, ctx) { if (rf & 1
172
196
  i0.ɵɵadvance(1);
173
197
  i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
174
198
  } }
175
- function DynamicFormComponent_ng_template_3_div_3_ng_container_4_Template(rf, ctx) { if (rf & 1) {
199
+ function DynamicFormComponent_ng_template_3_div_3_span_3_Template(rf, ctx) { if (rf & 1) {
200
+ i0.ɵɵelementStart(0, "span");
201
+ i0.ɵɵtext(1, " *");
202
+ i0.ɵɵelementEnd();
203
+ } }
204
+ function DynamicFormComponent_ng_template_3_div_3_ng_container_5_Template(rf, ctx) { if (rf & 1) {
176
205
  i0.ɵɵelementContainer(0, 6);
177
206
  } if (rf & 2) {
178
207
  const control_r14 = i0.ɵɵnextContext(2).control;
@@ -181,39 +210,47 @@ function DynamicFormComponent_ng_template_3_div_3_ng_container_4_Template(rf, ct
181
210
  i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r14.errors));
182
211
  } }
183
212
  function DynamicFormComponent_ng_template_3_div_3_Template(rf, ctx) { if (rf & 1) {
184
- const _r50 = i0.ɵɵgetCurrentView();
185
- i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
213
+ const _r54 = i0.ɵɵgetCurrentView();
214
+ i0.ɵɵelementStart(0, "div", 19)(1, "p", 20);
186
215
  i0.ɵɵtext(2);
216
+ i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_3_span_3_Template, 2, 0, "span", 14);
187
217
  i0.ɵɵelementEnd();
188
- i0.ɵɵelementStart(3, "mis-switch", 25);
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)); });
218
+ i0.ɵɵelementStart(4, "mis-switch", 26);
219
+ i0.ɵɵlistener("valueChanged", function DynamicFormComponent_ng_template_3_div_3_Template_mis_switch_valueChanged_4_listener($event) { i0.ɵɵrestoreView(_r54); const ctx_r53 = i0.ɵɵnextContext(); const field_r13 = ctx_r53.$implicit; const formgroup_r15 = ctx_r53.formGroup; const ctx_r52 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r52.updateSubDynamicFields(field_r13, formgroup_r15, $event)); });
190
220
  i0.ɵɵelementEnd();
191
- i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_3_ng_container_4_Template, 1, 4, "ng-container", 16);
221
+ i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_3_ng_container_5_Template, 1, 4, "ng-container", 17);
192
222
  i0.ɵɵelementEnd();
193
223
  } if (rf & 2) {
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;
224
+ const ctx_r55 = i0.ɵɵnextContext();
225
+ const formgroup_r15 = ctx_r55.formGroup;
226
+ const field_r13 = ctx_r55.$implicit;
227
+ const control_r14 = ctx_r55.control;
198
228
  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" : ""));
229
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _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" : ""));
200
230
  i0.ɵɵadvance(2);
201
- i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
231
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, "");
232
+ i0.ɵɵadvance(1);
233
+ i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
202
234
  i0.ɵɵadvance(1);
203
235
  i0.ɵɵproperty("control", control_r14);
204
236
  i0.ɵɵadvance(1);
205
237
  i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
206
238
  } }
207
- function DynamicFormComponent_ng_template_3_div_4_img_5_Template(rf, ctx) { if (rf & 1) {
208
- const _r56 = i0.ɵɵgetCurrentView();
209
- i0.ɵɵelementStart(0, "img", 29);
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)); });
239
+ function DynamicFormComponent_ng_template_3_div_4_span_3_Template(rf, ctx) { if (rf & 1) {
240
+ i0.ɵɵelementStart(0, "span");
241
+ i0.ɵɵtext(1, " *");
242
+ i0.ɵɵelementEnd();
243
+ } }
244
+ function DynamicFormComponent_ng_template_3_div_4_img_6_Template(rf, ctx) { if (rf & 1) {
245
+ const _r61 = i0.ɵɵgetCurrentView();
246
+ i0.ɵɵelementStart(0, "img", 30);
247
+ i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_4_img_6_Template_img_click_0_listener() { i0.ɵɵrestoreView(_r61); const field_r13 = i0.ɵɵnextContext(2).$implicit; const ctx_r59 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r59.fieldRemoved.emit(field_r13)); });
211
248
  i0.ɵɵelementEnd();
212
249
  } if (rf & 2) {
213
- const ctx_r52 = i0.ɵɵnextContext(3);
214
- i0.ɵɵproperty("src", ctx_r52.removeIconUrl, i0.ɵɵsanitizeUrl);
250
+ const ctx_r57 = i0.ɵɵnextContext(3);
251
+ i0.ɵɵproperty("src", ctx_r57.removeIconUrl, i0.ɵɵsanitizeUrl);
215
252
  } }
216
- function DynamicFormComponent_ng_template_3_div_4_ng_container_6_Template(rf, ctx) { if (rf & 1) {
253
+ function DynamicFormComponent_ng_template_3_div_4_ng_container_7_Template(rf, ctx) { if (rf & 1) {
217
254
  i0.ɵɵelementContainer(0, 6);
218
255
  } if (rf & 2) {
219
256
  const control_r14 = i0.ɵɵnextContext(2).control;
@@ -223,28 +260,31 @@ function DynamicFormComponent_ng_template_3_div_4_ng_container_6_Template(rf, ct
223
260
  } }
224
261
  const _c5 = function (a0) { return { "removeable-container": a0 }; };
225
262
  function DynamicFormComponent_ng_template_3_div_4_Template(rf, ctx) { if (rf & 1) {
226
- const _r60 = i0.ɵɵgetCurrentView();
227
- i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
263
+ const _r65 = i0.ɵɵgetCurrentView();
264
+ i0.ɵɵelementStart(0, "div", 19)(1, "p", 20);
228
265
  i0.ɵɵtext(2);
266
+ i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_4_span_3_Template, 2, 0, "span", 14);
229
267
  i0.ɵɵelementEnd();
230
- i0.ɵɵelementStart(3, "div", 26)(4, "mis-dropdown", 27);
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)); });
268
+ i0.ɵɵelementStart(4, "div", 27)(5, "mis-dropdown", 28);
269
+ i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_div_4_Template_mis_dropdown_onChange_5_listener($event) { i0.ɵɵrestoreView(_r65); const ctx_r64 = i0.ɵɵnextContext(); const field_r13 = ctx_r64.$implicit; const control_r14 = ctx_r64.control; const formgroup_r15 = ctx_r64.formGroup; const ctx_r63 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r63.updateSelectedValueForSingleSelect(field_r13, control_r14, formgroup_r15, $event)); });
232
270
  i0.ɵɵelementEnd();
233
- i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_4_img_5_Template, 1, 1, "img", 28);
271
+ i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_4_img_6_Template, 1, 1, "img", 29);
234
272
  i0.ɵɵelementEnd();
235
- i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_4_ng_container_6_Template, 1, 4, "ng-container", 16);
273
+ i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_4_ng_container_7_Template, 1, 4, "ng-container", 17);
236
274
  i0.ɵɵelementEnd();
237
275
  } if (rf & 2) {
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;
276
+ const ctx_r66 = i0.ɵɵnextContext();
277
+ const formgroup_r15 = ctx_r66.formGroup;
278
+ const field_r13 = ctx_r66.$implicit;
279
+ const control_r14 = ctx_r66.control;
242
280
  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" : ""));
281
+ 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_r20.removeSepratorForSubFields ? "none" : ""));
244
282
  i0.ɵɵadvance(2);
245
- i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
283
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, "");
284
+ i0.ɵɵadvance(1);
285
+ i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
246
286
  i0.ɵɵadvance(1);
247
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c5, field_r13 == null ? null : field_r13.isRemoveable));
287
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c5, field_r13 == null ? null : field_r13.isRemoveable));
248
288
  i0.ɵɵadvance(1);
249
289
  i0.ɵɵproperty("searchEnabled", false)("width", "140px")("data", field_r13.itemsList)("selectedItem", control_r14.value);
250
290
  i0.ɵɵadvance(1);
@@ -252,32 +292,37 @@ function DynamicFormComponent_ng_template_3_div_4_Template(rf, ctx) { if (rf & 1
252
292
  i0.ɵɵadvance(1);
253
293
  i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
254
294
  } }
255
- function DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template(rf, ctx) { if (rf & 1) {
256
- i0.ɵɵelement(0, "img", 34);
295
+ function DynamicFormComponent_ng_template_3_div_5_span_3_Template(rf, ctx) { if (rf & 1) {
296
+ i0.ɵɵelementStart(0, "span");
297
+ i0.ɵɵtext(1, " *");
298
+ i0.ɵɵelementEnd();
299
+ } }
300
+ function DynamicFormComponent_ng_template_3_div_5_div_6_img_1_Template(rf, ctx) { if (rf & 1) {
301
+ i0.ɵɵelement(0, "img", 35);
257
302
  } if (rf & 2) {
258
- const ctx_r65 = i0.ɵɵnextContext(4);
259
- i0.ɵɵproperty("src", ctx_r65.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
303
+ const ctx_r71 = i0.ɵɵnextContext(4);
304
+ i0.ɵɵproperty("src", ctx_r71.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
260
305
  } }
261
306
  const _c6 = function (a0) { return { "checkbox-active": a0 }; };
262
- function DynamicFormComponent_ng_template_3_div_5_div_5_Template(rf, ctx) { if (rf & 1) {
263
- const _r68 = i0.ɵɵgetCurrentView();
264
- i0.ɵɵelementStart(0, "div", 32);
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)); });
266
- i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template, 1, 1, "img", 33);
267
- i0.ɵɵelementStart(2, "p", 19);
307
+ function DynamicFormComponent_ng_template_3_div_5_div_6_Template(rf, ctx) { if (rf & 1) {
308
+ const _r74 = i0.ɵɵgetCurrentView();
309
+ i0.ɵɵelementStart(0, "div", 33);
310
+ i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_5_div_6_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r74); const item_r70 = restoredCtx.$implicit; const ctx_r73 = i0.ɵɵnextContext(2); const field_r13 = ctx_r73.$implicit; const control_r14 = ctx_r73.control; const formgroup_r15 = ctx_r73.formGroup; const ctx_r72 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r72.updateSelectedValueForSingleSelect(field_r13, control_r14, formgroup_r15, item_r70)); });
311
+ i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_5_div_6_img_1_Template, 1, 1, "img", 34);
312
+ i0.ɵɵelementStart(2, "p", 20);
268
313
  i0.ɵɵtext(3);
269
314
  i0.ɵɵelementEnd()();
270
315
  } if (rf & 2) {
271
- const item_r64 = ctx.$implicit;
316
+ const item_r70 = ctx.$implicit;
272
317
  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)));
318
+ const ctx_r68 = i0.ɵɵnextContext();
319
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, item_r70.label === (control_r14.value == null ? null : control_r14.value.label)));
275
320
  i0.ɵɵadvance(1);
276
- i0.ɵɵproperty("ngIf", item_r64.label === (control_r14.value == null ? null : control_r14.value.label) && ctx_r62.activeBtnIconUrl);
321
+ i0.ɵɵproperty("ngIf", item_r70.label === (control_r14.value == null ? null : control_r14.value.label) && ctx_r68.activeBtnIconUrl);
277
322
  i0.ɵɵadvance(2);
278
- i0.ɵɵtextInterpolate(item_r64.label);
323
+ i0.ɵɵtextInterpolate(item_r70.label);
279
324
  } }
280
- function DynamicFormComponent_ng_template_3_div_5_ng_container_6_Template(rf, ctx) { if (rf & 1) {
325
+ function DynamicFormComponent_ng_template_3_div_5_ng_container_7_Template(rf, ctx) { if (rf & 1) {
281
326
  i0.ɵɵelementContainer(0, 6);
282
327
  } if (rf & 2) {
283
328
  const control_r14 = i0.ɵɵnextContext(2).control;
@@ -288,52 +333,60 @@ function DynamicFormComponent_ng_template_3_div_5_ng_container_6_Template(rf, ct
288
333
  function DynamicFormComponent_ng_template_3_div_5_Template(rf, ctx) { if (rf & 1) {
289
334
  i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
290
335
  i0.ɵɵtext(2);
336
+ i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_5_span_3_Template, 2, 0, "span", 14);
291
337
  i0.ɵɵelementEnd();
292
- i0.ɵɵelement(3, "div", 14);
293
- i0.ɵɵelementStart(4, "div", 30);
294
- i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_div_5_Template, 4, 5, "div", 31);
338
+ i0.ɵɵelement(4, "div", 15);
339
+ i0.ɵɵelementStart(5, "div", 31);
340
+ i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_5_div_6_Template, 4, 5, "div", 32);
295
341
  i0.ɵɵelementEnd();
296
- i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_5_ng_container_6_Template, 1, 4, "ng-container", 16);
342
+ i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_5_ng_container_7_Template, 1, 4, "ng-container", 17);
297
343
  i0.ɵɵelementEnd();
298
344
  } if (rf & 2) {
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;
345
+ const ctx_r77 = i0.ɵɵnextContext();
346
+ const formgroup_r15 = ctx_r77.formGroup;
347
+ const field_r13 = ctx_r77.$implicit;
348
+ const control_r14 = ctx_r77.control;
303
349
  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" : ""));
350
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _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" : ""));
305
351
  i0.ɵɵadvance(2);
306
- i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
352
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, "");
353
+ i0.ɵɵadvance(1);
354
+ i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
307
355
  i0.ɵɵadvance(3);
308
356
  i0.ɵɵproperty("ngForOf", field_r13.itemsList);
309
357
  i0.ɵɵadvance(1);
310
358
  i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
311
359
  } }
312
- function DynamicFormComponent_ng_template_3_div_6_div_5_img_1_Template(rf, ctx) { if (rf & 1) {
313
- i0.ɵɵelement(0, "img", 34);
360
+ function DynamicFormComponent_ng_template_3_div_6_span_3_Template(rf, ctx) { if (rf & 1) {
361
+ i0.ɵɵelementStart(0, "span");
362
+ i0.ɵɵtext(1, " *");
363
+ i0.ɵɵelementEnd();
364
+ } }
365
+ function DynamicFormComponent_ng_template_3_div_6_div_6_img_1_Template(rf, ctx) { if (rf & 1) {
366
+ i0.ɵɵelement(0, "img", 35);
314
367
  } if (rf & 2) {
315
- const ctx_r75 = i0.ɵɵnextContext(4);
316
- i0.ɵɵproperty("src", ctx_r75.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
317
- } }
318
- function DynamicFormComponent_ng_template_3_div_6_div_5_Template(rf, ctx) { if (rf & 1) {
319
- const _r78 = i0.ɵɵgetCurrentView();
320
- i0.ɵɵelementStart(0, "div", 32);
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])); });
322
- i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_6_div_5_img_1_Template, 1, 1, "img", 33);
323
- i0.ɵɵelementStart(2, "p", 19);
368
+ const ctx_r82 = i0.ɵɵnextContext(4);
369
+ i0.ɵɵproperty("src", ctx_r82.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
370
+ } }
371
+ function DynamicFormComponent_ng_template_3_div_6_div_6_Template(rf, ctx) { if (rf & 1) {
372
+ const _r85 = i0.ɵɵgetCurrentView();
373
+ i0.ɵɵelementStart(0, "div", 33);
374
+ i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_6_div_6_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r85); const item_r81 = restoredCtx.$implicit; const ctx_r84 = i0.ɵɵnextContext(2); const field_r13 = ctx_r84.$implicit; const control_r14 = ctx_r84.control; const formgroup_r15 = ctx_r84.formGroup; const ctx_r83 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r83.updateSelectedValueForMultiSelect(field_r13, control_r14, formgroup_r15, [item_r81])); });
375
+ i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_6_div_6_img_1_Template, 1, 1, "img", 34);
376
+ i0.ɵɵelementStart(2, "p", 20);
324
377
  i0.ɵɵtext(3);
325
378
  i0.ɵɵelementEnd()();
326
379
  } if (rf & 2) {
327
- const item_r74 = ctx.$implicit;
380
+ const item_r81 = ctx.$implicit;
328
381
  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)));
382
+ const ctx_r79 = i0.ɵɵnextContext();
383
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, ctx_r79.isCheckBoxSelected(item_r81.label, control_r14.value)));
331
384
  i0.ɵɵadvance(1);
332
- i0.ɵɵproperty("ngIf", ctx_r72.isCheckBoxSelected(item_r74.label, control_r14.value) && ctx_r72.activeBtnIconUrl);
385
+ i0.ɵɵproperty("ngIf", ctx_r79.isCheckBoxSelected(item_r81.label, control_r14.value) && ctx_r79.activeBtnIconUrl);
333
386
  i0.ɵɵadvance(2);
334
- i0.ɵɵtextInterpolate(item_r74.label);
387
+ i0.ɵɵtextInterpolate(item_r81.label);
335
388
  } }
336
- function DynamicFormComponent_ng_template_3_div_6_ng_container_6_Template(rf, ctx) { if (rf & 1) {
389
+ function DynamicFormComponent_ng_template_3_div_6_ng_container_7_Template(rf, ctx) { if (rf & 1) {
337
390
  i0.ɵɵelementContainer(0, 6);
338
391
  } if (rf & 2) {
339
392
  const control_r14 = i0.ɵɵnextContext(2).control;
@@ -344,28 +397,36 @@ function DynamicFormComponent_ng_template_3_div_6_ng_container_6_Template(rf, ct
344
397
  function DynamicFormComponent_ng_template_3_div_6_Template(rf, ctx) { if (rf & 1) {
345
398
  i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
346
399
  i0.ɵɵtext(2);
400
+ i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_6_span_3_Template, 2, 0, "span", 14);
347
401
  i0.ɵɵelementEnd();
348
- i0.ɵɵelement(3, "div", 14);
349
- i0.ɵɵelementStart(4, "div", 30);
350
- i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_6_div_5_Template, 4, 5, "div", 31);
402
+ i0.ɵɵelement(4, "div", 15);
403
+ i0.ɵɵelementStart(5, "div", 31);
404
+ i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_div_6_Template, 4, 5, "div", 32);
351
405
  i0.ɵɵelementEnd();
352
- i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_ng_container_6_Template, 1, 4, "ng-container", 16);
406
+ i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_6_ng_container_7_Template, 1, 4, "ng-container", 17);
353
407
  i0.ɵɵelementEnd();
354
408
  } if (rf & 2) {
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;
409
+ const ctx_r88 = i0.ɵɵnextContext();
410
+ const formgroup_r15 = ctx_r88.formGroup;
411
+ const field_r13 = ctx_r88.$implicit;
412
+ const control_r14 = ctx_r88.control;
359
413
  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" : ""));
414
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _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" : ""));
361
415
  i0.ɵɵadvance(2);
362
- i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
416
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, "");
417
+ i0.ɵɵadvance(1);
418
+ i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
363
419
  i0.ɵɵadvance(3);
364
420
  i0.ɵɵproperty("ngForOf", field_r13.itemsList);
365
421
  i0.ɵɵadvance(1);
366
422
  i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
367
423
  } }
368
- function DynamicFormComponent_ng_template_3_div_7_ng_container_4_Template(rf, ctx) { if (rf & 1) {
424
+ function DynamicFormComponent_ng_template_3_div_7_span_3_Template(rf, ctx) { if (rf & 1) {
425
+ i0.ɵɵelementStart(0, "span");
426
+ i0.ɵɵtext(1, " *");
427
+ i0.ɵɵelementEnd();
428
+ } }
429
+ function DynamicFormComponent_ng_template_3_div_7_ng_container_5_Template(rf, ctx) { if (rf & 1) {
369
430
  i0.ɵɵelementContainer(0, 6);
370
431
  } if (rf & 2) {
371
432
  const control_r14 = i0.ɵɵnextContext(2).control;
@@ -374,38 +435,41 @@ function DynamicFormComponent_ng_template_3_div_7_ng_container_4_Template(rf, ct
374
435
  i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r14.errors));
375
436
  } }
376
437
  function DynamicFormComponent_ng_template_3_div_7_Template(rf, ctx) { if (rf & 1) {
377
- const _r86 = i0.ɵɵgetCurrentView();
378
- i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
438
+ const _r94 = i0.ɵɵgetCurrentView();
439
+ i0.ɵɵelementStart(0, "div", 19)(1, "p", 20);
379
440
  i0.ɵɵtext(2);
441
+ i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_7_span_3_Template, 2, 0, "span", 14);
380
442
  i0.ɵɵelementEnd();
381
- i0.ɵɵelementStart(3, "mis-multi-select-dropdown", 35);
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)); });
443
+ i0.ɵɵelementStart(4, "mis-multi-select-dropdown", 36);
444
+ i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_div_7_Template_mis_multi_select_dropdown_onChange_4_listener($event) { i0.ɵɵrestoreView(_r94); const ctx_r93 = i0.ɵɵnextContext(); const field_r13 = ctx_r93.$implicit; const control_r14 = ctx_r93.control; const formgroup_r15 = ctx_r93.formGroup; const ctx_r92 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r92.updateSelectedValueForMultiSelect(field_r13, control_r14, formgroup_r15, $event)); });
383
445
  i0.ɵɵelementEnd();
384
- i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_7_ng_container_4_Template, 1, 4, "ng-container", 16);
446
+ i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_7_ng_container_5_Template, 1, 4, "ng-container", 17);
385
447
  i0.ɵɵelementEnd();
386
448
  } if (rf & 2) {
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;
449
+ const ctx_r95 = i0.ɵɵnextContext();
450
+ const formgroup_r15 = ctx_r95.formGroup;
451
+ const field_r13 = ctx_r95.$implicit;
452
+ const control_r14 = ctx_r95.control;
391
453
  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" : ""));
454
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(11, _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" : ""));
393
455
  i0.ɵɵadvance(2);
394
- i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
456
+ i0.ɵɵtextInterpolate1(" ", field_r13.title, "");
457
+ i0.ɵɵadvance(1);
458
+ i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
395
459
  i0.ɵɵadvance(1);
396
460
  i0.ɵɵproperty("width", "140px")("showSelectedCount", true)("dropdownListWidth", "256px")("searchEnabled", false)("hideApplyButton", true)("data", field_r13.itemsList)("selectedItems", control_r14.value);
397
461
  i0.ɵɵadvance(1);
398
462
  i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
399
463
  } }
400
464
  function DynamicFormComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
401
- i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_div_0_Template, 6, 12, "div", 10);
402
- i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_1_Template, 6, 10, "div", 10);
403
- i0.ɵɵtemplate(2, DynamicFormComponent_ng_template_3_div_2_Template, 8, 10, "div", 11);
404
- i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_3_Template, 5, 6, "div", 11);
405
- i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_4_Template, 7, 13, "div", 11);
406
- i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_Template, 7, 6, "div", 10);
407
- i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_Template, 7, 6, "div", 10);
408
- i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_7_Template, 5, 12, "div", 11);
465
+ i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_div_0_Template, 7, 13, "div", 10);
466
+ i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_1_Template, 7, 11, "div", 10);
467
+ i0.ɵɵtemplate(2, DynamicFormComponent_ng_template_3_div_2_Template, 9, 11, "div", 11);
468
+ i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_3_Template, 6, 7, "div", 11);
469
+ i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_4_Template, 8, 14, "div", 11);
470
+ i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_Template, 8, 7, "div", 10);
471
+ i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_Template, 8, 7, "div", 10);
472
+ i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_7_Template, 6, 13, "div", 11);
409
473
  } if (rf & 2) {
410
474
  const field_r13 = ctx.$implicit;
411
475
  i0.ɵɵproperty("ngIf", field_r13.fieldType === "input" && (field_r13.fieldInputType === "text" || field_r13.fieldInputType === "number"));
@@ -426,25 +490,25 @@ function DynamicFormComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
426
490
  } }
427
491
  function DynamicFormComponent_ng_template_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
428
492
  i0.ɵɵelementContainerStart(0);
429
- i0.ɵɵelementStart(1, "p", 37);
493
+ i0.ɵɵelementStart(1, "p", 38);
430
494
  i0.ɵɵtext(2);
431
495
  i0.ɵɵelementEnd();
432
- i0.ɵɵelement(3, "div", 38);
496
+ i0.ɵɵelement(3, "div", 39);
433
497
  i0.ɵɵelementContainerEnd();
434
498
  } if (rf & 2) {
435
- const error_r90 = ctx.$implicit;
499
+ const error_r98 = ctx.$implicit;
436
500
  i0.ɵɵadvance(2);
437
- i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r90.value, " ");
501
+ i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r98.value, " ");
438
502
  } }
439
503
  function DynamicFormComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
440
- i0.ɵɵelementStart(0, "div", 36);
504
+ i0.ɵɵelementStart(0, "div", 37);
441
505
  i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_5_ng_container_1_Template, 4, 1, "ng-container", 9);
442
506
  i0.ɵɵpipe(2, "keyvalue");
443
507
  i0.ɵɵelementEnd();
444
508
  } if (rf & 2) {
445
- const errors_r88 = ctx.$implicit;
509
+ const errors_r96 = ctx.$implicit;
446
510
  i0.ɵɵadvance(1);
447
- i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r88));
511
+ i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r96));
448
512
  } }
449
513
  class DynamicFormComponent {
450
514
  constructor() {
@@ -688,7 +752,7 @@ class DynamicFormComponent {
688
752
  }
689
753
  }
690
754
  DynamicFormComponent.ɵfac = function DynamicFormComponent_Factory(t) { return new (t || DynamicFormComponent)(); };
691
- DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DynamicFormComponent, selectors: [["mis-dynamic-form"]], inputs: { formFields: "formFields", formValues: "formValues", activeBtnIconUrl: "activeBtnIconUrl", calendarIconUrl: "calendarIconUrl", removeIconUrl: "removeIconUrl", removeSepratorForSubFields: "removeSepratorForSubFields" }, outputs: { formUpdated: "formUpdated", formValid: "formValid", formInitialized: "formInitialized", fieldRemoved: "fieldRemoved" }, decls: 7, vars: 2, consts: [[3, "formGroup"], ["formArrayName", "dynamicFields"], [3, "formGroupName", 4, "ngFor", "ngForOf"], ["dynamicField", ""], ["dynamicFieldErrors", ""], [3, "formGroupName"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "sub-dynamic-form", 4, "ngIf"], [1, "sub-dynamic-form"], [4, "ngFor", "ngForOf"], ["class", "dynamic-field multi-line-field-container", 3, "ngStyle", 4, "ngIf"], ["class", "dynamic-field single-line-field-container", 3, "ngStyle", 4, "ngIf"], [1, "dynamic-field", "multi-line-field-container", 3, "ngStyle"], [1, "h7", "field-title-sm"], [2, "flex-basis", "100%"], [1, "input-field", "ip-text", 3, "type", "formControl", "ngStyle", "placeholder", "min", "ngModelChange"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["type", "text", 1, "input-field", "ip-textarea", 3, "ngStyle", "placeholder", "formControl", "ngModelChange"], [1, "dynamic-field", "single-line-field-container", 3, "ngStyle"], [1, "h6"], [1, "date-picker-container"], ["readonly", "", "misTzDp", "", 1, "date-picker", 3, "dpConfig", "selectedDate", "offsetY", "value", "dateChange"], ["dp", ""], ["alt", "data-picker", "class", "date-picker-icon", 3, "src", "click", 4, "ngIf"], ["alt", "data-picker", 1, "date-picker-icon", 3, "src", "click"], [3, "control", "valueChanged"], [3, "ngClass"], [3, "searchEnabled", "width", "data", "selectedItem", "onChange"], ["class", "remove-icon", 3, "src", "click", 4, "ngIf"], [1, "remove-icon", 3, "src", "click"], ["id", "checkboxes-container"], ["class", "radio-checkbox-common", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "radio-checkbox-common", 3, "ngClass", "click"], ["alt", "", 3, "src", 4, "ngIf"], ["alt", "", 3, "src"], [3, "width", "showSelectedCount", "dropdownListWidth", "searchEnabled", "hideApplyButton", "data", "selectedItems", "onChange"], ["id", "error-messages-container"], [1, "h8"], [2, "flex-basis", "100%", "height", "0"]], template: function DynamicFormComponent_Template(rf, ctx) { if (rf & 1) {
755
+ 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"], [4, "ngIf"], [2, "flex-basis", "100%"], [1, "input-field", "ip-text", 3, "type", "formControl", "ngStyle", "placeholder", "min", "ngModelChange"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["type", "text", 1, "input-field", "ip-textarea", 3, "ngStyle", "placeholder", "formControl", "ngModelChange"], [1, "dynamic-field", "single-line-field-container", 3, "ngStyle"], [1, "h6"], [1, "date-picker-container"], ["readonly", "", "misTzDp", "", 1, "date-picker", 3, "dpConfig", "selectedDate", "offsetY", "value", "dateChange"], ["dp", ""], ["alt", "data-picker", "class", "date-picker-icon", 3, "src", "click", 4, "ngIf"], ["alt", "data-picker", 1, "date-picker-icon", 3, "src", "click"], [3, "control", "valueChanged"], [3, "ngClass"], [3, "searchEnabled", "width", "data", "selectedItem", "onChange"], ["class", "remove-icon", 3, "src", "click", 4, "ngIf"], [1, "remove-icon", 3, "src", "click"], ["id", "checkboxes-container"], ["class", "radio-checkbox-common", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "radio-checkbox-common", 3, "ngClass", "click"], ["alt", "", 3, "src", 4, "ngIf"], ["alt", "", 3, "src"], [3, "width", "showSelectedCount", "dropdownListWidth", "searchEnabled", "hideApplyButton", "data", "selectedItems", "onChange"], ["id", "error-messages-container"], [1, "h8"], [2, "flex-basis", "100%", "height", "0"]], template: function DynamicFormComponent_Template(rf, ctx) { if (rf & 1) {
692
756
  i0.ɵɵelementStart(0, "form", 0);
693
757
  i0.ɵɵelementContainerStart(1, 1);
694
758
  i0.ɵɵtemplate(2, DynamicFormComponent_ng_container_2_Template, 3, 8, "ng-container", 2);
@@ -700,10 +764,10 @@ DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dynami
700
764
  i0.ɵɵproperty("formGroup", ctx.dynamicForm);
701
765
  i0.ɵɵadvance(2);
702
766
  i0.ɵɵproperty("ngForOf", ctx.getDynamicFieldsControls().controls);
703
- } }, 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}"] });
767
+ } }, 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}span[_ngcontent-%COMP%]{color:var(--sem-error)}"] });
704
768
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicFormComponent, [{
705
769
  type: Component,
706
- 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"] }]
770
+ 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 }} <span *ngIf=\"field.validators && field.validators.length > 0\"> *</span>\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 }}<span *ngIf=\"field.validators && field.validators.length > 0\"> *</span>\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 }} <span *ngIf=\"field.validators && field.validators.length > 0\"> *</span>\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 }}<span *ngIf=\"field.validators && field.validators.length > 0\"> *</span>\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 }}<span *ngIf=\"field.validators && field.validators.length > 0\"> *</span>\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 }}<span *ngIf=\"field.validators && field.validators.length > 0\"> *</span>\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 }}<span *ngIf=\"field.validators && field.validators.length > 0\"> *</span>\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 }}<span *ngIf=\"field.validators && field.validators.length > 0\"> *</span>\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}span{color:var(--sem-error)}\n"] }]
707
771
  }], function () { return []; }, { formFields: [{
708
772
  type: Input
709
773
  }], formValues: [{