mis-crystal-design-system 18.0.24 → 18.1.0-signal-test

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

@@ -1,16 +1,15 @@
 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 { UntypedFormGroup, UntypedFormArray, UntypedFormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ContentChild, NgModule } from '@angular/core';
+import { input, output, signal, computed, effect, untracked, Component, ContentChild, 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 dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import * as i4 from 'mis-crystal-design-system/switch';
 import { SwitchModule } from 'mis-crystal-design-system/switch';
@@ -49,7 +48,7 @@ function DynamicFormComponent_ng_container_2_div_2_ng_container_1_Template(rf, c
     const ctx_r5 = i0.ɵɵnextContext();
     const dynamicField_r7 = i0.ɵɵreference(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicField_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c9, ctx_r5.findSelectedSubFieldConfig(ctx_r5.formFields[i_r5] == null ? null : ctx_r5.formFields[i_r5].subFields, fieldControl_r4.controls.value.value.value, j_r2), subFieldControl_r1));
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicField_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c9, ctx_r5.findSelectedSubFieldConfig(ctx_r5.formFieldsArray == null ? null : ctx_r5.formFieldsArray[i_r5] == null ? null : ctx_r5.formFieldsArray[i_r5].subFields, fieldControl_r4.controls.value.value.value, j_r2), subFieldControl_r1));
 } }
 function DynamicFormComponent_ng_container_2_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17);
@@ -72,9 +71,9 @@ function DynamicFormComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     const dynamicField_r7 = i0.ɵɵreference(4);
     i0.ɵɵproperty("formGroupName", i_r5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", dynamicField_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction3(4, _c8, ctx_r5.formFields[i_r5], fieldControl_r4, fieldControl_r4.controls.value));
+    i0.ɵɵproperty("ngTemplateOutlet", dynamicField_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction3(4, _c8, ctx_r5.formFieldsArray == null ? null : ctx_r5.formFieldsArray[i_r5], fieldControl_r4, fieldControl_r4.controls.value));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", (fieldControl_r4 == null ? null : fieldControl_r4.value) && (!!(ctx_r5.formFields[i_r5] == null ? null : ctx_r5.formFields[i_r5].subFields) && (ctx_r5.formFields[i_r5] == null ? null : ctx_r5.formFields[i_r5].subFields == null ? null : ctx_r5.formFields[i_r5].subFields.length) > 0 && ctx_r5.matchParentConfig(ctx_r5.formFields[i_r5] == null ? null : ctx_r5.formFields[i_r5].subFields, fieldControl_r4 == null ? null : fieldControl_r4.controls == null ? null : fieldControl_r4.controls.value == null ? null : fieldControl_r4.controls.value.value == null ? null : fieldControl_r4.controls.value.value.value)));
+    i0.ɵɵproperty("ngIf", (fieldControl_r4 == null ? null : fieldControl_r4.value) && (!!(ctx_r5.formFieldsArray == null ? null : ctx_r5.formFieldsArray[i_r5] == null ? null : ctx_r5.formFieldsArray[i_r5].subFields) && (ctx_r5.formFieldsArray == null ? null : ctx_r5.formFieldsArray[i_r5] == null ? null : ctx_r5.formFieldsArray[i_r5].subFields == null ? null : ctx_r5.formFieldsArray[i_r5].subFields.length) > 0 && ctx_r5.matchParentConfig(ctx_r5.formFieldsArray == null ? null : ctx_r5.formFieldsArray[i_r5] == null ? null : ctx_r5.formFieldsArray[i_r5].subFields, fieldControl_r4 == null ? null : fieldControl_r4.controls == null ? null : fieldControl_r4.controls.value == null ? null : fieldControl_r4.controls.value.value == null ? null : fieldControl_r4.controls.value.value.value)));
 } }
 function DynamicFormComponent_ng_template_3_ng_container_0_ng_container_1_ng_template_1_Template(rf, ctx) { }
 function DynamicFormComponent_ng_template_3_ng_container_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
@@ -232,7 +231,7 @@ function DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_i
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("src", ctx_r5.calendarIconUrl, i0.ɵɵsanitizeUrl);
+    i0.ɵɵproperty("src", ctx_r5.calendarIconUrl(), i0.ɵɵsanitizeUrl);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_ng_container_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 15);
@@ -269,7 +268,7 @@ function DynamicFormComponent_ng_template_3_ng_container_2_ng_template_2_div_0_T
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("dpConfig", field_r9.fieldConfig)("selectedDate", control_r10.value)("offsetY", 0)("value", control_r10.value);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r5.calendarIconUrl);
+    i0.ɵɵproperty("ngIf", ctx_r5.calendarIconUrl());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", control_r10.touched && control_r10.errors);
 } }
@@ -379,7 +378,7 @@ function DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_img_6_T
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("src", ctx_r5.removeIconUrl, i0.ɵɵsanitizeUrl);
+    i0.ɵɵproperty("src", ctx_r5.removeIconUrl(), i0.ɵɵsanitizeUrl);
 } }
 function DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 15);
@@ -418,7 +417,7 @@ function DynamicFormComponent_ng_template_3_ng_container_4_ng_template_2_Templat
     i0.ɵɵadvance();
     i0.ɵɵproperty("searchEnabled", false)("width", "140px")("data", field_r9.itemsList)("selectedItem", control_r10.value);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", field_r9.isRemoveable && ctx_r5.removeIconUrl);
+    i0.ɵɵproperty("ngIf", field_r9.isRemoveable && ctx_r5.removeIconUrl());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", control_r10.touched && control_r10.errors);
 } }
@@ -455,7 +454,7 @@ function DynamicFormComponent_ng_template_3_ng_container_5_ng_template_2_div_6_i
     i0.ɵɵelement(0, "img", 43);
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("src", ctx_r5.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
+    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();
@@ -471,7 +470,7 @@ function DynamicFormComponent_ng_template_3_ng_container_5_ng_template_2_div_6_T
     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.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r27.label === (control_r10.value == null ? null : control_r10.value.label) && ctx_r5.activeBtnIconUrl);
+    i0.ɵɵproperty("ngIf", item_r27.label === (control_r10.value == null ? null : control_r10.value.label) && ctx_r5.activeBtnIconUrl());
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(item_r27.label);
 } }
@@ -543,7 +542,7 @@ function DynamicFormComponent_ng_template_3_ng_container_6_ng_template_2_div_6_i
     i0.ɵɵelement(0, "img", 43);
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("src", ctx_r5.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
+    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();
@@ -559,7 +558,7 @@ function DynamicFormComponent_ng_template_3_ng_container_6_ng_template_2_div_6_T
     const ctx_r5 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c15, ctx_r5.isCheckBoxSelected(item_r30.label, control_r10.value)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r5.isCheckBoxSelected(item_r30.label, control_r10.value) && ctx_r5.activeBtnIconUrl);
+    i0.ɵɵproperty("ngIf", ctx_r5.isCheckBoxSelected(item_r30.label, control_r10.value) && ctx_r5.activeBtnIconUrl());
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(item_r30.label);
 } }
@@ -716,59 +715,115 @@ function DynamicFormComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r35));
 } }
-dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(customParseFormat);
 class DynamicFormComponent {
+    // Backward compatibility: handle both signal and property access
+    get formFieldsArray() {
+        return this.formFields();
+    }
     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 = {};
+        this.formFields = input([]);
+        this.formValues = input({});
         // Need to deprecate these inputs and use constants.
-        this.activeBtnIconUrl = "";
-        this.calendarIconUrl = "";
-        this.removeIconUrl = "";
-        this.removeSepratorForSubFields = false;
+        this.activeBtnIconUrl = input("");
+        this.calendarIconUrl = input("");
+        this.removeIconUrl = input("");
+        this.removeSepratorForSubFields = input(false);
+        /**
+         * dynamicForm: Constructed using formFields and formValues(in case of edit)
+         */
         /**
          * formUpdated: Emits formValues Object whenever there is a change in the dynamic form.
          */
-        this.formUpdated = new EventEmitter();
+        this.formUpdated = output();
         /**
          * formValid: Emits boolean depending on validity of the form
          */
-        this.formValid = new EventEmitter();
+        this.formValid = output();
         /**
          * formInitialized: Emits dynamic form API on form initilization
          */
-        this.formInitialized = new EventEmitter();
-        this.fieldRemoved = new EventEmitter();
+        this.formInitialized = output();
+        this.fieldRemoved = output();
+        // Signal-based state management
+        this.dynamicFormSignal = signal(null);
+        this.dynamicFormAPISignal = signal(null);
+        this.valueChangesSubscriptionSignal = signal(null);
+        // 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
+        effect(() => {
+            const formFields = this.formFields();
+            const formValues = this.formValues();
+            // Only update if we have form fields (formValues can be empty)
+            if (formFields) {
+                // Use untracked to prevent infinite loops when setting signals
+                untracked(() => {
+                    const form = this.generateDynamicForm(formFields, formValues);
+                    this.dynamicFormSignal.set(form);
+                    // Re-subscribe to form changes
+                    this.valueChangesSubscriptionSignal()?.unsubscribe();
+                    this.valueChangesSubscriptionSignal.set(form.valueChanges.subscribe(formValue => {
+                        this.onFormValueChanges();
+                    }));
+                    // Emit form validity status
+                    this.formValid.emit(form.valid);
+                    // Update the API with the new form
+                    this.dynamicFormAPISignal.set({
+                        defaultFormValues: () => {
+                            return this.generateDynamicFieldsValueObject(form.value.dynamicFields);
+                        }
+                    });
+                });
+            }
+        });
     }
     ngOnInit() {
-        // Building the form
-        this.dynamicForm = this.generateDynamicForm(this.formFields, this.formValues);
+        // Building the form with proper null checks
+        const formFields = this.formFields() || [];
+        const formValues = this.formValues() || {};
+        // Only create form if we have form fields
+        if (formFields.length > 0) {
+            const form = this.generateDynamicForm(formFields, formValues);
+            this.dynamicFormSignal.set(form);
+        }
+        else {
+            // Create an empty form as fallback
+            const emptyForm = new UntypedFormGroup({
+                dynamicFields: new UntypedFormArray([])
+            });
+            this.dynamicFormSignal.set(emptyForm);
+        }
         // Subscribing to form changes and emiting values.
-        this.valueChangesSubscription$ = this.dynamicForm.valueChanges.subscribe(formValue => {
-            this.onFormValueChanges();
-        });
+        const currentForm = this.dynamicFormSignal();
+        if (currentForm) {
+            this.valueChangesSubscriptionSignal.set(currentForm.valueChanges.subscribe(formValue => {
+                this.onFormValueChanges();
+            }));
+        }
         //api to expose functions
-        this.dynamicFormAPI = {
+        this.dynamicFormAPISignal.set({
             defaultFormValues: () => {
-                return this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
+                return this.generateDynamicFieldsValueObject(this.dynamicForm().value.dynamicFields);
             }
-        };
-        this.formInitialized.emit(this.dynamicFormAPI);
-        this.formValid.emit(this.dynamicForm.valid);
+        });
+        this.formInitialized.emit(this.dynamicFormAPI());
+        this.formValid.emit(this.dynamicForm().valid);
     }
     ngOnDestroy() {
-        this.valueChangesSubscription$?.unsubscribe();
+        this.valueChangesSubscription$()?.unsubscribe();
     }
     onFormValueChanges() {
-        let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
-        this.formValid.emit(this.dynamicForm.valid);
+        let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm().value.dynamicFields);
+        this.formValid.emit(this.dynamicForm().valid);
         this.formUpdated.emit(formValues);
         console.log(formValues);
     }
@@ -777,11 +832,11 @@ class DynamicFormComponent {
         formValues.forEach((fieldValue, index) => {
             if (typeof fieldValue?.value === 'string')
                 fieldValue.value = fieldValue?.value?.trim();
-            let formattedValue = this.mapFormFieldToFormValue(this.formFields[index], fieldValue.value);
+            let formattedValue = this.mapFormFieldToFormValue(this.formFields()[index], fieldValue.value);
             if (fieldValue.subFields?.length > 0) {
                 let formattedSubFieldsValues = {};
-                let subField = this.formFields[index].subFields;
-                if (this.formFields[index].fieldType === 'singleSelect' || this.formFields[index].fieldType === 'multiSelect') {
+                let subField = this.formFields()[index].subFields;
+                if (this.formFields()[index].fieldType === 'singleSelect' || this.formFields()[index].fieldType === 'multiSelect') {
                     subField = subField.filter((subField) => subField.parentConfigValue === fieldValue.value.value);
                 }
                 fieldValue.subFields.forEach((subFieldValue, subIndex) => {
@@ -790,13 +845,13 @@ class DynamicFormComponent {
                         subFieldValue.value = subFieldValue?.value?.trim();
                     formattedSubFieldsValues[subFormField.configName] = this.mapFormFieldToFormValue(subFormField, subFieldValue);
                 });
-                dynamicFieldsValue[this.formFields[index].configName] = {
+                dynamicFieldsValue[this.formFields()[index].configName] = {
                     value: formattedValue,
                     subFields: formattedSubFieldsValues
                 };
             }
             else {
-                dynamicFieldsValue[this.formFields[index].configName] = formattedValue;
+                dynamicFieldsValue[this.formFields()[index].configName] = formattedValue;
             }
         });
         return dynamicFieldsValue;
@@ -804,7 +859,7 @@ class DynamicFormComponent {
     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 fieldValue = formValues[field.configName];
             let fieldControl = this.mapFormValueToFormField(field, fieldValue);
             let subFieldsControls = this.generateSubDynamicFields(formValues, field, fieldControl.value);
             formArray.push(new UntypedFormGroup({
@@ -817,7 +872,7 @@ class DynamicFormComponent {
         });
     }
     getDynamicFieldsControls() {
-        return this.dynamicForm.get("dynamicFields");
+        return this.dynamicForm().get("dynamicFields");
     }
     updateSubDynamicFields(field, formGroup, value) {
         if (field.subFields?.length > 0) {
@@ -898,10 +953,19 @@ class DynamicFormComponent {
                 control.setValue(formValue ? formValue : 0);
             else if (formField.fieldInputType === "date") {
                 if (formValue && typeof formValue === "number") {
-                    control.setValue(dayjs(formValue).tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));
+                    const timezone = (formField.fieldConfig && formField.fieldConfig.timezone) || 'Asia/Kolkata';
+                    const format = (formField.fieldConfig && formField.fieldConfig.format) || 'DD/MM/YYYY';
+                    control.setValue(dayjs(formValue).tz(timezone).format(format));
+                }
+                else if (formValue && typeof formValue === "string") {
+                    const timezone = (formField.fieldConfig && formField.fieldConfig.timezone) || 'Asia/Kolkata';
+                    const format = (formField.fieldConfig && formField.fieldConfig.format) || 'DD/MM/YYYY';
+                    control.setValue(dayjs.tz(formValue, format, timezone).format(format));
                 }
                 else {
-                    control.setValue(dayjs().tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));
+                    const timezone = (formField.fieldConfig && formField.fieldConfig.timezone) || 'Asia/Kolkata';
+                    const format = (formField.fieldConfig && formField.fieldConfig.format) || 'DD/MM/YYYY';
+                    control.setValue(dayjs().tz(timezone).format(format));
                 }
             }
         }
@@ -948,7 +1012,9 @@ class DynamicFormComponent {
             else if (formField.fieldInputType === "number")
                 return +formValue;
             else if (formField.fieldInputType === "date") {
-                return dayjs.tz(formValue, formField.fieldConfig.format, formField.fieldConfig.timezone).valueOf();
+                const format = (formField.fieldConfig && formField.fieldConfig.format) || 'DD/MM/YYYY';
+                const timezone = (formField.fieldConfig && formField.fieldConfig.timezone) || 'Asia/Kolkata';
+                return dayjs.tz(formValue, format, timezone).valueOf();
             }
         }
         else if (formField.fieldType === "singleSelect") {
@@ -983,7 +1049,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: "formFields", formValues: "formValues", activeBtnIconUrl: "activeBtnIconUrl", calendarIconUrl: "calendarIconUrl", removeIconUrl: "removeIconUrl", removeSepratorForSubFields: "removeSepratorForSubFields" }, outputs: { formUpdated: "formUpdated", formValid: "formValid", formInitialized: "formInitialized", fieldRemoved: "fieldRemoved" }, decls: 7, vars: 2, consts: [["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, "ngModelChange", "type", "formControl", "ngStyle", "placeholder", "min"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["type", "text", 1, "input-field", "ip-textarea", 3, "ngModelChange", "ngStyle", "placeholder", "formControl"], ["class", "dynamic-field single-line-field-container", 3, "ngStyle", 4, "ngIf"], [1, "dynamic-field", "single-line-field-container", 3, "ngStyle"], [1, "h6"], [1, "date-picker-container"], ["readonly", "", "misTzDp", "", 1, "date-picker", 3, "dateChange", "dpConfig", "selectedDate", "offsetY", "value"], ["alt", "data-picker", "class", "date-picker-icon", 3, "src", "click", 4, "ngIf"], ["alt", "data-picker", 1, "date-picker-icon", 3, "click", "src"], [3, "valueChanged", "control"], [3, "ngClass"], [3, "onChange", "searchEnabled", "width", "data", "selectedItem"], ["class", "remove-icon", 3, "src", "click", 4, "ngIf"], [1, "remove-icon", 3, "click", "src"], ["id", "checkboxes-container"], ["class", "radio-checkbox-common", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "radio-checkbox-common", 3, "click", "ngClass"], ["alt", "", 3, "src", 4, "ngIf"], ["alt", "", 3, "src"], [3, "onChange", "width", "showSelectedCount", "dropdownListWidth", "searchEnabled", "hideApplyButton", "data", "selectedItems"], ["id", "error-messages-container"], [1, "h8"], [3, "ngStyle"]], template: function DynamicFormComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "form", 11);
             i0.ɵɵelementContainerStart(1, 12);
             i0.ɵɵtemplate(2, DynamicFormComponent_ng_container_2_Template, 3, 8, "ng-container", 13);
@@ -991,35 +1057,15 @@ class DynamicFormComponent {
             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.ɵɵ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;border-bottom:1px solid var(--grey-seperators)}.dynamic-field[_ngcontent-%COMP%]     .container{height:32px!important}.single-line-field-container[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm[_ngcontent-%COMP%]{margin-bottom:8px;cursor:default}.input-field[_ngcontent-%COMP%]{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text[_ngcontent-%COMP%]{height:44px;padding:8px 12px}.ip-textarea[_ngcontent-%COMP%]{max-height:94px;padding:8px}input[_ngcontent-%COMP%]:focus{outline:none}input[_ngcontent-%COMP%]::placeholder{color:var(--grey-seperators)}textarea[_ngcontent-%COMP%]:focus{outline:none}.date-picker-container[_ngcontent-%COMP%]{position:relative;width:140px}.date-picker-container[_ngcontent-%COMP%]   .date-picker[_ngcontent-%COMP%]{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container[_ngcontent-%COMP%]   .date-picker[_ngcontent-%COMP%]:hover{background-color:var(--grey-hover)}.date-picker-container[_ngcontent-%COMP%]   .date-picker-icon[_ngcontent-%COMP%]{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form[_ngcontent-%COMP%]   .dynamic-field[_ngcontent-%COMP%]:last-child{border-bottom:none!important}#checkboxes-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{color:var(--text-muted);cursor:pointer}.radio-checkbox-common[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{margin-right:8px}.checkbox-active[_ngcontent-%COMP%]{background-color:var(--pmry-500)}.checkbox-active[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{color:var(--text-white)}#error-messages-container[_ngcontent-%COMP%]{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{color:var(--sem-error)}.removeable-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.removeable-container[_ngcontent-%COMP%]   .remove-icon[_ngcontent-%COMP%]{cursor:pointer;margin-left:8px;max-width:24px}span[_ngcontent-%COMP%]{color:var(--sem-error)}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicFormComponent, [{
         type: Component,
-        args: [{ selector: "mis-dynamic-form", template: "<form [formGroup]=\"dynamicForm\">\n  <ng-container formArrayName=\"dynamicFields\">\n    <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n        <ng-container\n        [ngTemplateOutlet]=\"dynamicField\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: formFields[i],\n          formGroup: fieldControl,\n          control: fieldControl.controls.value\n        }\"\n      >\n      </ng-container>\n      <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl?.value && (!!formFields[i]?.subFields && formFields[i]?.subFields?.length > 0 && matchParentConfig(formFields[i]?.subFields, fieldControl?.controls?.value?.value?.value))\">\n        <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls; let j = index\">\n          <ng-container\n            [ngTemplateOutlet]=\"dynamicField\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: findSelectedSubFieldConfig(formFields[i]?.subFields, fieldControl.controls.value.value.value,j),\n              control: subFieldControl\n            }\">\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n  <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n  <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: ["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px;border-bottom:1px solid var(--grey-seperators)}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}.removeable-container{display:flex;justify-content:center;align-items:center}.removeable-container .remove-icon{cursor:pointer;margin-left:8px;max-width:24px}span{color:var(--sem-error)}\n"] }]
-    }], () => [], { formFields: [{
-            type: Input
-        }], formValues: [{
-            type: Input
-        }], activeBtnIconUrl: [{
-            type: Input
-        }], calendarIconUrl: [{
-            type: Input
-        }], removeIconUrl: [{
-            type: Input
-        }], removeSepratorForSubFields: [{
-            type: Input
-        }], formUpdated: [{
-            type: Output
-        }], formValid: [{
-            type: Output
-        }], formInitialized: [{
-            type: Output
-        }], fieldRemoved: [{
-            type: Output
-        }], customInputTextNumber: [{
+        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: ["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px;border-bottom:1px solid var(--grey-seperators)}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}.removeable-container{display:flex;justify-content:center;align-items:center}.removeable-container .remove-icon{cursor:pointer;margin-left:8px;max-width:24px}span{color:var(--sem-error)}\n"] }]
+    }], () => [], { customInputTextNumber: [{
             type: ContentChild,
             args: ["customInputTextNumber", { static: false }]
         }], customInputTextarea: [{