mis-crystal-design-system 18.1.6-test-2 → 18.1.6-test-3

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

@@ -99,15 +99,19 @@ function DynamicFormComponent_ng_template_3_ng_container_0_ng_template_2_ng_cont
 } if (rf & 2) {
     const control_r10 = i0.ɵɵnextContext(3).control;
     i0.ɵɵnextContext();
-    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r13 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
 } }
 function DynamicFormComponent_ng_template_3_ng_container_0_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 21)(1, "p", 22);
     i0.ɵɵtext(2);
     i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_ng_container_0_ng_template_2_span_3_Template, 2, 0, "span", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "div", 23)(5, "input", 24);
+    i0.ɵɵelement(4, "div", 23);
+    i0.ɵɵelementStart(5, "input", 24);
+    i0.ɵɵlistener("ngModelChange", function DynamicFormComponent_ng_template_3_ng_container_0_ng_template_2_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r7 = i0.ɵɵnextContext(2); const field_r9 = ctx_r7.$implicit; const formgroup_r11 = ctx_r7.formGroup; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.updateSubDynamicFields(field_r9, formgroup_r11, $event)); });
+    i0.ɵɵelementEnd();
     i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_ng_container_0_ng_template_2_ng_container_6_Template, 1, 4, "ng-container", 25);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -131,10 +135,10 @@ function DynamicFormComponent_ng_template_3_ng_container_0_Template(rf, ctx) { i
     i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_ng_container_0_ng_container_1_Template, 2, 6, "ng-container", 20)(2, DynamicFormComponent_ng_template_3_ng_container_0_ng_template_2_Template, 7, 13, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const defaultInputTextNumber_r13 = i0.ɵɵreference(3);
+    const defaultInputTextNumber_r14 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customInputTextNumber)("ngIfElse", defaultInputTextNumber_r13);
+    i0.ɵɵproperty("ngIf", ctx_r5.customInputTextNumber)("ngIfElse", defaultInputTextNumber_r14);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_1_ng_container_1_ng_template_1_Template(rf, ctx) { }
 function DynamicFormComponent_ng_template_3_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
@@ -160,15 +164,19 @@ function DynamicFormComponent_ng_template_3_ng_container_1_ng_template_2_ng_cont
 } if (rf & 2) {
     const control_r10 = i0.ɵɵnextContext(3).control;
     i0.ɵɵnextContext();
-    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r13 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
 } }
 function DynamicFormComponent_ng_template_3_ng_container_1_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 21)(1, "p", 22);
     i0.ɵɵtext(2);
     i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_ng_container_1_ng_template_2_span_3_Template, 2, 0, "span", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "div", 23)(5, "textarea", 26);
+    i0.ɵɵelement(4, "div", 23);
+    i0.ɵɵelementStart(5, "textarea", 26);
+    i0.ɵɵlistener("ngModelChange", function DynamicFormComponent_ng_template_3_ng_container_1_ng_template_2_Template_textarea_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r7 = i0.ɵɵnextContext(2); const field_r9 = ctx_r7.$implicit; const formgroup_r11 = ctx_r7.formGroup; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.updateSubDynamicFields(field_r9, formgroup_r11, $event)); });
+    i0.ɵɵelementEnd();
     i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_ng_container_1_ng_template_2_ng_container_6_Template, 1, 4, "ng-container", 25);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -192,10 +200,10 @@ function DynamicFormComponent_ng_template_3_ng_container_1_Template(rf, ctx) { i
     i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_ng_container_1_ng_container_1_Template, 2, 6, "ng-container", 20)(2, DynamicFormComponent_ng_template_3_ng_container_1_ng_template_2_Template, 7, 11, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const defaultInputTextarea_r14 = i0.ɵɵreference(3);
+    const defaultInputTextarea_r16 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customInputTextarea)("ngIfElse", defaultInputTextarea_r14);
+    i0.ɵɵproperty("ngIf", ctx_r5.customInputTextarea)("ngIfElse", defaultInputTextarea_r16);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_2_ng_container_1_ng_template_1_Template(rf, ctx) { }
 function DynamicFormComponent_ng_template_3_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
@@ -217,9 +225,9 @@ function DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_s
     i0.ɵɵelementEnd();
 } }
 function DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_img_7_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
+    const _r18 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "img", 33);
-    i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_img_7_Template_img_click_0_listener() { i0.ɵɵrestoreView(_r16); i0.ɵɵnextContext(); const dp_r17 = i0.ɵɵreference(6); return i0.ɵɵresetView(dp_r17.click()); });
+    i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_img_7_Template_img_click_0_listener() { i0.ɵɵrestoreView(_r18); i0.ɵɵnextContext(); const dp_r19 = i0.ɵɵreference(6); return i0.ɵɵresetView(dp_r19.click()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext(5);
@@ -230,17 +238,17 @@ function DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_n
 } if (rf & 2) {
     const control_r10 = i0.ɵɵnextContext(4).control;
     i0.ɵɵnextContext();
-    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r13 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
 } }
 function DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
+    const _r17 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 28)(1, "p", 29);
     i0.ɵɵtext(2);
     i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_span_3_Template, 2, 0, "span", 19);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 30)(5, "input", 31, 5);
-    i0.ɵɵlistener("dateChange", function DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_Template_input_dateChange_5_listener($event) { i0.ɵɵrestoreView(_r15); const control_r10 = i0.ɵɵnextContext(3).control; return i0.ɵɵresetView(control_r10.setValue($event)); });
+    i0.ɵɵlistener("dateChange", function DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_Template_input_dateChange_5_listener($event) { i0.ɵɵrestoreView(_r17); const control_r10 = i0.ɵɵnextContext(3).control; return i0.ɵɵresetView(control_r10.setValue($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_img_7_Template, 1, 1, "img", 32);
     i0.ɵɵelementEnd();
@@ -275,10 +283,10 @@ function DynamicFormComponent_ng_template_3_ng_container_2_Template(rf, ctx) { i
     i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_ng_container_2_ng_container_1_Template, 2, 6, "ng-container", 20)(2, DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_Template, 1, 1, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const defaultInputDate_r18 = i0.ɵɵreference(3);
+    const defaultInputDate_r20 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customInputDate)("ngIfElse", defaultInputDate_r18);
+    i0.ɵɵproperty("ngIf", ctx_r5.customInputDate)("ngIfElse", defaultInputDate_r20);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_3_ng_container_1_ng_template_1_Template(rf, ctx) { }
 function DynamicFormComponent_ng_template_3_ng_container_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
@@ -304,17 +312,17 @@ function DynamicFormComponent_ng_template_3_ng_container_3_ng_template_2_ng_cont
 } if (rf & 2) {
     const control_r10 = i0.ɵɵnextContext(3).control;
     i0.ɵɵnextContext();
-    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r13 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
 } }
 function DynamicFormComponent_ng_template_3_ng_container_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
+    const _r21 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 28)(1, "p", 29);
     i0.ɵɵtext(2);
     i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_ng_container_3_ng_template_2_span_3_Template, 2, 0, "span", 19);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "mis-switch", 34);
-    i0.ɵɵlistener("valueChanged", function DynamicFormComponent_ng_template_3_ng_container_3_ng_template_2_Template_mis_switch_valueChanged_4_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r7 = i0.ɵɵnextContext(2); const field_r9 = ctx_r7.$implicit; const formgroup_r11 = ctx_r7.formGroup; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.updateSubDynamicFields(field_r9, formgroup_r11, $event)); });
+    i0.ɵɵlistener("valueChanged", function DynamicFormComponent_ng_template_3_ng_container_3_ng_template_2_Template_mis_switch_valueChanged_4_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r7 = i0.ɵɵnextContext(2); const field_r9 = ctx_r7.$implicit; const formgroup_r11 = ctx_r7.formGroup; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.updateSubDynamicFields(field_r9, formgroup_r11, $event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_ng_container_3_ng_template_2_ng_container_5_Template, 1, 4, "ng-container", 25);
     i0.ɵɵelementEnd();
@@ -339,10 +347,10 @@ function DynamicFormComponent_ng_template_3_ng_container_3_Template(rf, ctx) { i
     i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_ng_container_3_ng_container_1_Template, 2, 6, "ng-container", 20)(2, DynamicFormComponent_ng_template_3_ng_container_3_ng_template_2_Template, 6, 7, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const defaultBooleanToggle_r20 = i0.ɵɵreference(3);
+    const defaultBooleanToggle_r22 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customBooleanToggle)("ngIfElse", defaultBooleanToggle_r20);
+    i0.ɵɵproperty("ngIf", ctx_r5.customBooleanToggle)("ngIfElse", defaultBooleanToggle_r22);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_4_ng_container_1_ng_template_1_Template(rf, ctx) { }
 function DynamicFormComponent_ng_template_3_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
@@ -364,9 +372,9 @@ function DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_span_3_
     i0.ɵɵelementEnd();
 } }
 function DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_img_6_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
+    const _r24 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "img", 38);
-    i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_img_6_Template_img_click_0_listener() { i0.ɵɵrestoreView(_r22); const field_r9 = i0.ɵɵnextContext(3).$implicit; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.fieldRemoved.emit(field_r9)); });
+    i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_img_6_Template_img_click_0_listener() { i0.ɵɵrestoreView(_r24); const field_r9 = i0.ɵɵnextContext(3).$implicit; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.fieldRemoved.emit(field_r9)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext(4);
@@ -377,17 +385,17 @@ function DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_ng_cont
 } if (rf & 2) {
     const control_r10 = i0.ɵɵnextContext(3).control;
     i0.ɵɵnextContext();
-    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r13 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
 } }
 function DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
+    const _r23 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 28)(1, "p", 29);
     i0.ɵɵtext(2);
     i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_span_3_Template, 2, 0, "span", 19);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 35)(5, "mis-dropdown", 36);
-    i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_Template_mis_dropdown_onChange_5_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r7 = i0.ɵɵnextContext(2); const field_r9 = ctx_r7.$implicit; const control_r10 = ctx_r7.control; const formgroup_r11 = ctx_r7.formGroup; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.updateSelectedValueForSingleSelect(field_r9, control_r10, formgroup_r11, $event)); });
+    i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_Template_mis_dropdown_onChange_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r7 = i0.ɵɵnextContext(2); const field_r9 = ctx_r7.$implicit; const control_r10 = ctx_r7.control; const formgroup_r11 = ctx_r7.formGroup; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.updateSelectedValueForSingleSelect(field_r9, control_r10, formgroup_r11, $event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_img_6_Template, 1, 1, "img", 37);
     i0.ɵɵelementEnd();
@@ -418,10 +426,10 @@ function DynamicFormComponent_ng_template_3_ng_container_4_Template(rf, ctx) { i
     i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_ng_container_4_ng_container_1_Template, 2, 6, "ng-container", 20)(2, DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_Template, 8, 14, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const defaultSingleSelectDropdown_r23 = i0.ɵɵreference(3);
+    const defaultSingleSelectDropdown_r25 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customSingleSelectDropdown)("ngIfElse", defaultSingleSelectDropdown_r23);
+    i0.ɵɵproperty("ngIf", ctx_r5.customSingleSelectDropdown)("ngIfElse", defaultSingleSelectDropdown_r25);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_5_ng_container_1_ng_template_1_Template(rf, ctx) { }
 function DynamicFormComponent_ng_template_3_ng_container_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
@@ -449,30 +457,30 @@ function DynamicFormComponent_ng_template_3_ng_container_5_ng_template_2_div_6_i
     i0.ɵɵproperty("src", ctx_r5.activeBtnIconUrl(), i0.ɵɵsanitizeUrl);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_5_ng_template_2_div_6_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
+    const _r26 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_ng_container_5_ng_template_2_div_6_Template_div_click_0_listener() { const item_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r7 = i0.ɵɵnextContext(3); const field_r9 = ctx_r7.$implicit; const control_r10 = ctx_r7.control; const formgroup_r11 = ctx_r7.formGroup; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.updateSelectedValueForSingleSelect(field_r9, control_r10, formgroup_r11, item_r25)); });
+    i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_ng_container_5_ng_template_2_div_6_Template_div_click_0_listener() { const item_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r7 = i0.ɵɵnextContext(3); const field_r9 = ctx_r7.$implicit; const control_r10 = ctx_r7.control; const formgroup_r11 = ctx_r7.formGroup; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.updateSelectedValueForSingleSelect(field_r9, control_r10, formgroup_r11, item_r27)); });
     i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_ng_container_5_ng_template_2_div_6_img_1_Template, 1, 1, "img", 42);
     i0.ɵɵelementStart(2, "p", 29);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r25 = ctx.$implicit;
+    const item_r27 = ctx.$implicit;
     const control_r10 = i0.ɵɵnextContext(3).control;
     const ctx_r5 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c15, item_r25.label === (control_r10.value == null ? null : control_r10.value.label)));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c15, item_r27.label === (control_r10.value == null ? null : control_r10.value.label)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r25.label === (control_r10.value == null ? null : control_r10.value.label) && ctx_r5.activeBtnIconUrl());
+    i0.ɵɵproperty("ngIf", item_r27.label === (control_r10.value == null ? null : control_r10.value.label) && ctx_r5.activeBtnIconUrl());
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r25.label);
+    i0.ɵɵtextInterpolate(item_r27.label);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_5_ng_template_2_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 15);
 } if (rf & 2) {
     const control_r10 = i0.ɵɵnextContext(3).control;
     i0.ɵɵnextContext();
-    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r13 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
 } }
 function DynamicFormComponent_ng_template_3_ng_container_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 21)(1, "p", 22);
@@ -506,10 +514,10 @@ function DynamicFormComponent_ng_template_3_ng_container_5_Template(rf, ctx) { i
     i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_ng_container_5_ng_container_1_Template, 2, 6, "ng-container", 20)(2, DynamicFormComponent_ng_template_3_ng_container_5_ng_template_2_Template, 8, 7, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const defaultSingleSelectRadio_r26 = i0.ɵɵreference(3);
+    const defaultSingleSelectRadio_r28 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customSingleSelectRadio)("ngIfElse", defaultSingleSelectRadio_r26);
+    i0.ɵɵproperty("ngIf", ctx_r5.customSingleSelectRadio)("ngIfElse", defaultSingleSelectRadio_r28);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_6_ng_container_1_ng_template_1_Template(rf, ctx) { }
 function DynamicFormComponent_ng_template_3_ng_container_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
@@ -537,30 +545,30 @@ function DynamicFormComponent_ng_template_3_ng_container_6_ng_template_2_div_6_i
     i0.ɵɵproperty("src", ctx_r5.activeBtnIconUrl(), i0.ɵɵsanitizeUrl);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_6_ng_template_2_div_6_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
+    const _r29 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_ng_container_6_ng_template_2_div_6_Template_div_click_0_listener() { const item_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r7 = i0.ɵɵnextContext(3); const field_r9 = ctx_r7.$implicit; const control_r10 = ctx_r7.control; const formgroup_r11 = ctx_r7.formGroup; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.updateSelectedValueForMultiSelect(field_r9, control_r10, formgroup_r11, [item_r28])); });
+    i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_ng_container_6_ng_template_2_div_6_Template_div_click_0_listener() { const item_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r7 = i0.ɵɵnextContext(3); const field_r9 = ctx_r7.$implicit; const control_r10 = ctx_r7.control; const formgroup_r11 = ctx_r7.formGroup; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.updateSelectedValueForMultiSelect(field_r9, control_r10, formgroup_r11, [item_r30])); });
     i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_ng_container_6_ng_template_2_div_6_img_1_Template, 1, 1, "img", 42);
     i0.ɵɵelementStart(2, "p", 29);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r28 = ctx.$implicit;
+    const item_r30 = ctx.$implicit;
     const control_r10 = i0.ɵɵnextContext(3).control;
     const ctx_r5 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c15, ctx_r5.isCheckBoxSelected(item_r28.label, control_r10.value)));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c15, ctx_r5.isCheckBoxSelected(item_r30.label, control_r10.value)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.isCheckBoxSelected(item_r28.label, control_r10.value) && ctx_r5.activeBtnIconUrl());
+    i0.ɵɵproperty("ngIf", ctx_r5.isCheckBoxSelected(item_r30.label, control_r10.value) && ctx_r5.activeBtnIconUrl());
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r28.label);
+    i0.ɵɵtextInterpolate(item_r30.label);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_6_ng_template_2_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 15);
 } if (rf & 2) {
     const control_r10 = i0.ɵɵnextContext(3).control;
     i0.ɵɵnextContext();
-    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r13 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
 } }
 function DynamicFormComponent_ng_template_3_ng_container_6_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 21)(1, "p", 22);
@@ -594,10 +602,10 @@ function DynamicFormComponent_ng_template_3_ng_container_6_Template(rf, ctx) { i
     i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_ng_container_6_ng_container_1_Template, 2, 6, "ng-container", 20)(2, DynamicFormComponent_ng_template_3_ng_container_6_ng_template_2_Template, 8, 7, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const defaultMultiSelectCheckbox_r29 = i0.ɵɵreference(3);
+    const defaultMultiSelectCheckbox_r31 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customMultiSelectCheckbox)("ngIfElse", defaultMultiSelectCheckbox_r29);
+    i0.ɵɵproperty("ngIf", ctx_r5.customMultiSelectCheckbox)("ngIfElse", defaultMultiSelectCheckbox_r31);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_7_ng_container_1_ng_template_1_Template(rf, ctx) { }
 function DynamicFormComponent_ng_template_3_ng_container_7_ng_container_1_Template(rf, ctx) { if (rf & 1) {
@@ -623,17 +631,17 @@ function DynamicFormComponent_ng_template_3_ng_container_7_ng_template_2_ng_cont
 } if (rf & 2) {
     const control_r10 = i0.ɵɵnextContext(3).control;
     i0.ɵɵnextContext();
-    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r13 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
 } }
 function DynamicFormComponent_ng_template_3_ng_container_7_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
+    const _r32 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 28)(1, "p", 29);
     i0.ɵɵtext(2);
     i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_ng_container_7_ng_template_2_span_3_Template, 2, 0, "span", 19);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "mis-multi-select-dropdown", 44);
-    i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_ng_container_7_ng_template_2_Template_mis_multi_select_dropdown_onChange_4_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r7 = i0.ɵɵnextContext(2); const field_r9 = ctx_r7.$implicit; const control_r10 = ctx_r7.control; const formgroup_r11 = ctx_r7.formGroup; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.updateSelectedValueForMultiSelect(field_r9, control_r10, formgroup_r11, $event)); });
+    i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_ng_container_7_ng_template_2_Template_mis_multi_select_dropdown_onChange_4_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r7 = i0.ɵɵnextContext(2); const field_r9 = ctx_r7.$implicit; const control_r10 = ctx_r7.control; const formgroup_r11 = ctx_r7.formGroup; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.updateSelectedValueForMultiSelect(field_r9, control_r10, formgroup_r11, $event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_ng_container_7_ng_template_2_ng_container_5_Template, 1, 4, "ng-container", 25);
     i0.ɵɵelementEnd();
@@ -658,10 +666,10 @@ function DynamicFormComponent_ng_template_3_ng_container_7_Template(rf, ctx) { i
     i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_ng_container_7_ng_container_1_Template, 2, 6, "ng-container", 20)(2, DynamicFormComponent_ng_template_3_ng_container_7_ng_template_2_Template, 6, 13, "ng-template", null, 10, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const defaultMultiSelectDropdown_r31 = i0.ɵɵreference(3);
+    const defaultMultiSelectDropdown_r33 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customMultiSelectDropdown)("ngIfElse", defaultMultiSelectDropdown_r31);
+    i0.ɵɵproperty("ngIf", ctx_r5.customMultiSelectDropdown)("ngIfElse", defaultMultiSelectDropdown_r33);
 } }
 function DynamicFormComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_ng_container_0_Template, 4, 2, "ng-container", 19)(1, DynamicFormComponent_ng_template_3_ng_container_1_Template, 4, 2, "ng-container", 19)(2, DynamicFormComponent_ng_template_3_ng_container_2_Template, 4, 2, "ng-container", 19)(3, DynamicFormComponent_ng_template_3_ng_container_3_Template, 4, 2, "ng-container", 19)(4, DynamicFormComponent_ng_template_3_ng_container_4_Template, 4, 2, "ng-container", 19)(5, DynamicFormComponent_ng_template_3_ng_container_5_Template, 4, 2, "ng-container", 19)(6, DynamicFormComponent_ng_template_3_ng_container_6_Template, 4, 2, "ng-container", 19)(7, DynamicFormComponent_ng_template_3_ng_container_7_Template, 4, 2, "ng-container", 19);
@@ -691,9 +699,9 @@ function DynamicFormComponent_ng_template_5_ng_container_1_Template(rf, ctx) { i
     i0.ɵɵelement(3, "div", 47);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const error_r32 = ctx.$implicit;
+    const error_r34 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r32.value, " ");
+    i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r34.value, " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(2, _c16));
 } }
@@ -703,9 +711,9 @@ function DynamicFormComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵpipe(2, "keyvalue");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const errors_r33 = ctx.$implicit;
+    const errors_r35 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r33));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r35));
 } }
 dayjs.extend(timezone);
 dayjs.extend(customParseFormat);
@@ -714,6 +722,7 @@ class DynamicFormComponent {
     get formFieldsArray() {
         return this.formFields();
     }
+    // dynamic-form.component.ts (in constructor)
     constructor() {
         /**
          * formFields:  Dynamic fields recieved from the API metadata to build a dynamic form
@@ -747,50 +756,25 @@ class DynamicFormComponent {
         this.dynamicFormSignal = signal(null);
         this.dynamicFormAPISignal = signal(null);
         this.valueChangesSubscriptionSignal = signal(null);
-        this.previousFormFields = null;
-        this.isInternalUpdate = false; // Flag to prevent regeneration during internal updates
         // Computed properties for template access
         this.dynamicForm = computed(() => this.dynamicFormSignal());
         this.dynamicFormAPI = computed(() => this.dynamicFormAPISignal());
         this.valueChangesSubscription$ = computed(() => this.valueChangesSubscriptionSignal());
-        /**
-         * Handles subfield updates when parent field values change
-         * This is called from the form valueChanges subscription
-         * Uses a debounce mechanism to prevent excessive updates
-         */
-        this.subFieldUpdateTimeout = null;
-        this.previousFieldValues = new Map();
-        // Watch for changes in formFields (structure changes) - regenerate form
+        // Watch for changes in **form structure/metadata (formFields)** and update the form accordingly
         effect(() => {
             const formFields = this.formFields();
-            // Check if formFields structure actually changed
-            const fieldsChanged = !this.previousFormFields ||
-                this.previousFormFields.length !== formFields.length ||
-                JSON.stringify(this.previousFormFields) !== JSON.stringify(formFields);
-            if (formFields && fieldsChanged) {
-                this.previousFormFields = JSON.parse(JSON.stringify(formFields)); // Deep copy
+            // Use untracked to access formValues so that this effect only runs when formFields changes,
+            // not when the formValues output (which feeds back as an input) changes.
+            untracked(() => {
                 const formValues = this.formValues();
-                // Use untracked to prevent infinite loops when setting signals
-                untracked(() => {
+                // Only update if we have form fields
+                if (formFields) {
                     const form = this.generateDynamicForm(formFields, formValues);
                     this.dynamicFormSignal.set(form);
-                    // Initialize previous field values map
-                    this.previousFieldValues.clear();
-                    const formArray = form.get('dynamicFields');
-                    if (formArray) {
-                        formArray.controls.forEach((fieldGroup, index) => {
-                            const control = fieldGroup.get('value');
-                            if (control) {
-                                this.previousFieldValues.set(index, JSON.parse(JSON.stringify(control.value)));
-                            }
-                        });
-                    }
                     // Re-subscribe to form changes
                     this.valueChangesSubscriptionSignal()?.unsubscribe();
                     this.valueChangesSubscriptionSignal.set(form.valueChanges.subscribe(formValue => {
                         this.onFormValueChanges();
-                        // Handle subfield updates when parent field values change
-                        this.handleSubFieldUpdates(form);
                     }));
                     // Emit form validity status
                     this.formValid.emit(form.valid);
@@ -800,60 +784,10 @@ class DynamicFormComponent {
                             return this.generateDynamicFieldsValueObject(form.value.dynamicFields);
                         }
                     });
-                });
-            }
-        });
-        // Watch for changes in formValues (data changes) - patch existing form values
-        effect(() => {
-            const formValues = this.formValues();
-            const currentForm = this.dynamicFormSignal();
-            // Only patch if form exists and this is not an internal update
-            if (!currentForm || this.isInternalUpdate || !formValues) {
-                return;
-            }
-            // CRITICAL: Don't patch if user is actively typing in any input field
-            // This prevents focus loss when user is typing
-            const activeElement = document.activeElement;
-            const isUserTyping = activeElement &&
-                (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') &&
-                activeElement.closest('form[formGroup]') !== null;
-            if (isUserTyping) {
-                // User is actively typing - skip patching to prevent focus loss
-                return;
-            }
-            untracked(() => {
-                this.patchFormValues(currentForm, formValues);
-            });
-        });
-    }
-    /**
-     * Patches form values without regenerating the form structure
-     * This prevents focus loss when only values change
-     */
-    patchFormValues(form, formValues) {
-        const formArray = form.get('dynamicFields');
-        if (!formArray)
-            return;
-        const fields = this.formFields();
-        formArray.controls.forEach((fieldGroup, index) => {
-            const field = fields[index];
-            if (!field)
-                return;
-            const fieldValue = formValues[field.configName];
-            if (fieldValue !== undefined) {
-                const control = fieldGroup.get('value');
-                if (control) {
-                    const mappedValue = this.mapFormValueToFormField(field, fieldValue).value;
-                    // Only update if value actually changed to prevent unnecessary updates
-                    if (JSON.stringify(control.value) !== JSON.stringify(mappedValue)) {
-                        control.setValue(mappedValue, { emitEvent: false });
-                    }
+                    // Also, emit the initial or updated values right after generating the form
+                    this.onFormValueChanges();
                 }
-                // Handle subFields if they exist
-                if (fieldValue?.subFields && field.subFields?.length > 0) {
-                    this.updateSubDynamicFields(field, fieldGroup, control?.value);
-                }
-            }
+            });
         });
     }
     ngOnInit() {
@@ -875,21 +809,8 @@ class DynamicFormComponent {
         // Subscribing to form changes and emiting values.
         const currentForm = this.dynamicFormSignal();
         if (currentForm) {
-            // Initialize previous field values map
-            this.previousFieldValues.clear();
-            const formArray = currentForm.get('dynamicFields');
-            if (formArray) {
-                formArray.controls.forEach((fieldGroup, index) => {
-                    const control = fieldGroup.get('value');
-                    if (control) {
-                        this.previousFieldValues.set(index, JSON.parse(JSON.stringify(control.value)));
-                    }
-                });
-            }
             this.valueChangesSubscriptionSignal.set(currentForm.valueChanges.subscribe(formValue => {
                 this.onFormValueChanges();
-                // Handle subfield updates when parent field values change
-                this.handleSubFieldUpdates(currentForm);
             }));
         }
         //api to expose functions
@@ -903,21 +824,12 @@ class DynamicFormComponent {
     }
     ngOnDestroy() {
         this.valueChangesSubscription$()?.unsubscribe();
-        if (this.subFieldUpdateTimeout) {
-            clearTimeout(this.subFieldUpdateTimeout);
-        }
     }
     onFormValueChanges() {
-        // Set flag to prevent formValues effect from triggering during internal updates
-        this.isInternalUpdate = true;
         let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm().value.dynamicFields);
         this.formValid.emit(this.dynamicForm().valid);
         this.formUpdated.emit(formValues);
         console.log(formValues);
-        // Reset flag after a microtask to allow external updates
-        Promise.resolve().then(() => {
-            this.isInternalUpdate = false;
-        });
     }
     generateDynamicFieldsValueObject(formValues) {
         let dynamicFieldsValue = {};
@@ -966,63 +878,11 @@ class DynamicFormComponent {
     getDynamicFieldsControls() {
         return this.dynamicForm().get("dynamicFields");
     }
-    handleSubFieldUpdates(form) {
-        // CRITICAL: Don't update subfields if user is actively typing
-        // This prevents focus loss when user is typing in any field
-        const activeElement = document.activeElement;
-        const isUserTyping = activeElement &&
-            (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') &&
-            activeElement.closest('form[formGroup]') !== null;
-        if (isUserTyping) {
-            // User is actively typing - skip subfield updates to prevent focus loss
-            return;
-        }
-        // Clear any pending updates
-        if (this.subFieldUpdateTimeout) {
-            clearTimeout(this.subFieldUpdateTimeout);
-        }
-        // Debounce subfield updates to prevent excessive calls
-        this.subFieldUpdateTimeout = setTimeout(() => {
-            // Check again after debounce - user might still be typing
-            const activeElementAfterDebounce = document.activeElement;
-            const stillTyping = activeElementAfterDebounce &&
-                (activeElementAfterDebounce.tagName === 'INPUT' || activeElementAfterDebounce.tagName === 'TEXTAREA') &&
-                activeElementAfterDebounce.closest('form[formGroup]') !== null;
-            if (stillTyping) {
-                return;
-            }
-            const formArray = form.get('dynamicFields');
-            if (!formArray)
-                return;
-            const fields = this.formFields();
-            formArray.controls.forEach((fieldGroup, index) => {
-                const field = fields[index];
-                if (!field || !field.subFields?.length)
-                    return;
-                const control = fieldGroup.get('value');
-                if (control) {
-                    const currentValue = control.value;
-                    const previousValue = this.previousFieldValues.get(index);
-                    // Only update subfields if parent field value actually changed
-                    if (JSON.stringify(currentValue) !== JSON.stringify(previousValue)) {
-                        this.previousFieldValues.set(index, JSON.parse(JSON.stringify(currentValue)));
-                        this.updateSubDynamicFields(field, fieldGroup, currentValue);
-                    }
-                }
-            });
-        }, 100); // Small debounce to batch updates
-    }
     updateSubDynamicFields(field, formGroup, value) {
         if (field.subFields?.length > 0) {
-            // Set flag to prevent form regeneration during subfield updates
-            this.isInternalUpdate = true;
             let subFieldsControls = this.generateSubDynamicFields(this.formValues(), field, value);
             formGroup.removeControl('subFields');
             formGroup.addControl('subFields', subFieldsControls);
-            // Reset flag after update
-            Promise.resolve().then(() => {
-                this.isInternalUpdate = false;
-            });
         }
     }
     updateSelectedValueForSingleSelect(field, control, formGroup, value) {
@@ -1090,21 +950,26 @@ class DynamicFormComponent {
     mapFormValueToFormField(formField, formValue) {
         let validators = formField.validators ? [dynamicFieldValidator(formField.validators)] : [];
         let control = new UntypedFormControl(null, validators);
+        /**
+         * Extract actual value if formValue has nested structure (for fields with subFields)
+         * Format: { value: "actualValue", subFields: {...} }
+         */
+        const actualValue = formValue?.value !== undefined ? formValue.value : formValue;
         if (formField.fieldType === "input") {
             if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
-                control.setValue(formValue ? formValue : "");
+                control.setValue(actualValue ? actualValue : "");
             else if (formField.fieldInputType === "number")
-                control.setValue(formValue ? formValue : 0);
+                control.setValue(actualValue ? actualValue : 0);
             else if (formField.fieldInputType === "date") {
-                if (formValue && typeof formValue === "number") {
+                if (actualValue && typeof actualValue === "number") {
                     const timezone = (formField.fieldConfig && formField.fieldConfig.timezone) || 'Asia/Kolkata';
                     const format = (formField.fieldConfig && formField.fieldConfig.format) || 'DD/MM/YYYY';
-                    control.setValue(dayjs(formValue).tz(timezone).format(format));
+                    control.setValue(dayjs(actualValue).tz(timezone).format(format));
                 }
-                else if (formValue && typeof formValue === "string") {
+                else if (actualValue && typeof actualValue === "string") {
                     const timezone = (formField.fieldConfig && formField.fieldConfig.timezone) || 'Asia/Kolkata';
                     const format = (formField.fieldConfig && formField.fieldConfig.format) || 'DD/MM/YYYY';
-                    control.setValue(dayjs.tz(formValue, format, timezone).format(format));
+                    control.setValue(dayjs.tz(actualValue, format, timezone).format(format));
                 }
                 else {
                     const timezone = (formField.fieldConfig && formField.fieldConfig.timezone) || 'Asia/Kolkata';
@@ -1115,11 +980,11 @@ class DynamicFormComponent {
         }
         else if (formField.fieldType === "singleSelect") {
             const findSelectedValue = () => {
-                let index = formField.itemsList.findIndex(item => item.value === formValue);
+                let index = formField.itemsList.findIndex(item => item.value === actualValue);
                 return index >= 0 ? formField.itemsList[index] : "";
             };
             if (formField.fieldInputType === "dropdown") {
-                if (!formValue)
+                if (!actualValue)
                     control.setValue(formField.itemsList[0]);
                 else
                     control.setValue(findSelectedValue());
@@ -1129,9 +994,9 @@ class DynamicFormComponent {
             }
         }
         else if (formField.fieldType === "multiSelect") {
-            if (formValue && Array.isArray(formValue)) {
+            if (actualValue && Array.isArray(actualValue)) {
                 let selectedValues = [];
-                for (let value of formValue) {
+                for (let value of actualValue) {
                     let index = formField.itemsList.findIndex(item => item.value === value);
                     if (index > -1)
                         selectedValues.push({ ...formField.itemsList[index] });
@@ -1143,7 +1008,7 @@ class DynamicFormComponent {
             }
         }
         else if (formField.fieldType === "boolean") {
-            control.setValue(!!formValue);
+            control.setValue(!!actualValue);
         }
         else
             control.setValue(null);
@@ -1193,7 +1058,7 @@ class DynamicFormComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.customSingleSelectRadio = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.customMultiSelectCheckbox = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.customMultiSelectDropdown = _t.first);
-        } }, inputs: { formFields: [1, "formFields"], formValues: [1, "formValues"], activeBtnIconUrl: [1, "activeBtnIconUrl"], calendarIconUrl: [1, "calendarIconUrl"], removeIconUrl: [1, "removeIconUrl"], removeSepratorForSubFields: [1, "removeSepratorForSubFields"] }, outputs: { formUpdated: "formUpdated", formValid: "formValid", formInitialized: "formInitialized", fieldRemoved: "fieldRemoved" }, decls: 7, vars: 2, consts: [["dynamicField", ""], ["dynamicFieldErrors", ""], ["defaultInputTextNumber", ""], ["defaultInputTextarea", ""], ["defaultInputDate", ""], ["dp", ""], ["defaultBooleanToggle", ""], ["defaultSingleSelectDropdown", ""], ["defaultSingleSelectRadio", ""], ["defaultMultiSelectCheckbox", ""], ["defaultMultiSelectDropdown", ""], [3, "formGroup"], ["formArrayName", "dynamicFields"], [3, "formGroupName", 4, "ngFor", "ngForOf"], [3, "formGroupName"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "sub-dynamic-form", 4, "ngIf"], [1, "sub-dynamic-form"], [4, "ngFor", "ngForOf"], [4, "ngIf"], [4, "ngIf", "ngIfElse"], [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"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["type", "text", 1, "input-field", "ip-textarea", 3, "ngStyle", "placeholder", "formControl"], ["class", "dynamic-field single-line-field-container", 3, "ngStyle", 4, "ngIf"], [1, "dynamic-field", "single-line-field-container", 3, "ngStyle"], [1, "h6"], [1, "date-picker-container"], ["readonly", "", "misTzDp", "", 1, "date-picker", 3, "dateChange", "dpConfig", "selectedDate", "offsetY", "value"], ["alt", "data-picker", "class", "date-picker-icon", 3, "src", "click", 4, "ngIf"], ["alt", "data-picker", 1, "date-picker-icon", 3, "click", "src"], [3, "valueChanged", "control"], [3, "ngClass"], [3, "onChange", "searchEnabled", "width", "data", "selectedItem"], ["class", "remove-icon", 3, "src", "click", 4, "ngIf"], [1, "remove-icon", 3, "click", "src"], ["id", "checkboxes-container"], ["class", "radio-checkbox-common", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "radio-checkbox-common", 3, "click", "ngClass"], ["alt", "", 3, "src", 4, "ngIf"], ["alt", "", 3, "src"], [3, "onChange", "width", "showSelectedCount", "dropdownListWidth", "searchEnabled", "hideApplyButton", "data", "selectedItems"], ["id", "error-messages-container"], [1, "h8"], [3, "ngStyle"]], template: function DynamicFormComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { formFields: [1, "formFields"], formValues: [1, "formValues"], activeBtnIconUrl: [1, "activeBtnIconUrl"], calendarIconUrl: [1, "calendarIconUrl"], removeIconUrl: [1, "removeIconUrl"], removeSepratorForSubFields: [1, "removeSepratorForSubFields"] }, outputs: { formUpdated: "formUpdated", formValid: "formValid", formInitialized: "formInitialized", fieldRemoved: "fieldRemoved" }, decls: 7, vars: 2, consts: [["dynamicField", ""], ["dynamicFieldErrors", ""], ["defaultInputTextNumber", ""], ["defaultInputTextarea", ""], ["defaultInputDate", ""], ["dp", ""], ["defaultBooleanToggle", ""], ["defaultSingleSelectDropdown", ""], ["defaultSingleSelectRadio", ""], ["defaultMultiSelectCheckbox", ""], ["defaultMultiSelectDropdown", ""], [3, "formGroup"], ["formArrayName", "dynamicFields"], [3, "formGroupName", 4, "ngFor", "ngForOf"], [3, "formGroupName"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "sub-dynamic-form", 4, "ngIf"], [1, "sub-dynamic-form"], [4, "ngFor", "ngForOf"], [4, "ngIf"], [4, "ngIf", "ngIfElse"], [1, "dynamic-field", "multi-line-field-container", 3, "ngStyle"], [1, "h7", "field-title-sm"], [2, "flex-basis", "100%"], [1, "input-field", "ip-text", 3, "ngModelChange", "type", "formControl", "ngStyle", "placeholder", "min"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["type", "text", 1, "input-field", "ip-textarea", 3, "ngModelChange", "ngStyle", "placeholder", "formControl"], ["class", "dynamic-field single-line-field-container", 3, "ngStyle", 4, "ngIf"], [1, "dynamic-field", "single-line-field-container", 3, "ngStyle"], [1, "h6"], [1, "date-picker-container"], ["readonly", "", "misTzDp", "", 1, "date-picker", 3, "dateChange", "dpConfig", "selectedDate", "offsetY", "value"], ["alt", "data-picker", "class", "date-picker-icon", 3, "src", "click", 4, "ngIf"], ["alt", "data-picker", 1, "date-picker-icon", 3, "click", "src"], [3, "valueChanged", "control"], [3, "ngClass"], [3, "onChange", "searchEnabled", "width", "data", "selectedItem"], ["class", "remove-icon", 3, "src", "click", 4, "ngIf"], [1, "remove-icon", 3, "click", "src"], ["id", "checkboxes-container"], ["class", "radio-checkbox-common", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "radio-checkbox-common", 3, "click", "ngClass"], ["alt", "", 3, "src", 4, "ngIf"], ["alt", "", 3, "src"], [3, "onChange", "width", "showSelectedCount", "dropdownListWidth", "searchEnabled", "hideApplyButton", "data", "selectedItems"], ["id", "error-messages-container"], [1, "h8"], [3, "ngStyle"]], template: function DynamicFormComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "form", 11);
             i0.ɵɵelementContainerStart(1, 12);
             i0.ɵɵtemplate(2, DynamicFormComponent_ng_container_2_Template, 3, 8, "ng-container", 13);
@@ -1208,7 +1073,7 @@ class DynamicFormComponent {
 }
 (() => { (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: formFieldsArray?.[i],\n          formGroup: fieldControl,\n          control: fieldControl.controls.value\n        }\"\n      >\n      </ng-container>\n      <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl?.value && (!!formFieldsArray?.[i]?.subFields && formFieldsArray?.[i]?.subFields?.length > 0 && matchParentConfig(formFieldsArray?.[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(formFieldsArray?.[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  <ng-container *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n    <ng-container *ngIf=\"customInputTextNumber; else defaultInputTextNumber\">\n      <ng-template\n        [ngTemplateOutlet]=\"customInputTextNumber\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultInputTextNumber>\n      <div class=\"dynamic-field multi-line-field-container\"\n        [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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          [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    </ng-template>\n  </ng-container>\n  \n  <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n  <ng-container *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n    <ng-container *ngIf=\"customInputTextarea; else defaultInputTextarea\">\n      <ng-template\n      [ngTemplateOutlet]=\"customInputTextarea\"\n      [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n    ></ng-template>\n    </ng-container>\n    <ng-template #defaultInputTextarea>\n      <div class=\"dynamic-field multi-line-field-container\"\n      [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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\"></textarea>\n          <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n            [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n          </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n  \n  <!-- fieldType: 'input' fieldInputType: 'date' -->\n  <ng-container *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n    <ng-container *ngIf=\"customInputDate; else defaultInputDate\">\n      <ng-template\n        [ngTemplateOutlet]=\"customInputDate\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultInputDate>\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    </ng-template>\n  </ng-container>\n\n  <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n  <ng-container *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n    <ng-container *ngIf=\"customBooleanToggle; else defaultBooleanToggle\">\n      <ng-template\n        [ngTemplateOutlet]=\"customBooleanToggle\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultBooleanToggle>\n      <div class=\"dynamic-field single-line-field-container\"\n      [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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    </ng-template>\n  </ng-container>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n  <ng-container *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n    <ng-container *ngIf=\"customSingleSelectDropdown; else defaultSingleSelectDropdown\">\n      <ng-template\n        [ngTemplateOutlet]=\"customSingleSelectDropdown\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultSingleSelectDropdown>\n      <div class=\"dynamic-field single-line-field-container\"\n        [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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    </ng-template>\n  </ng-container >\n  \n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n  <ng-container *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n    <ng-container *ngIf=\"customSingleSelectRadio; else defaultSingleSelectRadio\">\n      <ng-template\n        [ngTemplateOutlet]=\"customSingleSelectRadio\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultSingleSelectRadio>\n      <div class=\"dynamic-field multi-line-field-container\"\n      [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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    </ng-template>\n  </ng-container>\n  \n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n  <ng-container *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n    <ng-container *ngIf=\"customMultiSelectCheckbox; else defaultMultiSelectCheckbox\">\n      <ng-template\n        [ngTemplateOutlet]=\"customMultiSelectCheckbox\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultMultiSelectCheckbox>\n      <div class=\"dynamic-field multi-line-field-container\"\n      [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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    </ng-template>\n  </ng-container>\n\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n  <ng-container *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n    <ng-container *ngIf=\"customMultiSelectDropdown; else defaultMultiSelectDropdown\">\n      <ng-template\n        [ngTemplateOutlet]=\"customMultiSelectDropdown\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultMultiSelectDropdown>\n      <div class=\"dynamic-field single-line-field-container\"\n      [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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    </ng-template>\n  </ng-container>\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 [ngStyle]=\"{ 'flex-basis': '100%', 'height': '0' }\"></div>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}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(--border-primary, #E0E0E0)}.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(--border-primary, #E0E0E0)}.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(--border-primary, #E0E0E0)}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--bg-secondary, #FAFAFA);border:1px solid var(--border-primary, #E0E0E0);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(--border-primary, #E0E0E0)}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(--border-primary, #E0E0E0);inset:10px auto auto 80px;background-color:var(--bg-primary, #FFFFFF)}.date-picker-container .date-picker:hover{background-color:var(--brand-primary-hover, #F0F3FA)}.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(--bg-primary, #FFFFFF);padding:12px 16px;border:1px solid var(--text-secondary, #6A737D);border-radius:8px}.radio-checkbox-common p{color:var(--text-secondary, #6A737D);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--brand-primary, #0937B2)}.checkbox-active p{color:var(--bg-primary, #FFFFFF)}#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(--brand-error, #B00020)}.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(--brand-error, #B00020)}\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: formFieldsArray?.[i],\n          formGroup: fieldControl,\n          control: fieldControl.controls.value\n        }\"\n      >\n      </ng-container>\n      <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl?.value && (!!formFieldsArray?.[i]?.subFields && formFieldsArray?.[i]?.subFields?.length > 0 && matchParentConfig(formFieldsArray?.[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(formFieldsArray?.[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  <ng-container *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n    <ng-container *ngIf=\"customInputTextNumber; else defaultInputTextNumber\">\n      <ng-template\n        [ngTemplateOutlet]=\"customInputTextNumber\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultInputTextNumber>\n      <div class=\"dynamic-field multi-line-field-container\"\n        [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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    </ng-template>\n  </ng-container>\n  \n  <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n  <ng-container *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n    <ng-container *ngIf=\"customInputTextarea; else defaultInputTextarea\">\n      <ng-template\n      [ngTemplateOutlet]=\"customInputTextarea\"\n      [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n    ></ng-template>\n    </ng-container>\n    <ng-template #defaultInputTextarea>\n      <div class=\"dynamic-field multi-line-field-container\"\n      [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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    </ng-template>\n  </ng-container>\n  \n  <!-- fieldType: 'input' fieldInputType: 'date' -->\n  <ng-container *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n    <ng-container *ngIf=\"customInputDate; else defaultInputDate\">\n      <ng-template\n        [ngTemplateOutlet]=\"customInputDate\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultInputDate>\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    </ng-template>\n  </ng-container>\n\n  <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n  <ng-container *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n    <ng-container *ngIf=\"customBooleanToggle; else defaultBooleanToggle\">\n      <ng-template\n        [ngTemplateOutlet]=\"customBooleanToggle\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultBooleanToggle>\n      <div class=\"dynamic-field single-line-field-container\"\n      [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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    </ng-template>\n  </ng-container>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n  <ng-container *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n    <ng-container *ngIf=\"customSingleSelectDropdown; else defaultSingleSelectDropdown\">\n      <ng-template\n        [ngTemplateOutlet]=\"customSingleSelectDropdown\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultSingleSelectDropdown>\n      <div class=\"dynamic-field single-line-field-container\"\n        [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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    </ng-template>\n  </ng-container >\n  \n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n  <ng-container *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n    <ng-container *ngIf=\"customSingleSelectRadio; else defaultSingleSelectRadio\">\n      <ng-template\n        [ngTemplateOutlet]=\"customSingleSelectRadio\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultSingleSelectRadio>\n      <div class=\"dynamic-field multi-line-field-container\"\n      [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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    </ng-template>\n  </ng-container>\n  \n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n  <ng-container *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n    <ng-container *ngIf=\"customMultiSelectCheckbox; else defaultMultiSelectCheckbox\">\n      <ng-template\n        [ngTemplateOutlet]=\"customMultiSelectCheckbox\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultMultiSelectCheckbox>\n      <div class=\"dynamic-field multi-line-field-container\"\n      [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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    </ng-template>\n  </ng-container>\n\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n  <ng-container *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n    <ng-container *ngIf=\"customMultiSelectDropdown; else defaultMultiSelectDropdown\">\n      <ng-template\n        [ngTemplateOutlet]=\"customMultiSelectDropdown\"\n        [ngTemplateOutletContext]=\"{ field: field, control: control, formgroup: formgroup }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #defaultMultiSelectDropdown>\n      <div class=\"dynamic-field single-line-field-container\"\n      [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ?  'none':''}\">\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    </ng-template>\n  </ng-container>\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 [ngStyle]=\"{ 'flex-basis': '100%', 'height': '0' }\"></div>\n    </ng-container>\n  </div>\n</ng-template>", styles: [":root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}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(--border-primary, #E0E0E0)}.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(--border-primary, #E0E0E0)}.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(--border-primary, #E0E0E0)}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--bg-secondary, #FAFAFA);border:1px solid var(--border-primary, #E0E0E0);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(--border-primary, #E0E0E0)}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(--border-primary, #E0E0E0);inset:10px auto auto 80px;background-color:var(--bg-primary, #FFFFFF)}.date-picker-container .date-picker:hover{background-color:var(--brand-primary-hover, #F0F3FA)}.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(--bg-primary, #FFFFFF);padding:12px 16px;border:1px solid var(--text-secondary, #6A737D);border-radius:8px}.radio-checkbox-common p{color:var(--text-secondary, #6A737D);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--brand-primary, #0937B2)}.checkbox-active p{color:var(--bg-primary, #FFFFFF)}#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(--brand-error, #B00020)}.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(--brand-error, #B00020)}\n"] }]
     }], () => [], { customInputTextNumber: [{
             type: ContentChild,
             args: ["customInputTextNumber", { static: false }]