mis-crystal-design-system 3.1.18 → 4.0.1

package/bundles/mis-crystal-design-system-dynamic-form.umd.js

@@ -346,7 +346,6 @@
 
     var DynamicFormComponent = /** @class */ (function () {
         function DynamicFormComponent() {
-            var _this = this;
             /**
              * 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"
@@ -354,70 +353,121 @@
              */
             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 core.EventEmitter();
-            this.initializedDynamicForm = new core.EventEmitter();
-            this.setupFormControls = function () {
-                var e_1, _a;
-                var formArray = new forms.FormArray([]);
-                try {
-                    for (var _b = __values(_this.formFields), _c = _b.next(); !_c.done; _c = _b.next()) {
-                        var field = _c.value;
-                        var control = _this.mapFormValueToFormField(field, _this.formValues && _this.formValues[field.configName] ? _this.formValues[field.configName] : null);
-                        formArray.push(control);
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-                _this.dynamicForm = new forms.FormGroup({
-                    dynamicFields: formArray
-                });
-            };
+            /**
+             * formValid: Emits boolean depending on validity of the form
+             */
+            this.formValid = new core.EventEmitter();
+            /**
+             * formInitialized: Emits dynamic form API on form initilization
+             */
+            this.formInitialized = new core.EventEmitter();
         }
         DynamicFormComponent.prototype.ngOnInit = function () {
             var _this = this;
             // Building the form
-            this.setupFormControls();
+            this.dynamicForm = this.generateDynamicForm(this.formFields, this.formValues);
             // Subscribing to form changes and emiting values.
-            this.dynamicForm.valueChanges.subscribe(function (formValue) {
-                var formValues = _this.generateDynamicFieldsValueObject(_this.dynamicForm.value.dynamicFields);
-                _this.formUpdated.emit(formValues);
+            this.valueChangesSubscription$ = this.dynamicForm.valueChanges.subscribe(function (formValue) {
+                _this.onFormValueChanges();
             });
             //api to expose functions
-            this.dynamicFieldsAPI = {
+            this.dynamicFormAPI = {
                 defaultFormValues: function () {
                     return _this.generateDynamicFieldsValueObject(_this.dynamicForm.value.dynamicFields);
                 }
             };
-            this.initializedDynamicForm.emit(this.dynamicFieldsAPI);
+            this.formInitialized.emit(this.dynamicFormAPI);
+        };
+        DynamicFormComponent.prototype.ngOnDestroy = function () {
+            var _a;
+            (_a = this.valueChangesSubscription$) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        };
+        DynamicFormComponent.prototype.onFormValueChanges = function () {
+            var formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
+            this.formValid.emit(this.dynamicForm.valid);
+            this.formUpdated.emit(formValues);
+            console.log(formValues);
         };
         DynamicFormComponent.prototype.generateDynamicFieldsValueObject = function (formValues) {
             var _this = this;
             var dynamicFieldsValue = {};
-            formValues.forEach(function (value, index) {
-                dynamicFieldsValue[_this.formFields[index].configName] = _this.mapFormFieldToFormValue(_this.formFields[index], value);
+            formValues.forEach(function (fieldValue, index) {
+                var _a;
+                var formattedValue = _this.mapFormFieldToFormValue(_this.formFields[index], fieldValue.value);
+                if (((_a = fieldValue.subFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    var formattedSubFieldsValues_1 = {};
+                    fieldValue.subFields.forEach(function (subFieldValue, subIndex) {
+                        var subFormField = _this.formFields[index].subFields[subIndex];
+                        formattedSubFieldsValues_1[subFormField.configName] = _this.mapFormFieldToFormValue(subFormField, subFieldValue);
+                    });
+                    dynamicFieldsValue[_this.formFields[index].configName] = {
+                        value: formattedValue,
+                        subFields: formattedSubFieldsValues_1
+                    };
+                }
+                else {
+                    dynamicFieldsValue[_this.formFields[index].configName] = formattedValue;
+                }
             });
             return dynamicFieldsValue;
         };
+        DynamicFormComponent.prototype.generateDynamicForm = function (formFields, formValues) {
+            var e_1, _b;
+            var _a;
+            var formArray = new forms.FormArray([]);
+            try {
+                for (var formFields_1 = __values(formFields), formFields_1_1 = formFields_1.next(); !formFields_1_1.done; formFields_1_1 = formFields_1.next()) {
+                    var field = formFields_1_1.value;
+                    var fieldValue = ((_a = formValues[field.configName]) === null || _a === void 0 ? void 0 : _a.value) ? formValues[field.configName].value : formValues[field.configName];
+                    var fieldControl = this.mapFormValueToFormField(field, fieldValue);
+                    var subFieldsControls = this.generateSubDynamicFields(formValues, field, fieldValue);
+                    formArray.push(new forms.FormGroup({
+                        value: fieldControl,
+                        subFields: subFieldsControls
+                    }));
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (formFields_1_1 && !formFields_1_1.done && (_b = formFields_1.return)) _b.call(formFields_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return new forms.FormGroup({
+                dynamicFields: formArray
+            });
+        };
         DynamicFormComponent.prototype.getDynamicFieldsControls = function () {
             return this.dynamicForm.get("dynamicFields");
         };
-        DynamicFormComponent.prototype.updateSelectedValueForField = function (index, value) {
-            var array = this.dynamicForm.get("dynamicFields").controls;
-            array[index].setValue(value);
+        DynamicFormComponent.prototype.updateSubDynamicFields = function (field, formGroup, value) {
+            var _a;
+            if (((_a = field.subFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                var subFieldsControls = this.generateSubDynamicFields(this.formValues, field, value);
+                formGroup.removeControl('subFields');
+                formGroup.addControl('subFields', subFieldsControls);
+            }
         };
-        DynamicFormComponent.prototype.updateSelectedValueForMultiSelect = function (index, values) {
-            var e_2, _a;
-            var control = this.dynamicForm.get("dynamicFields").controls[index];
+        DynamicFormComponent.prototype.updateSelectedValueForSingleSelect = function (field, control, formGroup, value) {
+            var _a;
+            if (((_a = control.value) === null || _a === void 0 ? void 0 : _a.value) !== value.value) {
+                control.setValue(value);
+            }
+            else
+                control.setValue('');
+            this.updateSubDynamicFields(field, formGroup, value);
+            control.markAsTouched();
+        };
+        DynamicFormComponent.prototype.updateSelectedValueForMultiSelect = function (field, control, formGroup, values) {
+            var e_2, _b;
             var selectedValues = control.value;
             var _loop_1 = function (value) {
                 var itemIndex = selectedValues.findIndex(function (item) { return item.label === value.label; });
@@ -437,18 +487,51 @@
             catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
-                    if (values_1_1 && !values_1_1.done && (_a = values_1.return)) _a.call(values_1);
+                    if (values_1_1 && !values_1_1.done && (_b = values_1.return)) _b.call(values_1);
                 }
                 finally { if (e_2) throw e_2.error; }
             }
             control.setValue(selectedValues);
+            this.updateSubDynamicFields(field, formGroup, values);
+            control.markAsTouched();
         };
         DynamicFormComponent.prototype.isCheckBoxSelected = function (value, selectedValues) {
             return selectedValues.findIndex(function (item) { return item.label === value; }) > -1;
         };
+        DynamicFormComponent.prototype.generateSubDynamicFields = function (formValues, parentField, parentValue) {
+            var e_3, _b;
+            var _a;
+            var controls = new forms.FormArray([]);
+            var subFields = parentField.subFields;
+            var subFieldsValues = ((_a = formValues[parentField.configName]) === null || _a === void 0 ? void 0 : _a.subFields) ? formValues[parentField.configName].subFields : {};
+            if (parentField.fieldType === 'singleSelect') {
+                subFields = subFields.filter(function (subField) { var _a; return subField.parentConfigValue === ((_a = parentValue) === null || _a === void 0 ? void 0 : _a.value); });
+            }
+            else if (parentField.fieldType === 'multiSelect') {
+                var parentValues_1 = new Set(parentValue.map(function (value) { return value.value; }));
+                subFields = subFields.filter(function (subField) { return parentValues_1.has(subField.parentConfigValue); });
+            }
+            if ((subFields === null || subFields === void 0 ? void 0 : subFields.length) > 0) {
+                try {
+                    for (var subFields_1 = __values(subFields), subFields_1_1 = subFields_1.next(); !subFields_1_1.done; subFields_1_1 = subFields_1.next()) {
+                        var subField = subFields_1_1.value;
+                        controls.push(this.mapFormValueToFormField(subField, subFieldsValues[subField.configName]));
+                    }
+                }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                finally {
+                    try {
+                        if (subFields_1_1 && !subFields_1_1.done && (_b = subFields_1.return)) _b.call(subFields_1);
+                    }
+                    finally { if (e_3) throw e_3.error; }
+                }
+            }
+            return controls;
+        };
         DynamicFormComponent.prototype.mapFormValueToFormField = function (formField, formValue) {
-            var e_3, _a;
-            var control = new forms.FormControl();
+            var e_4, _b;
+            var validators = formField.validators ? [dynamicFieldValidator(formField.validators)] : [];
+            var control = new forms.FormControl(null, validators);
             if (formField.fieldType === "input") {
                 if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
                     control.setValue(formValue ? formValue : "");
@@ -464,14 +547,18 @@
                 }
             }
             else if (formField.fieldType === "singleSelect") {
+                var findSelectedValue = function () {
+                    var index = formField.itemsList.findIndex(function (item) { return item.value === formValue; });
+                    return index > 0 ? formField.itemsList[index] : "";
+                };
                 if (formField.fieldInputType === "dropdown") {
                     if (!formValue)
                         control.setValue(formField.itemsList[0]);
-                    else {
-                        var f = formField.itemsList.filter(function (item) { return item.value === formValue; });
-                        if (f[0])
-                            control.setValue(f[0]);
-                    }
+                    else
+                        control.setValue(findSelectedValue());
+                }
+                else if (formField.fieldInputType === "radio") {
+                    control.setValue(findSelectedValue());
                 }
             }
             else if (formField.fieldType === "multiSelect") {
@@ -488,12 +575,12 @@
                             _loop_2(value);
                         }
                     }
-                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
                     finally {
                         try {
-                            if (formValue_1_1 && !formValue_1_1.done && (_a = formValue_1.return)) _a.call(formValue_1);
+                            if (formValue_1_1 && !formValue_1_1.done && (_b = formValue_1.return)) _b.call(formValue_1);
                         }
-                        finally { if (e_3) throw e_3.error; }
+                        finally { if (e_4) throw e_4.error; }
                     }
                     control.setValue(selectedValues);
                 }
@@ -509,6 +596,7 @@
             return control;
         };
         DynamicFormComponent.prototype.mapFormFieldToFormValue = function (formField, formValue) {
+            var _a;
             if (formField.fieldType === "input") {
                 if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
                     return formValue;
@@ -519,8 +607,7 @@
                 }
             }
             else if (formField.fieldType === "singleSelect") {
-                if (formField.fieldInputType === "dropdown")
-                    return formValue === null || formValue === void 0 ? void 0 : formValue.value;
+                return (_a = formValue === null || formValue === void 0 ? void 0 : formValue.value) !== null && _a !== void 0 ? _a : '';
             }
             else if (formField.fieldType === "multiSelect") {
                 return formValue === null || formValue === void 0 ? void 0 : formValue.map(function (item) { return item.value; });
@@ -536,8 +623,8 @@
     DynamicFormComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "mis-dynamic-form",
-                    template: "<form [formGroup]=\"dynamicForm\">\n  <ng-container formArrayName=\"dynamicFields\">\n    <ng-container *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n      <div\n        class=\"dynamic-field multi-line-field-container\"\n        *ngIf=\"formFields[i].fieldType === 'input' && (formFields[i].fieldInputType === 'text' || formFields[i].fieldInputType === 'number')\"\n      >\n        <p class=\"h7 field-title-sm\">\n          {{ formFields[i].title }}\n        </p>\n        <div style=\"flex-basis: 100%\"></div>\n        <input\n          class=\"input-field ip-text\"\n          [type]=\"formFields[i].fieldInputType\"\n          [formControl]=\"fieldControl\"\n          [placeholder]=\"formFields[i].placeholderText ? formFields[i].placeholderText : 'Input Text'\"\n        />\n      </div>\n      <div\n        class=\"dynamic-field single-line-field-container\"\n        *ngIf=\"formFields[i].fieldType === 'singleSelect' && formFields[i].fieldInputType === 'dropdown'\"\n      >\n        <p class=\"h6\">\n          {{ formFields[i].title }}\n        </p>\n        <mis-dropdown\n          [searchEnabled]=\"false\"\n          [width]=\"'140px'\"\n          [data]=\"formFields[i].itemsList\"\n          [selectedItem]=\"fieldControl.value\"\n          (onChange)=\"updateSelectedValueForField(i, $event)\"\n        >\n        </mis-dropdown>\n      </div>\n      <div\n        class=\"dynamic-field single-line-field-container\"\n        *ngIf=\"formFields[i].fieldType === 'boolean' && formFields[i].fieldInputType === 'toggle'\"\n      >\n        <p class=\"h6\">\n          {{ formFields[i].title }}\n        </p>\n        <mis-switch [formControl]=\"fieldControl\"></mis-switch>\n      </div>\n      <div\n        class=\"dynamic-field multi-line-field-container\"\n        *ngIf=\"formFields[i].fieldType === 'input' && formFields[i].fieldInputType === 'textarea'\"\n      >\n        <p class=\"h7 field-title-sm\">\n          {{ formFields[i].title }}\n        </p>\n        <div style=\"flex-basis: 100%\"></div>\n        <textarea\n          class=\"input-field ip-textarea\"\n          type=\"text\"\n          [placeholder]=\"formFields[i].placeholderText ? formFields[i].placeholderText : 'Input Text'\"\n          [formControl]=\"fieldControl\"\n        ></textarea>\n      </div>\n      <div class=\"dynamic-field single-line-field-container\" *ngIf=\"formFields[i].fieldType === 'input' && formFields[i].fieldInputType === 'date'\">\n        <p class=\"h6\">\n          {{ formFields[i].title }}\n        </p>\n        <div class=\"date-picker-container\">\n          <input\n            class=\"date-picker\"\n            readonly\n            misTzDp\n            [dpConfig]=\"formFields[i].fieldConfig\"\n            (dateChange)=\"updateSelectedValueForField(i, $event)\"\n            [selectedDate]=\"fieldControl.value\"\n            [offsetY]=\"0\"\n            [value]=\"fieldControl.value\"\n            #dp\n          />\n          <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\" (click)=\"dp.click()\" />\n        </div>\n      </div>\n      <div\n        class=\"dynamic-field multi-line-field-container\"\n        *ngIf=\"formFields[i].fieldType === 'multiSelect' && formFields[i].fieldInputType === 'checkbox'\"\n      >\n        <p class=\"h7 field-title-sm\">\n          {{ formFields[i].title }}\n        </p>\n        <div style=\"flex-basis: 100%\"></div>\n        <div id=\"checkboxes-container\">\n          <div\n            class=\"radio-checkbox-common\"\n            *ngFor=\"let item of formFields[i].itemsList\"\n            [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, fieldControl.value) }\"\n            (click)=\"updateSelectedValueForMultiSelect(i, [item])\"\n          >\n            <img *ngIf=\"isCheckBoxSelected(item.label, fieldControl.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n            <p class=\"h6\">{{ item.label }}</p>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"dynamic-field single-line-field-container\"\n        *ngIf=\"formFields[i].fieldType === 'multiSelect' && formFields[i].fieldInputType === 'dropdown'\"\n      >\n        <p class=\"h6\">\n          {{ formFields[i].title }}\n        </p>\n        <mis-multi-select-dropdown\n          [width]=\"'140px'\"\n          [showSelectedCount]=\"true\"\n          [dropdownListWidth]=\"'256px'\"\n          [searchEnabled]=\"false\"\n          [hideApplyButton]=\"true\"\n          [data]=\"formFields[i].itemsList\"\n          [selectedItems]=\"fieldControl.value\"\n          (onChange)=\"fieldControl.setValue($event)\"\n        ></mis-multi-select-dropdown>\n      </div>\n    </ng-container>\n  </ng-container>\n</form>\n",
-                    styles: ["p{margin:0}::ng-deep .main-container{margin:0;max-width:100%}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{justify-content:space-between;align-items:center}.multi-line-field-container,.single-line-field-container{display:flex;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}.field-title-sm{margin-bottom:8px}.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::-moz-placeholder{color:var(--grey-seperators)}input:-ms-input-placeholder{color:var(--grey-seperators)}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)}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}"]
+                    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        <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && formFields[i]?.subFields?.length > 0\">\n          <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls; let j = index\">\n            <ng-container\n              [ngTemplateOutlet]=\"dynamicField\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: formFields[i].subFields[j],\n                control: subFieldControl\n              }\">\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\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    <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{justify-content:space-between;align-items:center}.multi-line-field-container,.single-line-field-container{display:flex;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}.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::-moz-placeholder{color:var(--grey-seperators)}input:-ms-input-placeholder{color:var(--grey-seperators)}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)}"]
                 },] }
     ];
     DynamicFormComponent.ctorParameters = function () { return []; };
@@ -547,7 +634,58 @@
         activeBtnIconUrl: [{ type: core.Input }],
         calendarIconUrl: [{ type: core.Input }],
         formUpdated: [{ type: core.Output }],
-        initializedDynamicForm: [{ type: core.Output }]
+        formValid: [{ type: core.Output }],
+        formInitialized: [{ type: core.Output }]
+    };
+    var dynamicFieldValidator = function (validators) {
+        return function (control) {
+            var value = control.value;
+            if (Array.isArray(value)) {
+                return null;
+            }
+            else if (typeof value === 'object') {
+                value = (value === null || value === void 0 ? void 0 : value.value) ? value.value : '';
+            }
+            var errors = null;
+            validators.forEach(function (validator) {
+                var error = null;
+                var message = validator.message;
+                switch (validator.type) {
+                    case "Required":
+                        error = forms.Validators.required(control);
+                        if (error)
+                            error = { Required: message };
+                        break;
+                    case "MinLength":
+                        error = forms.Validators.minLength(+validator.value)(control);
+                        message = message.replace('${0}', error === null || error === void 0 ? void 0 : error.minlength.requiredLength);
+                        if (error)
+                            error = { MinLength: message };
+                        break;
+                    case "MaxLength":
+                        error = forms.Validators.maxLength(+validator.value)(control);
+                        message = message.replace('${0}', error === null || error === void 0 ? void 0 : error.actualLength);
+                        if (error)
+                            error = { MaxLength: message };
+                        break;
+                    case "Email":
+                        error = forms.Validators.email(control);
+                        if (error)
+                            error = { Email: message };
+                        break;
+                    case "Custom":
+                        error = forms.Validators.pattern("" + validator.value)(control);
+                        if (error)
+                            error = { Custom: message };
+                        break;
+                    default:
+                        break;
+                }
+                if (error)
+                    errors = Object.assign(Object.assign({}, errors), error);
+            });
+            return errors;
+        };
     };
 
     var DynamicFormModule = /** @class */ (function () {