mis-crystal-design-system 4.0.51 → 17.0.0

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

@@ -0,0 +1,763 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { UntypedFormArray, UntypedFormGroup, UntypedFormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
+import * as i3 from 'mis-crystal-design-system/dropdown';
+import { DropdownModule } from 'mis-crystal-design-system/dropdown';
+import * as moment from 'moment';
+import 'moment-timezone';
+import * as i4 from 'mis-crystal-design-system/switch';
+import { SwitchModule } from 'mis-crystal-design-system/switch';
+import * as i5 from 'mis-crystal-design-system/multi-select-dropdown';
+import { MultiSelectDropdownModule } from 'mis-crystal-design-system/multi-select-dropdown';
+import * as i6 from 'mis-crystal-design-system/datepicker_v2';
+import { DatepickerModuleV2 } from 'mis-crystal-design-system/datepicker_v2';
+
+const _c0 = (a0, a1, a2) => ({ $implicit: a0, formGroup: a1, control: a2 });
+const _c1 = (a0, a1) => ({ $implicit: a0, control: a1 });
+const _c2 = a0 => ({ "border": a0 });
+const _c3 = a0 => ({ $implicit: a0 });
+const _c4 = a0 => ({ "checkbox-active": a0 });
+function DynamicFormComponent_ng_container_2_div_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementContainer(1, 7);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const subFieldControl_r1 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    const fieldControl_r3 = ctx_r1.$implicit;
+    const i_r4 = ctx_r1.index;
+    const ctx_r4 = i0.ɵɵnextContext();
+    const dynamicField_r6 = i0.ɵɵreference(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicField_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1, ctx_r4.formFields[i_r4].subFields[ctx_r4.findSelectedIndex(ctx_r4.formFields[i_r4] == null ? null : ctx_r4.formFields[i_r4].subFields, fieldControl_r3.controls.value.value.value)], subFieldControl_r1));
+} }
+function DynamicFormComponent_ng_container_2_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵtemplate(1, DynamicFormComponent_ng_container_2_div_2_ng_container_1_Template, 2, 5, "ng-container", 10);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const fieldControl_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", fieldControl_r3.controls.subFields.controls);
+} }
+function DynamicFormComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0, 6);
+    i0.ɵɵelementContainer(1, 7);
+    i0.ɵɵtemplate(2, DynamicFormComponent_ng_container_2_div_2_Template, 2, 1, "div", 8);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const fieldControl_r3 = ctx.$implicit;
+    const i_r4 = ctx.index;
+    const ctx_r4 = i0.ɵɵnextContext();
+    const dynamicField_r6 = i0.ɵɵreference(4);
+    i0.ɵɵproperty("formGroupName", i_r4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicField_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction3(4, _c0, ctx_r4.formFields[i_r4], fieldControl_r3, fieldControl_r3.controls.value));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", fieldControl_r3.value && (!!(ctx_r4.formFields[i_r4] == null ? null : ctx_r4.formFields[i_r4].subFields) && (ctx_r4.formFields[i_r4] == null ? null : ctx_r4.formFields[i_r4].subFields == null ? null : ctx_r4.formFields[i_r4].subFields.length) > 0 && ctx_r4.matchParentConfig(ctx_r4.formFields[i_r4] == null ? null : ctx_r4.formFields[i_r4].subFields, fieldControl_r3.controls.value.value.value)));
+} }
+function DynamicFormComponent_ng_template_3_div_0_ng_container_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 7);
+} if (rf & 2) {
+    const control_r11 = i0.ɵɵnextContext(2).control;
+    i0.ɵɵnextContext();
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, control_r11.errors));
+} }
+function DynamicFormComponent_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13)(1, "p", 14);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "div", 15);
+    i0.ɵɵelementStart(4, "input", 16);
+    i0.ɵɵlistener("ngModelChange", function DynamicFormComponent_ng_template_3_div_0_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r7 = i0.ɵɵnextContext(); const field_r9 = ctx_r7.$implicit; const formgroup_r10 = ctx_r7.formGroup; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.updateSubDynamicFields(field_r9, formgroup_r10, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_0_ng_container_5_Template, 1, 4, "ng-container", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext();
+    const field_r9 = ctx_r7.$implicit;
+    const control_r11 = ctx_r7.control;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", field_r9.title, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("type", field_r9.fieldInputType)("formControl", control_r11)("ngStyle", i0.ɵɵpureFunction1(7, _c2, control_r11.touched && control_r11.errors ? "1px solid #B00020" : ""))("placeholder", field_r9.placeholderText ? field_r9.placeholderText : "Input Text")("min", field_r9.fieldInputType === "number" ? 0 : "");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", control_r11.touched && control_r11.errors);
+} }
+function DynamicFormComponent_ng_template_3_div_1_ng_container_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 7);
+} if (rf & 2) {
+    const control_r11 = i0.ɵɵnextContext(2).control;
+    i0.ɵɵnextContext();
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, control_r11.errors));
+} }
+function DynamicFormComponent_ng_template_3_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13)(1, "p", 14);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "div", 15);
+    i0.ɵɵelementStart(4, "textarea", 18);
+    i0.ɵɵlistener("ngModelChange", function DynamicFormComponent_ng_template_3_div_1_Template_textarea_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r7 = i0.ɵɵnextContext(); const field_r9 = ctx_r7.$implicit; const formgroup_r10 = ctx_r7.formGroup; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.updateSubDynamicFields(field_r9, formgroup_r10, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_1_ng_container_5_Template, 1, 4, "ng-container", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext();
+    const field_r9 = ctx_r7.$implicit;
+    const control_r11 = ctx_r7.control;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", field_r9.title, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _c2, control_r11.touched && control_r11.errors ? "1px solid #B00020" : ""))("placeholder", field_r9.placeholderText ? field_r9.placeholderText : "Input Text")("formControl", control_r11);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", control_r11.touched && control_r11.errors);
+} }
+function DynamicFormComponent_ng_template_3_div_2_img_6_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "img", 24);
+    i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_2_img_6_Template_img_click_0_listener() { i0.ɵɵrestoreView(_r15); i0.ɵɵnextContext(); const dp_r16 = i0.ɵɵreference(5); return i0.ɵɵresetView(dp_r16.click()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("src", ctx_r4.calendarIconUrl, i0.ɵɵsanitizeUrl);
+} }
+function DynamicFormComponent_ng_template_3_div_2_ng_container_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 7);
+} if (rf & 2) {
+    const control_r11 = i0.ɵɵnextContext(2).control;
+    i0.ɵɵnextContext();
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, control_r11.errors));
+} }
+function DynamicFormComponent_ng_template_3_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "p", 20);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 21)(4, "input", 22, 2);
+    i0.ɵɵlistener("dateChange", function DynamicFormComponent_ng_template_3_div_2_Template_input_dateChange_4_listener($event) { i0.ɵɵrestoreView(_r14); const control_r11 = i0.ɵɵnextContext().control; return i0.ɵɵresetView(control_r11.setValue($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_2_img_6_Template, 1, 1, "img", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_2_ng_container_7_Template, 1, 4, "ng-container", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext();
+    const field_r9 = ctx_r7.$implicit;
+    const control_r11 = ctx_r7.control;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", field_r9.title, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("dpConfig", field_r9.fieldConfig)("selectedDate", control_r11.value)("offsetY", 0)("value", control_r11.value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r4.calendarIconUrl);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", control_r11.touched && control_r11.errors);
+} }
+function DynamicFormComponent_ng_template_3_div_3_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 7);
+} if (rf & 2) {
+    const control_r11 = i0.ɵɵnextContext(2).control;
+    i0.ɵɵnextContext();
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, control_r11.errors));
+} }
+function DynamicFormComponent_ng_template_3_div_3_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "p", 20);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mis-switch", 25);
+    i0.ɵɵlistener("valueChanged", function DynamicFormComponent_ng_template_3_div_3_Template_mis_switch_valueChanged_3_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r7 = i0.ɵɵnextContext(); const field_r9 = ctx_r7.$implicit; const formgroup_r10 = ctx_r7.formGroup; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.updateSubDynamicFields(field_r9, formgroup_r10, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_3_ng_container_4_Template, 1, 4, "ng-container", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext();
+    const field_r9 = ctx_r7.$implicit;
+    const control_r11 = ctx_r7.control;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", field_r9.title, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("control", control_r11);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", control_r11.touched && control_r11.errors);
+} }
+function DynamicFormComponent_ng_template_3_div_4_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 7);
+} if (rf & 2) {
+    const control_r11 = i0.ɵɵnextContext(2).control;
+    i0.ɵɵnextContext();
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, control_r11.errors));
+} }
+function DynamicFormComponent_ng_template_3_div_4_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "p", 20);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mis-dropdown", 26);
+    i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_div_4_Template_mis_dropdown_onChange_3_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r7 = i0.ɵɵnextContext(); const field_r9 = ctx_r7.$implicit; const control_r11 = ctx_r7.control; const formgroup_r10 = ctx_r7.formGroup; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.updateSelectedValueForSingleSelect(field_r9, control_r11, formgroup_r10, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_4_ng_container_4_Template, 1, 4, "ng-container", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext();
+    const field_r9 = ctx_r7.$implicit;
+    const control_r11 = ctx_r7.control;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", field_r9.title, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("searchEnabled", false)("width", "140px")("data", field_r9.itemsList)("selectedItem", control_r11.value);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", control_r11.touched && control_r11.errors);
+} }
+function DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 31);
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("src", ctx_r4.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
+} }
+function DynamicFormComponent_ng_template_3_div_5_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_5_div_5_Template_div_click_0_listener() { const item_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r7 = i0.ɵɵnextContext(2); const field_r9 = ctx_r7.$implicit; const control_r11 = ctx_r7.control; const formgroup_r10 = ctx_r7.formGroup; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.updateSelectedValueForSingleSelect(field_r9, control_r11, formgroup_r10, item_r20)); });
+    i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template, 1, 1, "img", 30);
+    i0.ɵɵelementStart(2, "p", 20);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r20 = ctx.$implicit;
+    const control_r11 = i0.ɵɵnextContext(2).control;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c4, item_r20.label === (control_r11.value == null ? null : control_r11.value.label)));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", item_r20.label === (control_r11.value == null ? null : control_r11.value.label) && ctx_r4.activeBtnIconUrl);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r20.label);
+} }
+function DynamicFormComponent_ng_template_3_div_5_ng_container_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 7);
+} if (rf & 2) {
+    const control_r11 = i0.ɵɵnextContext(2).control;
+    i0.ɵɵnextContext();
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, control_r11.errors));
+} }
+function DynamicFormComponent_ng_template_3_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "p", 14);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "div", 15);
+    i0.ɵɵelementStart(4, "div", 27);
+    i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_div_5_Template, 4, 5, "div", 28);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_5_ng_container_6_Template, 1, 4, "ng-container", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext();
+    const field_r9 = ctx_r7.$implicit;
+    const control_r11 = ctx_r7.control;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", field_r9.title, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", field_r9.itemsList);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", control_r11.touched && control_r11.errors);
+} }
+function DynamicFormComponent_ng_template_3_div_6_div_5_img_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 31);
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("src", ctx_r4.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
+} }
+function DynamicFormComponent_ng_template_3_div_6_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_6_div_5_Template_div_click_0_listener() { const item_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r7 = i0.ɵɵnextContext(2); const field_r9 = ctx_r7.$implicit; const control_r11 = ctx_r7.control; const formgroup_r10 = ctx_r7.formGroup; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.updateSelectedValueForMultiSelect(field_r9, control_r11, formgroup_r10, [item_r22])); });
+    i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_6_div_5_img_1_Template, 1, 1, "img", 30);
+    i0.ɵɵelementStart(2, "p", 20);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r22 = ctx.$implicit;
+    const control_r11 = i0.ɵɵnextContext(2).control;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c4, ctx_r4.isCheckBoxSelected(item_r22.label, control_r11.value)));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r4.isCheckBoxSelected(item_r22.label, control_r11.value) && ctx_r4.activeBtnIconUrl);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r22.label);
+} }
+function DynamicFormComponent_ng_template_3_div_6_ng_container_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 7);
+} if (rf & 2) {
+    const control_r11 = i0.ɵɵnextContext(2).control;
+    i0.ɵɵnextContext();
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, control_r11.errors));
+} }
+function DynamicFormComponent_ng_template_3_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "p", 14);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "div", 15);
+    i0.ɵɵelementStart(4, "div", 27);
+    i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_6_div_5_Template, 4, 5, "div", 28);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_ng_container_6_Template, 1, 4, "ng-container", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext();
+    const field_r9 = ctx_r7.$implicit;
+    const control_r11 = ctx_r7.control;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", field_r9.title, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", field_r9.itemsList);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", control_r11.touched && control_r11.errors);
+} }
+function DynamicFormComponent_ng_template_3_div_7_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 7);
+} if (rf & 2) {
+    const control_r11 = i0.ɵɵnextContext(2).control;
+    i0.ɵɵnextContext();
+    const dynamicFieldErrors_r12 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicFieldErrors_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, control_r11.errors));
+} }
+function DynamicFormComponent_ng_template_3_div_7_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "p", 20);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mis-multi-select-dropdown", 32);
+    i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_div_7_Template_mis_multi_select_dropdown_onChange_3_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r7 = i0.ɵɵnextContext(); const field_r9 = ctx_r7.$implicit; const control_r11 = ctx_r7.control; const formgroup_r10 = ctx_r7.formGroup; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.updateSelectedValueForMultiSelect(field_r9, control_r11, formgroup_r10, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_7_ng_container_4_Template, 1, 4, "ng-container", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext();
+    const field_r9 = ctx_r7.$implicit;
+    const control_r11 = ctx_r7.control;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", field_r9.title, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", "140px")("showSelectedCount", true)("dropdownListWidth", "256px")("searchEnabled", false)("hideApplyButton", true)("data", field_r9.itemsList)("selectedItems", control_r11.value);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", control_r11.touched && control_r11.errors);
+} }
+function DynamicFormComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_div_0_Template, 6, 9, "div", 11)(1, DynamicFormComponent_ng_template_3_div_1_Template, 6, 7, "div", 11)(2, DynamicFormComponent_ng_template_3_div_2_Template, 8, 7, "div", 12)(3, DynamicFormComponent_ng_template_3_div_3_Template, 5, 3, "div", 12)(4, DynamicFormComponent_ng_template_3_div_4_Template, 5, 6, "div", 12)(5, DynamicFormComponent_ng_template_3_div_5_Template, 7, 3, "div", 11)(6, DynamicFormComponent_ng_template_3_div_6_Template, 7, 3, "div", 11)(7, DynamicFormComponent_ng_template_3_div_7_Template, 5, 9, "div", 12);
+} if (rf & 2) {
+    const field_r9 = ctx.$implicit;
+    i0.ɵɵproperty("ngIf", field_r9.fieldType === "input" && (field_r9.fieldInputType === "text" || field_r9.fieldInputType === "number"));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r9.fieldType === "input" && field_r9.fieldInputType === "textarea");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r9.fieldType === "input" && field_r9.fieldInputType === "date");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r9.fieldType === "boolean" && field_r9.fieldInputType === "toggle");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r9.fieldType === "singleSelect" && field_r9.fieldInputType === "dropdown");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r9.fieldType === "singleSelect" && field_r9.fieldInputType === "radio");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r9.fieldType === "multiSelect" && field_r9.fieldInputType === "checkbox");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r9.fieldType === "multiSelect" && field_r9.fieldInputType === "dropdown");
+} }
+function DynamicFormComponent_ng_template_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "p", 34);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "div", 35);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const error_r24 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r24.value, " ");
+} }
+function DynamicFormComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_5_ng_container_1_Template, 4, 1, "ng-container", 10);
+    i0.ɵɵpipe(2, "keyvalue");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const errors_r25 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r25));
+} }
+class DynamicFormComponent {
+    constructor() {
+        /**
+         * formFields:  Dynamic fields recieved from the API metadata to build a dynamic form
+         * formValues:  Holds the value of the dynamic form with "key" being dynamic field "title"
+         *              and value being the user input.
+         */
+        this.formFields = [];
+        this.formValues = {};
+        // Need to deprecate these inputs and use constants.
+        this.activeBtnIconUrl = "";
+        this.calendarIconUrl = "";
+        /**
+         * formUpdated: Emits formValues Object whenever there is a change in the dynamic form.
+         */
+        this.formUpdated = new EventEmitter();
+        /**
+         * formValid: Emits boolean depending on validity of the form
+         */
+        this.formValid = new EventEmitter();
+        /**
+         * formInitialized: Emits dynamic form API on form initilization
+         */
+        this.formInitialized = new EventEmitter();
+    }
+    ngOnInit() {
+        // Building the form
+        this.dynamicForm = this.generateDynamicForm(this.formFields, this.formValues);
+        // Subscribing to form changes and emiting values.
+        this.valueChangesSubscription$ = this.dynamicForm.valueChanges.subscribe(formValue => {
+            this.onFormValueChanges();
+        });
+        //api to expose functions
+        this.dynamicFormAPI = {
+            defaultFormValues: () => {
+                return this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
+            }
+        };
+        this.formInitialized.emit(this.dynamicFormAPI);
+        this.formValid.emit(this.dynamicForm.valid);
+    }
+    ngOnDestroy() {
+        this.valueChangesSubscription$?.unsubscribe();
+    }
+    onFormValueChanges() {
+        let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
+        this.formValid.emit(this.dynamicForm.valid);
+        this.formUpdated.emit(formValues);
+        console.log(formValues);
+    }
+    generateDynamicFieldsValueObject(formValues) {
+        let dynamicFieldsValue = {};
+        formValues.forEach((fieldValue, index) => {
+            let formattedValue = this.mapFormFieldToFormValue(this.formFields[index], fieldValue.value);
+            if (fieldValue.subFields?.length > 0) {
+                let formattedSubFieldsValues = {};
+                fieldValue.subFields.forEach((subFieldValue, subIndex) => {
+                    let subFormField = this.formFields[index].subFields[subIndex];
+                    formattedSubFieldsValues[subFormField.configName] = this.mapFormFieldToFormValue(subFormField, subFieldValue);
+                });
+                dynamicFieldsValue[this.formFields[index].configName] = {
+                    value: formattedValue,
+                    subFields: formattedSubFieldsValues
+                };
+            }
+            else {
+                dynamicFieldsValue[this.formFields[index].configName] = formattedValue;
+            }
+        });
+        return dynamicFieldsValue;
+    }
+    generateDynamicForm(formFields, formValues) {
+        let formArray = new UntypedFormArray([]);
+        for (let field of formFields) {
+            let fieldValue = formValues[field.configName]?.value ? formValues[field.configName].value : formValues[field.configName];
+            let fieldControl = this.mapFormValueToFormField(field, fieldValue);
+            let subFieldsControls = this.generateSubDynamicFields(formValues, field, fieldControl.value);
+            formArray.push(new UntypedFormGroup({
+                value: fieldControl,
+                subFields: subFieldsControls
+            }));
+        }
+        return new UntypedFormGroup({
+            dynamicFields: formArray
+        });
+    }
+    getDynamicFieldsControls() {
+        return this.dynamicForm.get("dynamicFields");
+    }
+    updateSubDynamicFields(field, formGroup, value) {
+        if (field.subFields?.length > 0) {
+            let subFieldsControls = this.generateSubDynamicFields(this.formValues, field, value);
+            formGroup.removeControl('subFields');
+            formGroup.addControl('subFields', subFieldsControls);
+        }
+    }
+    updateSelectedValueForSingleSelect(field, control, formGroup, value) {
+        if (control.value?.value !== value.value) {
+            control.setValue(value);
+        }
+        else
+            control.setValue('');
+        this.updateSubDynamicFields(field, formGroup, value);
+        control.markAsTouched();
+    }
+    updateSelectedValueForMultiSelect(field, control, formGroup, values) {
+        let selectedValues = control.value;
+        for (let value of values) {
+            let itemIndex = selectedValues.findIndex(item => item.label === value.label);
+            if (itemIndex > -1) {
+                selectedValues.splice(itemIndex, 1);
+            }
+            else {
+                selectedValues.push({ ...value });
+            }
+        }
+        control.setValue(selectedValues);
+        this.updateSubDynamicFields(field, formGroup, values);
+        control.markAsTouched();
+    }
+    isCheckBoxSelected(value, selectedValues) {
+        return selectedValues.findIndex(item => item.label === value) > -1;
+    }
+    findSelectedIndex(subfields, value) {
+        const selectedIndex = subfields.findIndex(item => item.parentConfigValue === value);
+        return selectedIndex !== -1 ? selectedIndex : 0;
+    }
+    matchParentConfig(subfields, value) {
+        if (!subfields || subfields.length === 0) {
+            return false;
+        }
+        return subfields.some(item => item.parentConfigValue === value);
+    }
+    generateSubDynamicFields(formValues, parentField, parentValue) {
+        let controls = new UntypedFormArray([]);
+        let subFields = parentField.subFields;
+        let subFieldsValues = formValues[parentField.configName]?.subFields ? formValues[parentField.configName].subFields : {};
+        if (!subFields)
+            return controls;
+        if (parentField.fieldType === 'singleSelect') {
+            subFields = subFields.filter((subField) => subField.parentConfigValue === parentValue?.value);
+        }
+        else if (parentField.fieldType === 'multiSelect') {
+            let parentValues = new Set(parentValue.map((value) => value.value));
+            subFields = subFields.filter((subField) => parentValues.has(subField.parentConfigValue));
+        }
+        if (subFields?.length > 0) {
+            for (let subField of subFields) {
+                controls.push(this.mapFormValueToFormField(subField, subFieldsValues[subField.configName]));
+            }
+        }
+        return controls;
+    }
+    mapFormValueToFormField(formField, formValue) {
+        let validators = formField.validators ? [dynamicFieldValidator(formField.validators)] : [];
+        let control = new UntypedFormControl(null, validators);
+        if (formField.fieldType === "input") {
+            if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
+                control.setValue(formValue ? formValue : "");
+            else if (formField.fieldInputType === "number")
+                control.setValue(formValue ? formValue : 0);
+            else if (formField.fieldInputType === "date") {
+                if (formValue && typeof formValue === "number") {
+                    control.setValue(moment(formValue).tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));
+                }
+                else {
+                    control.setValue(moment().tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));
+                }
+            }
+        }
+        else if (formField.fieldType === "singleSelect") {
+            const findSelectedValue = () => {
+                let index = formField.itemsList.findIndex(item => item.value === formValue);
+                return index >= 0 ? formField.itemsList[index] : "";
+            };
+            if (formField.fieldInputType === "dropdown") {
+                if (!formValue)
+                    control.setValue(formField.itemsList[0]);
+                else
+                    control.setValue(findSelectedValue());
+            }
+            else if (formField.fieldInputType === "radio") {
+                control.setValue(findSelectedValue());
+            }
+        }
+        else if (formField.fieldType === "multiSelect") {
+            if (formValue && Array.isArray(formValue)) {
+                let selectedValues = [];
+                for (let value of formValue) {
+                    let index = formField.itemsList.findIndex(item => item.value === value);
+                    if (index > -1)
+                        selectedValues.push({ ...formField.itemsList[index] });
+                }
+                control.setValue(selectedValues);
+            }
+            else {
+                control.setValue([]);
+            }
+        }
+        else if (formField.fieldType === "boolean") {
+            control.setValue(!!formValue);
+        }
+        else
+            control.setValue(null);
+        return control;
+    }
+    mapFormFieldToFormValue(formField, formValue) {
+        if (formField.fieldType === "input") {
+            if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
+                return formValue;
+            else if (formField.fieldInputType === "number")
+                return +formValue;
+            else if (formField.fieldInputType === "date") {
+                return moment.tz(formValue, formField.fieldConfig.format, formField.fieldConfig.timezone).valueOf();
+            }
+        }
+        else if (formField.fieldType === "singleSelect") {
+            return formValue?.value ?? '';
+        }
+        else if (formField.fieldType === "multiSelect") {
+            return formValue?.map(item => item.value);
+        }
+        else if (formField.fieldType === "boolean") {
+            return formValue;
+        }
+        else
+            return formValue;
+    }
+    static { this.ɵfac = function DynamicFormComponent_Factory(t) { return new (t || DynamicFormComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DynamicFormComponent, selectors: [["mis-dynamic-form"]], inputs: { formFields: "formFields", formValues: "formValues", activeBtnIconUrl: "activeBtnIconUrl", calendarIconUrl: "calendarIconUrl" }, outputs: { formUpdated: "formUpdated", formValid: "formValid", formInitialized: "formInitialized" }, decls: 7, vars: 2, consts: [["dynamicField", ""], ["dynamicFieldErrors", ""], ["dp", ""], [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"], ["class", "dynamic-field multi-line-field-container", 4, "ngIf"], ["class", "dynamic-field single-line-field-container", 4, "ngIf"], [1, "dynamic-field", "multi-line-field-container"], [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"], [1, "dynamic-field", "single-line-field-container"], [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, "onChange", "searchEnabled", "width", "data", "selectedItem"], ["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"], [2, "flex-basis", "100%", "height", "0"]], template: function DynamicFormComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "form", 3);
+            i0.ɵɵelementContainerStart(1, 4);
+            i0.ɵɵtemplate(2, DynamicFormComponent_ng_container_2_Template, 3, 8, "ng-container", 5);
+            i0.ɵɵelementContainerEnd();
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_Template, 8, 8, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(5, DynamicFormComponent_ng_template_5_Template, 3, 3, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+        } if (rf & 2) {
+            i0.ɵɵproperty("formGroup", ctx.dynamicForm);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngForOf", ctx.getDynamicFieldsControls().controls);
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormControlDirective, i2.FormGroupDirective, i2.FormGroupName, i2.FormArrayName, i3.DropdownComponent, i4.SwitchComponent, i5.MultiSelectDropdownComponent, i6.TzDatepickerDirective, i1.KeyValuePipe], styles: ["p[_ngcontent-%COMP%]{margin:0;cursor:default}  .main-container{margin:0;max-width:100%}.sub-dynamic-form[_ngcontent-%COMP%]{padding-left:24px}.dynamic-field[_ngcontent-%COMP%]     .container{height:32px!important}.single-line-field-container[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm[_ngcontent-%COMP%]{margin-bottom:8px;cursor:default}.input-field[_ngcontent-%COMP%]{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text[_ngcontent-%COMP%]{height:44px;padding:8px 12px}.ip-textarea[_ngcontent-%COMP%]{max-height:94px;padding:8px}input[_ngcontent-%COMP%]:focus{outline:none}input[_ngcontent-%COMP%]::placeholder{color:var(--grey-seperators)}textarea[_ngcontent-%COMP%]:focus{outline:none}.date-picker-container[_ngcontent-%COMP%]{position:relative;width:140px}.date-picker-container[_ngcontent-%COMP%]   .date-picker[_ngcontent-%COMP%]{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container[_ngcontent-%COMP%]   .date-picker[_ngcontent-%COMP%]:hover{background-color:var(--grey-hover)}.date-picker-container[_ngcontent-%COMP%]   .date-picker-icon[_ngcontent-%COMP%]{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form[_ngcontent-%COMP%]   .dynamic-field[_ngcontent-%COMP%]:last-child{border-bottom:none!important}#checkboxes-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{color:var(--text-muted);cursor:pointer}.radio-checkbox-common[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{margin-right:8px}.checkbox-active[_ngcontent-%COMP%]{background-color:var(--pmry-500)}.checkbox-active[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{color:var(--text-white)}#error-messages-container[_ngcontent-%COMP%]{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{color:var(--sem-error)}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicFormComponent, [{
+        type: Component,
+        args: [{ selector: "mis-dynamic-form", template: "<form [formGroup]=\"dynamicForm\">\n  <ng-container formArrayName=\"dynamicFields\">\n    <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n        <ng-container\n        [ngTemplateOutlet]=\"dynamicField\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: formFields[i],\n          formGroup: fieldControl,\n          control: fieldControl.controls.value\n        }\"\n      >\n      </ng-container>\n      <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && (!!formFields[i]?.subFields && formFields[i]?.subFields?.length > 0 && matchParentConfig(formFields[i]?.subFields, fieldControl.controls.value.value.value))\">\n        <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls;\">\n          <ng-container\n            [ngTemplateOutlet]=\"dynamicField\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: formFields[i].subFields[findSelectedIndex(formFields[i]?.subFields, fieldControl.controls.value.value.value)],\n              control: subFieldControl\n            }\">\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n  <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n      (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\" \n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" \n      [min]=\"field.fieldInputType === 'number' ? 0 : '' \"/>\n    <ng-container *ngIf=\"control.touched && control.errors\"\n      [ngTemplateOutlet]=\"dynamicFieldErrors\" \n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n    >\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <textarea class=\"input-field ip-textarea\" type=\"text\"\n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n      <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n        [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n      </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'date' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <div class=\"date-picker-container\">\n      <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n        (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n        [value]=\"control.value\" #dp />\n      <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n        (click)=\"dp.click()\" />\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n      (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n    </mis-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n        (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n        <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n        (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n        <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n          alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n      [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n      [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n  <div id=\"error-messages-container\">\n    <ng-container *ngFor=\"let error of errors | keyvalue\">\n      <p class=\"h8\">\n        {{\" \u2022 &nbsp;\" + error.value}}\n      </p>\n      <div style=\"flex-basis: 100%; height: 0\"></div>\n    </ng-container>\n  </div>\n</ng-template>", styles: ["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}\n"] }]
+    }], () => [], { formFields: [{
+            type: Input
+        }], formValues: [{
+            type: Input
+        }], activeBtnIconUrl: [{
+            type: Input
+        }], calendarIconUrl: [{
+            type: Input
+        }], formUpdated: [{
+            type: Output
+        }], formValid: [{
+            type: Output
+        }], formInitialized: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DynamicFormComponent, { className: "DynamicFormComponent" }); })();
+const dynamicFieldValidator = (validators) => {
+    return (control) => {
+        let value = control.value;
+        if (Array.isArray(value)) {
+            return null;
+        }
+        else if (typeof value === 'object') {
+            value = value?.value ? value.value : '';
+        }
+        let errors = null;
+        validators.forEach((validator) => {
+            let error = null;
+            let message = validator.message;
+            switch (validator.type) {
+                case "Required":
+                    error = Validators.required(control);
+                    if (error)
+                        error = { Required: message };
+                    break;
+                case "MinLength":
+                    error = Validators.minLength(+validator.value)(control);
+                    message = message.replace('${0}', error?.minlength.requiredLength);
+                    if (error)
+                        error = { MinLength: message };
+                    break;
+                case "MaxLength":
+                    error = Validators.maxLength(+validator.value)(control);
+                    message = message.replace('${0}', error?.actualLength);
+                    if (error)
+                        error = { MaxLength: message };
+                    break;
+                case "Email":
+                    error = Validators.email(control);
+                    if (error)
+                        error = { Email: message };
+                    break;
+                case "Custom":
+                    error = Validators.pattern(`${validator.value}`)(control);
+                    if (error)
+                        error = { Custom: message };
+                    break;
+                default:
+                    break;
+            }
+            if (error)
+                errors = { ...errors, ...error };
+        });
+        return errors;
+    };
+};
+
+class DynamicFormModule {
+    static forRoot() {
+        return { ngModule: DynamicFormModule, providers: [] };
+    }
+    static { this.ɵfac = function DynamicFormModule_Factory(t) { return new (t || DynamicFormModule)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: DynamicFormModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+            ReactiveFormsModule,
+            FormsModule,
+            OverlayModule,
+            ScrollingModule,
+            DropdownModule,
+            SwitchModule,
+            MultiSelectDropdownModule,
+            DatepickerModuleV2] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicFormModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [DynamicFormComponent],
+                imports: [
+                    CommonModule,
+                    ReactiveFormsModule,
+                    FormsModule,
+                    OverlayModule,
+                    ScrollingModule,
+                    DropdownModule,
+                    SwitchModule,
+                    MultiSelectDropdownModule,
+                    DatepickerModuleV2
+                ],
+                exports: [DynamicFormComponent]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DynamicFormModule, { declarations: [DynamicFormComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        OverlayModule,
+        ScrollingModule,
+        DropdownModule,
+        SwitchModule,
+        MultiSelectDropdownModule,
+        DatepickerModuleV2], exports: [DynamicFormComponent] }); })();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DynamicFormComponent, DynamicFormModule };
+//# sourceMappingURL=mis-crystal-design-system-dynamic-form.mjs.map