kwikid-forms 0.1.20 → 0.1.21

package/fesm2015/kwikid-forms.js

@@ -5,7 +5,7 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, ViewEncapsulation, Pipe, Inject, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, FormArray, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { logMethod, setMissingKeyValue, getObjectFromLocalStorage, isNotEmptyValue, isEmptyValue, checkObjectKeyExists, Source, setValueToObjectPath, Rule, Condition, Action, PATTERNS, Validation, isUndefined, replaceString, getObjectValueFromPath, ESourceKey } from 'kwikid-toolkit';
+import { logMethod, setMissingKeyValue, getObjectFromLocalStorage, isNotEmptyValue, isEmptyValue, checkObjectKeyExists, setValueToObjectPath, Source, Rule, Condition, Action, PATTERNS, Validation, isUndefined, replaceString, getObjectValueFromPath, ESourceKey } from 'kwikid-toolkit';
 import * as i2 from 'kwikui';
 import { KwikUIButtonModule, KwikUIInputModule, KwikUIButtonIconModule, KwikUIModule } from 'kwikui';
 import _ from 'lodash';
@@ -1366,44 +1366,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { handleGetKeyValue: [], drop: [], exit: [], enter: [], removeElement: [], editElement: [], handleOnSaveUpdateElement: [] } });
 
-var EActionKey;
-(function (EActionKey) {
-    EActionKey["SET_VALUE"] = "SET_VALUE";
-    EActionKey["SET_FIELD_DEFAULT_VALUE"] = "SET_FIELD_DEFAULT_VALUE";
-    EActionKey["FIELD_MESSAGE_SHOW"] = "FIELD_MESSAGE_SHOW";
-    EActionKey["FIELD_MESSAGES_HIDE"] = "FIELD_MESSAGES_HIDE";
-    EActionKey["FIELD_ERROR_SHOW"] = "FIELD_ERROR_SHOW";
-    EActionKey["FIELD_ERROR_HIDE"] = "FIELD_ERROR_HIDE";
-    EActionKey["FIELD_SHOW"] = "FIELD_SHOW";
-    EActionKey["FIELD_HIDE"] = "FIELD_HIDE";
-    EActionKey["FIELD_ENABLE"] = "FIELD_ENABLE";
-    EActionKey["FIELD_DISABLE"] = "FIELD_DISABLE";
-    EActionKey["FIELD_RESET"] = "FIELD_RESET";
-    EActionKey["HANDLE_CONNECTED_ELEMENTS"] = "HANDLE_CONNECTED_ELEMENTS";
-    EActionKey["CUSTOM"] = "CUSTOM";
-    EActionKey["FIELD_GROUP_SHOW"] = "FIELD_GROUP_SHOW";
-    EActionKey["FIELD_GROUP_HIDE"] = "FIELD_GROUP_HIDE";
-    EActionKey["FIELD_GROUP_ENABLE"] = "FIELD_GROUP_ENABLE";
-    EActionKey["FIELD_GROUP_DISABLE"] = "FIELD_GROUP_DISABLE";
-    EActionKey["SET_DROPDOWN_OPTIONS"] = "SET_DROPDOWN_OPTIONS";
-})(EActionKey || (EActionKey = {}));
-
-var EApiStatusType;
-(function (EApiStatusType) {
-    EApiStatusType["DEFAULT"] = "default";
-    EApiStatusType["LOADING"] = "loading";
-    EApiStatusType["SUCCESS"] = "success";
-    EApiStatusType["FAILED"] = "failed";
-})(EApiStatusType || (EApiStatusType = {}));
-
-var EMessageType;
-(function (EMessageType) {
-    EMessageType["DEFAULT"] = "default";
-    EMessageType["ERROR"] = "error";
-    EMessageType["SUCCESS"] = "success";
-    EMessageType["WARNING"] = "warning";
-})(EMessageType || (EMessageType = {}));
-
 var EFieldType;
 (function (EFieldType) {
     EFieldType["HTML"] = "html";
@@ -1560,6 +1522,9 @@ const convertFormFieldValueToStandardFormat = (field, value) => {
                 break;
         }
     }
+    else {
+        convertedValue = "";
+    }
     return convertedValue;
 };
 const convertFormFieldValueToKwikUIFormat = (field, value) => {
@@ -1609,1296 +1574,1098 @@ const convertFormFieldEmptyValueToKwikUIFormat = (field) => {
     return value;
 };
 
-class Defaults {
-    constructor(field, formFields, allFormsData, formData, previousFormData, takeAction) {
-        this._field = field;
-        this._formFields = formFields;
-        this._allFormsData = allFormsData;
-        this._formData = formData;
-        this._previousFormData = previousFormData;
-        this._takeAction = takeAction;
-    }
-    getFormFieldValue() {
-        return __awaiter(this, void 0, void 0, function* () {
-            let defaultValue;
-            const sources = this._field.default.value.sources;
-            let sourceIndex = 0;
-            for (let source of sources) {
-                const sources = new Source({
-                    FIELD_CONFIG: this._field,
-                    FORM_FIELDS: this._formFields,
-                    FORM_DATA: this._formData,
-                    PREVIOUS_FORM_DATA: this._previousFormData,
-                    ALL_FORMS_DATA: this._allFormsData
-                });
-                const value = sources.getValueFromSource(source);
-                // Set the Value of current source.
-                this._field = setValueToObjectPath(this._field, `default.value.sources.[${sourceIndex}].value`, value);
-                const validation = source.validation;
-                const triggers = validation.triggers;
-                const rules = validation.rules;
-                const actions = validation.actions;
-                const rulesMapping = new Rule(rules, {
-                    FIELD_CONFIG: this._field,
-                    FORM_FIELDS: this._formFields,
-                    FORM_DATA: this._formData,
-                    PREVIOUS_FORM_DATA: this._previousFormData,
-                    ALL_FORMS_DATA: this._allFormsData
-                }).mapping();
-                for (let action of actions) {
-                    const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
-                    if (conditionEvaluation) {
-                        const actions = new Action(action, rulesMapping, {
-                            FIELD_CONFIG: this._field,
-                            FORM_FIELDS: this._formFields,
-                            FORM_DATA: this._formData,
-                            PREVIOUS_FORM_DATA: this._previousFormData,
-                            ALL_FORMS_DATA: this._allFormsData
-                        }, this._takeAction);
-                        yield actions.execute();
-                    }
-                }
-                sourceIndex++;
+class Converter {
+    constructor() {
+        this.getFormFields = (formConfig) => {
+            let fields;
+            if (checkObjectKeyExists(formConfig, "multiForm")) {
+                fields = formConfig.multiForm.fields;
             }
-            defaultValue = this._field.default.value.value;
-            if (isEmptyValue(defaultValue)) {
-                defaultValue = convertFormFieldEmptyValueToKwikUIFormat(this._field);
+            else {
+                fields = formConfig.fields;
             }
-            return defaultValue;
-        });
-    }
-    getFormFieldOptions() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const optionsConfig = this._field.default.options;
-            const rules = optionsConfig.rules;
-            const actions = optionsConfig.actions;
-            const rulesMapping = new Rule(rules, {
-                FIELD_CONFIG: this._field,
-                FORM_FIELDS: this._formFields,
-                FORM_DATA: this._formData,
-                PREVIOUS_FORM_DATA: this._previousFormData,
-                ALL_FORMS_DATA: this._allFormsData
-            }).mapping();
-            for (let action of actions) {
-                const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
-                if (conditionEvaluation) {
-                    const actions = new Action(action, rulesMapping, {
-                        FIELD_CONFIG: this._field,
-                        FORM_FIELDS: this._formFields,
-                        FORM_DATA: this._formData,
-                        PREVIOUS_FORM_DATA: this._previousFormData,
-                        ALL_FORMS_DATA: this._allFormsData
-                    }, this._takeAction);
-                    yield actions.execute();
-                }
+            return fields;
+        };
+        this.setMissingFieldKeyValue = (field, key, value) => {
+            if (!checkObjectKeyExists(field, key)) {
+                field[key] = value;
             }
-        });
-    }
-}
-__decorate([
-    logMethod
-], Defaults.prototype, "getFormFieldValue", null);
-__decorate([
-    logMethod
-], Defaults.prototype, "getFormFieldOptions", null);
-
-class FormValidation {
-    constructor() { }
-    getFormFieldValidators(field) {
-        let validators = [];
-        if (checkObjectKeyExists(field, "validators") &&
-            checkObjectKeyExists(field.validators, "min") &&
-            isNotEmptyValue(field.validators.min)) {
-            validators.push(Validators.min(field.validators.min));
-        }
-        if (checkObjectKeyExists(field, "validators") &&
-            checkObjectKeyExists(field.validators, "max") &&
-            isNotEmptyValue(field.validators.max)) {
-            validators.push(Validators.max(field.validators.max));
-        }
-        if ((checkObjectKeyExists(field, "required") && field.required) ||
-            (checkObjectKeyExists(field, "validators") &&
-                checkObjectKeyExists(field.validators, "required") &&
-                field.validators.required)) {
-            validators.push(Validators.required);
-        }
-        if (checkObjectKeyExists(field, "validators") &&
-            checkObjectKeyExists(field.validators, "minLength") &&
-            isNotEmptyValue(field.validators.minLength)) {
-            validators.push(Validators.minLength(field.validators.minLength));
-        }
-        if (checkObjectKeyExists(field, "validators") &&
-            checkObjectKeyExists(field.validators, "maxLength") &&
-            isNotEmptyValue(field.validators.maxLength)) {
-            validators.push(Validators.maxLength(field.validators.maxLength));
-        }
-        if (checkObjectKeyExists(field, "validators") &&
-            checkObjectKeyExists(field.validators, "pattern") &&
-            isNotEmptyValue(field.validators.pattern)) {
-            if (checkObjectKeyExists(field.validators.pattern, "key")) {
-                if (field.validators.pattern.key === "CUSTOM") {
-                    validators.push(Validators.pattern(field.validators.pattern.pattern));
-                }
-                else {
-                    validators.push(Validators.pattern(PATTERNS[field.validators.pattern.key]));
-                }
+            return field;
+        };
+        this.setFieldKeyValue = (field, key, value) => {
+            field[key] = value;
+            return field;
+        };
+        this.removeFieldKey = (field, key) => {
+            if (checkObjectKeyExists(field, key)) {
+                delete field[key];
             }
-        }
-        return validators;
+            return field;
+        };
     }
-    getFormFieldsValidationErrors(formGroup) {
-        let errors = [];
-        for (const key in formGroup.controls) {
-            const controlErrors = formGroup.controls[key].errors;
-            if (controlErrors !== null && controlErrors !== undefined) {
-                Object.keys(controlErrors).forEach((keyError) => {
-                    errors.push({
-                        name: keyError,
-                        value: controlErrors[keyError]
-                    });
-                });
-            }
+    updateFormConfigMiscellaneous(formConfig, args) {
+        if (checkObjectKeyExists(args, "formsListLength")) {
+            formConfig = setValueToObjectPath(formConfig, "formsListLength", args.formsListLength);
         }
-        return errors;
+        return formConfig;
     }
-    getFormFieldsInvalidControls(formToInvestigate) {
-        var controls = [];
-        let recursiveFunc = (form) => {
-            Object.keys(form.controls).forEach((field) => {
-                const control = form.get(field);
-                if (control.invalid) {
-                    controls.push({
-                        key: field,
-                        invalid: true
-                    });
-                }
-                else {
-                    controls.push({
-                        key: field,
-                        invalid: false
-                    });
-                }
-                if (control instanceof FormGroup) {
-                    recursiveFunc(control);
+    updateFormConfigProperties(formConfig) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        const formProperties = {
+            header: {
+                title: {
+                    hidden: false,
+                    label: formConfig.title
+                },
+                steps: {
+                    hidden: false
                 }
-                else if (control instanceof FormArray) {
-                    recursiveFunc(control);
+            },
+            footer: {
+                viewFormsButton: {
+                    hidden: false,
+                    label: "View Forms"
+                },
+                saveButton: {
+                    hidden: false,
+                    label: "Save"
                 }
-            });
+            }
         };
-        recursiveFunc(formToInvestigate);
-        return controls;
+        if (checkObjectKeyExists(formConfig, "properties")) {
+            const headerTitleHidden = (_c = (_b = (_a = formConfig.properties.header) === null || _a === void 0 ? void 0 : _a.title) === null || _b === void 0 ? void 0 : _b.hidden) !== null && _c !== void 0 ? _c : formProperties.header.title.hidden;
+            const headerTitleLabel = (_f = (_e = (_d = formConfig.properties.header) === null || _d === void 0 ? void 0 : _d.title) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : formConfig.title;
+            const headerStepsHidden = (_j = (_h = (_g = formConfig.properties.header) === null || _g === void 0 ? void 0 : _g.steps) === null || _h === void 0 ? void 0 : _h.hidden) !== null && _j !== void 0 ? _j : formProperties.header.steps.hidden;
+            const viewFormsButtonHidden = (_m = (_l = (_k = formConfig.properties.footer) === null || _k === void 0 ? void 0 : _k.viewFormsButton) === null || _l === void 0 ? void 0 : _l.hidden) !== null && _m !== void 0 ? _m : formProperties.footer.viewFormsButton.hidden;
+            const viewFormsButtonLabel = (_q = (_p = (_o = formConfig.properties.footer) === null || _o === void 0 ? void 0 : _o.viewFormsButton) === null || _p === void 0 ? void 0 : _p.label) !== null && _q !== void 0 ? _q : formProperties.footer.viewFormsButton.label;
+            const saveButtonHidden = (_t = (_s = (_r = formConfig.properties.footer) === null || _r === void 0 ? void 0 : _r.saveButton) === null || _s === void 0 ? void 0 : _s.hidden) !== null && _t !== void 0 ? _t : formProperties.footer.saveButton.hidden;
+            const saveButtonLabel = (_w = (_v = (_u = formConfig.properties.footer) === null || _u === void 0 ? void 0 : _u.saveButton) === null || _v === void 0 ? void 0 : _v.label) !== null && _w !== void 0 ? _w : formProperties.footer.saveButton.label;
+            formConfig.properties = {
+                header: {
+                    title: {
+                        hidden: headerTitleHidden,
+                        label: headerTitleLabel
+                    },
+                    steps: {
+                        hidden: headerStepsHidden
+                    }
+                },
+                footer: {
+                    viewFormsButton: {
+                        hidden: viewFormsButtonHidden,
+                        label: viewFormsButtonLabel
+                    },
+                    saveButton: {
+                        hidden: saveButtonHidden,
+                        label: saveButtonLabel
+                    }
+                }
+            };
+        }
+        else {
+            formConfig.properties = formProperties;
+        }
+        return formConfig;
     }
-}
-__decorate([
-    logMethod
-], FormValidation.prototype, "getFormFieldValidators", null);
-__decorate([
-    logMethod
-], FormValidation.prototype, "getFormFieldsValidationErrors", null);
-__decorate([
-    logMethod
-], FormValidation.prototype, "getFormFieldsInvalidControls", null);
-
-class KwikIDFormViewService {
-    constructor() { }
-    // 'init' stage of the form
-    createFormGroup(fields, formData, previousFormData, allFormsData, takeAction) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let formGroup = new FormGroup({});
-            for (let field of fields) {
-                if (field.isFormElement) {
-                    const defaults = new Defaults(field, fields, allFormsData, formData, previousFormData, takeAction);
-                    let value = yield defaults.getFormFieldValue();
-                    if (checkObjectKeyExists(field, "default")) {
-                        if (checkObjectKeyExists(field.default, "options")) {
-                            if (field.default.options.triggers.includes("ON_INIT")) {
-                                yield defaults.getFormFieldOptions();
-                            }
-                        }
+    convertFormConfig(formConfig) {
+        const updateOnFieldType = (field) => {
+            const formatFieldTypeHtml = (field) => {
+                field = this.setFieldKeyValue(field, "isFormElement", false);
+                return field;
+            };
+            const formatFieldTypeTitle = (field) => {
+                field = this.setFieldKeyValue(field, "hidden", false);
+                field = this.setFieldKeyValue(field, "isFormElement", false);
+                return field;
+            };
+            const formatFieldTypeText = (field) => {
+                field = this.setFieldKeyValue(field, "isFormElement", true);
+                field.properties = this.setMissingFieldKeyValue(field.properties, "case", "default");
+                return field;
+            };
+            const formatFieldTypeCheckbox = (field) => {
+                field = this.setFieldKeyValue(field, "isFormElement", true);
+                return field;
+            };
+            const formatFieldTypeNumber = (field) => {
+                field = this.setFieldKeyValue(field, "isFormElement", true);
+                if (checkObjectKeyExists(field, "key")) {
+                    if (field.key === "aadhaar_number") {
+                        field = this.setFieldKeyValue(field, "type", "aadhaar_number");
                     }
-                    value = convertFormFieldValueToKwikUIFormat(field, value);
-                    const validators = new FormValidation().getFormFieldValidators(field);
-                    formGroup.addControl(field.key, new FormControl({ value: value, disabled: field.disabled }, { validators: validators }));
-                }
-            }
-            return formGroup;
-        });
-    }
-}
-__decorate([
-    logMethod
-], KwikIDFormViewService.prototype, "createFormGroup", null);
-
-class Apis {
-    constructor(object, takeAction) {
-        this._object = object;
-        this._takeAction = takeAction;
-        this._api = this._object.FIELD_CONFIG.api;
-        this._request = this._object.FIELD_CONFIG.api.request;
-        this._response = this._object.FIELD_CONFIG.api.response;
-        this._status = this._object.FIELD_CONFIG.api.status;
-    }
-    get object() {
-        return this._object;
-    }
-    set object(value) {
-        this._object = value;
-    }
-    setRequestBody() {
-        var _a, _b, _c, _d;
-        return __awaiter(this, void 0, void 0, function* () {
-            let params = this._request.body.params;
-            let paramIndex = 0;
-            for (let param of params) {
-                let sources = param.sources;
-                let sourceIndex = 0;
-                for (let source of sources) {
-                    const sources = new Source(this._object);
-                    const value = sources.getValueFromSource(source);
-                    // Set the Value of current source.
-                    this._object.FIELD_CONFIG = setValueToObjectPath(this._object.FIELD_CONFIG, `api.request.body.params[${paramIndex}].sources[${sourceIndex}].value`, value);
-                    const validation = source.validation;
-                    const triggers = (_a = validation === null || validation === void 0 ? void 0 : validation.triggers) !== null && _a !== void 0 ? _a : [];
-                    const rules = (_b = validation === null || validation === void 0 ? void 0 : validation.rules) !== null && _b !== void 0 ? _b : [];
-                    const actions = (_d = (_c = validation) === null || _c === void 0 ? void 0 : _c.actions) !== null && _d !== void 0 ? _d : [];
-                    const rulesMapping = new Rule(rules, this._object).mapping();
-                    for (let action of actions) {
-                        const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
-                        if (conditionEvaluation) {
-                            const actions = new Action(action, rulesMapping, this._object, this._takeAction);
-                            yield actions.execute();
-                        }
+                    if (field.key === "contact_number") {
+                        field = this.setFieldKeyValue(field, "type", "phone");
+                    }
+                    if (field.type === "phone" || field.type === "number") {
+                        field.properties = this.setMissingFieldKeyValue(field.properties, "countryCode", "+91");
+                        field.properties = this.setMissingFieldKeyValue(field.properties, "phoneMaskAfterCountryCode", "####-######");
+                        field.properties = this.setMissingFieldKeyValue(field.properties, "removeCountryCodeFromValue", true);
+                        field.properties = this.setMissingFieldKeyValue(field.properties, "decimal", "never");
+                        field.properties = this.setMissingFieldKeyValue(field.properties, "prefix", "");
+                        field.properties = this.setMissingFieldKeyValue(field.properties, "postfix", "");
+                        field.properties = this.setMissingFieldKeyValue(field.properties, "min", -Infinity);
+                        field.properties = this.setMissingFieldKeyValue(field.properties, "max", Infinity);
+                        field.properties = this.setMissingFieldKeyValue(field.properties, "precision", 2);
                     }
-                    sourceIndex++;
                 }
-                paramIndex++;
-            }
-            return this._object.FIELD_CONFIG;
-        });
-    }
-    validateRequestBody() {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const body = this._request.body;
-            const validation = body.validation;
-            const triggers = validation.triggers;
-            const rules = validation.rules;
-            const actions = (_a = validation) === null || _a === void 0 ? void 0 : _a.actions;
-            const rulesMapping = new Rule(rules, this._object).mapping();
-            for (let action of actions) {
-                const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
-                if (conditionSuccess) {
-                    const actions = new Action(action, rulesMapping, this._object, this._takeAction);
-                    yield actions.execute();
+                field = this.setFieldKeyValue(field, "hidden", false);
+                return field;
+            };
+            const formatFieldTypeDate = (field) => {
+                field = this.setFieldKeyValue(field, "isFormElement", true);
+                if (checkObjectKeyExists(field, "min")) {
+                    const tuiDay = convertFormFieldTypeDateToKwikUIFormat(field["min"]);
+                    field.properties = this.setFieldKeyValue(field.properties, "min", tuiDay);
                 }
-            }
-            return this._object.FIELD_CONFIG;
-        });
-    }
-    setRequestHeaders() {
-        var _a, _b, _c, _d;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (checkObjectKeyExists(this._request, "headers")) {
-                if (checkObjectKeyExists(this._request.headers, "params")) {
-                    let params = this._request.headers.params;
-                    let paramIndex = 0;
-                    for (let param of params) {
-                        let sources = param.sources;
-                        let sourceIndex = 0;
-                        for (let source of sources) {
-                            const sources = new Source(this._object);
-                            const value = sources.getValueFromSource(source);
-                            // Set the Value of current source.
-                            this._object.FIELD_CONFIG = setValueToObjectPath(this._object.FIELD_CONFIG, `api.request.headers.params[${paramIndex}].sources[${sourceIndex}].value`, value);
-                            const validation = source.validation;
-                            const triggers = (_a = validation === null || validation === void 0 ? void 0 : validation.triggers) !== null && _a !== void 0 ? _a : [];
-                            const rules = (_b = validation === null || validation === void 0 ? void 0 : validation.rules) !== null && _b !== void 0 ? _b : [];
-                            const actions = (_d = (_c = validation) === null || _c === void 0 ? void 0 : _c.actions) !== null && _d !== void 0 ? _d : [];
-                            const rulesMapping = new Rule(rules, this._object).mapping();
-                            for (let action of actions) {
-                                const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
-                                if (conditionEvaluation) {
-                                    const actions = new Action(action, rulesMapping, this._object, this._takeAction);
-                                    yield actions.execute();
-                                }
-                            }
-                            sourceIndex++;
-                        }
-                        paramIndex++;
-                    }
-                    return this._object.FIELD_CONFIG;
+                else {
+                    field.properties = this.setMissingFieldKeyValue(field.properties, "min", new TuiDay(0, 0, 1)); // Year - 0000, Month - 0 (0 Indexing), Day - 1
+                }
+                if (checkObjectKeyExists(field, "max")) {
+                    const tuiDay = convertFormFieldTypeDateToKwikUIFormat(field["max"]);
+                    field.properties = this.setFieldKeyValue(field.properties, "max", tuiDay);
                 }
                 else {
-                    return this._object.FIELD_CONFIG;
+                    field.properties = this.setMissingFieldKeyValue(field.properties, "max", new TuiDay(new Date().getFullYear(), // Year - 9999
+                    new Date().getMonth(), // Month - 11 (0 Indexing)
+                    new Date().getDate() // Day - 31
+                    ));
                 }
-            }
-            else {
-                return this._object.FIELD_CONFIG;
-            }
-        });
-    }
-    validateRequestHeaders() {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const headers = this._request.headers;
-            if (checkObjectKeyExists(this._request, "headers")) {
-                if (checkObjectKeyExists(this._request.headers, "validation")) {
-                    const validation = headers.validation;
-                    const triggers = validation.triggers;
-                    const rules = validation.rules;
-                    const actions = (_a = validation) === null || _a === void 0 ? void 0 : _a.actions;
-                    const rulesMapping = new Rule(rules, this._object).mapping();
-                    for (let action of actions) {
-                        const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
-                        if (conditionSuccess) {
-                            const actions = new Action(action, rulesMapping, this._object, this._takeAction);
-                            yield actions.execute();
+                field.properties = this.setMissingFieldKeyValue(field.properties, "placeholder", "");
+                field = this.setFieldKeyValue(field, "hidden", false);
+                return field;
+            };
+            const formatFieldTypePhone = (field) => {
+                field = this.setFieldKeyValue(field, "isFormElement", true);
+                return field;
+            };
+            const formatFieldTypeRadio = (field) => {
+                field = this.setFieldKeyValue(field, "isFormElement", true);
+                field.properties = this.setMissingFieldKeyValue(field.properties, "size", "m");
+                field.properties = this.setMissingFieldKeyValue(field.properties, "orientation", "vertical");
+                field = this.setFieldKeyValue(field, "hidden", false);
+                field.options = field.options.map((x) => {
+                    if (typeof x === "string" || typeof x === "number") {
+                        return { label: x, disabled: false, description: "" };
+                    }
+                    else {
+                        if (checkObjectKeyExists(x, "label") &&
+                            checkObjectKeyExists(x, "disabled") &&
+                            checkObjectKeyExists(x, "description")) {
+                            return x;
                         }
+                        if (!checkObjectKeyExists(x, "disabled")) {
+                            x = Object.assign(Object.assign({}, x), { disabled: false });
+                        }
+                        if (!checkObjectKeyExists(x, "description")) {
+                            x = Object.assign(Object.assign({}, x), { description: false });
+                        }
+                        return x;
+                    }
+                });
+                return field;
+            };
+            const formatFieldTypeSearchText = (field) => {
+                field = this.setFieldKeyValue(field, "isFormElement", true);
+                if (checkObjectKeyExists(field, "type")) {
+                    if (field.type === "search-text") {
+                        field = this.setFieldKeyValue(field, "type", "dropdown-with-search");
                     }
-                    return this._object.FIELD_CONFIG;
                 }
-                else {
-                    return this._object.FIELD_CONFIG;
+                return field;
+            };
+            const formatFieldTypeDropdownWithSearch = (field) => {
+                field = this.setFieldKeyValue(field, "isFormElement", true);
+                return field;
+            };
+            const formatFieldTypeApiCall = (field) => {
+                field = this.setFieldKeyValue(field, "isFormElement", true);
+                if (!checkObjectKeyExists(field.properties, "shape")) {
+                    field.properties = this.setFieldKeyValue(field.properties, "shape", null);
                 }
-            }
-            else {
-                return this._object.FIELD_CONFIG;
-            }
-        });
-    }
-    validateResponse() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const validation = this._response.validation;
-            const triggers = validation.triggers;
-            const rules = validation.rules;
-            const actions = validation.actions;
-            const rulesMapping = new Rule(rules, this._object).mapping();
-            for (let action of actions) {
-                const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
-                if (conditionSuccess) {
-                    const actions = new Action(action, rulesMapping, this._object, this._takeAction);
-                    yield actions.execute();
-                }
-            }
-            return this._object.FIELD_CONFIG;
-        });
-    }
-}
-__decorate([
-    logMethod
-], Apis.prototype, "setRequestBody", null);
-__decorate([
-    logMethod
-], Apis.prototype, "validateRequestBody", null);
-__decorate([
-    logMethod
-], Apis.prototype, "setRequestHeaders", null);
-__decorate([
-    logMethod
-], Apis.prototype, "validateRequestHeaders", null);
-__decorate([
-    logMethod
-], Apis.prototype, "validateResponse", null);
-
-/**
- * Generated class for the SafeHtmlPipe pipe.
- *
- * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
- */
-class SafeHtmlPipe$1 {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    transform(html) {
-        return this.sanitizer.bypassSecurityTrustHtml(html);
-    }
-}
-/** @nocollapse */ SafeHtmlPipe$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe$1, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ SafeHtmlPipe$1.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe$1, name: "safeHtml" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe$1, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: "safeHtml"
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
-
-class KwikIDFormViewComponent {
-    constructor(push, alert, formViewService) {
-        this.push = push;
-        this.alert = alert;
-        this.formViewService = formViewService;
-        this.isMobileView = false;
-        this.onClickViewForms = new EventEmitter();
-        this.onClickSaveForm = new EventEmitter();
-        this.onClickApiCall = new EventEmitter();
-        this.fieldGroups = {};
-        this.formFields = [];
-        this.previousFormData = {};
-        this.formsListLength = 0;
-        this.loading = true;
-        this.viewFormsButton = {
-            disabled: false,
-            showLoader: false
-        };
-        this.saveFormButton = {
-            disabled: false,
-            showLoader: false
-        };
-        this.formGroup = new FormGroup({});
-        this.showErrorNotification = false;
-    }
-    ngOnInit() {
-        (() => __awaiter(this, void 0, void 0, function* () {
-            this.formsList = this.formsList.filter((form) => {
-                if (checkObjectKeyExists(form, "hidden")) {
-                    if (!form.hidden) {
-                        return form;
-                    }
+                if (!checkObjectKeyExists(field, "showLoader")) {
+                    field = this.setFieldKeyValue(field, "showLoader", false);
                 }
-            });
-            this.formsListLength = this.findFormsListLength(this.formsList);
-            yield this.initFormConfig(this.formConfig);
-            this.loading = false;
-        }))();
-    }
-    ngAfterViewInit() { }
-    ngOnChanges(changes) {
-        const verifyChange = (key) => {
-            return checkObjectKeyExists(changes, key) && !changes[key].firstChange;
-        };
-        if (verifyChange("formData")) {
-            this.formData = Object.assign(Object.assign({}, this.formData), changes.formData.currentValue);
-        }
-        if (verifyChange("isMobileView")) {
-            this.isMobileView = changes.isMobileView.currentValue;
-        }
-        if (verifyChange("allFormsData")) {
-            this.allFormsData = changes.allFormsData.currentValue;
-        }
-        if (verifyChange("formsList")) {
-            this.formsList = changes.formsList.currentValue.filter((form) => {
-                if (checkObjectKeyExists(form, "hidden")) {
-                    if (!form.hidden) {
-                        return form;
-                    }
+                if (!checkObjectKeyExists(field.properties, "size")) {
+                    field.properties = this.setFieldKeyValue(field.properties, "size", "m");
                 }
-            });
-            this.formsListLength = this.findFormsListLength(this.formsList);
-        }
-        if (verifyChange("formConfig")) {
-            this.formConfig = changes.formConfig.currentValue;
-            (() => __awaiter(this, void 0, void 0, function* () {
-                yield this.initFormConfig(this.formConfig);
-            }))();
-        }
-    }
-    findFormsListLength(formsList) {
-        const _formsList = formsList.filter((form) => {
-            if (checkObjectKeyExists(form, "type")) {
-                if (form.type === "form") {
-                    if (checkObjectKeyExists(form, "hidden")) {
-                        if (!form.hidden) {
-                            return form;
-                        }
-                    }
+                if (!checkObjectKeyExists(field, "api")) {
+                    field = this.setFieldKeyValue(field, "api", {});
+                    field.api = this.setMissingFieldKeyValue(field.api, "url", "");
+                    field.api = this.setMissingFieldKeyValue(field.api, "request", "");
+                    field.api = this.setMissingFieldKeyValue(field.api, "response", "");
+                    field.api = this.setMissingFieldKeyValue(field.api, "status", "");
+                    field.api.status = this.setMissingFieldKeyValue(field.api.status, "value", "default");
+                    field.api.status = this.setMissingFieldKeyValue(field.api.status, "labels", {
+                        default: "Call API",
+                        loading: "Call API",
+                        success: "API Success",
+                        failed: "API Failed"
+                    });
                 }
+                return field;
+            };
+            const formatFieldTypeOtp = (field) => {
+                field = this.setFieldKeyValue(field, "isFormElement", true);
+                field.properties = this.setMissingFieldKeyValue(field.properties, "mask", new Array(field.properties.otpLength).fill("#").join(" "));
+                field = this.setFieldKeyValue(field, "hidden", false);
+                return field;
+            };
+            const formatFieldTypeAadhaarNumber = (field) => {
+                field = this.setFieldKeyValue(field, "isFormElement", true);
+                return field;
+            };
+            switch (field.type) {
+                case EFieldType.HTML:
+                    field = formatFieldTypeHtml(field);
+                    break;
+                case EFieldType.TITLE:
+                    field = formatFieldTypeTitle(field);
+                    break;
+                case EFieldType.TEXT:
+                    field = formatFieldTypeText(field);
+                    break;
+                case EFieldType.CHECKBOX:
+                    field = formatFieldTypeCheckbox(field);
+                    break;
+                case EFieldType.NUMBER:
+                    field = formatFieldTypeNumber(field);
+                    break;
+                case EFieldType.DATE:
+                    field = formatFieldTypeDate(field);
+                    break;
+                case EFieldType.PHONE:
+                    field = formatFieldTypePhone(field);
+                    break;
+                case EFieldType.RADIO:
+                    field = formatFieldTypeRadio(field);
+                    break;
+                case "search-text":
+                    field = formatFieldTypeSearchText(field);
+                    break;
+                case EFieldType.DROPDOWN_WITH_SEARCH:
+                    field = formatFieldTypeDropdownWithSearch(field);
+                    break;
+                case EFieldType.API_CALL:
+                    field = formatFieldTypeApiCall(field);
+                    break;
+                case EFieldType.OTP:
+                    field = formatFieldTypeOtp(field);
+                    break;
+                case EFieldType.AADHAAR_NUMBER:
+                    field = formatFieldTypeAadhaarNumber(field);
+                    break;
+                default:
+                    break;
             }
-            else if (checkObjectKeyExists(form, "hidden")) {
-                if (!form.hidden) {
-                    return form;
+            return field;
+        };
+        const getConnectedElementTypeValueObject = (key) => {
+            const object = {
+                key: key,
+                conditions: { formula: "", rules: [] },
+                actions: { success: [], failure: [] }
+            };
+            return object;
+        };
+        const formatFieldKeys = (field) => {
+            if (checkObjectKeyExists(field, "connectedTo")) {
+                if (typeof field["connectedTo"] === "string") {
+                    field["connectedElements"] = [
+                        getConnectedElementTypeValueObject(field["connectedTo"])
+                    ];
                 }
-            }
-        });
-        return _formsList.length;
-    }
-    initFormConfig(formConfig) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.setFormFieldsFromFormConfig(formConfig);
-            this.setFormFieldGroupsFromFormConfig(formConfig);
-            this.setFormDataFromAllFormsData();
-            this.formGroup = yield this.formViewService.createFormGroup(this.formFields, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
-            for (let field of this.formFields) {
-                if (field.isFormElement) {
-                    this.previousFormData = Object.assign(Object.assign({}, this.previousFormData), { [field.key]: this.formGroup.controls[field.key].value });
-                    this.formGroup.controls[field.key].valueChanges
-                        .pipe(pairwise())
-                        .subscribe(([previousValue, currentValue]) => {
-                        this.previousFormData = Object.assign(Object.assign({}, this.previousFormData), { [field.key]: convertFormFieldValueToStandardFormat(field, previousValue) });
-                        this.formData = Object.assign(Object.assign({}, this.formData), { [field.key]: convertFormFieldValueToStandardFormat(field, currentValue) });
+                else {
+                    field["connectedTo"] = field["connectedTo"].map((key) => {
+                        return getConnectedElementTypeValueObject(key);
                     });
+                    field["connectedElements"] = field["connectedTo"];
                 }
             }
-            for (let field of this.formFields) {
-                if (field.isFormElement) {
-                    if (field.validation.triggers.includes("ON_INIT")) {
-                        const validations = new Validation({
-                            FIELD_CONFIG: field,
-                            FORM_FIELDS: this.formFields,
-                            FORM_DATA: this.formData,
-                            PREVIOUS_FORM_DATA: this.previousFormData,
-                            ALL_FORMS_DATA: this.allFormsData
-                        }, this.takeAction.bind(this));
-                        yield validations.validate(field.validation);
-                    }
-                    if (checkObjectKeyExists(field, "connectedElements")) {
-                        this.handleConnectedElements({
-                            key: field.key,
-                            value: this.formGroup.controls[field.key].value
-                        }, "ON_INIT");
-                    }
+            this.removeFieldKey(field, "connectedTo");
+            if (checkObjectKeyExists(field, "connectedToParent")) {
+                if (typeof field["connectedToParent"] === "string") {
+                    field["connectedParentFields"] = [
+                        getConnectedElementTypeValueObject(field["connectedToParent"])
+                    ];
+                }
+                else {
+                    field["connectedParentFields"] = getConnectedElementTypeValueObject(field["connectedToParent"]);
                 }
             }
-        });
-    }
-    setFormFieldsFromFormConfig(formConfig) {
-        if (checkObjectKeyExists(formConfig, "fields")) {
-            this.formFields = formConfig.fields;
-        }
-        else if (checkObjectKeyExists(formConfig, "multiForm") &&
-            checkObjectKeyExists(formConfig.multiForm, "fields")) {
-            this.formFields = formConfig.multiForm.fields;
-        }
-    }
-    setFormFieldGroupsFromFormConfig(formConfig) {
-        this.fieldGroups = formConfig.fieldGroups;
-    }
-    setFormDataFromAllFormsData() {
-        if (checkObjectKeyExists(this.allFormsData, this.formConfig.key)) {
-            this.formData = this.allFormsData[this.formConfig.key];
-        }
-        else {
-            this.formData = {};
-        }
-    }
-    handleConnectedElementFieldGroupActions(childFieldGroupConfig, parentField) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (checkObjectKeyExists(childFieldGroupConfig, "rules")) {
-                const rulesMapping = new Rule(childFieldGroupConfig.rules, {
-                    FIELD_CONFIG: parentField,
-                    FORM_DATA: this.formData,
-                    PREVIOUS_FORM_DATA: this.previousFormData,
-                    ALL_FORMS_DATA: this.allFormsData
-                }).mapping();
-                for (let action of childFieldGroupConfig.actions) {
-                    const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
-                    if (conditionSuccess) {
-                        const actions = new Action(action, rulesMapping, {
-                            FIELD_CONFIG: parentField,
-                            FORM_FIELDS: this.formFields,
-                            FORM_DATA: this.formData,
-                            PREVIOUS_FORM_DATA: this.previousFormData,
-                            ALL_FORMS_DATA: this.allFormsData
-                        }, this.takeActionOnFieldGroup.bind(this));
-                        yield actions.execute();
-                    }
+            this.removeFieldKey(field, "connectedToParent");
+            this.removeFieldKey(field, "sideEffect");
+            return field;
+        };
+        const updateFieldValidatorConfig = (field) => {
+            var _a, _b, _c, _d, _e;
+            if (field.isFormElement) {
+                const validators = checkObjectKeyExists(field, "validators")
+                    ? field.validators
+                    : {};
+                field = this.setMissingFieldKeyValue(field, "validators", {});
+                field = this.setFieldKeyValue(field, "validators", Object.assign(Object.assign({}, field["validators"]), { min: checkObjectKeyExists(validators, "min")
+                        ? isNotEmptyValue(validators.min)
+                            ? Number(validators.min)
+                            : null
+                        : checkObjectKeyExists(field, "min")
+                            ? Number(field.min)
+                            : null, max: checkObjectKeyExists(validators, "max")
+                        ? isNotEmptyValue(validators.max)
+                            ? Number(validators.max)
+                            : null
+                        : checkObjectKeyExists(field, "max")
+                            ? Number(field.max)
+                            : null, required: checkObjectKeyExists(validators, "required")
+                        ? Boolean(validators.required)
+                        : checkObjectKeyExists(field, "required")
+                            ? Boolean(field.required)
+                            : false, minLength: checkObjectKeyExists(validators, "minLength")
+                        ? isNotEmptyValue(validators.minLength)
+                            ? Number(validators.minLength)
+                            : null
+                        : checkObjectKeyExists(field, "minLength")
+                            ? Number(field.minLength)
+                            : null, maxLength: checkObjectKeyExists(validators, "maxLength")
+                        ? isNotEmptyValue(validators.maxLength)
+                            ? Number(validators.maxLength)
+                            : null
+                        : checkObjectKeyExists(field, "length")
+                            ? Number(field.length)
+                            : checkObjectKeyExists(field, "maxLength")
+                                ? Number(field.maxLength)
+                                : null, pattern: checkObjectKeyExists(validators, "pattern")
+                        ? isNotEmptyValue(validators.pattern)
+                            ? validators.pattern
+                            : undefined
+                        : checkObjectKeyExists(field, "pattern")
+                            ? { key: "CUSTOM", pattern: String(field.pattern) }
+                            : checkObjectKeyExists(field, "regex")
+                                ? { key: "CUSTOM", pattern: String(field.regex) }
+                                : undefined }));
+                delete field.min;
+                delete field.max;
+                delete field.required;
+                delete field.minLength;
+                delete field.length;
+                delete field.maxLength;
+                delete field.pattern;
+                delete field.regex;
+                switch (field.type) {
+                    case EFieldType.TEXT:
+                        delete field.validators.min;
+                        delete field.validators.max;
+                        break;
+                    case EFieldType.CHECKBOX:
+                        delete field.validators.min;
+                        delete field.validators.max;
+                        break;
+                    default:
+                        break;
                 }
-            }
-        });
-    }
-    handleConnectedElementFieldGroup(currentField, connectedFieldGroupConfig, eventType) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (checkObjectKeyExists(connectedFieldGroupConfig, "triggers")) {
-                if (connectedFieldGroupConfig.triggers.includes(eventType)) {
-                    yield this.handleConnectedElementFieldGroupActions(connectedFieldGroupConfig, currentField);
+                if (isEmptyValue((_a = field.validators) === null || _a === void 0 ? void 0 : _a.min)) {
+                    delete field.validators.min;
                 }
-            }
-        });
-    }
-    handleConnectedElementFieldActions(connectedFieldConfig, connectedField) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (checkObjectKeyExists(connectedFieldConfig, "rules")) {
-                const rulesMapping = new Rule(connectedFieldConfig.rules, {
-                    FIELD_CONFIG: connectedField,
-                    FORM_DATA: this.formData,
-                    PREVIOUS_FORM_DATA: this.previousFormData,
-                    ALL_FORMS_DATA: this.allFormsData
-                }).mapping();
-                for (let action of connectedFieldConfig.actions) {
-                    const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
-                    if (conditionSuccess) {
-                        const actions = new Action(action, rulesMapping, {
-                            FORM_FIELDS: this.formFields,
-                            FIELD_CONFIG: connectedField,
-                            FORM_DATA: this.formData,
-                            PREVIOUS_FORM_DATA: this.previousFormData,
-                            ALL_FORMS_DATA: this.allFormsData
-                        }, this.takeAction.bind(this));
-                        yield actions.execute();
-                    }
+                if (isEmptyValue((_b = field.validators) === null || _b === void 0 ? void 0 : _b.max)) {
+                    delete field.validators.min;
                 }
-            }
-            return connectedField;
-        });
-    }
-    handleConnectedElementFields(currentField, connectedFieldConfig, eventType, nested) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let connectedField = getFormFieldByKey(this.formFields, connectedFieldConfig["key"]);
-            if (checkObjectKeyExists(connectedFieldConfig, "triggers")) {
-                if (connectedFieldConfig.triggers.includes(eventType)) {
-                    connectedField = yield this.handleConnectedElementFieldActions(connectedFieldConfig, connectedField);
+                if (isEmptyValue((_c = field.validators) === null || _c === void 0 ? void 0 : _c.minLength)) {
+                    delete field.validators.minLength;
                 }
-            }
-            if (checkObjectKeyExists(connectedFieldConfig, "handleNestedFields")) {
-                if (connectedFieldConfig.handleNestedFields) {
-                    this.handleConnectedElements({ key: connectedFieldConfig.key }, eventType);
+                if (isEmptyValue((_d = field.validators) === null || _d === void 0 ? void 0 : _d.maxLength)) {
+                    delete field.validators.maxLength;
                 }
-            }
-            return currentField;
-        });
-    }
-    handleConnectedElements(e, eventType) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let currentField = getFormFieldByKey(this.formFields, e.key);
-            if (currentField !== undefined) {
-                if (checkObjectKeyExists(currentField, "connectedElements")) {
-                    if (checkObjectKeyExists(currentField.connectedElements, "connectedFieldGroups")) {
-                        let connectedFieldGroups = currentField.connectedElements.connectedFieldGroups;
-                        for (let connectedFieldGroupConfig of connectedFieldGroups) {
-                            yield this.handleConnectedElementFieldGroup(currentField, connectedFieldGroupConfig, eventType);
-                        }
-                    }
-                    if (checkObjectKeyExists(currentField.connectedElements, "connectedFields")) {
-                        let connectedFields = currentField.connectedElements.connectedFields;
-                        for (let connectedFieldConfig of connectedFields) {
-                            currentField = yield this.handleConnectedElementFields(currentField, connectedFieldConfig, eventType, eventType);
-                        }
-                    }
+                if (isEmptyValue((_e = field.validators) === null || _e === void 0 ? void 0 : _e.pattern)) {
+                    delete field.validators.pattern;
                 }
+                field.focus = false;
+                field.invalid = false;
             }
-            else {
-                throw new Error(`Field for the given key ['${e.key}'] is not found with eventType: '${eventType}'.`);
-            }
-        });
-    }
-    // DOM Event Handlers
-    handleGetKeyValue(e) {
-        this.formGroup.patchValue({
-            [e.key]: e.value
-        }, { emitEvent: false });
-        const field = getFormFieldByKey(this.formFields, e.key);
-        this.formData[e.key] = convertFormFieldValueToStandardFormat(field, e.value);
-        if (field.isFormElement &&
-            field.validation.triggers.includes("ON_CHANGE")) {
-            const validations = new Validation({
-                FIELD_CONFIG: field,
-                FORM_FIELDS: this.formFields,
-                FORM_DATA: this.formData,
-                PREVIOUS_FORM_DATA: this.previousFormData,
-                ALL_FORMS_DATA: this.allFormsData
-            }, this.takeAction.bind(this));
-            (() => __awaiter(this, void 0, void 0, function* () {
-                yield validations.validate(field.validation);
-            }))();
-        }
-        if (field.isFormElement &&
-            checkObjectKeyExists(field, "connectedElements")) {
-            this.handleConnectedElements({
-                key: field.key,
-                value: this.formGroup.controls[field.key].value
-            }, "ON_CHANGE");
-        }
-    }
-    handleOnClickResetFormFields(e, field) {
-        return __awaiter(this, void 0, void 0, function* () {
-            for (let f of field.reset.fields) {
-                for (let action of f.actions) {
-                    const resetField = getFormFieldByKey(this.formFields, action.props.fieldKey);
-                    const actions = new Action(action, {}, {
-                        FIELD_CONFIG: resetField,
-                        FORM_FIELDS: this.formFields,
-                        FORM_DATA: this.formData,
-                        PREVIOUS_FORM_DATA: this.previousFormData,
-                        ALL_FORMS_DATA: this.allFormsData
-                    }, this.takeAction.bind(this));
-                    yield actions.execute();
+            return field;
+        };
+        const updateFieldDefaultValueConfig = (field) => {
+            if (field.isFormElement) {
+                if (checkObjectKeyExists(field, "defaultValue")) {
+                    return field;
                 }
-            }
-        });
-    }
-    handleOnClickApiCall(e) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return __awaiter(this, void 0, void 0, function* () {
-            let field = getFormFieldByKey(this.formFields, e.key);
-            if (field.type === "api-call") {
-                // set button status to loading
-                field["api"]["status"]["value"] = EApiStatusType.LOADING;
-                field["showLoader"] = true;
-                this.viewFormsButton["disabled"] = true;
-                this.viewFormsButton["showLoader"] = true;
-                this.saveFormButton["disabled"] = true;
-                this.saveFormButton["showLoader"] = true;
-                const apis = new Apis({
-                    FIELD_CONFIG: field,
-                    FORM_FIELDS: this.formFields,
-                    FORM_DATA: this.formData,
-                    PREVIOUS_FORM_DATA: this.previousFormData,
-                    ALL_FORMS_DATA: this.allFormsData
-                }, this.takeAction.bind(this));
-                field = yield apis.setRequestHeaders();
-                field = yield apis.validateRequestHeaders();
-                field = yield apis.setRequestBody();
-                field = yield apis.validateRequestBody();
-                if (field.api.request.body.validation.is_valid) {
-                    // Call API Here
-                    let apiCallResponse = undefined;
-                    if (field.api.request.url.hasOwnProperty("type") &&
-                        field.api.request.url.type === "MOCK") {
-                        apiCallResponse = field.api.request.url.data;
-                    }
-                    else {
-                        const url = field.api.request.url;
-                        const method = (_b = (_a = field.api.request) === null || _a === void 0 ? void 0 : _a.method) !== null && _b !== void 0 ? _b : "POST";
-                        const headers = Object.assign({ "Content-Type": "application/json" }, (((_d = (_c = field.api.request) === null || _c === void 0 ? void 0 : _c.headers) === null || _d === void 0 ? void 0 : _d.value) || {}));
-                        const body = (_g = (_f = (_e = field.api.request) === null || _e === void 0 ? void 0 : _e.body) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : null;
-                        const response = yield fetch(url, {
-                            method: method,
-                            headers: Object.assign({}, headers),
-                            body: JSON.stringify(body)
-                        });
-                        apiCallResponse = yield response.json();
-                    }
-                    this.formData = Object.assign(Object.assign({}, this.formData), { [field.key]: apiCallResponse });
-                    this.formGroup.patchValue({
-                        [field.key]: apiCallResponse
-                    }, { emitEvent: false });
-                    const apis = new Apis({
-                        FIELD_CONFIG: field,
-                        FORM_FIELDS: this.formFields,
-                        FORM_DATA: this.formData,
-                        PREVIOUS_FORM_DATA: this.previousFormData,
-                        ALL_FORMS_DATA: this.allFormsData
-                    }, this.takeAction.bind(this));
-                    (() => __awaiter(this, void 0, void 0, function* () {
-                        field = yield apis.validateResponse();
-                    }))();
+                else if (checkObjectKeyExists(field, "default")) {
+                    return field;
                 }
                 else {
-                    // Request Body Validation Failed
-                    // Highlight Error in UI to User to Retry After Sometime.
-                    // Take Action based on Validation
-                    setTimeout(() => {
-                        field["api"]["status"]["value"] = EApiStatusType.FAILED;
-                        field["showLoader"] = false;
-                    }, 500);
-                }
-                this.viewFormsButton["disabled"] = false;
-                this.viewFormsButton["showLoader"] = false;
-                this.saveFormButton["disabled"] = false;
-                this.saveFormButton["showLoader"] = false;
-            }
-        });
-    }
-    handleOnClickViewForms(e) {
-        this.onClickViewForms.emit({
-            clicked: true
-        });
-    }
-    handleOnClickSaveForm(e) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let formData = this.formGroup.getRawValue();
-            for (let field of this.formFields) {
-                if (field.isFormElement) {
-                    if (field.hidden) {
-                        delete formData[field.key];
+                    if (checkObjectKeyExists(field, "defaultVal")) {
+                        // Currently below line is commented because it caused issues in setting Default Value.
+                        // field["defaultValue"] = field["defaultVal"];
+                        // delete field["defaultVal"];
+                    }
+                    // TODO: Condition for all_forms_data is not considered yet.
+                    if (field.autoPopulateFromSummaryData) {
+                        field["defaultValue"] = {
+                            is_found: false,
+                            value: "",
+                            sources: [
+                                {
+                                    source: "summary_data",
+                                    summary_data: {
+                                        path: `$.${field.key}`,
+                                        validation: {
+                                            rules: [
+                                                {
+                                                    key: "1",
+                                                    type: "is_not_empty",
+                                                    is_not_empty: {
+                                                        value: true
+                                                    }
+                                                }
+                                            ],
+                                            actions: [
+                                                {
+                                                    type: "set_default_value_found",
+                                                    condition: "1",
+                                                    set_default_value_found: {
+                                                        value: true
+                                                    }
+                                                },
+                                                {
+                                                    type: "enable_field",
+                                                    condition: "1 OR NOT(1)",
+                                                    enable_field: { value: true }
+                                                }
+                                            ]
+                                        }
+                                    }
+                                }
+                            ]
+                        };
+                    }
+                    else if (checkObjectKeyExists(field, "autofill")) {
+                        if (checkObjectKeyExists(field.autofill, "type")) {
+                            if (field.autofill.type === "storage") {
+                                field["defaultValue"] = {
+                                    is_found: false,
+                                    value: "",
+                                    sources: [
+                                        {
+                                            source: "browser_storage",
+                                            browser_storage: {
+                                                path: `$.${field.key}`,
+                                                validation: {
+                                                    rules: [
+                                                        {
+                                                            key: "1",
+                                                            type: "is_not_empty",
+                                                            is_not_empty: {
+                                                                value: true
+                                                            }
+                                                        }
+                                                    ],
+                                                    actions: [
+                                                        {
+                                                            type: "set_default_value_found",
+                                                            condition: "1",
+                                                            set_default_value_found: {
+                                                                value: true
+                                                            }
+                                                        },
+                                                        {
+                                                            type: "enable_field",
+                                                            condition: "1 OR NOT(1)",
+                                                            enable_field: { value: true }
+                                                        }
+                                                    ]
+                                                }
+                                            }
+                                        }
+                                    ]
+                                };
+                            }
+                            else if (field.autofill.type === "config") {
+                                field["defaultValue"] = {
+                                    is_found: false,
+                                    value: "",
+                                    sources: [
+                                        {
+                                            source: "field_config",
+                                            field_config: {
+                                                path: `$.${field.key}`,
+                                                validation: {
+                                                    rules: [
+                                                        {
+                                                            key: "1",
+                                                            type: "is_not_empty",
+                                                            is_not_empty: {
+                                                                value: true
+                                                            }
+                                                        }
+                                                    ],
+                                                    actions: [
+                                                        {
+                                                            type: "set_default_value_found",
+                                                            condition: "1",
+                                                            set_default_value_found: {
+                                                                value: true
+                                                            }
+                                                        },
+                                                        {
+                                                            type: "enable_field",
+                                                            condition: "1 OR NOT(1)",
+                                                            enable_field: { value: true }
+                                                        }
+                                                    ]
+                                                }
+                                            }
+                                        }
+                                    ]
+                                };
+                            }
+                        }
                     }
                     else {
-                        formData[field.key] = convertFormFieldValueToStandardFormat(field, formData[field.key]);
+                        field["defaultValue"] = {
+                            is_found: false,
+                            value: "",
+                            sources: [
+                                {
+                                    source: "form_data",
+                                    form_data: {
+                                        path: `$.${field.key}`,
+                                        validation: {
+                                            rules: [
+                                                {
+                                                    key: "1",
+                                                    type: "is_not_empty",
+                                                    is_not_empty: {
+                                                        value: true
+                                                    }
+                                                }
+                                            ],
+                                            actions: [
+                                                {
+                                                    type: "set_default_value_found",
+                                                    condition: "1",
+                                                    set_default_value_found: {
+                                                        value: true
+                                                    }
+                                                },
+                                                {
+                                                    type: "enable_field",
+                                                    condition: "1 OR NOT(1)",
+                                                    enable_field: { value: true }
+                                                }
+                                            ]
+                                        }
+                                    }
+                                }
+                            ]
+                        };
                     }
                 }
+                delete field["defaultVal"];
             }
-            if (this.formGroup.invalid) {
-                const controls = new FormValidation().getFormFieldsInvalidControls(this.formGroup);
-                let firstFieldWithError = "";
-                for (let control of controls) {
-                    if (control.invalid && isEmptyValue(firstFieldWithError)) {
-                        firstFieldWithError = control.key;
-                    }
-                    this.formFields = showFormFieldError(this.formFields, this.formGroup.controls[control.key].errors, control.key, control.invalid);
-                }
-                this.toggleErrorNotification(true);
-                setTimeout(() => {
-                    this.toggleErrorNotification(false);
-                }, 3000);
-                return;
+            return field;
+        };
+        const updateFieldMessages = (field) => {
+            if (field.isFormElement) {
+                field = this.setMissingFieldKeyValue(field, "messages", []);
             }
-            for (let field of this.formFields) {
-                if (field.isFormElement &&
-                    field.validation.triggers.includes("ON_SAVE")) {
-                    const validations = new Validation({
-                        FIELD_CONFIG: field,
-                        FORM_FIELDS: this.formFields,
-                        FORM_DATA: this.formData,
-                        PREVIOUS_FORM_DATA: this.previousFormData,
-                        ALL_FORMS_DATA: this.allFormsData
-                    }, this.takeAction.bind(this));
-                    yield validations.validate(field.validation);
-                    if (!field.validation.is_valid) {
-                        this.toggleErrorNotification(true);
-                        setTimeout(() => {
-                            this.toggleErrorNotification(false);
-                        }, 3000);
-                        return;
-                    }
+            return field;
+        };
+        const updateFieldResetButton = (field) => {
+            if (field.isFormElement) {
+                if (checkObjectKeyExists(field, "action") &&
+                    field.action === "reset" &&
+                    checkObjectKeyExists(field, "fields")) {
+                    field = this.setFieldKeyValue(field, "reset", {
+                        fields: field.fields
+                    });
                 }
             }
-            Object.keys(formData).map((key) => {
-                if (isEmptyValue(formData[key])) {
-                    formData[key] = "";
+            return field;
+        };
+        const setFormFields = (formConfig, fields) => {
+            if (checkObjectKeyExists(formConfig, "multiForm")) {
+                formConfig.multiForm["fields"] = fields;
+            }
+            else {
+                formConfig["fields"] = fields;
+            }
+            return formConfig;
+        };
+        const setFormFieldGroups = (formConfig, groups) => {
+            formConfig["fieldGroups"] = groups;
+            return formConfig;
+        };
+        const updateFormFieldGroups = (fieldGroups, field) => {
+            if (checkObjectKeyExists(field, "groupKey")) {
+                if (checkObjectKeyExists(fieldGroups, field.groupKey)) {
+                    fieldGroups[field.groupKey].push(field.key);
+                }
+                else {
+                    fieldGroups[field.groupKey] = [field.key];
                 }
-            });
-            this.onClickSaveForm.emit({ formConfig: this.formConfig, data: formData });
-        });
-    }
-    toggleErrorNotification(show) {
-        this.showErrorNotification = show;
-    }
-    // Component Helpers
-    fieldHide(fieldKey) {
-        let field = getFormFieldByKey(this.formFields, fieldKey);
-        let fieldIndex = this.formFields.findIndex((_) => {
-            return field.key === _.key;
-        });
-        this.formFields[fieldIndex]["hidden"] = true;
-        this.formGroup.updateValueAndValidity();
-    }
-    fieldGroupHide(fieldGroup) {
-        for (let fieldKey of this.fieldGroups[fieldGroup]) {
-            this.fieldHide(fieldKey);
-        }
-    }
-    fieldShow(fieldKey) {
-        let field = getFormFieldByKey(this.formFields, fieldKey);
-        let fieldIndex = this.formFields.findIndex((_) => {
-            return field.key === _.key;
-        });
-        this.formFields[fieldIndex]["hidden"] = false;
-        this.formGroup.updateValueAndValidity();
-    }
-    fieldGroupShow(fieldGroup) {
-        for (let fieldKey of this.fieldGroups[fieldGroup]) {
-            this.fieldShow(fieldKey);
-        }
-    }
-    fieldDisable(fieldKey) {
-        let field = getFormFieldByKey(this.formFields, fieldKey);
-        let fieldIndex = this.formFields.findIndex((_) => {
-            return field.key === _.key;
-        });
-        if (field.isFormElement) {
-            this.formFields[fieldIndex]["disabled"] = true;
-            if (isNotEmptyValue(this.formGroup.controls)) {
-                this.formGroup.controls[field.key].disable({
-                    emitEvent: false
-                });
             }
-            this.formGroup.updateValueAndValidity();
+            return fieldGroups;
+        };
+        let fields = this.getFormFields(formConfig);
+        let fieldGroups = {};
+        for (let field of fields) {
+            field = updateOnFieldType(field);
+            field = formatFieldKeys(field);
+            fieldGroups = updateFormFieldGroups(fieldGroups, field);
+            field = updateFieldDefaultValueConfig(field);
+            field = updateFieldValidatorConfig(field);
+            field = updateFieldResetButton(field);
+            field = updateFieldMessages(field);
         }
+        formConfig = setFormFieldGroups(formConfig, fieldGroups);
+        formConfig = setFormFields(formConfig, fields);
+        return formConfig;
     }
-    fieldGroupDisable(fieldGroup) {
-        for (let fieldKey of this.fieldGroups[fieldGroup]) {
-            this.fieldDisable(fieldKey);
-        }
+}
+__decorate([
+    logMethod
+], Converter.prototype, "updateFormConfigMiscellaneous", null);
+__decorate([
+    logMethod
+], Converter.prototype, "updateFormConfigProperties", null);
+__decorate([
+    logMethod
+], Converter.prototype, "convertFormConfig", null);
+
+var EActionKey;
+(function (EActionKey) {
+    EActionKey["SET_VALUE"] = "SET_VALUE";
+    EActionKey["SET_FIELD_DEFAULT_VALUE"] = "SET_FIELD_DEFAULT_VALUE";
+    EActionKey["FIELD_MESSAGE_SHOW"] = "FIELD_MESSAGE_SHOW";
+    EActionKey["FIELD_MESSAGES_HIDE"] = "FIELD_MESSAGES_HIDE";
+    EActionKey["FIELD_ERROR_SHOW"] = "FIELD_ERROR_SHOW";
+    EActionKey["FIELD_ERROR_HIDE"] = "FIELD_ERROR_HIDE";
+    EActionKey["FIELD_SHOW"] = "FIELD_SHOW";
+    EActionKey["FIELD_HIDE"] = "FIELD_HIDE";
+    EActionKey["FIELD_ENABLE"] = "FIELD_ENABLE";
+    EActionKey["FIELD_DISABLE"] = "FIELD_DISABLE";
+    EActionKey["FIELD_RESET"] = "FIELD_RESET";
+    EActionKey["HANDLE_CONNECTED_ELEMENTS"] = "HANDLE_CONNECTED_ELEMENTS";
+    EActionKey["CUSTOM"] = "CUSTOM";
+    EActionKey["FIELD_GROUP_SHOW"] = "FIELD_GROUP_SHOW";
+    EActionKey["FIELD_GROUP_HIDE"] = "FIELD_GROUP_HIDE";
+    EActionKey["FIELD_GROUP_ENABLE"] = "FIELD_GROUP_ENABLE";
+    EActionKey["FIELD_GROUP_DISABLE"] = "FIELD_GROUP_DISABLE";
+    EActionKey["SET_DROPDOWN_OPTIONS"] = "SET_DROPDOWN_OPTIONS";
+})(EActionKey || (EActionKey = {}));
+
+var EApiStatusType;
+(function (EApiStatusType) {
+    EApiStatusType["DEFAULT"] = "default";
+    EApiStatusType["LOADING"] = "loading";
+    EApiStatusType["SUCCESS"] = "success";
+    EApiStatusType["FAILED"] = "failed";
+})(EApiStatusType || (EApiStatusType = {}));
+
+var EMessageType;
+(function (EMessageType) {
+    EMessageType["DEFAULT"] = "default";
+    EMessageType["ERROR"] = "error";
+    EMessageType["SUCCESS"] = "success";
+    EMessageType["WARNING"] = "warning";
+})(EMessageType || (EMessageType = {}));
+
+class Defaults {
+    constructor(field, formFields, allFormsData, formData, previousFormData, takeAction) {
+        this._field = field;
+        this._formFields = formFields;
+        this._allFormsData = allFormsData;
+        this._formData = formData;
+        this._previousFormData = previousFormData;
+        this._takeAction = takeAction;
     }
-    fieldEnable(fieldKey) {
-        let field = getFormFieldByKey(this.formFields, fieldKey);
-        let fieldIndex = this.formFields.findIndex((_) => {
-            return field.key === _.key;
-        });
-        if (field.isFormElement) {
-            this.formFields[fieldIndex]["disabled"] = false;
-            if (isNotEmptyValue(this.formGroup.controls)) {
-                this.formGroup.controls[field.key].enable({
-                    emitEvent: false
+    getFormFieldValue() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let defaultValue;
+            const sources = this._field.default.value.sources;
+            let sourceIndex = 0;
+            for (let source of sources) {
+                const sources = new Source({
+                    FIELD_CONFIG: this._field,
+                    FORM_FIELDS: this._formFields,
+                    FORM_DATA: this._formData,
+                    PREVIOUS_FORM_DATA: this._previousFormData,
+                    ALL_FORMS_DATA: this._allFormsData
                 });
+                const value = sources.getValueFromSource(source);
+                // Set the Value of current source.
+                this._field = setValueToObjectPath(this._field, `default.value.sources.[${sourceIndex}].value`, value);
+                const validation = source.validation;
+                const triggers = validation.triggers;
+                const rules = validation.rules;
+                const actions = validation.actions;
+                const rulesMapping = new Rule(rules, {
+                    FIELD_CONFIG: this._field,
+                    FORM_FIELDS: this._formFields,
+                    FORM_DATA: this._formData,
+                    PREVIOUS_FORM_DATA: this._previousFormData,
+                    ALL_FORMS_DATA: this._allFormsData
+                }).mapping();
+                for (let action of actions) {
+                    const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                    if (conditionEvaluation) {
+                        const actions = new Action(action, rulesMapping, {
+                            FIELD_CONFIG: this._field,
+                            FORM_FIELDS: this._formFields,
+                            FORM_DATA: this._formData,
+                            PREVIOUS_FORM_DATA: this._previousFormData,
+                            ALL_FORMS_DATA: this._allFormsData
+                        }, this._takeAction);
+                        yield actions.execute();
+                    }
+                }
+                sourceIndex++;
             }
-            this.formGroup.updateValueAndValidity();
-        }
+            defaultValue = this._field.default.value.value;
+            if (isEmptyValue(defaultValue)) {
+                defaultValue = convertFormFieldEmptyValueToKwikUIFormat(this._field);
+            }
+            return defaultValue;
+        });
     }
-    fieldGroupEnable(fieldGroup) {
-        for (let fieldKey of this.fieldGroups[fieldGroup]) {
-            this.fieldEnable(fieldKey);
-        }
+    getFormFieldOptions() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const optionsConfig = this._field.default.options;
+            const rules = optionsConfig.rules;
+            const actions = optionsConfig.actions;
+            const rulesMapping = new Rule(rules, {
+                FIELD_CONFIG: this._field,
+                FORM_FIELDS: this._formFields,
+                FORM_DATA: this._formData,
+                PREVIOUS_FORM_DATA: this._previousFormData,
+                ALL_FORMS_DATA: this._allFormsData
+            }).mapping();
+            for (let action of actions) {
+                const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                if (conditionEvaluation) {
+                    const actions = new Action(action, rulesMapping, {
+                        FIELD_CONFIG: this._field,
+                        FORM_FIELDS: this._formFields,
+                        FORM_DATA: this._formData,
+                        PREVIOUS_FORM_DATA: this._previousFormData,
+                        ALL_FORMS_DATA: this._allFormsData
+                    }, this._takeAction);
+                    yield actions.execute();
+                }
+            }
+        });
     }
-    fieldReset(fieldKey) {
-        // Find the field and its index in the formFields array
-        let field = getFormFieldByKey(this.formFields, fieldKey);
-        let fieldIndex = getFormFieldIndexByKey(this.formFields, fieldKey);
-        // Delete the field from the formData object
-        delete this.formData[fieldKey];
-        // Reset the value of the field in the formGroup
-        this.formGroup.controls[field.key].reset(convertFormFieldEmptyValueToKwikUIFormat(field), {
-            emitEvent: false
-        });
-        // Reset the messages and errors for the field
-        field = removeFormFieldMessage(field, {
-            type: EMessageType.WARNING,
-            message: ""
-        });
-        field = removeFormFieldMessage(field, {
-            type: EMessageType.SUCCESS,
-            message: ""
-        });
-        this.fieldErrorHide(fieldKey, {
-            type: EMessageType.ERROR,
-            message: ""
-        });
-        // Reset the value of the field in the formFields array
-        switch (field.type) {
-            case "api-call":
-                const fieldApiCall = field;
-                fieldApiCall.api.status.value = EApiStatusType.DEFAULT;
-                this.formFields[fieldIndex] = fieldApiCall;
-                break;
-            default:
-                field.focus = false;
-                field.invalid = false;
-                this.formFields[fieldIndex] = field;
-                break;
+}
+__decorate([
+    logMethod
+], Defaults.prototype, "getFormFieldValue", null);
+__decorate([
+    logMethod
+], Defaults.prototype, "getFormFieldOptions", null);
+
+class FormValidation {
+    constructor() { }
+    getFormFieldValidators(field) {
+        let validators = [];
+        if (checkObjectKeyExists(field, "validators") &&
+            checkObjectKeyExists(field.validators, "min") &&
+            isNotEmptyValue(field.validators.min)) {
+            validators.push(Validators.min(field.validators.min));
         }
-    }
-    fieldErrorShow(fieldKey, message) {
-        let field = getFormFieldByKey(this.formFields, fieldKey);
-        let fieldIndex = this.formFields.findIndex((_) => {
-            return field.key === _.key;
-        });
-        field = highlightFormFieldError(field, true);
-        field = appendFormFieldMessage(field, message);
-        this.formFields[fieldIndex] = field;
-    }
-    fieldErrorHide(fieldKey, message) {
-        let field = getFormFieldByKey(this.formFields, fieldKey);
-        let fieldIndex = this.formFields.findIndex((_) => {
-            return field.key === _.key;
-        });
-        field = highlightFormFieldError(field, false);
-        field = removeFormFieldMessage(field, message);
-        this.formFields[fieldIndex] = field;
-    }
-    fieldMessageShow(fieldKey, message) {
-        let field = getFormFieldByKey(this.formFields, fieldKey);
-        let fieldIndex = this.formFields.findIndex((_) => {
-            return field.key === _.key;
-        });
-        field = appendFormFieldMessage(field, message);
-        this.formFields[fieldIndex] = field;
-    }
-    fieldMessageHide(fieldKey, message) {
-        let field = getFormFieldByKey(this.formFields, fieldKey);
-        let fieldIndex = this.formFields.findIndex((_) => {
-            return field.key === _.key;
-        });
-        field = removeFormFieldMessage(field, message);
-        this.formFields[fieldIndex] = field;
-    }
-    setObjectValue(field, path, value) { }
-    patchFieldControlValue(key, value) {
-        this.formGroup.patchValue({
-            [key]: value
-        }, { emitEvent: false });
-    }
-    patchFormGroup(formData) {
-        if (isUndefined(this.formGroup) || isUndefined(formData)) {
-            throw new Error(`formGroup or formData is 'undefined'.`);
+        if (checkObjectKeyExists(field, "validators") &&
+            checkObjectKeyExists(field.validators, "max") &&
+            isNotEmptyValue(field.validators.max)) {
+            validators.push(Validators.max(field.validators.max));
         }
-        else {
-            this.formGroup.patchValue(formData, { emitEvent: false });
+        if ((checkObjectKeyExists(field, "required") && field.required) ||
+            (checkObjectKeyExists(field, "validators") &&
+                checkObjectKeyExists(field.validators, "required") &&
+                field.validators.required)) {
+            validators.push(Validators.required);
         }
+        if (checkObjectKeyExists(field, "validators") &&
+            checkObjectKeyExists(field.validators, "minLength") &&
+            isNotEmptyValue(field.validators.minLength)) {
+            validators.push(Validators.minLength(field.validators.minLength));
+        }
+        if (checkObjectKeyExists(field, "validators") &&
+            checkObjectKeyExists(field.validators, "maxLength") &&
+            isNotEmptyValue(field.validators.maxLength)) {
+            validators.push(Validators.maxLength(field.validators.maxLength));
+        }
+        if (checkObjectKeyExists(field, "validators") &&
+            checkObjectKeyExists(field.validators, "pattern") &&
+            isNotEmptyValue(field.validators.pattern)) {
+            if (checkObjectKeyExists(field.validators.pattern, "key")) {
+                if (field.validators.pattern.key === "CUSTOM") {
+                    validators.push(Validators.pattern(field.validators.pattern.pattern));
+                }
+                else {
+                    validators.push(Validators.pattern(PATTERNS[field.validators.pattern.key]));
+                }
+            }
+        }
+        return validators;
     }
-    isFieldValid(fieldKey) {
-        return this.formGroup.controls[fieldKey].valid;
-    }
-    isFieldEnabled(fieldKey) {
-        return this.formGroup.controls[fieldKey].enabled;
+    getFormFieldsValidationErrors(formGroup) {
+        let errors = [];
+        for (const key in formGroup.controls) {
+            const controlErrors = formGroup.controls[key].errors;
+            if (controlErrors !== null && controlErrors !== undefined) {
+                Object.keys(controlErrors).forEach((keyError) => {
+                    errors.push({
+                        name: keyError,
+                        value: controlErrors[keyError]
+                    });
+                });
+            }
+        }
+        return errors;
     }
-    getFormGroupRawValues() {
-        return this.formGroup.getRawValue();
+    getFormFieldsInvalidControls(formToInvestigate) {
+        var controls = [];
+        let recursiveFunc = (form) => {
+            Object.keys(form.controls).forEach((field) => {
+                const control = form.get(field);
+                if (control.invalid) {
+                    controls.push({
+                        key: field,
+                        invalid: true
+                    });
+                }
+                else {
+                    controls.push({
+                        key: field,
+                        invalid: false
+                    });
+                }
+                if (control instanceof FormGroup) {
+                    recursiveFunc(control);
+                }
+                else if (control instanceof FormArray) {
+                    recursiveFunc(control);
+                }
+            });
+        };
+        recursiveFunc(formToInvestigate);
+        return controls;
     }
-    takeActionOnFieldGroup(action, object) {
+}
+__decorate([
+    logMethod
+], FormValidation.prototype, "getFormFieldValidators", null);
+__decorate([
+    logMethod
+], FormValidation.prototype, "getFormFieldsValidationErrors", null);
+__decorate([
+    logMethod
+], FormValidation.prototype, "getFormFieldsInvalidControls", null);
+
+class KwikIDFormViewService {
+    constructor() { }
+    // 'init' stage of the form
+    createFormGroup(fields, formData, previousFormData, allFormsData, takeAction) {
         return __awaiter(this, void 0, void 0, function* () {
-            switch (action.key) {
-                case EActionKey.FIELD_GROUP_HIDE:
-                    this.fieldGroupHide(action.props.groupKey);
-                    break;
-                case EActionKey.FIELD_GROUP_SHOW:
-                    this.fieldGroupShow(action.props.groupKey);
-                    break;
-                case EActionKey.FIELD_GROUP_ENABLE:
-                    this.fieldGroupEnable(action.props.groupKey);
-                    break;
-                case EActionKey.FIELD_GROUP_DISABLE:
-                    this.fieldGroupDisable(action.props.groupKey);
-                    break;
-                default:
-                    break;
+            let formGroup = new FormGroup({});
+            for (let field of fields) {
+                if (field.isFormElement) {
+                    const defaults = new Defaults(field, fields, allFormsData, formData, previousFormData, takeAction);
+                    let value = yield defaults.getFormFieldValue();
+                    if (checkObjectKeyExists(field, "default")) {
+                        if (checkObjectKeyExists(field.default, "options")) {
+                            if (field.default.options.triggers.includes("ON_INIT")) {
+                                yield defaults.getFormFieldOptions();
+                            }
+                        }
+                    }
+                    value = convertFormFieldValueToKwikUIFormat(field, value);
+                    const validators = new FormValidation().getFormFieldValidators(field);
+                    formGroup.addControl(field.key, new FormControl({ value: value, disabled: field.disabled }, { validators: validators }));
+                }
             }
+            return formGroup;
         });
     }
-    takeAction(action, object) {
+}
+__decorate([
+    logMethod
+], KwikIDFormViewService.prototype, "createFormGroup", null);
+
+class Apis {
+    constructor(object, takeAction) {
+        this._object = object;
+        this._takeAction = takeAction;
+        this._api = this._object.FIELD_CONFIG.api;
+        this._request = this._object.FIELD_CONFIG.api.request;
+        this._response = this._object.FIELD_CONFIG.api.response;
+        this._status = this._object.FIELD_CONFIG.api.status;
+    }
+    get object() {
+        return this._object;
+    }
+    set object(value) {
+        this._object = value;
+    }
+    setRequestBody() {
+        var _a, _b, _c, _d;
         return __awaiter(this, void 0, void 0, function* () {
-            switch (action.key) {
-                case EActionKey.FIELD_HIDE:
-                    this.fieldHide(action.props.fieldKey);
-                    break;
-                case EActionKey.FIELD_SHOW:
-                    this.fieldShow(action.props.fieldKey);
-                    break;
-                case EActionKey.FIELD_DISABLE:
-                    this.fieldDisable(action.props.fieldKey);
-                    break;
-                case EActionKey.FIELD_ENABLE:
-                    this.fieldEnable(action.props.fieldKey);
-                    break;
-                case EActionKey.FIELD_RESET:
-                    this.fieldReset(action.props.fieldKey);
-                    break;
-                case EActionKey.FIELD_ERROR_SHOW:
-                    this.fieldErrorShow(action.props.fieldKey, action.props.message);
-                    break;
-                case EActionKey.FIELD_ERROR_HIDE:
-                    this.fieldErrorHide(action.props.fieldKey, action.props.message);
-                    break;
-                case EActionKey.FIELD_MESSAGE_SHOW:
-                    this.fieldMessageShow(action.props.fieldKey, action.props.message);
-                    break;
-                case EActionKey.FIELD_MESSAGES_HIDE:
-                    this.fieldMessageHide(action.props.fieldKey, action.props.message);
-                    break;
-                case EActionKey.SET_VALUE:
-                    const setValue_Source = new Source(object);
-                    const sourceValue = yield setValue_Source.getValueFromSource(action.props.value.source);
-                    setValue_Source.setValueToSource(action.props.value.destination, sourceValue);
-                    object.FIELD_CONFIG = setValue_Source.object.FIELD_CONFIG;
-                    this.formData = setValue_Source.object.FORM_DATA;
-                    this.patchFormGroup(this.formData);
-                    this.allFormsData = setValue_Source.object.ALL_FORMS_DATA;
-                    this.previousFormData = setValue_Source.object.PREVIOUS_FORM_DATA;
-                    break;
-                case EActionKey.SET_FIELD_DEFAULT_VALUE:
-                    const setDefaultValue_Source = new Source(object);
-                    const sourceDefaultValue = yield setDefaultValue_Source.getValueFromSource(action.props.value.source);
-                    const destinationDefaultValue_FieldConfig_Config = {
-                        key: ESourceKey.OBJECT,
-                        props: {
-                            object: {
-                                key: "FIELD_CONFIG",
-                                path: "default.value.value"
-                            }
-                        }
-                    };
-                    setDefaultValue_Source.setValueToSource(destinationDefaultValue_FieldConfig_Config, sourceDefaultValue);
-                    const destinationDefaultValue_FormData_Config__Props__Object__Path = String(`${action.props.fieldKey}`);
-                    const destinationDefaultValue_FormData_Config = {
-                        key: ESourceKey.OBJECT,
-                        props: {
-                            object: {
-                                key: "FORM_DATA",
-                                path: String(action.props.fieldKey)
-                            }
+            let params = this._request.body.params;
+            let paramIndex = 0;
+            for (let param of params) {
+                let sources = param.sources;
+                let sourceIndex = 0;
+                for (let source of sources) {
+                    const sources = new Source(this._object);
+                    const value = sources.getValueFromSource(source);
+                    // Set the Value of current source.
+                    this._object.FIELD_CONFIG = setValueToObjectPath(this._object.FIELD_CONFIG, `api.request.body.params[${paramIndex}].sources[${sourceIndex}].value`, value);
+                    const validation = source.validation;
+                    const triggers = (_a = validation === null || validation === void 0 ? void 0 : validation.triggers) !== null && _a !== void 0 ? _a : [];
+                    const rules = (_b = validation === null || validation === void 0 ? void 0 : validation.rules) !== null && _b !== void 0 ? _b : [];
+                    const actions = (_d = (_c = validation) === null || _c === void 0 ? void 0 : _c.actions) !== null && _d !== void 0 ? _d : [];
+                    const rulesMapping = new Rule(rules, this._object).mapping();
+                    for (let action of actions) {
+                        const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                        if (conditionEvaluation) {
+                            const actions = new Action(action, rulesMapping, this._object, this._takeAction);
+                            yield actions.execute();
                         }
-                    };
-                    setDefaultValue_Source.setValueToSource(destinationDefaultValue_FormData_Config, sourceDefaultValue);
-                    object.FIELD_CONFIG = setDefaultValue_Source.object.FIELD_CONFIG;
-                    this.formData = setDefaultValue_Source.object.FORM_DATA;
-                    this.patchFormGroup(this.formData);
-                    this.allFormsData = setDefaultValue_Source.object.ALL_FORMS_DATA;
-                    this.previousFormData =
-                        setDefaultValue_Source.object.PREVIOUS_FORM_DATA;
-                    break;
-                case EActionKey.SET_DROPDOWN_OPTIONS:
-                    const setDropdownValue_Sources = new Source(object);
-                    let dropdownValue = yield setDropdownValue_Sources.getValueFromSource(action.props.value.source);
-                    if (checkObjectKeyExists(action.props, "options")) {
-                        if (checkObjectKeyExists(action.props.options, "appendToPath")) {
-                            let appendToPath = yield setDropdownValue_Sources.getValueFromSource(action.props.options.appendToPath.source);
-                            if (isNotEmptyValue(appendToPath)) {
-                                const appendToPathStr = replaceString(appendToPath.match(`${action.props.options.appendToPath.filterSourceValue}`)[0], "[^a-zA-Z0-9_]", "_");
-                                const optionsPath = `${action.props.options.path}${appendToPathStr}`;
-                                dropdownValue = getObjectValueFromPath(dropdownValue, optionsPath);
+                    }
+                    sourceIndex++;
+                }
+                paramIndex++;
+            }
+            return this._object.FIELD_CONFIG;
+        });
+    }
+    validateRequestBody() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const body = this._request.body;
+            const validation = body.validation;
+            const triggers = validation.triggers;
+            const rules = validation.rules;
+            const actions = (_a = validation) === null || _a === void 0 ? void 0 : _a.actions;
+            const rulesMapping = new Rule(rules, this._object).mapping();
+            for (let action of actions) {
+                const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                if (conditionSuccess) {
+                    const actions = new Action(action, rulesMapping, this._object, this._takeAction);
+                    yield actions.execute();
+                }
+            }
+            return this._object.FIELD_CONFIG;
+        });
+    }
+    setRequestHeaders() {
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (checkObjectKeyExists(this._request, "headers")) {
+                if (checkObjectKeyExists(this._request.headers, "params")) {
+                    let params = this._request.headers.params;
+                    let paramIndex = 0;
+                    for (let param of params) {
+                        let sources = param.sources;
+                        let sourceIndex = 0;
+                        for (let source of sources) {
+                            const sources = new Source(this._object);
+                            const value = sources.getValueFromSource(source);
+                            // Set the Value of current source.
+                            this._object.FIELD_CONFIG = setValueToObjectPath(this._object.FIELD_CONFIG, `api.request.headers.params[${paramIndex}].sources[${sourceIndex}].value`, value);
+                            const validation = source.validation;
+                            const triggers = (_a = validation === null || validation === void 0 ? void 0 : validation.triggers) !== null && _a !== void 0 ? _a : [];
+                            const rules = (_b = validation === null || validation === void 0 ? void 0 : validation.rules) !== null && _b !== void 0 ? _b : [];
+                            const actions = (_d = (_c = validation) === null || _c === void 0 ? void 0 : _c.actions) !== null && _d !== void 0 ? _d : [];
+                            const rulesMapping = new Rule(rules, this._object).mapping();
+                            for (let action of actions) {
+                                const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                                if (conditionEvaluation) {
+                                    const actions = new Action(action, rulesMapping, this._object, this._takeAction);
+                                    yield actions.execute();
+                                }
                             }
+                            sourceIndex++;
                         }
-                        else {
-                            dropdownValue = getObjectValueFromPath(dropdownValue, action.props.options.path);
+                        paramIndex++;
+                    }
+                    return this._object.FIELD_CONFIG;
+                }
+                else {
+                    return this._object.FIELD_CONFIG;
+                }
+            }
+            else {
+                return this._object.FIELD_CONFIG;
+            }
+        });
+    }
+    validateRequestHeaders() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const headers = this._request.headers;
+            if (checkObjectKeyExists(this._request, "headers")) {
+                if (checkObjectKeyExists(this._request.headers, "validation")) {
+                    const validation = headers.validation;
+                    const triggers = validation.triggers;
+                    const rules = validation.rules;
+                    const actions = (_a = validation) === null || _a === void 0 ? void 0 : _a.actions;
+                    const rulesMapping = new Rule(rules, this._object).mapping();
+                    for (let action of actions) {
+                        const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                        if (conditionSuccess) {
+                            const actions = new Action(action, rulesMapping, this._object, this._takeAction);
+                            yield actions.execute();
                         }
                     }
-                    setDropdownValue_Sources.setValueToSource(action.props.value.destination, dropdownValue);
-                    object.FIELD_CONFIG = setDropdownValue_Sources.object.FIELD_CONFIG;
-                    this.formData = setDropdownValue_Sources.object.FORM_DATA;
-                    this.allFormsData = setDropdownValue_Sources.object.ALL_FORMS_DATA;
-                    this.previousFormData =
-                        setDropdownValue_Sources.object.PREVIOUS_FORM_DATA;
-                    break;
-                case EActionKey.HANDLE_CONNECTED_ELEMENTS:
-                    this.handleConnectedElements({ key: action.props.fieldKey }, "ON_ACTION");
-                    break;
-                case EActionKey.CUSTOM:
-                    break;
-                default:
-                    break;
+                    return this._object.FIELD_CONFIG;
+                }
+                else {
+                    return this._object.FIELD_CONFIG;
+                }
+            }
+            else {
+                return this._object.FIELD_CONFIG;
+            }
+        });
+    }
+    validateResponse() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const validation = this._response.validation;
+            const triggers = validation.triggers;
+            const rules = validation.rules;
+            const actions = validation.actions;
+            const rulesMapping = new Rule(rules, this._object).mapping();
+            for (let action of actions) {
+                const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                if (conditionSuccess) {
+                    const actions = new Action(action, rulesMapping, this._object, this._takeAction);
+                    yield actions.execute();
+                }
             }
+            return this._object.FIELD_CONFIG;
         });
     }
 }
-/** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormViewComponent, deps: [{ token: TuiPushService }, { token: TuiAlertService }, { token: KwikIDFormViewService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", isMobileView: "isMobileView", allFormsData: "allFormsData", formsList: "formsList" }, outputs: { onClickViewForms: "onClickViewForms", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall" }, providers: [KwikIDFormViewService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"kwikid-form-container\"\n  *ngIf=\"!loading\"\n>\n  <div id=\"uf-form-fields-header-container\">\n    <div id=\"uf-form-fields-title\">\n      {{ formConfig.title }}\n    </div>\n    <div id=\"uf-form-fields-steps\">\n      Step {{ formConfig.sequenceNo }} of {{ this.formsListLength }}\n    </div>\n    <hr />\n  </div>\n  <form\n    class=\"kwikid-form show\"\n    [formGroup]=\"formGroup\"\n  >\n    <ng-container *ngFor=\"let field of formFields; let i = index\">\n      <ng-container [ngSwitch]=\"field.type\">\n        <!-- HTML Content -->\n        <ng-container *ngSwitchCase=\"'html'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <div [innerHtml]=\"field.html | safeHtml\"></div>\n          </div>\n        </ng-container>\n        <!-- Form Title -->\n        <ng-container *ngSwitchCase=\"'title'\">\n          <div\n            class=\"title\"\n            [class.hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <div>\n              {{ field.label }}\n            </div>\n            <kwikui-button\n              *ngIf=\"field?.reset\"\n              appearance=\"whiteblock\"\n              size=\"s\"\n              label=\"Reset\"\n              (onClick)=\"handleOnClickResetFormFields($event, field)\"\n            ></kwikui-button>\n          </div>\n        </ng-container>\n        <!-- Input Text -->\n        <ng-container *ngSwitchCase=\"'text'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input\n              [case]=\"field?.properties?.case\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field.label\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [type]=\"'text'\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Checkbox -->\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-checkbox-block\n              [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.properties?.placeholder\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [size]=\"field?.properties?.size ?? 'l'\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-checkbox-block\n            ><kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Number -->\n        <ng-container *ngSwitchCase=\"'number'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-number\n              [decimal]=\"field?.properties?.decimal\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [max]=\"field?.properties?.max\"\n              [min]=\"field?.properties?.min\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix ?? ''\"\n              [precision]=\"field?.properties?.precision\"\n              [prefix]=\"field?.properties?.prefix ?? ''\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-number\n            ><kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Date -->\n        <ng-container *ngSwitchCase=\"'date'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-date\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field.label\"\n              [max]=\"field?.properties?.max\"\n              [min]=\"field?.properties?.min\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-date>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Phone -->\n        <ng-container *ngSwitchCase=\"'phone'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-phone\n              [countryCode]=\"field?.properties?.countryCode\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [phoneMaskAfterCountryCode]=\"\n                field?.properties?.phoneMaskAfterCountryCode\n              \"\n              [removeCountryCodeFromValue]=\"\n                field?.properties?.removeCountryCodeFromValue\n              \"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-phone>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Radio -->\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <label\n              [tuiLabel]=\"labelTemplate\"\n              style=\"min-height: auto; padding: 0px 0.5rem\"\n            >\n              <kwikui-radio-list\n                [disabled]=\"field?.disabled\"\n                [focus]=\"field?.focus\"\n                [formControl]=\"formGroup.controls[field.key]\"\n                [formControlName]=\"field.key\"\n                [id]=\"field.key\"\n                [invalid]=\"field?.invalid\"\n                [items]=\"field?.options\"\n                [label]=\"field?.label\"\n                [orientation]=\"field?.properties?.orientation\"\n                [placeholder]=\"field?.properties?.placeholder\"\n                [properties]=\"field?.properties\"\n                [size]=\"field?.properties?.size\"\n                [validators]=\"field?.validators\"\n                (getKeyValue)=\"handleGetKeyValue($event)\"\n              ></kwikui-radio-list>\n            </label>\n            <ng-template #labelTemplate>\n              <p\n                class=\"tui-space_bottom-2\"\n                [hidden]=\"field?.hidden\"\n                id=\"field_{{ field.key }}\"\n              >\n                <b>\n                  {{ field.label }}\n                  <span *ngIf=\"field.validators?.required\"></span>\n                </b>\n              </p>\n            </ng-template>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Dropdown -->\n        <ng-container *ngSwitchCase=\"'dropdown-with-search'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-select-combobox\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field.label\"\n              [options]=\"field.options\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-select-combobox>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- API Call -->\n        <ng-container *ngSwitchCase=\"'api-call'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-button-api-call\n              [apiStatus]=\"field?.api?.status?.value\"\n              [class]=\"field?.class\"\n              [disabled]=\"field?.disabled\"\n              [id]=\"field.key\"\n              [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\n              [showLoader]=\"field?.disabled === 'loading'\"\n              shape=\"null\"\n              size=\"m\"\n              styles=\"width: fit-content\"\n              (onClick)=\"handleOnClickApiCall($event)\"\n            ></kwikui-button-api-call>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Mobile OTP -->\n        <ng-container *ngSwitchCase=\"'otp'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-otp\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [mask]=\"field?.properties?.mask\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-otp>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Aadhaar Number -->\n        <ng-container *ngSwitchCase=\"'aadhaar-number'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-aadhaar\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [placeholder]=\"field?.placeholder\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-aadhaar>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </form>\n  <div class=\"kwikid-form-buttons\">\n    <kwikui-button\n      *ngIf=\"isMobileView\"\n      [disabled]=\"viewFormsButton.disabled\"\n      id=\"\"\n      label=\"View Forms\"\n      [showLoader]=\"viewFormsButton.showLoader\"\n      styles=\"\"\n      class=\"\"\n      type=\"button\"\n      appearance=\"secondary\"\n      icon=\"\"\n      iconRight=\"\"\n      [shape]=\"null\"\n      size=\"m\"\n      styles=\"width: 100%\"\n      (onClick)=\"handleOnClickViewForms($event)\"\n    ></kwikui-button>\n    <kwikui-button\n      [disabled]=\"saveFormButton.disabled\"\n      id=\"\"\n      label=\"Save\"\n      [showLoader]=\"saveFormButton.showLoader\"\n      styles=\"\"\n      class=\"\"\n      type=\"button\"\n      appearance=\"primary\"\n      icon=\"\"\n      iconRight=\"\"\n      [shape]=\"null\"\n      size=\"m\"\n      styles=\"width: 100%\"\n      (onClick)=\"handleOnClickSaveForm($event)\"\n    ></kwikui-button>\n  </div>\n</div>\n<div\n  class=\"kwikid-form-container-loading\"\n  *ngIf=\"loading\"\n>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n</div>\n<tui-push\n  id=\"field-error-notification\"\n  *tuiPush=\"showErrorNotification\"\n  heading=\"Missing/Incorrect Fields!\"\n  type=\"Error\"\n  (close)=\"toggleErrorNotification(false)\"\n>\n  <tui-svg\n    src=\"tuiIconCancel\"\n    style=\"color: #fff !important\"\n  >\n  </tui-svg>\n</tui-push>\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}.kwikid-form-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}.kwikid-form.show{width:100%;height:100%;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-row-gap:1rem;row-gap:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-column-gap:10px;column-gap:10px}.kwikid-form-buttons *{flex-grow:1}#uf-form-fields-header-container{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start;grid-row-gap:.5rem;row-gap:.5rem;padding:1rem}#uf-form-fields-header-container hr{width:100%}#uf-form-fields-title{color:#000;font-size:1.75em;font-weight:bold}#uf-form-fields-steps{color:var(--color-on-secondary-container);font-size:1em}.title{border-left:.25rem solid var(--tui-primary);padding:.75rem;font-size:1.4em;font-weight:bold;background-color:var(--tui-secondary);display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-gap:.5rem;gap:.5rem}.title:not(:first-child){margin-top:.5rem}.title.hidden{display:none}.large-wrapper{width:100%;height:60px}.large-wrapper:first-child{margin-bottom:auto}.large-wrapper:last-child{margin-top:auto}.kwikid-form-container-loading{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;grid-row-gap:1rem;row-gap:1rem;padding:1rem}#field-error-notification{background-color:var(--tui-error-fill);color:#fff!important}#field-error-notification .t-top{color:#fff!important}#field-error-notification .t-close{color:#fff!important}\n"], components: [{ type: i2.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i2.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i2.KwikUICheckboxBlockComponent, selector: "kwikui-checkbox-block", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "contentAlign", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "prefix", "postfix", "precision", "decimal", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "countryCode", "phoneMaskAfterCountryCode", "removeCountryCodeFromValue", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3$1.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i2.KwikUIRadioListComponent, selector: "kwikui-radio-list", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "orientation", "items", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i2.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i4$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4$1.TuiPushDirective, selector: "tui-push" }], pipes: { "safeHtml": SafeHtmlPipe$1 } });
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "ngOnInit", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "ngAfterViewInit", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "ngOnChanges", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "findFormsListLength", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "initFormConfig", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "setFormFieldsFromFormConfig", null);
 __decorate([
     logMethod
-], KwikIDFormViewComponent.prototype, "setFormFieldGroupsFromFormConfig", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "setFormDataFromAllFormsData", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldGroupActions", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldGroup", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldActions", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "handleConnectedElementFields", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "handleConnectedElements", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "handleGetKeyValue", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "handleOnClickResetFormFields", null);
+], Apis.prototype, "setRequestBody", null);
 __decorate([
     logMethod
-], KwikIDFormViewComponent.prototype, "handleOnClickApiCall", null);
+], Apis.prototype, "validateRequestBody", null);
 __decorate([
     logMethod
-], KwikIDFormViewComponent.prototype, "handleOnClickViewForms", null);
+], Apis.prototype, "setRequestHeaders", null);
 __decorate([
     logMethod
-], KwikIDFormViewComponent.prototype, "handleOnClickSaveForm", null);
+], Apis.prototype, "validateRequestHeaders", null);
 __decorate([
     logMethod
-], KwikIDFormViewComponent.prototype, "toggleErrorNotification", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldHide", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldGroupHide", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldShow", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldGroupShow", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldDisable", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldGroupDisable", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldEnable", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldGroupEnable", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldReset", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldErrorShow", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldErrorHide", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldMessageShow", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "fieldMessageHide", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "setObjectValue", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "patchFieldControlValue", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "patchFormGroup", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "isFieldValid", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "isFieldEnabled", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "getFormGroupRawValues", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "takeActionOnFieldGroup", null);
-__decorate([
-    logMethod
-], KwikIDFormViewComponent.prototype, "takeAction", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "kwikid-form-view",
-                    templateUrl: "./form-view.component.html",
-                    styleUrls: ["./form-view.component.scss"],
-                    providers: [KwikIDFormViewService]
-                }]
-        }], ctorParameters: function () { return [{ type: i4$1.TuiPushService, decorators: [{
-                    type: Inject,
-                    args: [TuiPushService]
-                }] }, { type: i3$1.TuiAlertService, decorators: [{
-                    type: Inject,
-                    args: [TuiAlertService]
-                }] }, { type: KwikIDFormViewService }]; }, propDecorators: { formConfig: [{
-                type: Input
-            }], formData: [{
-                type: Input
-            }], isMobileView: [{
-                type: Input
-            }], allFormsData: [{
-                type: Input
-            }], formsList: [{
-                type: Input
-            }], onClickViewForms: [{
-                type: Output
-            }], onClickSaveForm: [{
-                type: Output
-            }], onClickApiCall: [{
-                type: Output
-            }], ngOnInit: [], ngAfterViewInit: [], ngOnChanges: [], findFormsListLength: [], initFormConfig: [], setFormFieldsFromFormConfig: [], setFormFieldGroupsFromFormConfig: [], setFormDataFromAllFormsData: [], handleConnectedElementFieldGroupActions: [], handleConnectedElementFieldGroup: [], handleConnectedElementFieldActions: [], handleConnectedElementFields: [], handleConnectedElements: [], handleGetKeyValue: [], handleOnClickResetFormFields: [], handleOnClickApiCall: [], handleOnClickViewForms: [], handleOnClickSaveForm: [], toggleErrorNotification: [], fieldHide: [], fieldGroupHide: [], fieldShow: [], fieldGroupShow: [], fieldDisable: [], fieldGroupDisable: [], fieldEnable: [], fieldGroupEnable: [], fieldReset: [], fieldErrorShow: [], fieldErrorHide: [], fieldMessageShow: [], fieldMessageHide: [], setObjectValue: [], patchFieldControlValue: [], patchFormGroup: [], isFieldValid: [], isFieldEnabled: [], getFormGroupRawValues: [], takeActionOnFieldGroup: [], takeAction: [] } });
+], Apis.prototype, "validateResponse", null);
 
 /**
  * Generated class for the SafeHtmlPipe pipe.
  *
  * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
  */
-class SafeHtmlPipe {
+class SafeHtmlPipe$1 {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
     }
@@ -2906,803 +2673,1038 @@ class SafeHtmlPipe {
         return this.sanitizer.bypassSecurityTrustHtml(html);
     }
 }
-/** @nocollapse */ SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+/** @nocollapse */ SafeHtmlPipe$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe$1, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ SafeHtmlPipe$1.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe$1, name: "safeHtml" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe$1, decorators: [{
             type: Pipe,
             args: [{
                     name: "safeHtml"
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
 
-class KwikIDFormsListComponent {
-    constructor() {
-        this.showFormFields = {};
-        this.userConfig = {};
-        this.activeFormConfig = {};
-        this.formsList = [];
-        this.formsListCompleted = [];
+class KwikIDFormViewComponent {
+    constructor(push, alert, formViewService) {
+        this.push = push;
+        this.alert = alert;
+        this.formViewService = formViewService;
         this.isMobileView = false;
-        this.onClickSetActiveForm = new EventEmitter();
-        this.onClickHideFormsList = new EventEmitter();
-        this.onClickSubmitForms = new EventEmitter();
-        this.selectedForm = "";
-        this.formsListLength = 0;
-        this.isAllFormsCompleted = true;
+        this.onClickViewForms = new EventEmitter();
+        this.onClickSaveForm = new EventEmitter();
+        this.onClickApiCall = new EventEmitter();
+        this.fieldGroups = {};
+        this.formFields = [];
+        this.previousFormData = {};
+        this.loading = true;
+        this.viewFormsButton = {
+            disabled: false,
+            showLoader: false
+        };
+        this.saveFormButton = {
+            disabled: false,
+            showLoader: false
+        };
+        this.formGroup = new FormGroup({});
+        this.showErrorNotification = false;
     }
     ngOnInit() {
-        this.formsList = this.filterHiddenForms(this.formsList);
-        this.formsListLength = this.findFormsListLength(this.formsList);
-        this.isAllFormsCompleted = this.checkIsAllFormsCompleted(this.formsList);
+        (() => __awaiter(this, void 0, void 0, function* () {
+            yield this.initFormConfig(this.formConfig);
+            this.loading = false;
+        }))();
     }
+    ngAfterViewInit() { }
     ngOnChanges(changes) {
         const verifyChange = (key) => {
             return checkObjectKeyExists(changes, key) && !changes[key].firstChange;
         };
-        if (verifyChange("showFormFields")) {
-            this.showFormFields = changes.showFormFields.currentValue;
-        }
-        if (verifyChange("formsList")) {
-            this.formsList = this.filterHiddenForms(this.formsList);
-            this.formsListLength = this.findFormsListLength(this.formsList);
-            this.isAllFormsCompleted = this.checkIsAllFormsCompleted(this.formsList);
+        if (verifyChange("formData")) {
+            this.formData = Object.assign(Object.assign({}, this.formData), changes.formData.currentValue);
         }
         if (verifyChange("isMobileView")) {
             this.isMobileView = changes.isMobileView.currentValue;
         }
+        if (verifyChange("allFormsData")) {
+            this.allFormsData = changes.allFormsData.currentValue;
+        }
+        if (verifyChange("formConfig")) {
+            this.formConfig = changes.formConfig.currentValue;
+            (() => __awaiter(this, void 0, void 0, function* () {
+                yield this.initFormConfig(this.formConfig);
+            }))();
+        }
     }
-    filterHiddenForms(formsList) {
-        return formsList.filter((form) => {
-            if (checkObjectKeyExists(form, "hidden")) {
-                if (!form.hidden) {
-                    return form;
+    initFormConfig(formConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            formConfig = new Converter().convertFormConfig(formConfig);
+            formConfig = new Converter().updateFormConfigProperties(formConfig);
+            this.setFormFieldsFromFormConfig(formConfig);
+            this.setFormFieldGroupsFromFormConfig(formConfig);
+            this.setFormDataFromAllFormsData();
+            this.formGroup = yield this.formViewService.createFormGroup(this.formFields, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
+            for (let field of this.formFields) {
+                if (field.isFormElement) {
+                    this.previousFormData = Object.assign(Object.assign({}, this.previousFormData), { [field.key]: this.formGroup.controls[field.key].value });
+                    this.formData = Object.assign(Object.assign({}, this.formData), { [field.key]: this.formGroup.controls[field.key].value });
+                    this.formGroup.controls[field.key].valueChanges
+                        .pipe(pairwise())
+                        .subscribe(([previousValue, currentValue]) => {
+                        this.previousFormData = Object.assign(Object.assign({}, this.previousFormData), { [field.key]: convertFormFieldValueToStandardFormat(field, previousValue) });
+                        this.formData = Object.assign(Object.assign({}, this.formData), { [field.key]: convertFormFieldValueToStandardFormat(field, currentValue) });
+                    });
                 }
             }
-        });
-    }
-    findFormsListLength(formsList) {
-        const _formsList = formsList.filter((form) => {
-            if (checkObjectKeyExists(form, "type")) {
-                if (form.type === "form") {
-                    if (checkObjectKeyExists(form, "hidden")) {
-                        if (!form.hidden) {
-                            return form;
+            for (let field of this.formFields) {
+                if (field.isFormElement) {
+                    if (checkObjectKeyExists(field, "validation")) {
+                        if (field.validation.triggers.includes("ON_INIT")) {
+                            const validations = new Validation({
+                                FIELD_CONFIG: field,
+                                FORM_FIELDS: this.formFields,
+                                FORM_DATA: this.formData,
+                                PREVIOUS_FORM_DATA: this.previousFormData,
+                                ALL_FORMS_DATA: this.allFormsData
+                            }, this.takeAction.bind(this));
+                            yield validations.validate(field.validation);
                         }
                     }
-                }
-            }
-            else if (checkObjectKeyExists(form, "hidden")) {
-                if (!form.hidden) {
-                    return form;
+                    if (checkObjectKeyExists(field, "connectedElements")) {
+                        this.handleConnectedElements({
+                            key: field.key,
+                            value: this.formGroup.controls[field.key].value
+                        }, "ON_INIT");
+                    }
                 }
             }
         });
-        return _formsList.length;
     }
-    checkIsAllFormsCompleted(formsList) {
-        let isAllFormsCompleted = true;
-        for (let form of formsList) {
-            if (checkObjectKeyExists(form, "type")) {
-                if (form.type === "form") {
-                    if (form.status !== "completed") {
-                        isAllFormsCompleted = false;
-                        break;
-                    }
-                }
-            }
+    setFormFieldsFromFormConfig(formConfig) {
+        if (checkObjectKeyExists(formConfig, "fields")) {
+            this.formFields = formConfig.fields;
         }
-        return isAllFormsCompleted;
-    }
-    handleOnClickSetActiveForm(selectedForm) {
-        if (this.selectedForm !== selectedForm ||
-            (this.isAllFormsCompleted && !this.showFormFields)) {
-            this.selectedForm = selectedForm;
-            this.onClickSetActiveForm.emit(selectedForm);
+        else if (checkObjectKeyExists(formConfig, "multiForm") &&
+            checkObjectKeyExists(formConfig.multiForm, "fields")) {
+            this.formFields = formConfig.multiForm.fields;
         }
     }
-    handleOnSubmitForms(e) {
-        this.onClickSubmitForms.emit(e);
+    setFormFieldGroupsFromFormConfig(formConfig) {
+        this.fieldGroups = formConfig.fieldGroups;
     }
-}
-/** @nocollapse */ KwikIDFormsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: { showFormFields: "showFormFields", userConfig: "userConfig", activeFormConfig: "activeFormConfig", formsList: "formsList", formsListCompleted: "formsListCompleted", isMobileView: "isMobileView" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", onClickHideFormsList: "onClickHideFormsList", onClickSubmitForms: "onClickSubmitForms" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"sidebar-container\">\n  <div id=\"sidebar\">\n    <div ngClass=\"kwikid-form-header\">\n      <div id=\"uf-header\">\n        <div id=\"uf-header-logo-container\">\n          <img\n            id=\"uf-header-logo\"\n            src=\"{{ this.userConfig.theme.clientLogo }}\"\n            [ngClass]=\"'large-icon'\"\n          />\n        </div>\n      </div>\n      <hr />\n    </div>\n    <div id=\"uf-progress\">\n      <div id=\"uf-progress-steps\">\n        {{ this.formsListCompleted.length }} / {{ this.formsListLength }} Steps\n        Completed\n      </div>\n      <kwikui-progress-segmented\n        [max]=\"this.formsListLength\"\n        size=\"m\"\n        [value]=\"this.formsListCompleted.length\"\n      ></kwikui-progress-segmented>\n    </div>\n    <div id=\"uf-sections-container\">\n      <ng-container *ngFor=\"let form of formsList; let i = index\">\n        <ng-container [ngSwitch]=\"form.type\">\n          <!-- HTML Content -->\n          <ng-container *ngSwitchCase=\"'html'\">\n            <div [innerHtml]=\"form.props.htmlContent | safeHtml\"></div>\n          </ng-container>\n          <ng-container *ngSwitchCase=\"'form'\">\n            <div\n              [class]=\"'uf-section-item'\"\n              [class.completed]=\"form.status === 'completed' && !form.disabled\"\n              [class.edit]=\"form.status === 'editable' && !form.disabled\"\n              [class.locked]=\"form.status === 'locked' && form.disabled\"\n              [class.active]=\"\n                activeFormConfig !== undefined &&\n                form.key === activeFormConfig.key\n              \"\n              (click)=\"\n                form.status === 'locked' && form.disabled\n                  ? undefined\n                  : handleOnClickSetActiveForm(form.key)\n              \"\n            >\n              <div class=\"uf-form-section-card-title\">\n                {{ form.props.title }}&nbsp;<span *ngIf=\"form?.required\"\n                  >*</span\n                >\n              </div>\n              <div class=\"uf-form-section-card-status\">\n                <div\n                  *ngIf=\"form.status === 'completed' && !form.disabled\"\n                  class=\"uf-form-section-card-status-img completed\"\n                >\n                  <tui-svg src=\"tuiIconCheckLarge\"></tui-svg>\n                </div>\n                <div\n                  *ngIf=\"form.status !== 'completed' && !form.disabled\"\n                  class=\"uf-form-section-card-status-img edit\"\n                >\n                  <tui-svg src=\"tuiIconEdit\"></tui-svg>\n                </div>\n                <div\n                  *ngIf=\"form.status !== 'completed' && form.disabled\"\n                  class=\"uf-form-section-card-status-img locked\"\n                >\n                  <tui-svg src=\"tuiIconLock\"></tui-svg>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </div>\n    <div id=\"submit-sidebar-btn-container\">\n      <kwikui-button\n        [disabled]=\"false\"\n        id=\"\"\n        label=\"Submit\"\n        [showLoader]=\"false\"\n        styles=\"\"\n        class=\"\"\n        type=\"button\"\n        appearance=\"primary\"\n        icon=\"\"\n        iconRight=\"\"\n        [shape]=\"null\"\n        size=\"m\"\n        styles=\"width: 100%\"\n        (onClick)=\"handleOnSubmitForms($event)\"\n      ></kwikui-button>\n    </div>\n  </div>\n</div>\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}#sidebar-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}#sidebar{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch}.uf-section-item{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-content:center;padding:1rem;grid-gap:1rem;gap:1rem;cursor:pointer;box-shadow:0 1px 3px -1px var(--tui-base-05);border-radius:.5rem;background-color:var(--tui-base-02);position:relative}.uf-section-item:hover{box-shadow:0 1px 3px -1px var(--tui-base-08)}#submit-sidebar-btn-container{width:100%;bottom:0px;z-index:1;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;gap:1rem}#submit-sidebar-btn-container *{flex-grow:1}#uf-sections-container{display:flex;flex-direction:column;height:100%;grid-row-gap:20px;row-gap:20px;padding:1rem;overflow-y:auto}.uf-form-section-card{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:10px;column-gap:10px;border:none;border-radius:8px;background-color:#e9e9e9;height:-moz-fit-content;height:fit-content;min-height:60px;padding:10px 15px;width:100%;max-width:350px;margin:0 auto}.uf-section-item.locked{-webkit-user-select:none;user-select:none;cursor:not-allowed}.uf-form-section-card .uf-form-section-card-title{font-size:1.2em;text-align:left;line-height:1.25em}.uf-form-section-card .uf-form-section-card-status{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.uf-form-section-card .uf-form-section-card-status .uf-form-section-card-status-img{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;border-radius:100%;color:#fff;font-weight:bold}.uf-form-section-card-status-img.completed{background-color:var(--tui-success-fill);padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-status-img.edit{background-color:var(--tui-error-fill);padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-status-img.locked{background-color:var(--tui-neutral-fill);padding:.25rem;border-radius:50%;color:#fff}#uf-progress{display:flex;padding:1rem;flex-direction:column;align-content:center;justify-content:center;align-items:stretch;grid-gap:.5rem;gap:.5rem}#uf-progress-steps{font-size:1em;text-align:right;color:#3d3d3d}.uf-form-section-card-title{font-size:1em;font-weight:bold;color:#000}@media screen and (max-width: 600px){#sidebar-container{max-width:unset}}.kwikid-form-header{height:70px;z-index:6}.kwikid-form-header hr{width:calc(100% - 1rem);margin-left:auto;margin-right:auto}#uf-header{display:flex;flex-direction:row;align-content:center;align-items:center;justify-content:flex-start;grid-column-gap:10px;column-gap:10px;padding:10px 20px;width:100%;max-width:calc(400px + 50vw + 2rem);margin:0 auto;height:70px;z-index:1}#uf-header #uf-header-goback-container{display:none}#uf-header #uf-header-goback-container:hover{border-radius:50%;background-color:#d3d3d3}#uf-header #uf-header-goback-container #uf-header-goback{width:100%;height:auto}#uf-header #uf-header-logo-container{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}#uf-header #uf-header-logo-container #uf-header-logo.small-icon{width:100%;height:50px}#uf-header #uf-header-logo-container #uf-header-logo.large-icon{width:100%;height:50px}#uf-header #uf-header-title-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;grid-row-gap:4px;row-gap:4px}#uf-header #uf-header-title-container #uf-header-title{font-size:1.4em;color:#121212}#uf-header #uf-header-title-container #uf-header-subtitle{font-size:1.2em;color:#121212}\n"], components: [{ type: i2.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["id", "value", "max", "size", "colors"] }, { type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeHtml": SafeHtmlPipe } });
-__decorate([
-    logMethod
-], KwikIDFormsListComponent.prototype, "ngOnChanges", null);
-__decorate([
-    logMethod
-], KwikIDFormsListComponent.prototype, "filterHiddenForms", null);
-__decorate([
-    logMethod
-], KwikIDFormsListComponent.prototype, "findFormsListLength", null);
-__decorate([
-    logMethod
-], KwikIDFormsListComponent.prototype, "checkIsAllFormsCompleted", null);
-__decorate([
-    logMethod
-], KwikIDFormsListComponent.prototype, "handleOnClickSetActiveForm", null);
-__decorate([
-    logMethod
-], KwikIDFormsListComponent.prototype, "handleOnSubmitForms", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormsListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "kwikid-forms-list",
-                    templateUrl: "./forms-list.component.html",
-                    styleUrls: ["./forms-list.component.scss"]
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { showFormFields: [{
-                type: Input
-            }], userConfig: [{
-                type: Input
-            }], activeFormConfig: [{
-                type: Input
-            }], formsList: [{
-                type: Input
-            }], formsListCompleted: [{
-                type: Input
-            }], isMobileView: [{
-                type: Input
-            }], onClickSetActiveForm: [{
-                type: Output
-            }], onClickHideFormsList: [{
-                type: Output
-            }], onClickSubmitForms: [{
-                type: Output
-            }], ngOnChanges: [], filterHiddenForms: [], findFormsListLength: [], checkIsAllFormsCompleted: [], handleOnClickSetActiveForm: [], handleOnSubmitForms: [] } });
-
-var EFormsListStatus;
-(function (EFormsListStatus) {
-    EFormsListStatus["COMPLETED"] = "completed";
-    EFormsListStatus["EDITABLE"] = "editable";
-    EFormsListStatus["LOCKED"] = "locked";
-})(EFormsListStatus || (EFormsListStatus = {}));
-
-var ERendererActionKey;
-(function (ERendererActionKey) {
-    ERendererActionKey["SET_VALUE"] = "SET_VALUE";
-    ERendererActionKey["FORM_HIDE"] = "FORM_HIDE";
-    ERendererActionKey["FORM_SHOW"] = "FORM_SHOW";
-    ERendererActionKey["FORM_DISABLE"] = "FORM_DISABLE";
-    ERendererActionKey["FORM_ENABLE"] = "FORM_ENABLE";
-})(ERendererActionKey || (ERendererActionKey = {}));
-
-class Converter {
-    constructor() {
-        this.getFormFields = (formConfig) => {
-            let fields;
-            if (checkObjectKeyExists(formConfig, "multiForm")) {
-                fields = formConfig.multiForm.fields;
-            }
-            else {
-                fields = formConfig.fields;
-            }
-            return fields;
-        };
-        this.setMissingFieldKeyValue = (field, key, value) => {
-            if (!checkObjectKeyExists(field, key)) {
-                field[key] = value;
-            }
-            return field;
-        };
-        this.setFieldKeyValue = (field, key, value) => {
-            field[key] = value;
-            return field;
-        };
-        this.removeFieldKey = (field, key) => {
-            if (checkObjectKeyExists(field, key)) {
-                delete field[key];
-            }
-            return field;
-        };
+    setFormDataFromAllFormsData() {
+        if (checkObjectKeyExists(this.allFormsData, this.formConfig.key)) {
+            this.formData = this.allFormsData[this.formConfig.key];
+        }
+        else {
+            this.formData = {};
+        }
     }
-    convertFormConfig(formConfig) {
-        const updateOnFieldType = (field) => {
-            const formatFieldTypeHtml = (field) => {
-                field = this.setFieldKeyValue(field, "isFormElement", false);
-                return field;
-            };
-            const formatFieldTypeTitle = (field) => {
-                field = this.setFieldKeyValue(field, "hidden", false);
-                field = this.setFieldKeyValue(field, "isFormElement", false);
-                return field;
-            };
-            const formatFieldTypeText = (field) => {
-                field = this.setFieldKeyValue(field, "isFormElement", true);
-                field.properties = this.setMissingFieldKeyValue(field.properties, "case", "default");
-                return field;
-            };
-            const formatFieldTypeCheckbox = (field) => {
-                field = this.setFieldKeyValue(field, "isFormElement", true);
-                return field;
-            };
-            const formatFieldTypeNumber = (field) => {
-                field = this.setFieldKeyValue(field, "isFormElement", true);
-                if (checkObjectKeyExists(field, "key")) {
-                    if (field.key === "aadhaar_number") {
-                        field = this.setFieldKeyValue(field, "type", "aadhaar_number");
-                    }
-                    if (field.key === "contact_number") {
-                        field = this.setFieldKeyValue(field, "type", "phone");
-                    }
-                    if (field.type === "phone" || field.type === "number") {
-                        field.properties = this.setMissingFieldKeyValue(field.properties, "countryCode", "+91");
-                        field.properties = this.setMissingFieldKeyValue(field.properties, "phoneMaskAfterCountryCode", "####-######");
-                        field.properties = this.setMissingFieldKeyValue(field.properties, "removeCountryCodeFromValue", true);
-                        field.properties = this.setMissingFieldKeyValue(field.properties, "decimal", "never");
-                        field.properties = this.setMissingFieldKeyValue(field.properties, "prefix", "");
-                        field.properties = this.setMissingFieldKeyValue(field.properties, "postfix", "");
-                        field.properties = this.setMissingFieldKeyValue(field.properties, "min", -Infinity);
-                        field.properties = this.setMissingFieldKeyValue(field.properties, "max", Infinity);
-                        field.properties = this.setMissingFieldKeyValue(field.properties, "precision", 2);
+    handleConnectedElementFieldGroupActions(childFieldGroupConfig, parentField) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (checkObjectKeyExists(childFieldGroupConfig, "rules")) {
+                const rulesMapping = new Rule(childFieldGroupConfig.rules, {
+                    FIELD_CONFIG: parentField,
+                    FORM_DATA: this.formData,
+                    PREVIOUS_FORM_DATA: this.previousFormData,
+                    ALL_FORMS_DATA: this.allFormsData
+                }).mapping();
+                for (let action of childFieldGroupConfig.actions) {
+                    const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                    if (conditionSuccess) {
+                        const actions = new Action(action, rulesMapping, {
+                            FIELD_CONFIG: parentField,
+                            FORM_FIELDS: this.formFields,
+                            FORM_DATA: this.formData,
+                            PREVIOUS_FORM_DATA: this.previousFormData,
+                            ALL_FORMS_DATA: this.allFormsData
+                        }, this.takeActionOnFieldGroup.bind(this));
+                        yield actions.execute();
                     }
                 }
-                field = this.setFieldKeyValue(field, "hidden", false);
-                return field;
-            };
-            const formatFieldTypeDate = (field) => {
-                field = this.setFieldKeyValue(field, "isFormElement", true);
-                if (checkObjectKeyExists(field, "min")) {
-                    const tuiDay = convertFormFieldTypeDateToKwikUIFormat(field["min"]);
-                    field.properties = this.setFieldKeyValue(field.properties, "min", tuiDay);
+            }
+        });
+    }
+    handleConnectedElementFieldGroup(currentField, connectedFieldGroupConfig, eventType) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (checkObjectKeyExists(connectedFieldGroupConfig, "triggers")) {
+                if (connectedFieldGroupConfig.triggers.includes(eventType)) {
+                    yield this.handleConnectedElementFieldGroupActions(connectedFieldGroupConfig, currentField);
                 }
-                else {
-                    field.properties = this.setMissingFieldKeyValue(field.properties, "min", new TuiDay(0, 0, 1)); // Year - 0000, Month - 0 (0 Indexing), Day - 1
+            }
+        });
+    }
+    handleConnectedElementFieldActions(connectedFieldConfig, connectedField) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (checkObjectKeyExists(connectedFieldConfig, "rules")) {
+                const rulesMapping = new Rule(connectedFieldConfig.rules, {
+                    FIELD_CONFIG: connectedField,
+                    FORM_DATA: this.formData,
+                    PREVIOUS_FORM_DATA: this.previousFormData,
+                    ALL_FORMS_DATA: this.allFormsData
+                }).mapping();
+                for (let action of connectedFieldConfig.actions) {
+                    const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                    if (conditionSuccess) {
+                        const actions = new Action(action, rulesMapping, {
+                            FORM_FIELDS: this.formFields,
+                            FIELD_CONFIG: connectedField,
+                            FORM_DATA: this.formData,
+                            PREVIOUS_FORM_DATA: this.previousFormData,
+                            ALL_FORMS_DATA: this.allFormsData
+                        }, this.takeAction.bind(this));
+                        yield actions.execute();
+                    }
                 }
-                if (checkObjectKeyExists(field, "max")) {
-                    const tuiDay = convertFormFieldTypeDateToKwikUIFormat(field["max"]);
-                    field.properties = this.setFieldKeyValue(field.properties, "max", tuiDay);
+            }
+            return connectedField;
+        });
+    }
+    handleConnectedElementFields(currentField, connectedFieldConfig, eventType, nested) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let connectedField = getFormFieldByKey(this.formFields, connectedFieldConfig["key"]);
+            if (checkObjectKeyExists(connectedFieldConfig, "triggers")) {
+                if (connectedFieldConfig.triggers.includes(eventType)) {
+                    connectedField = yield this.handleConnectedElementFieldActions(connectedFieldConfig, connectedField);
                 }
-                else {
-                    field.properties = this.setMissingFieldKeyValue(field.properties, "max", new TuiDay(new Date().getFullYear(), // Year - 9999
-                    new Date().getMonth(), // Month - 11 (0 Indexing)
-                    new Date().getDate() // Day - 31
-                    ));
+            }
+            if (checkObjectKeyExists(connectedFieldConfig, "handleNestedFields")) {
+                if (connectedFieldConfig.handleNestedFields) {
+                    this.handleConnectedElements({ key: connectedFieldConfig.key }, eventType);
                 }
-                field.properties = this.setMissingFieldKeyValue(field.properties, "placeholder", "");
-                field = this.setFieldKeyValue(field, "hidden", false);
-                return field;
-            };
-            const formatFieldTypePhone = (field) => {
-                field = this.setFieldKeyValue(field, "isFormElement", true);
-                return field;
-            };
-            const formatFieldTypeRadio = (field) => {
-                field = this.setFieldKeyValue(field, "isFormElement", true);
-                field.properties = this.setMissingFieldKeyValue(field.properties, "size", "m");
-                field.properties = this.setMissingFieldKeyValue(field.properties, "orientation", "vertical");
-                field = this.setFieldKeyValue(field, "hidden", false);
-                field.options = field.options.map((x) => {
-                    if (typeof x === "string" || typeof x === "number") {
-                        return { label: x, disabled: false, description: "" };
-                    }
-                    else {
-                        if (checkObjectKeyExists(x, "label") &&
-                            checkObjectKeyExists(x, "disabled") &&
-                            checkObjectKeyExists(x, "description")) {
-                            return x;
-                        }
-                        if (!checkObjectKeyExists(x, "disabled")) {
-                            x = Object.assign(Object.assign({}, x), { disabled: false });
+            }
+            return currentField;
+        });
+    }
+    handleConnectedElements(e, eventType) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let currentField = getFormFieldByKey(this.formFields, e.key);
+            if (currentField !== undefined) {
+                if (checkObjectKeyExists(currentField, "connectedElements")) {
+                    if (checkObjectKeyExists(currentField.connectedElements, "connectedFieldGroups")) {
+                        let connectedFieldGroups = currentField.connectedElements.connectedFieldGroups;
+                        for (let connectedFieldGroupConfig of connectedFieldGroups) {
+                            yield this.handleConnectedElementFieldGroup(currentField, connectedFieldGroupConfig, eventType);
                         }
-                        if (!checkObjectKeyExists(x, "description")) {
-                            x = Object.assign(Object.assign({}, x), { description: false });
+                    }
+                    if (checkObjectKeyExists(currentField.connectedElements, "connectedFields")) {
+                        let connectedFields = currentField.connectedElements.connectedFields;
+                        for (let connectedFieldConfig of connectedFields) {
+                            currentField = yield this.handleConnectedElementFields(currentField, connectedFieldConfig, eventType, eventType);
                         }
-                        return x;
                     }
-                });
-                return field;
-            };
-            const formatFieldTypeSearchText = (field) => {
-                field = this.setFieldKeyValue(field, "isFormElement", true);
-                if (checkObjectKeyExists(field, "type")) {
-                    if (field.type === "search-text") {
-                        field = this.setFieldKeyValue(field, "type", "dropdown-with-search");
-                    }
-                }
-                return field;
-            };
-            const formatFieldTypeDropdownWithSearch = (field) => {
-                field = this.setFieldKeyValue(field, "isFormElement", true);
-                return field;
-            };
-            const formatFieldTypeApiCall = (field) => {
-                field = this.setFieldKeyValue(field, "isFormElement", true);
-                if (!checkObjectKeyExists(field.properties, "shape")) {
-                    field.properties = this.setFieldKeyValue(field.properties, "shape", null);
-                }
-                if (!checkObjectKeyExists(field, "showLoader")) {
-                    field = this.setFieldKeyValue(field, "showLoader", false);
-                }
-                if (!checkObjectKeyExists(field.properties, "size")) {
-                    field.properties = this.setFieldKeyValue(field.properties, "size", "m");
-                }
-                if (!checkObjectKeyExists(field, "api")) {
-                    field = this.setFieldKeyValue(field, "api", {});
-                    field.api = this.setMissingFieldKeyValue(field.api, "url", "");
-                    field.api = this.setMissingFieldKeyValue(field.api, "request", "");
-                    field.api = this.setMissingFieldKeyValue(field.api, "response", "");
-                    field.api = this.setMissingFieldKeyValue(field.api, "status", "");
-                    field.api.status = this.setMissingFieldKeyValue(field.api.status, "value", "default");
-                    field.api.status = this.setMissingFieldKeyValue(field.api.status, "labels", {
-                        default: "Call API",
-                        loading: "Call API",
-                        success: "API Success",
-                        failed: "API Failed"
-                    });
                 }
-                return field;
-            };
-            const formatFieldTypeOtp = (field) => {
-                field = this.setFieldKeyValue(field, "isFormElement", true);
-                field.properties = this.setMissingFieldKeyValue(field.properties, "mask", new Array(field.properties.otpLength).fill("#").join(" "));
-                field = this.setFieldKeyValue(field, "hidden", false);
-                return field;
-            };
-            const formatFieldTypeAadhaarNumber = (field) => {
-                field = this.setFieldKeyValue(field, "isFormElement", true);
-                return field;
-            };
-            switch (field.type) {
-                case "html":
-                    field = formatFieldTypeHtml(field);
-                    break;
-                case "title":
-                    field = formatFieldTypeTitle(field);
-                    break;
-                case "text":
-                    field = formatFieldTypeText(field);
-                    break;
-                case "checkbox":
-                    field = formatFieldTypeCheckbox(field);
-                    break;
-                case "number":
-                    field = formatFieldTypeNumber(field);
-                    break;
-                case "date":
-                    field = formatFieldTypeDate(field);
-                    break;
-                case "phone":
-                    field = formatFieldTypePhone(field);
-                    break;
-                case "radio":
-                    field = formatFieldTypeRadio(field);
-                    break;
-                case "search-text":
-                    field = formatFieldTypeSearchText(field);
-                    break;
-                case "dropdown-with-search":
-                    field = formatFieldTypeDropdownWithSearch(field);
-                    break;
-                case "api-call":
-                    field = formatFieldTypeApiCall(field);
-                    break;
-                case "otp":
-                    field = formatFieldTypeOtp(field);
-                    break;
-                case "aadhaar-number":
-                    field = formatFieldTypeAadhaarNumber(field);
-                    break;
-                default:
-                    break;
             }
-            return field;
-        };
-        const getConnectedelementTypeValueObject = (key) => {
-            const object = {
-                key: key,
-                conditions: { formula: "", rules: [] },
-                actions: { success: [], failure: [] }
-            };
-            return object;
-        };
-        const formatFieldKeys = (field) => {
-            if (checkObjectKeyExists(field, "connectedTo")) {
-                if (typeof field["connectedTo"] === "string") {
-                    field["connectedElements"] = [
-                        getConnectedelementTypeValueObject(field["connectedTo"])
-                    ];
-                }
-                else {
-                    field["connectedTo"] = field["connectedTo"].map((key) => {
-                        return getConnectedelementTypeValueObject(key);
-                    });
-                    field["connectedElements"] = field["connectedTo"];
+            else {
+                throw new Error(`Field for the given key ['${e.key}'] is not found with eventType: '${eventType}'.`);
+            }
+        });
+    }
+    // DOM Event Handlers
+    handleGetKeyValue(e) {
+        this.formGroup.patchValue({
+            [e.key]: e.value
+        }, { emitEvent: false });
+        const field = getFormFieldByKey(this.formFields, e.key);
+        this.formData[e.key] = convertFormFieldValueToStandardFormat(field, e.value);
+        if (field.isFormElement &&
+            checkObjectKeyExists(field, "validation") &&
+            field.validation.triggers.includes("ON_CHANGE")) {
+            const validations = new Validation({
+                FIELD_CONFIG: field,
+                FORM_FIELDS: this.formFields,
+                FORM_DATA: this.formData,
+                PREVIOUS_FORM_DATA: this.previousFormData,
+                ALL_FORMS_DATA: this.allFormsData
+            }, this.takeAction.bind(this));
+            (() => __awaiter(this, void 0, void 0, function* () {
+                yield validations.validate(field.validation);
+            }))();
+        }
+        if (field.isFormElement &&
+            checkObjectKeyExists(field, "connectedElements")) {
+            this.handleConnectedElements({
+                key: field.key,
+                value: this.formGroup.controls[field.key].value
+            }, "ON_CHANGE");
+        }
+    }
+    handleOnClickResetFormFields(e, field) {
+        return __awaiter(this, void 0, void 0, function* () {
+            for (let f of field.reset.fields) {
+                for (let action of f.actions) {
+                    const resetField = getFormFieldByKey(this.formFields, action.props.fieldKey);
+                    const actions = new Action(action, {}, {
+                        FIELD_CONFIG: resetField,
+                        FORM_FIELDS: this.formFields,
+                        FORM_DATA: this.formData,
+                        PREVIOUS_FORM_DATA: this.previousFormData,
+                        ALL_FORMS_DATA: this.allFormsData
+                    }, this.takeAction.bind(this));
+                    yield actions.execute();
                 }
             }
-            this.removeFieldKey(field, "connectedTo");
-            if (checkObjectKeyExists(field, "connectedToParent")) {
-                if (typeof field["connectedToParent"] === "string") {
-                    field["connectedParentFields"] = [
-                        getConnectedelementTypeValueObject(field["connectedToParent"])
-                    ];
+        });
+    }
+    handleOnClickApiCall(e) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return __awaiter(this, void 0, void 0, function* () {
+            let field = getFormFieldByKey(this.formFields, e.key);
+            if (field.type === "api-call") {
+                // set button status to loading
+                field["api"]["status"]["value"] = EApiStatusType.LOADING;
+                field["showLoader"] = true;
+                this.viewFormsButton["disabled"] = true;
+                this.viewFormsButton["showLoader"] = true;
+                this.saveFormButton["disabled"] = true;
+                this.saveFormButton["showLoader"] = true;
+                const apis = new Apis({
+                    FIELD_CONFIG: field,
+                    FORM_FIELDS: this.formFields,
+                    FORM_DATA: this.formData,
+                    PREVIOUS_FORM_DATA: this.previousFormData,
+                    ALL_FORMS_DATA: this.allFormsData
+                }, this.takeAction.bind(this));
+                field = yield apis.setRequestHeaders();
+                field = yield apis.validateRequestHeaders();
+                field = yield apis.setRequestBody();
+                field = yield apis.validateRequestBody();
+                if (field.api.request.body.validation.is_valid) {
+                    // Call API Here
+                    let apiCallResponse = undefined;
+                    if (field.api.request.url.hasOwnProperty("type") &&
+                        field.api.request.url.type === "MOCK") {
+                        apiCallResponse = field.api.request.url.data;
+                    }
+                    else {
+                        const url = field.api.request.url;
+                        const method = (_b = (_a = field.api.request) === null || _a === void 0 ? void 0 : _a.method) !== null && _b !== void 0 ? _b : "POST";
+                        const headers = Object.assign({ "Content-Type": "application/json" }, (((_d = (_c = field.api.request) === null || _c === void 0 ? void 0 : _c.headers) === null || _d === void 0 ? void 0 : _d.value) || {}));
+                        const body = (_g = (_f = (_e = field.api.request) === null || _e === void 0 ? void 0 : _e.body) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : null;
+                        const response = yield fetch(url, {
+                            method: method,
+                            headers: Object.assign({}, headers),
+                            body: JSON.stringify(body)
+                        });
+                        apiCallResponse = yield response.json();
+                    }
+                    this.formData = Object.assign(Object.assign({}, this.formData), { [field.key]: apiCallResponse });
+                    this.formGroup.patchValue({
+                        [field.key]: apiCallResponse
+                    }, { emitEvent: false });
+                    const apis = new Apis({
+                        FIELD_CONFIG: field,
+                        FORM_FIELDS: this.formFields,
+                        FORM_DATA: this.formData,
+                        PREVIOUS_FORM_DATA: this.previousFormData,
+                        ALL_FORMS_DATA: this.allFormsData
+                    }, this.takeAction.bind(this));
+                    (() => __awaiter(this, void 0, void 0, function* () {
+                        field = yield apis.validateResponse();
+                    }))();
                 }
                 else {
-                    field["connectedParentFields"] = getConnectedelementTypeValueObject(field["connectedToParent"]);
+                    // Request Body Validation Failed
+                    // Highlight Error in UI to User to Retry After Sometime.
+                    // Take Action based on Validation
+                    setTimeout(() => {
+                        field["api"]["status"]["value"] = EApiStatusType.FAILED;
+                        field["showLoader"] = false;
+                    }, 500);
                 }
+                this.viewFormsButton["disabled"] = false;
+                this.viewFormsButton["showLoader"] = false;
+                this.saveFormButton["disabled"] = false;
+                this.saveFormButton["showLoader"] = false;
             }
-            this.removeFieldKey(field, "connectedToParent");
-            this.removeFieldKey(field, "sideEffect");
-            return field;
-        };
-        const getConnectedElementFieldMapping = (field, connectedFieldMapping) => {
-            const getConnectedElementChildFieldMapping = (field, connectedFieldMapping) => {
-                if (checkObjectKeyExists(field, "connectedElements")) {
-                    connectedFieldMapping["child"][field.key] = field.connectedElements;
-                }
-                else if (checkObjectKeyExists(connectedFieldMapping["child"], field.key)) {
-                    field["connectedElements"] =
-                        connectedFieldMapping["child"][field.key];
-                }
-                return { field: field, connectedFieldMapping: connectedFieldMapping };
-            };
-            const getConnectedElementParentFieldMapping = (field, connectedFieldMapping) => {
-                if (checkObjectKeyExists(connectedFieldMapping["child"], field.key)) {
-                    for (let connectedParentKey of connectedFieldMapping["child"][field.key]) {
-                        if (checkObjectKeyExists(connectedFieldMapping["parent"], connectedParentKey["key"])) {
-                            connectedFieldMapping["parent"][connectedParentKey["key"]].push(field.key);
-                        }
-                        else {
-                            connectedFieldMapping["parent"][connectedParentKey["key"]] = [
-                                field.key
-                            ];
-                        }
+        });
+    }
+    /**
+     * Method to optimize the DOM update by Angular for using *ngFor on large no. of items.
+     * @param index number
+     * @param item fieldConfig
+     * @returns string
+     */
+    getUniqueIdentifier(index, item) {
+        return item.key;
+    }
+    handleOnClickViewForms(e) {
+        this.onClickViewForms.emit({
+            clicked: true
+        });
+    }
+    handleOnClickSaveForm(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let formData = this.formGroup.getRawValue();
+            for (let field of this.formFields) {
+                if (field.isFormElement) {
+                    if (field.hidden) {
+                        delete formData[field.key];
+                    }
+                    else {
+                        formData[field.key] = convertFormFieldValueToStandardFormat(field, formData[field.key]);
                     }
                 }
-                return { field: field, connectedFieldMapping: connectedFieldMapping };
-            };
-            const connectedChildFieldMapping = getConnectedElementChildFieldMapping(field, connectedFieldMapping);
-            field = connectedChildFieldMapping["field"];
-            connectedFieldMapping =
-                connectedChildFieldMapping["connectedFieldMapping"];
-            const connectedParentFieldMapping = getConnectedElementParentFieldMapping(field, connectedFieldMapping);
-            field = connectedParentFieldMapping["field"];
-            connectedFieldMapping =
-                connectedParentFieldMapping["connectedFieldMapping"];
-            return connectedFieldMapping;
-        };
-        const updateConnectedElementsKeyValue = (field, connectedFieldMapping) => {
-            if (checkObjectKeyExists(connectedFieldMapping["child"], field.key)) {
-                field["connectedElements"] = connectedFieldMapping["child"][field.key];
-            }
-            if (checkObjectKeyExists(connectedFieldMapping["parent"], field.key)) {
-                field["connectedParentFields"] =
-                    connectedFieldMapping["parent"][field.key];
             }
-            return field;
-        };
-        const updateFieldValidatorConfig = (field) => {
-            var _a, _b, _c, _d, _e;
-            if (field.isFormElement) {
-                const validators = checkObjectKeyExists(field, "validators")
-                    ? field.validators
-                    : {};
-                field = this.setMissingFieldKeyValue(field, "validators", {});
-                field = this.setFieldKeyValue(field, "validators", Object.assign(Object.assign({}, field["validators"]), { min: checkObjectKeyExists(validators, "min")
-                        ? isNotEmptyValue(validators.min)
-                            ? Number(validators.min)
-                            : null
-                        : checkObjectKeyExists(field, "min")
-                            ? Number(field.min)
-                            : null, max: checkObjectKeyExists(validators, "max")
-                        ? isNotEmptyValue(validators.max)
-                            ? Number(validators.max)
-                            : null
-                        : checkObjectKeyExists(field, "max")
-                            ? Number(field.max)
-                            : null, required: checkObjectKeyExists(validators, "required")
-                        ? Boolean(validators.required)
-                        : checkObjectKeyExists(field, "required")
-                            ? Boolean(field.required)
-                            : false, minLength: checkObjectKeyExists(validators, "minLength")
-                        ? isNotEmptyValue(validators.minLength)
-                            ? Number(validators.minLength)
-                            : null
-                        : checkObjectKeyExists(field, "minLength")
-                            ? Number(field.minLength)
-                            : null, maxLength: checkObjectKeyExists(validators, "maxLength")
-                        ? isNotEmptyValue(validators.maxLength)
-                            ? Number(validators.maxLength)
-                            : null
-                        : checkObjectKeyExists(field, "length")
-                            ? Number(field.length)
-                            : checkObjectKeyExists(field, "maxLength")
-                                ? Number(field.maxLength)
-                                : null, pattern: checkObjectKeyExists(validators, "pattern")
-                        ? isNotEmptyValue(validators.pattern)
-                            ? validators.pattern
-                            : undefined
-                        : checkObjectKeyExists(field, "pattern")
-                            ? { key: "CUSTOM", pattern: String(field.pattern) }
-                            : checkObjectKeyExists(field, "regex")
-                                ? { key: "CUSTOM", pattern: String(field.regex) }
-                                : undefined }));
-                delete field.min;
-                delete field.max;
-                delete field.required;
-                delete field.minLength;
-                delete field.length;
-                delete field.maxLength;
-                delete field.pattern;
-                delete field.regex;
-                switch (field.type) {
-                    case "text":
-                        delete field.validators.min;
-                        delete field.validators.max;
-                        break;
-                    default:
-                        break;
-                }
-                if (isEmptyValue((_a = field.validators) === null || _a === void 0 ? void 0 : _a.min)) {
-                    delete field.validators.min;
-                }
-                if (isEmptyValue((_b = field.validators) === null || _b === void 0 ? void 0 : _b.max)) {
-                    delete field.validators.min;
-                }
-                if (isEmptyValue((_c = field.validators) === null || _c === void 0 ? void 0 : _c.minLength)) {
-                    delete field.validators.minLength;
+            if (this.formGroup.invalid) {
+                const controls = new FormValidation().getFormFieldsInvalidControls(this.formGroup);
+                let firstFieldWithError = "";
+                for (let control of controls) {
+                    if (control.invalid && isEmptyValue(firstFieldWithError)) {
+                        firstFieldWithError = control.key;
+                    }
+                    this.formFields = showFormFieldError(this.formFields, this.formGroup.controls[control.key].errors, control.key, control.invalid);
                 }
-                if (isEmptyValue((_d = field.validators) === null || _d === void 0 ? void 0 : _d.maxLength)) {
-                    delete field.validators.maxLength;
+                this.toggleErrorNotification(true);
+                setTimeout(() => {
+                    this.toggleErrorNotification(false);
+                }, 3000);
+                return;
+            }
+            for (let field of this.formFields) {
+                if (field.isFormElement &&
+                    checkObjectKeyExists(field, "validation") &&
+                    field.validation.triggers.includes("ON_SAVE")) {
+                    const validations = new Validation({
+                        FIELD_CONFIG: field,
+                        FORM_FIELDS: this.formFields,
+                        FORM_DATA: this.formData,
+                        PREVIOUS_FORM_DATA: this.previousFormData,
+                        ALL_FORMS_DATA: this.allFormsData
+                    }, this.takeAction.bind(this));
+                    yield validations.validate(field.validation);
+                    if (!field.validation.is_valid) {
+                        this.toggleErrorNotification(true);
+                        setTimeout(() => {
+                            this.toggleErrorNotification(false);
+                        }, 3000);
+                        return;
+                    }
                 }
-                if (isEmptyValue((_e = field.validators) === null || _e === void 0 ? void 0 : _e.pattern)) {
-                    delete field.validators.pattern;
+            }
+            Object.keys(formData).map((key) => {
+                if (isEmptyValue(formData[key])) {
+                    formData[key] = "";
                 }
+            });
+            this.onClickSaveForm.emit({ formConfig: this.formConfig, data: formData });
+        });
+    }
+    toggleErrorNotification(show) {
+        this.showErrorNotification = show;
+    }
+    // Component Helpers
+    fieldHide(fieldKey) {
+        let field = getFormFieldByKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        this.formFields[fieldIndex]["hidden"] = true;
+        this.formGroup.updateValueAndValidity();
+    }
+    fieldGroupHide(fieldGroup) {
+        for (let fieldKey of this.fieldGroups[fieldGroup]) {
+            this.fieldHide(fieldKey);
+        }
+    }
+    fieldShow(fieldKey) {
+        let field = getFormFieldByKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        this.formFields[fieldIndex]["hidden"] = false;
+        this.formGroup.updateValueAndValidity();
+    }
+    fieldGroupShow(fieldGroup) {
+        for (let fieldKey of this.fieldGroups[fieldGroup]) {
+            this.fieldShow(fieldKey);
+        }
+    }
+    fieldDisable(fieldKey) {
+        let field = getFormFieldByKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        if (field.isFormElement) {
+            this.formFields[fieldIndex]["disabled"] = true;
+            if (isNotEmptyValue(this.formGroup.controls)) {
+                this.formGroup.controls[field.key].disable({
+                    emitEvent: false
+                });
+            }
+            this.formGroup.updateValueAndValidity();
+        }
+    }
+    fieldGroupDisable(fieldGroup) {
+        for (let fieldKey of this.fieldGroups[fieldGroup]) {
+            this.fieldDisable(fieldKey);
+        }
+    }
+    fieldEnable(fieldKey) {
+        let field = getFormFieldByKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        if (field.isFormElement) {
+            this.formFields[fieldIndex]["disabled"] = false;
+            if (isNotEmptyValue(this.formGroup.controls)) {
+                this.formGroup.controls[field.key].enable({
+                    emitEvent: false
+                });
+            }
+            this.formGroup.updateValueAndValidity();
+        }
+    }
+    fieldGroupEnable(fieldGroup) {
+        for (let fieldKey of this.fieldGroups[fieldGroup]) {
+            this.fieldEnable(fieldKey);
+        }
+    }
+    fieldReset(fieldKey) {
+        // Find the field and its index in the formFields array
+        let field = getFormFieldByKey(this.formFields, fieldKey);
+        let fieldIndex = getFormFieldIndexByKey(this.formFields, fieldKey);
+        // Reset the value of the field in the formGroup
+        const resetValue = convertFormFieldEmptyValueToKwikUIFormat(field);
+        this.formData[fieldKey] = resetValue;
+        this.formGroup.controls[field.key].reset(resetValue, {
+            emitEvent: false,
+            onlySelf: true
+        });
+        this.formGroup.patchValue({
+            [field.key]: resetValue
+        }, { emitEvent: false });
+        this.formGroup.controls[field.key].updateValueAndValidity({
+            emitEvent: true
+        });
+        // Reset the messages and errors for the field
+        field = removeFormFieldMessage(field, {
+            type: EMessageType.WARNING,
+            message: ""
+        });
+        field = removeFormFieldMessage(field, {
+            type: EMessageType.SUCCESS,
+            message: ""
+        });
+        this.fieldErrorHide(fieldKey, {
+            type: EMessageType.ERROR,
+            message: ""
+        });
+        // Reset the value of the field in the formFields array
+        switch (field.type) {
+            case "api-call":
+                const fieldApiCall = field;
+                fieldApiCall.api.status.value = EApiStatusType.DEFAULT;
+                this.formFields[fieldIndex] = fieldApiCall;
+                break;
+            default:
                 field.focus = false;
                 field.invalid = false;
-            }
-            return field;
-        };
-        const updateFieldDefaultValueConfig = (field) => {
-            if (field.isFormElement) {
-                if (checkObjectKeyExists(field, "defaultValue")) {
-                    return field;
-                }
-                else if (checkObjectKeyExists(field, "default")) {
-                    return field;
-                }
-                else {
-                    if (checkObjectKeyExists(field, "defaultVal")) {
-                        // Currently below line is commented because it caused issues in setting Default Value.
-                        // field["defaultValue"] = field["defaultVal"];
-                        // delete field["defaultVal"];
-                    }
-                    // TODO: Condition for all_forms_data is not considered yet.
-                    if (field.autoPopulateFromSummaryData) {
-                        field["defaultValue"] = {
-                            is_found: false,
-                            value: "",
-                            sources: [
-                                {
-                                    source: "summary_data",
-                                    summary_data: {
-                                        path: `$.${field.key}`,
-                                        validation: {
-                                            rules: [
-                                                {
-                                                    key: "1",
-                                                    type: "is_not_empty",
-                                                    is_not_empty: {
-                                                        value: true
-                                                    }
-                                                }
-                                            ],
-                                            actions: [
-                                                {
-                                                    type: "set_default_value_found",
-                                                    condition: "1",
-                                                    set_default_value_found: {
-                                                        value: true
-                                                    }
-                                                },
-                                                {
-                                                    type: "enable_field",
-                                                    condition: "1 OR NOT(1)",
-                                                    enable_field: { value: true }
-                                                }
-                                            ]
-                                        }
-                                    }
-                                }
-                            ]
-                        };
-                    }
-                    else if (checkObjectKeyExists(field, "autofill")) {
-                        if (checkObjectKeyExists(field.autofill, "type")) {
-                            if (field.autofill.type === "storage") {
-                                field["defaultValue"] = {
-                                    is_found: false,
-                                    value: "",
-                                    sources: [
-                                        {
-                                            source: "browser_storage",
-                                            browser_storage: {
-                                                path: `$.${field.key}`,
-                                                validation: {
-                                                    rules: [
-                                                        {
-                                                            key: "1",
-                                                            type: "is_not_empty",
-                                                            is_not_empty: {
-                                                                value: true
-                                                            }
-                                                        }
-                                                    ],
-                                                    actions: [
-                                                        {
-                                                            type: "set_default_value_found",
-                                                            condition: "1",
-                                                            set_default_value_found: {
-                                                                value: true
-                                                            }
-                                                        },
-                                                        {
-                                                            type: "enable_field",
-                                                            condition: "1 OR NOT(1)",
-                                                            enable_field: { value: true }
-                                                        }
-                                                    ]
-                                                }
-                                            }
-                                        }
-                                    ]
-                                };
+                this.formFields[fieldIndex] = field;
+                break;
+        }
+    }
+    fieldErrorShow(fieldKey, message) {
+        let field = getFormFieldByKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        field = highlightFormFieldError(field, true);
+        field = appendFormFieldMessage(field, message);
+        this.formFields[fieldIndex] = field;
+    }
+    fieldErrorHide(fieldKey, message) {
+        let field = getFormFieldByKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        field = highlightFormFieldError(field, false);
+        field = removeFormFieldMessage(field, message);
+        this.formFields[fieldIndex] = field;
+    }
+    fieldMessageShow(fieldKey, message) {
+        let field = getFormFieldByKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        field = appendFormFieldMessage(field, message);
+        this.formFields[fieldIndex] = field;
+    }
+    fieldMessageHide(fieldKey, message) {
+        let field = getFormFieldByKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        field = removeFormFieldMessage(field, message);
+        this.formFields[fieldIndex] = field;
+    }
+    setObjectValue(field, path, value) { }
+    patchFieldControlValue(key, value) {
+        this.formGroup.patchValue({
+            [key]: value
+        }, { emitEvent: false });
+    }
+    patchFormGroup(formData) {
+        if (isUndefined(this.formGroup) || isUndefined(formData)) {
+            throw new Error(`formGroup or formData is 'undefined'.`);
+        }
+        else {
+            this.formGroup.patchValue(formData, { emitEvent: false });
+        }
+    }
+    isFieldValid(fieldKey) {
+        return this.formGroup.controls[fieldKey].valid;
+    }
+    isFieldEnabled(fieldKey) {
+        return this.formGroup.controls[fieldKey].enabled;
+    }
+    getFormGroupRawValues() {
+        return this.formGroup.getRawValue();
+    }
+    takeActionOnFieldGroup(action, object) {
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (action.key) {
+                case EActionKey.FIELD_GROUP_HIDE:
+                    this.fieldGroupHide(action.props.groupKey);
+                    break;
+                case EActionKey.FIELD_GROUP_SHOW:
+                    this.fieldGroupShow(action.props.groupKey);
+                    break;
+                case EActionKey.FIELD_GROUP_ENABLE:
+                    this.fieldGroupEnable(action.props.groupKey);
+                    break;
+                case EActionKey.FIELD_GROUP_DISABLE:
+                    this.fieldGroupDisable(action.props.groupKey);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+    takeAction(action, object) {
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (action.key) {
+                case EActionKey.FIELD_HIDE:
+                    this.fieldHide(action.props.fieldKey);
+                    break;
+                case EActionKey.FIELD_SHOW:
+                    this.fieldShow(action.props.fieldKey);
+                    break;
+                case EActionKey.FIELD_DISABLE:
+                    this.fieldDisable(action.props.fieldKey);
+                    break;
+                case EActionKey.FIELD_ENABLE:
+                    this.fieldEnable(action.props.fieldKey);
+                    break;
+                case EActionKey.FIELD_RESET:
+                    this.fieldReset(action.props.fieldKey);
+                    break;
+                case EActionKey.FIELD_ERROR_SHOW:
+                    this.fieldErrorShow(action.props.fieldKey, action.props.message);
+                    break;
+                case EActionKey.FIELD_ERROR_HIDE:
+                    this.fieldErrorHide(action.props.fieldKey, action.props.message);
+                    break;
+                case EActionKey.FIELD_MESSAGE_SHOW:
+                    this.fieldMessageShow(action.props.fieldKey, action.props.message);
+                    break;
+                case EActionKey.FIELD_MESSAGES_HIDE:
+                    this.fieldMessageHide(action.props.fieldKey, action.props.message);
+                    break;
+                case EActionKey.SET_VALUE:
+                    const setValue_Source = new Source(object);
+                    const sourceValue = yield setValue_Source.getValueFromSource(action.props.value.source);
+                    setValue_Source.setValueToSource(action.props.value.destination, sourceValue);
+                    object.FIELD_CONFIG = setValue_Source.object.FIELD_CONFIG;
+                    this.formData = setValue_Source.object.FORM_DATA;
+                    this.patchFormGroup(this.formData);
+                    this.allFormsData = setValue_Source.object.ALL_FORMS_DATA;
+                    this.previousFormData = setValue_Source.object.PREVIOUS_FORM_DATA;
+                    break;
+                case EActionKey.SET_FIELD_DEFAULT_VALUE:
+                    const setDefaultValue_Source = new Source(object);
+                    const sourceDefaultValue = yield setDefaultValue_Source.getValueFromSource(action.props.value.source);
+                    const destinationDefaultValue_FieldConfig_Config = {
+                        key: ESourceKey.OBJECT,
+                        props: {
+                            object: {
+                                key: "FIELD_CONFIG",
+                                path: "default.value.value"
                             }
-                            else if (field.autofill.type === "config") {
-                                field["defaultValue"] = {
-                                    is_found: false,
-                                    value: "",
-                                    sources: [
-                                        {
-                                            source: "field_config",
-                                            field_config: {
-                                                path: `$.${field.key}`,
-                                                validation: {
-                                                    rules: [
-                                                        {
-                                                            key: "1",
-                                                            type: "is_not_empty",
-                                                            is_not_empty: {
-                                                                value: true
-                                                            }
-                                                        }
-                                                    ],
-                                                    actions: [
-                                                        {
-                                                            type: "set_default_value_found",
-                                                            condition: "1",
-                                                            set_default_value_found: {
-                                                                value: true
-                                                            }
-                                                        },
-                                                        {
-                                                            type: "enable_field",
-                                                            condition: "1 OR NOT(1)",
-                                                            enable_field: { value: true }
-                                                        }
-                                                    ]
-                                                }
-                                            }
-                                        }
-                                    ]
-                                };
+                        }
+                    };
+                    setDefaultValue_Source.setValueToSource(destinationDefaultValue_FieldConfig_Config, sourceDefaultValue);
+                    const destinationDefaultValue_FormData_Config__Props__Object__Path = String(`${action.props.fieldKey}`);
+                    const destinationDefaultValue_FormData_Config = {
+                        key: ESourceKey.OBJECT,
+                        props: {
+                            object: {
+                                key: "FORM_DATA",
+                                path: String(action.props.fieldKey)
                             }
                         }
+                    };
+                    setDefaultValue_Source.setValueToSource(destinationDefaultValue_FormData_Config, sourceDefaultValue);
+                    object.FIELD_CONFIG = setDefaultValue_Source.object.FIELD_CONFIG;
+                    this.formData = setDefaultValue_Source.object.FORM_DATA;
+                    this.patchFormGroup(this.formData);
+                    this.allFormsData = setDefaultValue_Source.object.ALL_FORMS_DATA;
+                    this.previousFormData =
+                        setDefaultValue_Source.object.PREVIOUS_FORM_DATA;
+                    break;
+                case EActionKey.SET_DROPDOWN_OPTIONS:
+                    const setDropdownValue_Sources = new Source(object);
+                    let dropdownValue = yield setDropdownValue_Sources.getValueFromSource(action.props.value.source);
+                    if (checkObjectKeyExists(action.props, "options")) {
+                        if (checkObjectKeyExists(action.props.options, "appendToPath")) {
+                            let appendToPath = yield setDropdownValue_Sources.getValueFromSource(action.props.options.appendToPath.source);
+                            if (isNotEmptyValue(appendToPath)) {
+                                const appendToPathStr = replaceString(appendToPath.match(`${action.props.options.appendToPath.filterSourceValue}`)[0], "[^a-zA-Z0-9_]", "_");
+                                const optionsPath = `${action.props.options.path}${appendToPathStr}`;
+                                dropdownValue = getObjectValueFromPath(dropdownValue, optionsPath);
+                            }
+                        }
+                        else {
+                            dropdownValue = getObjectValueFromPath(dropdownValue, action.props.options.path);
+                        }
+                    }
+                    setDropdownValue_Sources.setValueToSource(action.props.value.destination, dropdownValue);
+                    object.FIELD_CONFIG = setDropdownValue_Sources.object.FIELD_CONFIG;
+                    this.formData = setDropdownValue_Sources.object.FORM_DATA;
+                    this.allFormsData = setDropdownValue_Sources.object.ALL_FORMS_DATA;
+                    this.previousFormData =
+                        setDropdownValue_Sources.object.PREVIOUS_FORM_DATA;
+                    break;
+                case EActionKey.HANDLE_CONNECTED_ELEMENTS:
+                    this.handleConnectedElements({ key: action.props.fieldKey }, "ON_ACTION");
+                    break;
+                case EActionKey.CUSTOM:
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+}
+/** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormViewComponent, deps: [{ token: TuiPushService }, { token: TuiAlertService }, { token: KwikIDFormViewService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", isMobileView: "isMobileView", allFormsData: "allFormsData" }, outputs: { onClickViewForms: "onClickViewForms", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall" }, providers: [KwikIDFormViewService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"kwikid-form-container\"\n  *ngIf=\"!loading\"\n>\n  <div\n    id=\"uf-form-fields-header-container\"\n    *ngIf=\"\n      !formConfig.properties.header.title.hidden ||\n      !formConfig.properties.header.steps.hidden\n    \"\n  >\n    <div\n      id=\"uf-form-fields-title\"\n      *ngIf=\"!formConfig.properties.header.title.hidden\"\n      >{{ formConfig.properties.header.title.label }}</div\n    >\n    <div\n      id=\"uf-form-fields-steps\"\n      *ngIf=\"!formConfig.properties.header.steps.hidden\"\n      >Step {{ formConfig.sequenceNo }} of {{ formConfig.formsListLength }}</div\n    >\n    <hr\n      *ngIf=\"\n        !formConfig.properties.header.title.hidden &&\n        !formConfig.properties.header.steps.hidden\n      \"\n    />\n  </div>\n  <form\n    class=\"kwikid-form show\"\n    [formGroup]=\"formGroup\"\n  >\n    <ng-container\n      *ngFor=\"\n        let field of formFields;\n        let i = index;\n        trackBy: getUniqueIdentifier\n      \"\n    >\n      <ng-container [ngSwitch]=\"field.type\">\n        <!-- HTML Content -->\n        <ng-container *ngSwitchCase=\"'html'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <div [innerHtml]=\"field.html | safeHtml\"></div>\n          </div>\n        </ng-container>\n        <!-- Form Title -->\n        <ng-container *ngSwitchCase=\"'title'\">\n          <div\n            class=\"title\"\n            [class.hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <div>\n              {{ field.label }}\n            </div>\n            <kwikui-button\n              *ngIf=\"field?.reset\"\n              appearance=\"whiteblock\"\n              size=\"s\"\n              label=\"Reset\"\n              (onClick)=\"handleOnClickResetFormFields($event, field)\"\n            ></kwikui-button>\n          </div>\n        </ng-container>\n        <!-- Input Text -->\n        <ng-container *ngSwitchCase=\"'text'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input\n              [case]=\"field?.properties?.case\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field.label\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [type]=\"'text'\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Checkbox -->\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-checkbox-block\n              [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.properties?.placeholder\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [size]=\"field?.properties?.size ?? 'l'\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-checkbox-block>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Number -->\n        <ng-container *ngSwitchCase=\"'number'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-number\n              [decimal]=\"field?.properties?.decimal\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [max]=\"field?.properties?.max\"\n              [min]=\"field?.properties?.min\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix ?? ''\"\n              [precision]=\"field?.properties?.precision\"\n              [prefix]=\"field?.properties?.prefix ?? ''\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-number>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Date -->\n        <ng-container *ngSwitchCase=\"'date'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-date\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field.label\"\n              [max]=\"field?.properties?.max\"\n              [min]=\"field?.properties?.min\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-date>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Phone -->\n        <ng-container *ngSwitchCase=\"'phone'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-phone\n              [countryCode]=\"field?.properties?.countryCode\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [phoneMaskAfterCountryCode]=\"\n                field?.properties?.phoneMaskAfterCountryCode\n              \"\n              [removeCountryCodeFromValue]=\"\n                field?.properties?.removeCountryCodeFromValue\n              \"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-phone>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Radio -->\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <label\n              [tuiLabel]=\"labelTemplate\"\n              style=\"min-height: auto; padding: 0px 0.5rem\"\n            >\n              <kwikui-radio-list\n                [disabled]=\"field?.disabled\"\n                [focus]=\"field?.focus\"\n                [formControl]=\"formGroup.controls[field.key]\"\n                [formControlName]=\"field.key\"\n                [id]=\"field.key\"\n                [invalid]=\"field?.invalid\"\n                [items]=\"field?.options\"\n                [label]=\"field?.label\"\n                [orientation]=\"field?.properties?.orientation\"\n                [placeholder]=\"field?.properties?.placeholder\"\n                [properties]=\"field?.properties\"\n                [size]=\"field?.properties?.size\"\n                [validators]=\"field?.validators\"\n                (getKeyValue)=\"handleGetKeyValue($event)\"\n              ></kwikui-radio-list>\n            </label>\n            <ng-template #labelTemplate>\n              <p\n                class=\"tui-space_bottom-2\"\n                [hidden]=\"field?.hidden\"\n                id=\"field_{{ field.key }}\"\n              >\n                <b>\n                  {{ field.label }}\n                  <span *ngIf=\"field.validators?.required\"></span>\n                </b>\n              </p>\n            </ng-template>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Dropdown -->\n        <ng-container *ngSwitchCase=\"'dropdown-with-search'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-select-combobox\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field.label\"\n              [options]=\"field.options\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-select-combobox>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- API Call -->\n        <ng-container *ngSwitchCase=\"'api-call'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-button-api-call\n              [apiStatus]=\"field?.api?.status?.value\"\n              [class]=\"field?.class\"\n              [disabled]=\"field?.disabled\"\n              [id]=\"field.key\"\n              [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\n              [showLoader]=\"field?.disabled === 'loading'\"\n              shape=\"null\"\n              size=\"m\"\n              styles=\"width: fit-content\"\n              (onClick)=\"handleOnClickApiCall($event)\"\n            ></kwikui-button-api-call>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Mobile OTP -->\n        <ng-container *ngSwitchCase=\"'otp'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-otp\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [mask]=\"field?.properties?.mask\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-otp>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Aadhaar Number -->\n        <ng-container *ngSwitchCase=\"'aadhaar-number'\">\n          <div\n            [hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-aadhaar\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [placeholder]=\"field?.placeholder\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-aadhaar>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </form>\n  <div class=\"kwikid-form-buttons\">\n    <kwikui-button\n      *ngIf=\"\n        !formConfig.properties.footer.viewFormsButton.hidden && isMobileView\n      \"\n      [disabled]=\"viewFormsButton.disabled\"\n      id=\"\"\n      label=\"{{ formConfig.properties.footer.viewFormsButton.label }}\"\n      [showLoader]=\"viewFormsButton.showLoader\"\n      styles=\"\"\n      class=\"\"\n      type=\"button\"\n      appearance=\"secondary\"\n      icon=\"\"\n      iconRight=\"\"\n      [shape]=\"null\"\n      size=\"m\"\n      styles=\"width: 100%\"\n      (onClick)=\"handleOnClickViewForms($event)\"\n    ></kwikui-button>\n    <kwikui-button\n      *ngIf=\"!formConfig.properties.footer.saveButton.hidden\"\n      [disabled]=\"saveFormButton.disabled\"\n      id=\"\"\n      label=\"{{ formConfig.properties.footer.saveButton.label }}\"\n      [showLoader]=\"saveFormButton.showLoader\"\n      styles=\"\"\n      class=\"\"\n      type=\"button\"\n      appearance=\"primary\"\n      icon=\"\"\n      iconRight=\"\"\n      [shape]=\"null\"\n      size=\"m\"\n      styles=\"width: 100%\"\n      (onClick)=\"handleOnClickSaveForm($event)\"\n    ></kwikui-button>\n  </div>\n</div>\n<div\n  class=\"kwikid-form-container-loading\"\n  *ngIf=\"loading\"\n>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n  <div\n    class=\"large-wrapper\"\n    [class.tui-skeleton]=\"loading\"\n    [class.tui-skeleton_rounded]=\"loading\"\n  ></div>\n</div>\n<tui-push\n  id=\"field-error-notification\"\n  *tuiPush=\"showErrorNotification\"\n  heading=\"Missing/Incorrect Fields!\"\n  type=\"Error\"\n  (close)=\"toggleErrorNotification(false)\"\n>\n  <tui-svg\n    src=\"tuiIconCancel\"\n    style=\"color: #fff !important\"\n  >\n  </tui-svg>\n</tui-push>\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}.kwikid-form-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}.kwikid-form.show{width:100%;height:100%;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-row-gap:1rem;row-gap:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-column-gap:10px;column-gap:10px}.kwikid-form-buttons *{flex-grow:1}#uf-form-fields-header-container{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start;grid-row-gap:.5rem;row-gap:.5rem;padding:1rem}#uf-form-fields-header-container hr{width:100%}#uf-form-fields-title{color:#000;font-size:1.75em;font-weight:bold}#uf-form-fields-steps{color:var(--color-on-secondary-container);font-size:1em}.title{border-left:.25rem solid var(--tui-primary);padding:.75rem;font-size:1.4em;font-weight:bold;background-color:var(--tui-secondary);display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-gap:.5rem;gap:.5rem}.title:not(:first-child){margin-top:.5rem}.title.hidden{display:none}.large-wrapper{width:100%;height:60px}.large-wrapper:first-child{margin-bottom:auto}.large-wrapper:last-child{margin-top:auto}.kwikid-form-container-loading{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;grid-row-gap:1rem;row-gap:1rem;padding:1rem}#field-error-notification{background-color:var(--tui-error-fill);color:#fff!important}#field-error-notification .t-top{color:#fff!important}#field-error-notification .t-close{color:#fff!important}\n"], components: [{ type: i2.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i2.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i2.KwikUICheckboxBlockComponent, selector: "kwikui-checkbox-block", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "contentAlign", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "prefix", "postfix", "precision", "decimal", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "countryCode", "phoneMaskAfterCountryCode", "removeCountryCodeFromValue", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3$1.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i2.KwikUIRadioListComponent, selector: "kwikui-radio-list", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "orientation", "items", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i2.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i4$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4$1.TuiPushDirective, selector: "tui-push" }], pipes: { "safeHtml": SafeHtmlPipe$1 } });
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "ngOnInit", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "ngAfterViewInit", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "ngOnChanges", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "initFormConfig", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "setFormFieldsFromFormConfig", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "setFormFieldGroupsFromFormConfig", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "setFormDataFromAllFormsData", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldGroupActions", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldGroup", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldActions", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "handleConnectedElementFields", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "handleConnectedElements", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "handleGetKeyValue", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "handleOnClickResetFormFields", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "handleOnClickApiCall", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "handleOnClickViewForms", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "handleOnClickSaveForm", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "toggleErrorNotification", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldHide", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldGroupHide", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldShow", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldGroupShow", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldDisable", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldGroupDisable", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldEnable", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldGroupEnable", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldReset", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldErrorShow", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldErrorHide", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldMessageShow", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "fieldMessageHide", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "setObjectValue", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "patchFieldControlValue", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "patchFormGroup", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "isFieldValid", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "isFieldEnabled", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "getFormGroupRawValues", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "takeActionOnFieldGroup", null);
+__decorate([
+    logMethod
+], KwikIDFormViewComponent.prototype, "takeAction", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "kwikid-form-view",
+                    templateUrl: "./form-view.component.html",
+                    styleUrls: ["./form-view.component.scss"],
+                    providers: [KwikIDFormViewService]
+                }]
+        }], ctorParameters: function () { return [{ type: i4$1.TuiPushService, decorators: [{
+                    type: Inject,
+                    args: [TuiPushService]
+                }] }, { type: i3$1.TuiAlertService, decorators: [{
+                    type: Inject,
+                    args: [TuiAlertService]
+                }] }, { type: KwikIDFormViewService }]; }, propDecorators: { formConfig: [{
+                type: Input
+            }], formData: [{
+                type: Input
+            }], isMobileView: [{
+                type: Input
+            }], allFormsData: [{
+                type: Input
+            }], onClickViewForms: [{
+                type: Output
+            }], onClickSaveForm: [{
+                type: Output
+            }], onClickApiCall: [{
+                type: Output
+            }], ngOnInit: [], ngAfterViewInit: [], ngOnChanges: [], initFormConfig: [], setFormFieldsFromFormConfig: [], setFormFieldGroupsFromFormConfig: [], setFormDataFromAllFormsData: [], handleConnectedElementFieldGroupActions: [], handleConnectedElementFieldGroup: [], handleConnectedElementFieldActions: [], handleConnectedElementFields: [], handleConnectedElements: [], handleGetKeyValue: [], handleOnClickResetFormFields: [], handleOnClickApiCall: [], handleOnClickViewForms: [], handleOnClickSaveForm: [], toggleErrorNotification: [], fieldHide: [], fieldGroupHide: [], fieldShow: [], fieldGroupShow: [], fieldDisable: [], fieldGroupDisable: [], fieldEnable: [], fieldGroupEnable: [], fieldReset: [], fieldErrorShow: [], fieldErrorHide: [], fieldMessageShow: [], fieldMessageHide: [], setObjectValue: [], patchFieldControlValue: [], patchFormGroup: [], isFieldValid: [], isFieldEnabled: [], getFormGroupRawValues: [], takeActionOnFieldGroup: [], takeAction: [] } });
+
+/**
+ * Generated class for the SafeHtmlPipe pipe.
+ *
+ * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
+ */
+class SafeHtmlPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+}
+/** @nocollapse */ SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "safeHtml"
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
+
+class KwikIDFormsListComponent {
+    constructor() {
+        this.showFormFields = {};
+        this.userConfig = {};
+        this.activeFormConfig = {};
+        this.formsList = [];
+        this.formsListCompleted = [];
+        this.isMobileView = false;
+        this.onClickSetActiveForm = new EventEmitter();
+        this.onClickHideFormsList = new EventEmitter();
+        this.onClickSubmitForms = new EventEmitter();
+        this.selectedForm = "";
+        this.formsListLength = 0;
+        this.isAllFormsCompleted = true;
+    }
+    ngOnInit() {
+        this.formsList = this.filterHiddenForms(this.formsList);
+        this.formsListLength = this.findFormsListLength(this.formsList);
+        this.isAllFormsCompleted = this.checkIsAllFormsCompleted(this.formsList);
+    }
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            return checkObjectKeyExists(changes, key) && !changes[key].firstChange;
+        };
+        if (verifyChange("showFormFields")) {
+            this.showFormFields = changes.showFormFields.currentValue;
+        }
+        if (verifyChange("formsList")) {
+            this.formsList = this.filterHiddenForms(this.formsList);
+            this.formsListLength = this.findFormsListLength(this.formsList);
+            this.isAllFormsCompleted = this.checkIsAllFormsCompleted(this.formsList);
+        }
+        if (verifyChange("isMobileView")) {
+            this.isMobileView = changes.isMobileView.currentValue;
+        }
+    }
+    filterHiddenForms(formsList) {
+        return formsList.filter((form) => {
+            if (checkObjectKeyExists(form, "hidden")) {
+                if (!form.hidden) {
+                    return form;
+                }
+            }
+        });
+    }
+    findFormsListLength(formsList) {
+        const _formsList = formsList.filter((form) => {
+            if (checkObjectKeyExists(form, "type")) {
+                if (form.type === "form") {
+                    if (checkObjectKeyExists(form, "hidden")) {
+                        if (!form.hidden) {
+                            return form;
+                        }
                     }
-                    else {
-                        field["defaultValue"] = {
-                            is_found: false,
-                            value: "",
-                            sources: [
-                                {
-                                    source: "form_data",
-                                    form_data: {
-                                        path: `$.${field.key}`,
-                                        validation: {
-                                            rules: [
-                                                {
-                                                    key: "1",
-                                                    type: "is_not_empty",
-                                                    is_not_empty: {
-                                                        value: true
-                                                    }
-                                                }
-                                            ],
-                                            actions: [
-                                                {
-                                                    type: "set_default_value_found",
-                                                    condition: "1",
-                                                    set_default_value_found: {
-                                                        value: true
-                                                    }
-                                                },
-                                                {
-                                                    type: "enable_field",
-                                                    condition: "1 OR NOT(1)",
-                                                    enable_field: { value: true }
-                                                }
-                                            ]
-                                        }
-                                    }
-                                }
-                            ]
-                        };
-                    }
                 }
-                delete field["defaultVal"];
             }
-            return field;
-        };
-        const updateFieldMessages = (field) => {
-            if (field.isFormElement) {
-                field = this.setMissingFieldKeyValue(field, "messages", []);
-            }
-            return field;
-        };
-        const updateFieldResetButton = (field) => {
-            if (field.isFormElement) {
-                if (checkObjectKeyExists(field, "action") &&
-                    field.action === "reset" &&
-                    checkObjectKeyExists(field, "fields")) {
-                    field = this.setFieldKeyValue(field, "reset", {
-                        fields: field.fields
-                    });
+            else if (checkObjectKeyExists(form, "hidden")) {
+                if (!form.hidden) {
+                    return form;
                 }
             }
-            return field;
-        };
-        const setFormFields = (formConfig, fields) => {
-            if (checkObjectKeyExists(formConfig, "multiForm")) {
-                formConfig.multiForm["fields"] = fields;
-            }
-            else {
-                formConfig["fields"] = fields;
-            }
-            return formConfig;
-        };
-        const setFormFieldGroups = (formConfig, groups) => {
-            formConfig["fieldGroups"] = groups;
-            return formConfig;
-        };
-        const updateFormFieldGroups = (fieldGroups, field) => {
-            if (checkObjectKeyExists(field, "groupKey")) {
-                if (checkObjectKeyExists(fieldGroups, field.groupKey)) {
-                    fieldGroups[field.groupKey].push(field.key);
-                }
-                else {
-                    fieldGroups[field.groupKey] = [field.key];
+        });
+        return _formsList.length;
+    }
+    checkIsAllFormsCompleted(formsList) {
+        let isAllFormsCompleted = true;
+        for (let form of formsList) {
+            if (checkObjectKeyExists(form, "type")) {
+                if (form.type === "form") {
+                    if (form.status !== "completed") {
+                        isAllFormsCompleted = false;
+                        break;
+                    }
                 }
             }
-            return fieldGroups;
-        };
-        let connectedFieldMapping = {
-            parent: {},
-            child: {}
-        };
-        let fields = this.getFormFields(formConfig);
-        let fieldGroups = {};
-        for (let field of fields) {
-            field = updateOnFieldType(field);
-            field = formatFieldKeys(field);
-            // connectedFieldMapping = getConnectedElementFieldMapping(
-            //   field,
-            //   connectedFieldMapping
-            // );
-            // field = updateConnectedElementsKeyValue(field, connectedFieldMapping);
-            fieldGroups = updateFormFieldGroups(fieldGroups, field);
-            field = updateFieldDefaultValueConfig(field);
-            field = updateFieldValidatorConfig(field);
-            field = updateFieldResetButton(field);
-            field = updateFieldMessages(field);
         }
-        formConfig = setFormFieldGroups(formConfig, fieldGroups);
-        formConfig = setFormFields(formConfig, fields);
-        return formConfig;
+        return isAllFormsCompleted;
+    }
+    handleOnClickSetActiveForm(selectedForm) {
+        if (this.selectedForm !== selectedForm ||
+            (this.isAllFormsCompleted && !this.showFormFields)) {
+            this.selectedForm = selectedForm;
+            this.onClickSetActiveForm.emit(selectedForm);
+        }
+    }
+    handleOnSubmitForms(e) {
+        this.onClickSubmitForms.emit(e);
     }
 }
+/** @nocollapse */ KwikIDFormsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: { showFormFields: "showFormFields", userConfig: "userConfig", activeFormConfig: "activeFormConfig", formsList: "formsList", formsListCompleted: "formsListCompleted", isMobileView: "isMobileView" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", onClickHideFormsList: "onClickHideFormsList", onClickSubmitForms: "onClickSubmitForms" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"sidebar-container\">\n  <div id=\"sidebar\">\n    <div ngClass=\"kwikid-form-header\">\n      <div id=\"uf-header\">\n        <div id=\"uf-header-logo-container\">\n          <img\n            id=\"uf-header-logo\"\n            src=\"{{ this.userConfig.theme.clientLogo }}\"\n            [ngClass]=\"'large-icon'\"\n          />\n        </div>\n      </div>\n      <hr />\n    </div>\n    <div id=\"uf-progress\">\n      <div id=\"uf-progress-steps\">\n        {{ this.formsListCompleted.length }} / {{ this.formsListLength }} Steps\n        Completed\n      </div>\n      <kwikui-progress-segmented\n        [max]=\"this.formsListLength\"\n        size=\"m\"\n        [value]=\"this.formsListCompleted.length\"\n      ></kwikui-progress-segmented>\n    </div>\n    <div id=\"uf-sections-container\">\n      <ng-container *ngFor=\"let form of formsList; let i = index\">\n        <ng-container [ngSwitch]=\"form.type\">\n          <!-- HTML Content -->\n          <ng-container *ngSwitchCase=\"'html'\">\n            <div [innerHtml]=\"form.props.htmlContent | safeHtml\"></div>\n          </ng-container>\n          <ng-container *ngSwitchCase=\"'form'\">\n            <div\n              [class]=\"'uf-section-item'\"\n              [class.completed]=\"form.status === 'completed' && !form.disabled\"\n              [class.edit]=\"form.status === 'editable' && !form.disabled\"\n              [class.locked]=\"form.status === 'locked' && form.disabled\"\n              [class.active]=\"\n                activeFormConfig !== undefined &&\n                form.key === activeFormConfig.key\n              \"\n              (click)=\"\n                form.status === 'locked' && form.disabled\n                  ? undefined\n                  : handleOnClickSetActiveForm(form.key)\n              \"\n            >\n              <div class=\"uf-form-section-card-title\">\n                {{ form.props.title }}&nbsp;<span *ngIf=\"form?.required\"\n                  >*</span\n                >\n              </div>\n              <div class=\"uf-form-section-card-status\">\n                <div\n                  *ngIf=\"form.status === 'completed' && !form.disabled\"\n                  class=\"uf-form-section-card-status-img completed\"\n                >\n                  <tui-svg src=\"tuiIconCheckLarge\"></tui-svg>\n                </div>\n                <div\n                  *ngIf=\"form.status !== 'completed' && !form.disabled\"\n                  class=\"uf-form-section-card-status-img edit\"\n                >\n                  <tui-svg src=\"tuiIconEdit\"></tui-svg>\n                </div>\n                <div\n                  *ngIf=\"form.status !== 'completed' && form.disabled\"\n                  class=\"uf-form-section-card-status-img locked\"\n                >\n                  <tui-svg src=\"tuiIconLock\"></tui-svg>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </div>\n    <div id=\"submit-sidebar-btn-container\">\n      <kwikui-button\n        [disabled]=\"false\"\n        id=\"\"\n        label=\"Submit\"\n        [showLoader]=\"false\"\n        styles=\"\"\n        class=\"\"\n        type=\"button\"\n        appearance=\"primary\"\n        icon=\"\"\n        iconRight=\"\"\n        [shape]=\"null\"\n        size=\"m\"\n        styles=\"width: 100%\"\n        (onClick)=\"handleOnSubmitForms($event)\"\n      ></kwikui-button>\n    </div>\n  </div>\n</div>\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}#sidebar-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}#sidebar{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch}.uf-section-item{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-content:center;padding:1rem;grid-gap:1rem;gap:1rem;cursor:pointer;box-shadow:0 1px 3px -1px var(--tui-base-05);border-radius:.5rem;background-color:var(--tui-base-02);position:relative}.uf-section-item:hover{box-shadow:0 1px 3px -1px var(--tui-base-08)}#submit-sidebar-btn-container{width:100%;bottom:0px;z-index:1;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;gap:1rem}#submit-sidebar-btn-container *{flex-grow:1}#uf-sections-container{display:flex;flex-direction:column;height:100%;grid-row-gap:20px;row-gap:20px;padding:1rem;overflow-y:auto}.uf-form-section-card{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:10px;column-gap:10px;border:none;border-radius:8px;background-color:#e9e9e9;height:-moz-fit-content;height:fit-content;min-height:60px;padding:10px 15px;width:100%;max-width:350px;margin:0 auto}.uf-section-item.locked{-webkit-user-select:none;user-select:none;cursor:not-allowed}.uf-form-section-card .uf-form-section-card-title{font-size:1.2em;text-align:left;line-height:1.25em}.uf-form-section-card .uf-form-section-card-status{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.uf-form-section-card .uf-form-section-card-status .uf-form-section-card-status-img{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;border-radius:100%;color:#fff;font-weight:bold}.uf-form-section-card-status-img.completed{background-color:var(--tui-success-fill);padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-status-img.edit{background-color:var(--tui-error-fill);padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-status-img.locked{background-color:var(--tui-neutral-fill);padding:.25rem;border-radius:50%;color:#fff}#uf-progress{display:flex;padding:1rem;flex-direction:column;align-content:center;justify-content:center;align-items:stretch;grid-gap:.5rem;gap:.5rem}#uf-progress-steps{font-size:1em;text-align:right;color:#3d3d3d}.uf-form-section-card-title{font-size:1em;font-weight:bold;color:#000}@media screen and (max-width: 600px){#sidebar-container{max-width:unset}}.kwikid-form-header{height:70px;z-index:6}.kwikid-form-header hr{width:calc(100% - 1rem);margin-left:auto;margin-right:auto}#uf-header{display:flex;flex-direction:row;align-content:center;align-items:center;justify-content:flex-start;grid-column-gap:10px;column-gap:10px;padding:10px 20px;width:100%;max-width:calc(400px + 50vw + 2rem);margin:0 auto;height:70px;z-index:1}#uf-header #uf-header-goback-container{display:none}#uf-header #uf-header-goback-container:hover{border-radius:50%;background-color:#d3d3d3}#uf-header #uf-header-goback-container #uf-header-goback{width:100%;height:auto}#uf-header #uf-header-logo-container{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}#uf-header #uf-header-logo-container #uf-header-logo.small-icon{width:100%;height:50px}#uf-header #uf-header-logo-container #uf-header-logo.large-icon{width:100%;height:50px}#uf-header #uf-header-title-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;grid-row-gap:4px;row-gap:4px}#uf-header #uf-header-title-container #uf-header-title{font-size:1.4em;color:#121212}#uf-header #uf-header-title-container #uf-header-subtitle{font-size:1.2em;color:#121212}\n"], components: [{ type: i2.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["id", "value", "max", "size", "colors"] }, { type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "safeHtml": SafeHtmlPipe } });
 __decorate([
     logMethod
-], Converter.prototype, "convertFormConfig", null);
+], KwikIDFormsListComponent.prototype, "ngOnChanges", null);
+__decorate([
+    logMethod
+], KwikIDFormsListComponent.prototype, "filterHiddenForms", null);
+__decorate([
+    logMethod
+], KwikIDFormsListComponent.prototype, "findFormsListLength", null);
+__decorate([
+    logMethod
+], KwikIDFormsListComponent.prototype, "checkIsAllFormsCompleted", null);
+__decorate([
+    logMethod
+], KwikIDFormsListComponent.prototype, "handleOnClickSetActiveForm", null);
+__decorate([
+    logMethod
+], KwikIDFormsListComponent.prototype, "handleOnSubmitForms", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormsListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "kwikid-forms-list",
+                    templateUrl: "./forms-list.component.html",
+                    styleUrls: ["./forms-list.component.scss"]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { showFormFields: [{
+                type: Input
+            }], userConfig: [{
+                type: Input
+            }], activeFormConfig: [{
+                type: Input
+            }], formsList: [{
+                type: Input
+            }], formsListCompleted: [{
+                type: Input
+            }], isMobileView: [{
+                type: Input
+            }], onClickSetActiveForm: [{
+                type: Output
+            }], onClickHideFormsList: [{
+                type: Output
+            }], onClickSubmitForms: [{
+                type: Output
+            }], ngOnChanges: [], filterHiddenForms: [], findFormsListLength: [], checkIsAllFormsCompleted: [], handleOnClickSetActiveForm: [], handleOnSubmitForms: [] } });
+
+var EFormsListStatus;
+(function (EFormsListStatus) {
+    EFormsListStatus["COMPLETED"] = "completed";
+    EFormsListStatus["EDITABLE"] = "editable";
+    EFormsListStatus["LOCKED"] = "locked";
+})(EFormsListStatus || (EFormsListStatus = {}));
+
+var ERendererActionKey;
+(function (ERendererActionKey) {
+    ERendererActionKey["SET_VALUE"] = "SET_VALUE";
+    ERendererActionKey["FORM_HIDE"] = "FORM_HIDE";
+    ERendererActionKey["FORM_SHOW"] = "FORM_SHOW";
+    ERendererActionKey["FORM_DISABLE"] = "FORM_DISABLE";
+    ERendererActionKey["FORM_ENABLE"] = "FORM_ENABLE";
+})(ERendererActionKey || (ERendererActionKey = {}));
 
 const getFormConfigByKey = (forms, key) => {
     const form = forms.find((form) => {
@@ -3776,7 +3778,7 @@ class KwikIDFormsRendererComponent {
         else {
             throw new Error(`userFormFields doesn't have a form defined with key: ${formStepKey}`);
         }
-        this.initializeForms();
+        this.initializeForms("ON_INIT");
         this.loader = false;
     }
     ngOnChanges(changes) {
@@ -3789,7 +3791,7 @@ class KwikIDFormsRendererComponent {
         }
         if (verifyChange("formsData")) {
             this.formsData = changes.formsData.currentValue;
-            this.initializeForms();
+            this.initializeForms("ON_CHANGE");
         }
         if (verifyChange("apiCallResponse")) {
             this.apiCallResponse = changes.apiCallResponse.currentValue;
@@ -3803,28 +3805,34 @@ class KwikIDFormsRendererComponent {
             return data;
         });
     }
-    initializeForms() {
+    initializeForms(eventType) {
         return __awaiter(this, void 0, void 0, function* () {
             this.loader = true;
             this.allFormsData = this.formsData;
             yield this.updateFormsList();
-            this.handleResize(this.formsList);
-            if (isNotEmptyValue(this.activeFormConfig)) {
-                if (checkObjectKeyExists(this.activeFormConfig, "type")) {
-                    if (this.activeFormConfig.type === "form") {
+            if (eventType === "ON_CHANGE" &&
+                this.findFormsListLength(this.formsList) === 1) {
+                this.handleOnClickSubmitForms(null);
+            }
+            else {
+                this.handleResize(this.formsList);
+                if (isNotEmptyValue(this.activeFormConfig)) {
+                    if (checkObjectKeyExists(this.activeFormConfig, "type")) {
+                        if (this.activeFormConfig.type === "form") {
+                            yield this.handleOnClickSetActiveForm(this.activeFormConfig.key);
+                        }
+                    }
+                    else {
                         yield this.handleOnClickSetActiveForm(this.activeFormConfig.key);
                     }
                 }
                 else {
-                    yield this.handleOnClickSetActiveForm(this.activeFormConfig.key);
+                    this.showForm = false;
+                    this.showFormFields = false;
                 }
+                this.loader = false;
+                this.loading = false;
             }
-            else {
-                this.showForm = false;
-                this.showFormFields = false;
-            }
-            this.loader = false;
-            this.loading = false;
         });
     }
     convertFormListConfig(formsList) {
@@ -4041,6 +4049,25 @@ class KwikIDFormsRendererComponent {
             }
         });
     }
+    findFormsListLength(formsList) {
+        const _formsList = formsList.filter((form) => {
+            if (checkObjectKeyExists(form, "type")) {
+                if (form.type === "form") {
+                    if (checkObjectKeyExists(form, "hidden")) {
+                        if (!form.hidden) {
+                            return form;
+                        }
+                    }
+                }
+            }
+            else if (checkObjectKeyExists(form, "hidden")) {
+                if (!form.hidden) {
+                    return form;
+                }
+            }
+        });
+        return _formsList.length;
+    }
     /**
      * Library Event Listeners
      */
@@ -4049,7 +4076,6 @@ class KwikIDFormsRendererComponent {
      * @param selectedForm string
      */
     handleOnClickSetActiveForm(selectedForm) {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             this.showForm = false;
             this.loader = true;
@@ -4061,7 +4087,8 @@ class KwikIDFormsRendererComponent {
             let formConfig = undefined;
             if (checkObjectKeyExists(activeFormConfig, "props")) {
                 if (checkObjectKeyExists(activeFormConfig.props, "url")) {
-                    formConfig = yield this.fetchFormConfig(activeFormConfig.props.url);
+                    const formConfigFromUrl = yield this.fetchFormConfig(activeFormConfig.props.url);
+                    formConfig = Object.assign(Object.assign({}, activeFormConfig), formConfigFromUrl);
                 }
                 else {
                     if (checkObjectKeyExists(activeFormConfig, "fields")) {
@@ -4074,7 +4101,8 @@ class KwikIDFormsRendererComponent {
             }
             else {
                 if (checkObjectKeyExists(activeFormConfig.formContent, "url")) {
-                    formConfig = yield this.fetchFormConfig(activeFormConfig.formContent.url);
+                    const formConfigFromUrl = yield this.fetchFormConfig(activeFormConfig.formContent.url);
+                    formConfig = Object.assign(Object.assign({}, activeFormConfig), formConfigFromUrl);
                 }
                 else {
                     if (checkObjectKeyExists(activeFormConfig, "fields")) {
@@ -4086,9 +4114,11 @@ class KwikIDFormsRendererComponent {
                 }
             }
             console.log(JSON.parse(JSON.stringify(formConfig)));
-            formConfig = new Converter().convertFormConfig(formConfig);
-            const activeFormData = (_a = this.allFormsData[formConfig.key]) !== null && _a !== void 0 ? _a : {};
+            formConfig = new Converter().updateFormConfigMiscellaneous(formConfig, {
+                formsListLength: this.findFormsListLength(this.formsList)
+            });
             this.activeFormConfig = Object.assign(Object.assign({}, activeFormConfig), formConfig);
+            this.activeFormConfig;
             if (this.hostElement.nativeElement.offsetWidth < 600) {
                 this.showFormSections = false;
                 this.showFormFields = true;
@@ -4115,7 +4145,6 @@ class KwikIDFormsRendererComponent {
      */
     handleOnClickSaveForm(e) {
         this.loader = true;
-        this.activeFormData = {};
         this.getFormData.emit({
             [this.activeFormConfig.key]: e["data"]
         });
@@ -4176,7 +4205,7 @@ class KwikIDFormsRendererComponent {
     }
 }
 /** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormsRendererComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { stepConfig: "stepConfig", userConfig: "userConfig", formsData: "formsData", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div ngClass=\"kwikid-renderer\">\n  <div\n    ngClass=\"kwikid-layout-container\"\n    *ngIf=\"!loading\"\n  >\n    <div\n      ngClass=\"kwikid-sections-container\"\n      *ngIf=\"showFormSections\"\n      class=\"active\"\n      [class.active]=\"showFormSections\"\n      [class.mobile]=\"isMobileView\"\n    >\n      <kwikid-forms-list\n        [showFormFields]=\"this.showFormFields\"\n        [activeFormConfig]=\"this.activeFormConfig\"\n        [userConfig]=\"this.userConfig\"\n        [formsList]=\"this.formsList\"\n        [formsListCompleted]=\"this.formsListCompleted\"\n        [isMobileView]=\"this.isMobileView\"\n        (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\n        (onClickSubmitForms)=\"this.handleOnClickSubmitForms($event)\"\n      ></kwikid-forms-list>\n    </div>\n    <div\n      ngClass=\"kwikid-forms-container\"\n      *ngIf=\"\n        this.showForm &&\n        this.showFormFields &&\n        this.activeFormConfig !== undefined\n      \"\n      [class.active]=\"showFormFields\"\n      [class.mobile]=\"isMobileView\"\n      [@panelInOut]\n    >\n      <kwikid-form-view\n        [formConfig]=\"this.activeFormConfig\"\n        [formData]=\"this.activeFormData\"\n        [formsList]=\"this.formsList\"\n        [allFormsData]=\"this.allFormsData\"\n        [isMobileView]=\"this.isMobileView\"\n        (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\n        (onClickSaveForm)=\"this.handleOnClickSaveForm($event)\"\n      ></kwikid-form-view>\n    </div>\n  </div>\n</div>\n<div\n  ngClass=\"kwikid-forms-renderer-loader\"\n  *ngIf=\"loader\"\n>\n  <span class=\"loader\"></span>\n</div>\n<tui-push\n  id=\"error-notification\"\n  *tuiPush=\"showErrorNotification\"\n  heading=\"Please complete the required Forms!\"\n  type=\"Error\"\n  (close)=\"toggleErrorNotification(false)\"\n>\n  <tui-svg\n    src=\"tuiIconCancel\"\n    style=\"color: #fff !important\"\n  >\n  </tui-svg>\n</tui-push>\n", styles: [":host{position:relative}.kwikid-root{width:100%;height:100%}.kwikid-renderer{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%}.kwikid-layout-container{display:flex;flex-direction:row;padding:0 1rem;height:100%;justify-content:center;align-items:stretch;background:var(--tui-secondary-active);position:relative}.kwikid-sections-container{display:block;width:100%;max-width:400px;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);margin:auto 1rem auto 0;box-shadow:0 0 12px -8px var(--tui-secondary)}.kwikid-sections-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}.kwikid-forms-container{display:block;width:100%;max-width:50%;margin:auto 0;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);box-shadow:0 0 12px -8px var(--tui-primary)}.kwikid-forms-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}@media screen and (max-width: 600px){.kwikid-layout-container{padding:0;background:transparent}.kwikid-sections-container{position:absolute;max-width:100%;bottom:-10000px;left:-10000px;opacity:0;padding:0;visibility:hidden}.kwikid-sections-container.active{visibility:visible}.kwikid-sections-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container{display:none;max-width:100%;height:100%;padding:0;border-radius:0;box-shadow:none}.kwikid-forms-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container.active{display:block}}.kwikid-forms-renderer-loader{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;z-index:100}.kwikid-forms-renderer-loader .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:#fff #fff transparent;box-sizing:border-box;animation:rotation 1s linear infinite}.kwikid-forms-renderer-loader .loader:after{content:\"\";box-sizing:border-box;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:3px solid;border-color:transparent var(--tui-primary) var(--tui-primary);width:24px;height:24px;border-radius:50%;animation:rotationBack .5s linear infinite;transform-origin:center center}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.kwikid-forms-renderer-loader .t-loader{display:none!important}#error-notification{background-color:var(--tui-error-fill);color:#fff!important}#error-notification .t-top{color:#fff!important}#error-notification .t-close{color:#fff!important}\n"], components: [{ type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["showFormFields", "userConfig", "activeFormConfig", "formsList", "formsListCompleted", "isMobileView"], outputs: ["onClickSetActiveForm", "onClickHideFormsList", "onClickSubmitForms"] }, { type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["formConfig", "formData", "isMobileView", "allFormsData", "formsList"], outputs: ["onClickViewForms", "onClickSaveForm", "onClickApiCall"] }, { type: i4$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4$1.TuiPushDirective, selector: "tui-push" }], animations: [
+/** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { stepConfig: "stepConfig", userConfig: "userConfig", formsData: "formsData", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div ngClass=\"kwikid-renderer\">\n  <div\n    ngClass=\"kwikid-layout-container\"\n    *ngIf=\"!loading\"\n  >\n    <div\n      ngClass=\"kwikid-sections-container\"\n      *ngIf=\"showFormSections\"\n      class=\"active\"\n      [class.active]=\"showFormSections\"\n      [class.mobile]=\"isMobileView\"\n    >\n      <kwikid-forms-list\n        [showFormFields]=\"this.showFormFields\"\n        [activeFormConfig]=\"this.activeFormConfig\"\n        [userConfig]=\"this.userConfig\"\n        [formsList]=\"this.formsList\"\n        [formsListCompleted]=\"this.formsListCompleted\"\n        [isMobileView]=\"this.isMobileView\"\n        (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\n        (onClickSubmitForms)=\"this.handleOnClickSubmitForms($event)\"\n      ></kwikid-forms-list>\n    </div>\n    <div\n      ngClass=\"kwikid-forms-container\"\n      *ngIf=\"\n        this.showForm &&\n        this.showFormFields &&\n        this.activeFormConfig !== undefined\n      \"\n      [class.active]=\"showFormFields\"\n      [class.mobile]=\"isMobileView\"\n      [@panelInOut]\n    >\n      <kwikid-form-view\n        [formConfig]=\"this.activeFormConfig\"\n        [allFormsData]=\"this.allFormsData\"\n        [isMobileView]=\"this.isMobileView\"\n        (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\n        (onClickSaveForm)=\"this.handleOnClickSaveForm($event)\"\n      ></kwikid-form-view>\n    </div>\n  </div>\n</div>\n<div\n  ngClass=\"kwikid-forms-renderer-loader\"\n  *ngIf=\"loader\"\n>\n  <span class=\"loader\"></span>\n</div>\n<tui-push\n  id=\"error-notification\"\n  *tuiPush=\"showErrorNotification\"\n  heading=\"Please complete the required Forms!\"\n  type=\"Error\"\n  (close)=\"toggleErrorNotification(false)\"\n>\n  <tui-svg\n    src=\"tuiIconCancel\"\n    style=\"color: #fff !important\"\n  >\n  </tui-svg>\n</tui-push>\n", styles: [":host{position:relative}.kwikid-root{width:100%;height:100%}.kwikid-renderer{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%}.kwikid-layout-container{display:flex;flex-direction:row;padding:0 1rem;height:100%;justify-content:center;align-items:stretch;background:var(--tui-secondary-active);position:relative}.kwikid-sections-container{display:block;width:100%;max-width:400px;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);margin:auto 1rem auto 0;box-shadow:0 0 12px -8px var(--tui-secondary)}.kwikid-sections-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}.kwikid-forms-container{display:block;width:100%;max-width:50%;margin:auto 0;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);box-shadow:0 0 12px -8px var(--tui-primary)}.kwikid-forms-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}@media screen and (max-width: 600px){.kwikid-layout-container{padding:0;background:transparent}.kwikid-sections-container{position:absolute;max-width:100%;bottom:-10000px;left:-10000px;opacity:0;padding:0;visibility:hidden}.kwikid-sections-container.active{visibility:visible}.kwikid-sections-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container{display:none;max-width:100%;height:100%;padding:0;border-radius:0;box-shadow:none}.kwikid-forms-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container.active{display:block}}.kwikid-forms-renderer-loader{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;z-index:100}.kwikid-forms-renderer-loader .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:#fff #fff transparent;box-sizing:border-box;animation:rotation 1s linear infinite}.kwikid-forms-renderer-loader .loader:after{content:\"\";box-sizing:border-box;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:3px solid;border-color:transparent var(--tui-primary) var(--tui-primary);width:24px;height:24px;border-radius:50%;animation:rotationBack .5s linear infinite;transform-origin:center center}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.kwikid-forms-renderer-loader .t-loader{display:none!important}#error-notification{background-color:var(--tui-error-fill);color:#fff!important}#error-notification .t-top{color:#fff!important}#error-notification .t-close{color:#fff!important}\n"], components: [{ type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["showFormFields", "userConfig", "activeFormConfig", "formsList", "formsListCompleted", "isMobileView"], outputs: ["onClickSetActiveForm", "onClickHideFormsList", "onClickSubmitForms"] }, { type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["formConfig", "formData", "isMobileView", "allFormsData"], outputs: ["onClickViewForms", "onClickSaveForm", "onClickApiCall"] }, { type: i4$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4$1.TuiPushDirective, selector: "tui-push" }], animations: [
         trigger("panelInOut", [
             transition(":enter", [
                 style({ transform: "translateY(100%)" }),
@@ -4220,6 +4249,9 @@ __decorate([
 __decorate([
     logMethod
 ], KwikIDFormsRendererComponent.prototype, "formShow", null);
+__decorate([
+    logMethod
+], KwikIDFormsRendererComponent.prototype, "findFormsListLength", null);
 __decorate([
     logMethod
 ], KwikIDFormsRendererComponent.prototype, "handleOnClickSetActiveForm", null);
@@ -4261,7 +4293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Output
             }], onClickApiCall: [{
                 type: Output
-            }], convertFormListConfig: [], assignSequenceNoToForm: [], findCompletedFormsList: [], markFormInFormsListAsCompleted: [], markFormInFormsListAsDisabled: [], filterAllFormsData: [], checkIfFormsStatusCompleted: [], findActiveFormConfig: [], updateFormsList: [], formHide: [], formShow: [], handleOnClickSetActiveForm: [], handleOnClickSubmitForms: [] } });
+            }], convertFormListConfig: [], assignSequenceNoToForm: [], findCompletedFormsList: [], markFormInFormsListAsCompleted: [], markFormInFormsListAsDisabled: [], filterAllFormsData: [], checkIfFormsStatusCompleted: [], findActiveFormConfig: [], updateFormsList: [], formHide: [], formShow: [], findFormsListLength: [], handleOnClickSetActiveForm: [], handleOnClickSubmitForms: [] } });
 
 class KwikIDFormBuilderModule {
 }