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

package/fesm2015/mis-crystal-design-system-dynamic-form.mjs

@@ -67,8 +67,15 @@ function DynamicFormComponent_ng_container_2_Template(rf, ctx) {
         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)));
     }
 }
+function DynamicFormComponent_ng_template_3_div_0_span_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1, " *");
+        i0.ɵɵelementEnd();
+    }
+}
 const _c2 = function (a0) { return { $implicit: a0 }; };
-function DynamicFormComponent_ng_template_3_div_0_ng_container_5_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_0_ng_container_6_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0, 6);
     }
@@ -83,33 +90,43 @@ const _c3 = function (a0) { return { "border-bottom": a0 }; };
 const _c4 = function (a0) { return { "border": a0 }; };
 function DynamicFormComponent_ng_template_3_div_0_Template(rf, ctx) {
     if (rf & 1) {
-        const _r28 = i0.ɵɵgetCurrentView();
+        const _r29 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
         i0.ɵɵtext(2);
+        i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_0_span_3_Template, 2, 0, "span", 14);
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(3, "div", 14);
-        i0.ɵɵelementStart(4, "input", 15);
-        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)); });
+        i0.ɵɵelement(4, "div", 15);
+        i0.ɵɵelementStart(5, "input", 16);
+        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)); });
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_0_ng_container_5_Template, 1, 4, "ng-container", 16);
+        i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_0_ng_container_6_Template, 1, 4, "ng-container", 17);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r29 = i0.ɵɵnextContext();
-        const formgroup_r15 = ctx_r29.formGroup;
-        const field_r13 = ctx_r29.$implicit;
-        const control_r14 = ctx_r29.control;
+        const ctx_r30 = i0.ɵɵnextContext();
+        const formgroup_r15 = ctx_r30.formGroup;
+        const field_r13 = ctx_r30.$implicit;
+        const control_r14 = ctx_r30.control;
         const ctx_r16 = i0.ɵɵnextContext();
-        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" : ""));
+        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" : ""));
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
         i0.ɵɵadvance(2);
-        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 : "");
+        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 : "");
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
     }
 }
-function DynamicFormComponent_ng_template_3_div_1_ng_container_5_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_1_span_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1, " *");
+        i0.ɵɵelementEnd();
+    }
+}
+function DynamicFormComponent_ng_template_3_div_1_ng_container_6_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0, 6);
     }
@@ -122,45 +139,55 @@ function DynamicFormComponent_ng_template_3_div_1_ng_container_5_Template(rf, ct
 }
 function DynamicFormComponent_ng_template_3_div_1_Template(rf, ctx) {
     if (rf & 1) {
-        const _r34 = i0.ɵɵgetCurrentView();
+        const _r36 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
         i0.ɵɵtext(2);
+        i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_1_span_3_Template, 2, 0, "span", 14);
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(3, "div", 14);
-        i0.ɵɵelementStart(4, "textarea", 17);
-        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)); });
+        i0.ɵɵelement(4, "div", 15);
+        i0.ɵɵelementStart(5, "textarea", 18);
+        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)); });
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_1_ng_container_5_Template, 1, 4, "ng-container", 16);
+        i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_1_ng_container_6_Template, 1, 4, "ng-container", 17);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r35 = i0.ɵɵnextContext();
-        const formgroup_r15 = ctx_r35.formGroup;
-        const field_r13 = ctx_r35.$implicit;
-        const control_r14 = ctx_r35.control;
+        const ctx_r37 = i0.ɵɵnextContext();
+        const formgroup_r15 = ctx_r37.formGroup;
+        const field_r13 = ctx_r37.$implicit;
+        const control_r14 = ctx_r37.control;
         const ctx_r17 = i0.ɵɵnextContext();
-        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" : ""));
+        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" : ""));
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
+        i0.ɵɵtextInterpolate1(" ", field_r13.title, "");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
         i0.ɵɵadvance(2);
-        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);
+        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);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
     }
 }
-function DynamicFormComponent_ng_template_3_div_2_img_6_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_2_span_3_Template(rf, ctx) {
     if (rf & 1) {
-        const _r40 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "img", 24);
-        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()); });
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1, " *");
+        i0.ɵɵelementEnd();
+    }
+}
+function DynamicFormComponent_ng_template_3_div_2_img_7_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r43 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "img", 25);
+        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()); });
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r37 = i0.ɵɵnextContext(3);
-        i0.ɵɵproperty("src", ctx_r37.calendarIconUrl, i0.ɵɵsanitizeUrl);
+        const ctx_r40 = i0.ɵɵnextContext(3);
+        i0.ɵɵproperty("src", ctx_r40.calendarIconUrl, i0.ɵɵsanitizeUrl);
     }
 }
-function DynamicFormComponent_ng_template_3_div_2_ng_container_7_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_2_ng_container_8_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0, 6);
     }
@@ -173,27 +200,30 @@ function DynamicFormComponent_ng_template_3_div_2_ng_container_7_Template(rf, ct
 }
 function DynamicFormComponent_ng_template_3_div_2_Template(rf, ctx) {
     if (rf & 1) {
-        const _r44 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
+        const _r47 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 19)(1, "p", 20);
         i0.ɵɵtext(2);
+        i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_2_span_3_Template, 2, 0, "span", 14);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "div", 20)(4, "input", 21, 22);
-        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)); });
+        i0.ɵɵelementStart(4, "div", 21)(5, "input", 22, 23);
+        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)); });
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_2_img_6_Template, 1, 1, "img", 23);
+        i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_2_img_7_Template, 1, 1, "img", 24);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_2_ng_container_7_Template, 1, 4, "ng-container", 16);
+        i0.ɵɵtemplate(8, DynamicFormComponent_ng_template_3_div_2_ng_container_8_Template, 1, 4, "ng-container", 17);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r45 = i0.ɵɵnextContext();
-        const formgroup_r15 = ctx_r45.formGroup;
-        const field_r13 = ctx_r45.$implicit;
-        const control_r14 = ctx_r45.control;
+        const ctx_r48 = i0.ɵɵnextContext();
+        const formgroup_r15 = ctx_r48.formGroup;
+        const field_r13 = ctx_r48.$implicit;
+        const control_r14 = ctx_r48.control;
         const ctx_r18 = i0.ɵɵnextContext();
-        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" : ""));
+        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" : ""));
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("dpConfig", field_r13.fieldConfig)("selectedDate", control_r14.value)("offsetY", 0)("value", control_r14.value);
         i0.ɵɵadvance(2);
@@ -202,7 +232,14 @@ function DynamicFormComponent_ng_template_3_div_2_Template(rf, ctx) {
         i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
     }
 }
-function DynamicFormComponent_ng_template_3_div_3_ng_container_4_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_3_span_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1, " *");
+        i0.ɵɵelementEnd();
+    }
+}
+function DynamicFormComponent_ng_template_3_div_3_ng_container_5_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0, 6);
     }
@@ -215,44 +252,54 @@ function DynamicFormComponent_ng_template_3_div_3_ng_container_4_Template(rf, ct
 }
 function DynamicFormComponent_ng_template_3_div_3_Template(rf, ctx) {
     if (rf & 1) {
-        const _r50 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
+        const _r54 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 19)(1, "p", 20);
         i0.ɵɵtext(2);
+        i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_3_span_3_Template, 2, 0, "span", 14);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "mis-switch", 25);
-        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)); });
+        i0.ɵɵelementStart(4, "mis-switch", 26);
+        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)); });
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_3_ng_container_4_Template, 1, 4, "ng-container", 16);
+        i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_3_ng_container_5_Template, 1, 4, "ng-container", 17);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r51 = i0.ɵɵnextContext();
-        const formgroup_r15 = ctx_r51.formGroup;
-        const field_r13 = ctx_r51.$implicit;
-        const control_r14 = ctx_r51.control;
+        const ctx_r55 = i0.ɵɵnextContext();
+        const formgroup_r15 = ctx_r55.formGroup;
+        const field_r13 = ctx_r55.$implicit;
+        const control_r14 = ctx_r55.control;
         const ctx_r19 = i0.ɵɵnextContext();
-        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" : ""));
+        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" : ""));
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
+        i0.ɵɵtextInterpolate1(" ", field_r13.title, "");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("control", control_r14);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
     }
 }
-function DynamicFormComponent_ng_template_3_div_4_img_5_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_4_span_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1, " *");
+        i0.ɵɵelementEnd();
+    }
+}
+function DynamicFormComponent_ng_template_3_div_4_img_6_Template(rf, ctx) {
     if (rf & 1) {
-        const _r56 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "img", 29);
-        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)); });
+        const _r61 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "img", 30);
+        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)); });
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r52 = i0.ɵɵnextContext(3);
-        i0.ɵɵproperty("src", ctx_r52.removeIconUrl, i0.ɵɵsanitizeUrl);
+        const ctx_r57 = i0.ɵɵnextContext(3);
+        i0.ɵɵproperty("src", ctx_r57.removeIconUrl, i0.ɵɵsanitizeUrl);
     }
 }
-function DynamicFormComponent_ng_template_3_div_4_ng_container_6_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_4_ng_container_7_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0, 6);
     }
@@ -266,29 +313,32 @@ function DynamicFormComponent_ng_template_3_div_4_ng_container_6_Template(rf, ct
 const _c5 = function (a0) { return { "removeable-container": a0 }; };
 function DynamicFormComponent_ng_template_3_div_4_Template(rf, ctx) {
     if (rf & 1) {
-        const _r60 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
+        const _r65 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 19)(1, "p", 20);
         i0.ɵɵtext(2);
+        i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_4_span_3_Template, 2, 0, "span", 14);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "div", 26)(4, "mis-dropdown", 27);
-        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)); });
+        i0.ɵɵelementStart(4, "div", 27)(5, "mis-dropdown", 28);
+        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)); });
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_4_img_5_Template, 1, 1, "img", 28);
+        i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_4_img_6_Template, 1, 1, "img", 29);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_4_ng_container_6_Template, 1, 4, "ng-container", 16);
+        i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_4_ng_container_7_Template, 1, 4, "ng-container", 17);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r61 = i0.ɵɵnextContext();
-        const formgroup_r15 = ctx_r61.formGroup;
-        const field_r13 = ctx_r61.$implicit;
-        const control_r14 = ctx_r61.control;
+        const ctx_r66 = i0.ɵɵnextContext();
+        const formgroup_r15 = ctx_r66.formGroup;
+        const field_r13 = ctx_r66.$implicit;
+        const control_r14 = ctx_r66.control;
         const ctx_r20 = i0.ɵɵnextContext();
-        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" : ""));
+        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" : ""));
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
+        i0.ɵɵtextInterpolate1(" ", field_r13.title, "");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c5, field_r13 == null ? null : field_r13.isRemoveable));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c5, field_r13 == null ? null : field_r13.isRemoveable));
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("searchEnabled", false)("width", "140px")("data", field_r13.itemsList)("selectedItem", control_r14.value);
         i0.ɵɵadvance(1);
@@ -297,38 +347,45 @@ function DynamicFormComponent_ng_template_3_div_4_Template(rf, ctx) {
         i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
     }
 }
-function DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_5_span_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1, " *");
+        i0.ɵɵelementEnd();
+    }
+}
+function DynamicFormComponent_ng_template_3_div_5_div_6_img_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "img", 34);
+        i0.ɵɵelement(0, "img", 35);
     }
     if (rf & 2) {
-        const ctx_r65 = i0.ɵɵnextContext(4);
-        i0.ɵɵproperty("src", ctx_r65.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
+        const ctx_r71 = i0.ɵɵnextContext(4);
+        i0.ɵɵproperty("src", ctx_r71.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
     }
 }
 const _c6 = function (a0) { return { "checkbox-active": a0 }; };
-function DynamicFormComponent_ng_template_3_div_5_div_5_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_5_div_6_Template(rf, ctx) {
     if (rf & 1) {
-        const _r68 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 32);
-        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)); });
-        i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template, 1, 1, "img", 33);
-        i0.ɵɵelementStart(2, "p", 19);
+        const _r74 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 33);
+        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)); });
+        i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_5_div_6_img_1_Template, 1, 1, "img", 34);
+        i0.ɵɵelementStart(2, "p", 20);
         i0.ɵɵtext(3);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const item_r64 = ctx.$implicit;
+        const item_r70 = ctx.$implicit;
         const control_r14 = i0.ɵɵnextContext(2).control;
-        const ctx_r62 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, item_r64.label === (control_r14.value == null ? null : control_r14.value.label)));
+        const ctx_r68 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, item_r70.label === (control_r14.value == null ? null : control_r14.value.label)));
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", item_r64.label === (control_r14.value == null ? null : control_r14.value.label) && ctx_r62.activeBtnIconUrl);
+        i0.ɵɵproperty("ngIf", item_r70.label === (control_r14.value == null ? null : control_r14.value.label) && ctx_r68.activeBtnIconUrl);
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate(item_r64.label);
+        i0.ɵɵtextInterpolate(item_r70.label);
     }
 }
-function DynamicFormComponent_ng_template_3_div_5_ng_container_6_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_5_ng_container_7_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0, 6);
     }
@@ -343,60 +400,70 @@ function DynamicFormComponent_ng_template_3_div_5_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
         i0.ɵɵtext(2);
+        i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_5_span_3_Template, 2, 0, "span", 14);
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(3, "div", 14);
-        i0.ɵɵelementStart(4, "div", 30);
-        i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_div_5_Template, 4, 5, "div", 31);
+        i0.ɵɵelement(4, "div", 15);
+        i0.ɵɵelementStart(5, "div", 31);
+        i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_5_div_6_Template, 4, 5, "div", 32);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_5_ng_container_6_Template, 1, 4, "ng-container", 16);
+        i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_5_ng_container_7_Template, 1, 4, "ng-container", 17);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r71 = i0.ɵɵnextContext();
-        const formgroup_r15 = ctx_r71.formGroup;
-        const field_r13 = ctx_r71.$implicit;
-        const control_r14 = ctx_r71.control;
+        const ctx_r77 = i0.ɵɵnextContext();
+        const formgroup_r15 = ctx_r77.formGroup;
+        const field_r13 = ctx_r77.$implicit;
+        const control_r14 = ctx_r77.control;
         const ctx_r21 = i0.ɵɵnextContext();
-        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" : ""));
+        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" : ""));
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
+        i0.ɵɵtextInterpolate1(" ", field_r13.title, "");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngForOf", field_r13.itemsList);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
     }
 }
-function DynamicFormComponent_ng_template_3_div_6_div_5_img_1_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_6_span_3_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "img", 34);
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1, " *");
+        i0.ɵɵelementEnd();
+    }
+}
+function DynamicFormComponent_ng_template_3_div_6_div_6_img_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "img", 35);
     }
     if (rf & 2) {
-        const ctx_r75 = i0.ɵɵnextContext(4);
-        i0.ɵɵproperty("src", ctx_r75.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
+        const ctx_r82 = i0.ɵɵnextContext(4);
+        i0.ɵɵproperty("src", ctx_r82.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
     }
 }
-function DynamicFormComponent_ng_template_3_div_6_div_5_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_6_div_6_Template(rf, ctx) {
     if (rf & 1) {
-        const _r78 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 32);
-        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])); });
-        i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_6_div_5_img_1_Template, 1, 1, "img", 33);
-        i0.ɵɵelementStart(2, "p", 19);
+        const _r85 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 33);
+        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])); });
+        i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_6_div_6_img_1_Template, 1, 1, "img", 34);
+        i0.ɵɵelementStart(2, "p", 20);
         i0.ɵɵtext(3);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const item_r74 = ctx.$implicit;
+        const item_r81 = ctx.$implicit;
         const control_r14 = i0.ɵɵnextContext(2).control;
-        const ctx_r72 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, ctx_r72.isCheckBoxSelected(item_r74.label, control_r14.value)));
+        const ctx_r79 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, ctx_r79.isCheckBoxSelected(item_r81.label, control_r14.value)));
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r72.isCheckBoxSelected(item_r74.label, control_r14.value) && ctx_r72.activeBtnIconUrl);
+        i0.ɵɵproperty("ngIf", ctx_r79.isCheckBoxSelected(item_r81.label, control_r14.value) && ctx_r79.activeBtnIconUrl);
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate(item_r74.label);
+        i0.ɵɵtextInterpolate(item_r81.label);
     }
 }
-function DynamicFormComponent_ng_template_3_div_6_ng_container_6_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_6_ng_container_7_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0, 6);
     }
@@ -411,30 +478,40 @@ function DynamicFormComponent_ng_template_3_div_6_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
         i0.ɵɵtext(2);
+        i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_6_span_3_Template, 2, 0, "span", 14);
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(3, "div", 14);
-        i0.ɵɵelementStart(4, "div", 30);
-        i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_6_div_5_Template, 4, 5, "div", 31);
+        i0.ɵɵelement(4, "div", 15);
+        i0.ɵɵelementStart(5, "div", 31);
+        i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_div_6_Template, 4, 5, "div", 32);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_ng_container_6_Template, 1, 4, "ng-container", 16);
+        i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_6_ng_container_7_Template, 1, 4, "ng-container", 17);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r81 = i0.ɵɵnextContext();
-        const formgroup_r15 = ctx_r81.formGroup;
-        const field_r13 = ctx_r81.$implicit;
-        const control_r14 = ctx_r81.control;
+        const ctx_r88 = i0.ɵɵnextContext();
+        const formgroup_r15 = ctx_r88.formGroup;
+        const field_r13 = ctx_r88.$implicit;
+        const control_r14 = ctx_r88.control;
         const ctx_r22 = i0.ɵɵnextContext();
-        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" : ""));
+        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" : ""));
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
+        i0.ɵɵtextInterpolate1(" ", field_r13.title, "");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngForOf", field_r13.itemsList);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", control_r14.touched && control_r14.errors);
     }
 }
-function DynamicFormComponent_ng_template_3_div_7_ng_container_4_Template(rf, ctx) {
+function DynamicFormComponent_ng_template_3_div_7_span_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span");
+        i0.ɵɵtext(1, " *");
+        i0.ɵɵelementEnd();
+    }
+}
+function DynamicFormComponent_ng_template_3_div_7_ng_container_5_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainer(0, 6);
     }
@@ -447,25 +524,28 @@ function DynamicFormComponent_ng_template_3_div_7_ng_container_4_Template(rf, ct
 }
 function DynamicFormComponent_ng_template_3_div_7_Template(rf, ctx) {
     if (rf & 1) {
-        const _r86 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
+        const _r94 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 19)(1, "p", 20);
         i0.ɵɵtext(2);
+        i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_7_span_3_Template, 2, 0, "span", 14);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "mis-multi-select-dropdown", 35);
-        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)); });
+        i0.ɵɵelementStart(4, "mis-multi-select-dropdown", 36);
+        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)); });
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_7_ng_container_4_Template, 1, 4, "ng-container", 16);
+        i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_7_ng_container_5_Template, 1, 4, "ng-container", 17);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r87 = i0.ɵɵnextContext();
-        const formgroup_r15 = ctx_r87.formGroup;
-        const field_r13 = ctx_r87.$implicit;
-        const control_r14 = ctx_r87.control;
+        const ctx_r95 = i0.ɵɵnextContext();
+        const formgroup_r15 = ctx_r95.formGroup;
+        const field_r13 = ctx_r95.$implicit;
+        const control_r14 = ctx_r95.control;
         const ctx_r23 = i0.ɵɵnextContext();
-        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" : ""));
+        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" : ""));
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", field_r13.title, " ");
+        i0.ɵɵtextInterpolate1(" ", field_r13.title, "");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", field_r13.validators && field_r13.validators.length > 0);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("width", "140px")("showSelectedCount", true)("dropdownListWidth", "256px")("searchEnabled", false)("hideApplyButton", true)("data", field_r13.itemsList)("selectedItems", control_r14.value);
         i0.ɵɵadvance(1);
@@ -474,14 +554,14 @@ function DynamicFormComponent_ng_template_3_div_7_Template(rf, ctx) {
 }
 function DynamicFormComponent_ng_template_3_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_div_0_Template, 6, 12, "div", 10);
-        i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_1_Template, 6, 10, "div", 10);
-        i0.ɵɵtemplate(2, DynamicFormComponent_ng_template_3_div_2_Template, 8, 10, "div", 11);
-        i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_3_Template, 5, 6, "div", 11);
-        i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_4_Template, 7, 13, "div", 11);
-        i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_Template, 7, 6, "div", 10);
-        i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_Template, 7, 6, "div", 10);
-        i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_7_Template, 5, 12, "div", 11);
+        i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_div_0_Template, 7, 13, "div", 10);
+        i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_1_Template, 7, 11, "div", 10);
+        i0.ɵɵtemplate(2, DynamicFormComponent_ng_template_3_div_2_Template, 9, 11, "div", 11);
+        i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_3_Template, 6, 7, "div", 11);
+        i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_4_Template, 8, 14, "div", 11);
+        i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_Template, 8, 7, "div", 10);
+        i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_Template, 8, 7, "div", 10);
+        i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_7_Template, 6, 13, "div", 11);
     }
     if (rf & 2) {
         const field_r13 = ctx.$implicit;
@@ -505,29 +585,29 @@ function DynamicFormComponent_ng_template_3_Template(rf, ctx) {
 function DynamicFormComponent_ng_template_5_ng_container_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0);
-        i0.ɵɵelementStart(1, "p", 37);
+        i0.ɵɵelementStart(1, "p", 38);
         i0.ɵɵtext(2);
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(3, "div", 38);
+        i0.ɵɵelement(3, "div", 39);
         i0.ɵɵelementContainerEnd();
     }
     if (rf & 2) {
-        const error_r90 = ctx.$implicit;
+        const error_r98 = ctx.$implicit;
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r90.value, " ");
+        i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r98.value, " ");
     }
 }
 function DynamicFormComponent_ng_template_5_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 36);
+        i0.ɵɵelementStart(0, "div", 37);
         i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_5_ng_container_1_Template, 4, 1, "ng-container", 9);
         i0.ɵɵpipe(2, "keyvalue");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const errors_r88 = ctx.$implicit;
+        const errors_r96 = ctx.$implicit;
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r88));
+        i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r96));
     }
 }
 class DynamicFormComponent {
@@ -779,7 +859,7 @@ class DynamicFormComponent {
     }
 }
 DynamicFormComponent.ɵfac = function DynamicFormComponent_Factory(t) { return new (t || DynamicFormComponent)(); };
-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) {
+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) {
             i0.ɵɵelementStart(0, "form", 0);
             i0.ɵɵelementContainerStart(1, 1);
@@ -794,11 +874,11 @@ DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dynami
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngForOf", ctx.getDynamicFieldsControls().controls);
         }
-    }, 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}"] });
+    }, 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)}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicFormComponent, [{
             type: Component,
-            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"] }]
+            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"] }]
         }], function () { return []; }, { formFields: [{
                 type: Input
             }], formValues: [{