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

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

@@ -99,19 +99,15 @@ 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_r13 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("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);
-    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.ɵɵelement(4, "div", 23)(5, "input", 24);
     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) {
@@ -135,10 +131,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_r14 = i0.ɵɵreference(3);
+    const defaultInputTextNumber_r13 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customInputTextNumber)("ngIfElse", defaultInputTextNumber_r14);
+    i0.ɵɵproperty("ngIf", ctx_r5.customInputTextNumber)("ngIfElse", defaultInputTextNumber_r13);
 } }
 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) {
@@ -164,19 +160,15 @@ 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_r13 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("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);
-    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.ɵɵelement(4, "div", 23)(5, "textarea", 26);
     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) {
@@ -200,10 +192,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_r16 = i0.ɵɵreference(3);
+    const defaultInputTextarea_r14 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customInputTextarea)("ngIfElse", defaultInputTextarea_r16);
+    i0.ɵɵproperty("ngIf", ctx_r5.customInputTextarea)("ngIfElse", defaultInputTextarea_r14);
 } }
 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) {
@@ -225,9 +217,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 _r18 = i0.ɵɵgetCurrentView();
+    const _r16 = 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(_r18); i0.ɵɵnextContext(); const dp_r19 = i0.ɵɵreference(6); return i0.ɵɵresetView(dp_r19.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(_r16); i0.ɵɵnextContext(); const dp_r17 = i0.ɵɵreference(6); return i0.ɵɵresetView(dp_r17.click()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext(5);
@@ -238,17 +230,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_r13 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("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 _r17 = i0.ɵɵgetCurrentView();
+    const _r15 = 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(_r17); 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(_r15); 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();
@@ -283,10 +275,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_r20 = i0.ɵɵreference(3);
+    const defaultInputDate_r18 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customInputDate)("ngIfElse", defaultInputDate_r20);
+    i0.ɵɵproperty("ngIf", ctx_r5.customInputDate)("ngIfElse", defaultInputDate_r18);
 } }
 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) {
@@ -312,17 +304,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_r13 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("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 _r21 = i0.ɵɵgetCurrentView();
+    const _r19 = 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(_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.ɵɵ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.ɵɵ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();
@@ -347,10 +339,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_r22 = i0.ɵɵreference(3);
+    const defaultBooleanToggle_r20 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customBooleanToggle)("ngIfElse", defaultBooleanToggle_r22);
+    i0.ɵɵproperty("ngIf", ctx_r5.customBooleanToggle)("ngIfElse", defaultBooleanToggle_r20);
 } }
 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) {
@@ -372,9 +364,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 _r24 = i0.ɵɵgetCurrentView();
+    const _r22 = 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(_r24); 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(_r22); 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);
@@ -385,17 +377,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_r13 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("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 _r23 = 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_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(_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.ɵɵ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.ɵɵelementEnd();
     i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_img_6_Template, 1, 1, "img", 37);
     i0.ɵɵelementEnd();
@@ -426,10 +418,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_r25 = i0.ɵɵreference(3);
+    const defaultSingleSelectDropdown_r23 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customSingleSelectDropdown)("ngIfElse", defaultSingleSelectDropdown_r25);
+    i0.ɵɵproperty("ngIf", ctx_r5.customSingleSelectDropdown)("ngIfElse", defaultSingleSelectDropdown_r23);
 } }
 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) {
@@ -457,30 +449,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 _r26 = i0.ɵɵgetCurrentView();
+    const _r24 = 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_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.ɵɵ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.ɵɵ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_r27 = ctx.$implicit;
+    const item_r25 = ctx.$implicit;
     const control_r10 = i0.ɵɵnextContext(3).control;
     const ctx_r5 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c15, item_r27.label === (control_r10.value == null ? null : control_r10.value.label)));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c15, item_r25.label === (control_r10.value == null ? null : control_r10.value.label)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r27.label === (control_r10.value == null ? null : control_r10.value.label) && ctx_r5.activeBtnIconUrl());
+    i0.ɵɵproperty("ngIf", item_r25.label === (control_r10.value == null ? null : control_r10.value.label) && ctx_r5.activeBtnIconUrl());
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r27.label);
+    i0.ɵɵtextInterpolate(item_r25.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_r13 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("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);
@@ -514,10 +506,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_r28 = i0.ɵɵreference(3);
+    const defaultSingleSelectRadio_r26 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customSingleSelectRadio)("ngIfElse", defaultSingleSelectRadio_r28);
+    i0.ɵɵproperty("ngIf", ctx_r5.customSingleSelectRadio)("ngIfElse", defaultSingleSelectRadio_r26);
 } }
 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) {
@@ -545,30 +537,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 _r29 = i0.ɵɵgetCurrentView();
+    const _r27 = 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_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.ɵɵ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.ɵɵ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_r30 = ctx.$implicit;
+    const item_r28 = 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_r30.label, control_r10.value)));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c15, ctx_r5.isCheckBoxSelected(item_r28.label, control_r10.value)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.isCheckBoxSelected(item_r30.label, control_r10.value) && ctx_r5.activeBtnIconUrl());
+    i0.ɵɵproperty("ngIf", ctx_r5.isCheckBoxSelected(item_r28.label, control_r10.value) && ctx_r5.activeBtnIconUrl());
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r30.label);
+    i0.ɵɵtextInterpolate(item_r28.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_r13 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("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);
@@ -602,10 +594,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_r31 = i0.ɵɵreference(3);
+    const defaultMultiSelectCheckbox_r29 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customMultiSelectCheckbox)("ngIfElse", defaultMultiSelectCheckbox_r31);
+    i0.ɵɵproperty("ngIf", ctx_r5.customMultiSelectCheckbox)("ngIfElse", defaultMultiSelectCheckbox_r29);
 } }
 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) {
@@ -631,17 +623,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_r13 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, control_r10.errors));
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("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 _r32 = i0.ɵɵgetCurrentView();
+    const _r30 = 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(_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.ɵɵ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.ɵɵ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();
@@ -666,10 +658,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_r33 = i0.ɵɵreference(3);
+    const defaultMultiSelectDropdown_r31 = i0.ɵɵreference(3);
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.customMultiSelectDropdown)("ngIfElse", defaultMultiSelectDropdown_r33);
+    i0.ɵɵproperty("ngIf", ctx_r5.customMultiSelectDropdown)("ngIfElse", defaultMultiSelectDropdown_r31);
 } }
 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);
@@ -699,9 +691,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_r34 = ctx.$implicit;
+    const error_r32 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r34.value, " ");
+    i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r32.value, " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(2, _c16));
 } }
@@ -711,9 +703,9 @@ function DynamicFormComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵpipe(2, "keyvalue");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const errors_r35 = ctx.$implicit;
+    const errors_r33 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r35));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r33));
 } }
 dayjs.extend(timezone);
 dayjs.extend(customParseFormat);
@@ -755,24 +747,50 @@ 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());
-        // Watch for changes in input signals and update the form accordingly
+        /**
+         * 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
         effect(() => {
             const formFields = this.formFields();
-            const formValues = this.formValues();
-            // Only update if we have form fields (formValues can be empty)
-            if (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
+                const formValues = this.formValues();
                 // Use untracked to prevent infinite loops when setting signals
                 untracked(() => {
                     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);
@@ -785,6 +803,58 @@ class DynamicFormComponent {
                 });
             }
         });
+        // 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 });
+                    }
+                }
+                // Handle subFields if they exist
+                if (fieldValue?.subFields && field.subFields?.length > 0) {
+                    this.updateSubDynamicFields(field, fieldGroup, control?.value);
+                }
+            }
+        });
     }
     ngOnInit() {
         // Building the form with proper null checks
@@ -805,8 +875,21 @@ 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
@@ -820,12 +903,21 @@ 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 = {};
@@ -874,11 +966,63 @@ 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) {
-            let subFieldsControls = this.generateSubDynamicFields(this.formValues, field, value);
+            // 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) {
@@ -1049,7 +1193,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, "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) {
+        } }, 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) {
             i0.ɵɵelementStart(0, "form", 11);
             i0.ɵɵelementContainerStart(1, 12);
             i0.ɵɵtemplate(2, DynamicFormComponent_ng_container_2_Template, 3, 8, "ng-container", 13);
@@ -1064,7 +1208,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          (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"] }]
+        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"] }]
     }], () => [], { customInputTextNumber: [{
             type: ContentChild,
             args: ["customInputTextNumber", { static: false }]