kwikid-forms 0.0.3 → 0.0.4

package/bundles/kwikid-forms.umd.js

@@ -541,41 +541,95 @@
     var EPatternKey;
     (function (EPatternKey) {
         EPatternKey["CUSTOM"] = "CUSTOM";
-        EPatternKey["IS_PAN_NUMBER"] = "IS_PAN_NUMBER";
-        EPatternKey["IS_AADHAAR_NUMBER"] = "IS_AADHAAR_NUMBER";
-        EPatternKey["IS_EMPTY"] = "IS_EMPTY";
-        EPatternKey["IS_NOT_EMPTY"] = "IS_NOT_EMPTY";
-        EPatternKey["IS_EMAIL"] = "IS_EMAIL";
-        EPatternKey["IS_NUMBER"] = "IS_NUMBER";
-        EPatternKey["IS_INTEGER"] = "IS_INTEGER";
-        EPatternKey["IS_URL"] = "IS_URL";
+        EPatternKey["IS_ADDRESS"] = "IS_ADDRESS";
         EPatternKey["IS_ALPHA"] = "IS_ALPHA";
         EPatternKey["IS_ALPHANUMERIC"] = "IS_ALPHANUMERIC";
-        EPatternKey["IS_UPPERCASE"] = "IS_UPPERCASE";
-        EPatternKey["IS_LOWERCASE"] = "IS_LOWERCASE";
+        EPatternKey["IS_BOOLEAN"] = "IS_BOOLEAN";
+        EPatternKey["IS_EMAIL"] = "IS_EMAIL";
+        EPatternKey["IS_EMPTY"] = "IS_EMPTY";
+        EPatternKey["IS_FALSE"] = "IS_FALSE";
+        EPatternKey["IS_HTML"] = "IS_HTML";
+        EPatternKey["IS_INTEGER"] = "IS_INTEGER";
         EPatternKey["IS_IP_ADDRESS"] = "IS_IP_ADDRESS";
         EPatternKey["IS_JSON"] = "IS_JSON";
-        EPatternKey["IS_HTML"] = "IS_HTML";
+        EPatternKey["IS_LOWERCASE"] = "IS_LOWERCASE";
+        EPatternKey["IS_NOT_EMPTY"] = "IS_NOT_EMPTY";
+        EPatternKey["IS_NUMBER"] = "IS_NUMBER";
         EPatternKey["IS_TRUE"] = "IS_TRUE";
+        EPatternKey["IS_UPPERCASE"] = "IS_UPPERCASE";
+        EPatternKey["IS_URL"] = "IS_URL";
+        EPatternKey["IS_AADHAAR_NUMBER"] = "IS_AADHAAR_NUMBER";
+        EPatternKey["IS_BANK_ACCOUNT_NO"] = "IS_BANK_ACCOUNT_NO";
+        EPatternKey["IS_BANK_SWIFT_CODE"] = "IS_BANK_SWIFT_CODE";
+        EPatternKey["IS_BIRTH_CERTIFICATE_NO"] = "IS_BIRTH_CERTIFICATE_NO";
+        EPatternKey["IS_CHEQUE_NO"] = "IS_CHEQUE_NO";
+        EPatternKey["IS_CIN"] = "IS_CIN";
+        EPatternKey["IS_CREDIT_CARD_NO"] = "IS_CREDIT_CARD_NO";
+        EPatternKey["IS_DRIVING_LICENSE"] = "IS_DRIVING_LICENSE";
+        EPatternKey["IS_GSTIN"] = "IS_GSTIN";
+        EPatternKey["IS_IFSC_NO"] = "IS_IFSC_NO";
+        EPatternKey["IS_MICR_CODE"] = "IS_MICR_CODE";
+        EPatternKey["IS_MOBILE_NO"] = "IS_MOBILE_NO";
+        EPatternKey["IS_MOBILE_NO_IN"] = "IS_MOBILE_NO_IN";
+        EPatternKey["IS_NEFT_OR_RTGS_NO"] = "IS_NEFT_OR_RTGS_NO";
+        EPatternKey["IS_PAN_NUMBER"] = "IS_PAN_NUMBER";
+        EPatternKey["IS_PASSPORT"] = "IS_PASSPORT";
+        EPatternKey["IS_PHONE_NO"] = "IS_PHONE_NO";
+        EPatternKey["IS_PINCODE"] = "IS_PINCODE";
+        EPatternKey["IS_PURCHASE_ORDER_NO"] = "IS_PURCHASE_ORDER_NO";
+        EPatternKey["IS_RATION_CARD_NO"] = "IS_RATION_CARD_NO";
+        EPatternKey["IS_SERVICE_TAX_NO"] = "IS_SERVICE_TAX_NO";
+        EPatternKey["IS_SOCIAL_SECURITY_NO"] = "IS_SOCIAL_SECURITY_NO";
+        EPatternKey["IS_UPI_TRANSACTION_REFERENCE_NO"] = "IS_UPI_TRANSACTION_REFERENCE_NO";
+        EPatternKey["IS_VAT_TIN_NO"] = "IS_VAT_TIN_NO";
+        EPatternKey["IS_VEHICLE_REGISTRATION_NO"] = "IS_VEHICLE_REGISTRATION_NO";
+        EPatternKey["IS_VOTER_ID"] = "IS_VOTER_ID";
     })(EPatternKey || (EPatternKey = {}));
     var EPattern;
     (function (EPattern) {
-        EPattern["IS_EMPTY"] = "^$";
-        EPattern["IS_PAN_NUMBER"] = "^[A-Z]{5}[[0-9]{4}[A-Z]{1}$";
-        EPattern["IS_AADHAAR_NUMBER"] = "^[0-9]{12}$";
-        EPattern["IS_NOT_EMPTY"] = "^.+$";
-        EPattern["IS_EMAIL"] = "^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$";
-        EPattern["IS_NUMBER"] = "^[+-]?d+(.d+)?$";
-        EPattern["IS_INTEGER"] = "^[+-]?d+$";
-        EPattern["IS_URL"] = "^(?:http(s)?://)?[w.-]+(?:.[w.-]+)+[w-._~:/?#[]@!$&'()*+,;=.]+$";
         EPattern["IS_ALPHA"] = "^[a-zA-Z]+$";
+        EPattern["IS_ADDRESS"] = "^(\\w*\\s*[#-,/.()&]*)+";
         EPattern["IS_ALPHANUMERIC"] = "^[a-zA-Z0-9]+$";
-        EPattern["IS_UPPERCASE"] = "^[A-Z]+$";
-        EPattern["IS_LOWERCASE"] = "^[a-z]+$";
+        EPattern["IS_BOOLEAN"] = "(true|false)";
+        EPattern["IS_EMAIL"] = "^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$";
+        EPattern["IS_EMPTY"] = "^$";
+        EPattern["IS_FALSE"] = "false";
+        EPattern["IS_HTML"] = "^<([a-z]+)([^<]+)(?:>(.)</\\1>|\\s+/>)$";
+        EPattern["IS_INTEGER"] = "^[+-]?d+$";
         EPattern["IS_IP_ADDRESS"] = "^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$";
         EPattern["IS_JSON"] = "^\\s*({(.|\\s)}|[(.|\\s)])\\s*$";
-        EPattern["IS_HTML"] = "^<([a-z]+)([^<]+)(?:>(.)</\\1>|\\s+/>)$";
+        EPattern["IS_LOWERCASE"] = "^[a-z]+$";
+        EPattern["IS_NOT_EMPTY"] = "^.+$";
+        EPattern["IS_NUMBER"] = "^[+-]?d+(.d+)?$";
         EPattern["IS_TRUE"] = "true";
+        EPattern["IS_UPPERCASE"] = "^[A-Z]+$";
+        EPattern["IS_URL"] = "^(?:http(s)?://)?[w.-]+(?:.[w.-]+)+[w-._~:/?#[]@!$&'()*+,;=.]+$";
+        EPattern["IS_AADHAAR_NUMBER"] = "^[0-9]{12}$";
+        EPattern["IS_BANK_ACCOUNT_NO"] = "^[0-9]{9,18}$";
+        EPattern["IS_BANK_SWIFT_CODE"] = "^[A-Z]{4}[A-Z]{2}[0-9A-Z]{2}[0-9A-Z]{3}$";
+        EPattern["IS_BIRTH_CERTIFICATE_NO"] = "^[A-Z]{2}[0-9]{6}[A-Z]{1}[0-9]{2}$";
+        EPattern["IS_CHEQUE_NO"] = "^[0-9]{6,14}$";
+        EPattern["IS_CIN"] = "^[A-Z]{3}[0-9]{5}[0-9A-Z]{3}$";
+        EPattern["IS_CREDIT_CARD_NO"] = "^[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}$";
+        EPattern["IS_DRIVING_LICENSE"] = "^[A-Z]{2}[0-9]{2}((19|20)[0-9][0-9])[0-9]{7}$";
+        EPattern["IS_GSTIN"] = "^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$";
+        EPattern["IS_IFSC_NO"] = "^[A-Z]{4}[0][A-Z0-9]{6}$";
+        EPattern["IS_MICR_CODE"] = "^[0-9]{9}$";
+        EPattern["IS_MOBILE_NO"] = "^[6-9]\\d{9}$";
+        EPattern["IS_MOBILE_NO_IN"] = "^(\\+91)[6-9]\\d{9}$";
+        EPattern["IS_NEFT_OR_RTGS_NO"] = "^[A-Z]{4}[0-9]{7}$";
+        EPattern["IS_PAN_NUMBER"] = "^[A-Z]{5}[[0-9]{4}[A-Z]{1}$";
+        EPattern["IS_PASSPORT"] = "^[A-PR-WYa-pr-wy][1-9]\\d\\s?\\d{4}[1-9]$";
+        EPattern["IS_PHONE_NO"] = "^[6-9]\\d{9}$";
+        EPattern["IS_PINCODE"] = "^[1-9][0-9]{5}$";
+        EPattern["IS_PURCHASE_ORDER_NO"] = "^[0-9]{1,5}$";
+        EPattern["IS_RATION_CARD_NO"] = "^[A-Z]{3}[0-9]{7}$";
+        EPattern["IS_SERVICE_TAX_NO"] = "^[A-Z]{5}[0-9]{4}[A-Z]{1}$";
+        EPattern["IS_SOCIAL_SECURITY_NO"] = "^[0-9]{3}-[0-9]{2}-[0-9]{4}$";
+        EPattern["IS_UPI_TRANSACTION_REFERENCE_NO"] = "^[a-zA-Z0-9]{3,128}@[a-z]{3,9}$";
+        EPattern["IS_VAT_TIN_NO"] = "^[0-9]{11}$";
+        EPattern["IS_VEHICLE_REGISTRATION_NO"] = "^[A-Z]{2}[0-9]{2}((19|20)[0-9][0-9])[0-9]{6}$";
+        EPattern["IS_VOTER_ID"] = "^[A-Z]{3}[0-9]{7}$";
     })(EPattern || (EPattern = {}));
     var EMessageType;
     (function (EMessageType) {
@@ -585,6 +639,21 @@
         EMessageType["WARNING"] = "warning";
     })(EMessageType || (EMessageType = {}));
 
+    var EFieldType;
+    (function (EFieldType) {
+        EFieldType["TITLE"] = "title";
+        EFieldType["TEXT"] = "text";
+        EFieldType["CHECKBOX"] = "checkbox";
+        EFieldType["NUMBER"] = "number";
+        EFieldType["DATE"] = "date";
+        EFieldType["PHONE"] = "phone";
+        EFieldType["RADIO"] = "radio";
+        EFieldType["DROPDOWN_WITH_SEARCH"] = "dropdown-with-search";
+        EFieldType["API_CALL"] = "api-call";
+        EFieldType["OTP"] = "otp";
+        EFieldType["AADHAAR_NUMBER"] = "aadhaar-number";
+    })(EFieldType || (EFieldType = {}));
+
     /**
      * A function that logs the execution of a method.
      * @param {any} target - The object the method belongs to.
@@ -731,21 +800,6 @@
         return formsList.length === 1;
     };
 
-    var EFieldType;
-    (function (EFieldType) {
-        EFieldType["TITLE"] = "title";
-        EFieldType["TEXT"] = "text";
-        EFieldType["CHECKBOX"] = "checkbox";
-        EFieldType["NUMBER"] = "number";
-        EFieldType["DATE"] = "date";
-        EFieldType["PHONE"] = "phone";
-        EFieldType["RADIO"] = "radio";
-        EFieldType["DROPDOWN_WITH_SEARCH"] = "dropdown-with-search";
-        EFieldType["API_CALL"] = "api-call";
-        EFieldType["OTP"] = "otp";
-        EFieldType["AADHAAR_NUMBER"] = "aadhaar-number";
-    })(EFieldType || (EFieldType = {}));
-
     var hasKey$1 = function (object, key) {
         return object.hasOwnProperty(key);
     };
@@ -1349,6 +1403,218 @@
         log
     ], Defaults.prototype, "getDefaultValue", null);
 
+    var findFieldFromKey = function (fields, key) {
+        var field = fields.find(function (field) {
+            if (field.key === key) {
+                return field;
+            }
+        });
+        return field;
+    };
+    var findFieldIndexFromKey = function (fields, key) {
+        var fieldIndex;
+        fieldIndex = fields.findIndex(function (_) {
+            return key === _.key;
+        });
+        return fieldIndex;
+    };
+    var getSearchTextOptionsFromRemoteFile = function (field, childField, formGroup) { return __awaiter(void 0, void 0, void 0, function () {
+        var parentFieldValue, fileUrl, fileKey, response, data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    parentFieldValue = formGroup.controls[field.key].value;
+                    if (childField.regexToGetJsonRemoteUrlKey) {
+                        fileKey = parentFieldValue.match(childField.regexToGetJsonRemoteUrlKey)[0];
+                        fileUrl = childField.jsonRemoteUrlMapping[fileKey];
+                    }
+                    else {
+                        fileUrl = childField.fileUrl;
+                    }
+                    // Return early if there is no file URL
+                    if (!fileUrl)
+                        return [2 /*return*/];
+                    return [4 /*yield*/, fetch(fileUrl)];
+                case 1:
+                    response = _a.sent();
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    data = _a.sent();
+                    // Return the data for the given parent field value
+                    return [2 /*return*/, data[parentFieldValue]];
+            }
+        });
+    }); };
+    var getSearchTextOptionsFromFieldConfig = function (field, childField, formGroup) {
+        var options;
+        var fieldValue = formGroup.controls[field.key].value;
+        if (isNotEmpty(childField["json"])) {
+            options = childField["json"][fieldValue];
+        }
+        return options;
+    };
+    var formatSearchTextOptions = function (options) {
+        return options.map(function (_a) {
+            var title = _a.title;
+            return title;
+        });
+    };
+    var formatDateToStandardFormat = function (date) {
+        var formattedDate;
+        var year = date.year;
+        var month = date.month;
+        var day = date.day;
+        formattedDate = day + "-" + (month + 1) + "-" + year;
+        return formattedDate;
+    };
+    function highlightFieldError(field, error) {
+        field.invalid = error;
+        field.focus = error;
+        // if (!error) {
+        //   field["messages"] = field["messages"].filter(function (fieldMessage: {
+        //     type: string;
+        //     message: string;
+        //   }) {
+        //     return fieldMessage.type === "error";
+        //   });
+        // }
+        return field;
+    }
+    var addMessage = function (field, message) {
+        var isDuplicateMessage = function (messages, message) {
+            return messages.some(function (fieldMessage) {
+                return (fieldMessage.type === message.type &&
+                    fieldMessage.message === message.message);
+            });
+        };
+        field["messages"] = [];
+        if (hasKey$1(field, "messages")) {
+            if (!isDuplicateMessage(field["messages"], message)) {
+                field["messages"].push({
+                    type: message.type,
+                    message: message.message
+                });
+            }
+        }
+        else {
+            field["messages"] = [{ type: message.type, message: message.message }];
+        }
+        return field;
+    };
+    var removeMessage = function (field, message) {
+        field["messages"] = field["messages"].filter(function (fieldMessage) {
+            return fieldMessage.type !== message.type;
+        });
+        return field;
+    };
+    function setFieldError(fields, errors, key, error) {
+        var fieldIndex = fields.findIndex(function (field) {
+            return field.key === key;
+        });
+        var setErrorMessages = function (field, errors) {
+            var getErrorMessage = function (fieldLabel, errorType) {
+                var errorMessage = "";
+                switch (errorType) {
+                    case "required":
+                        errorMessage = fieldLabel + " is required!";
+                        break;
+                    case "email":
+                        errorMessage = fieldLabel + " has wrong email format!";
+                        break;
+                    case "min":
+                        errorMessage = fieldLabel + " has wrong value! Minimum value: " + field.validators.min;
+                        break;
+                    case "minlength":
+                        errorMessage = fieldLabel + " has wrong length! Required minimum length: " + field.validators.minLength;
+                        break;
+                    case "max":
+                        errorMessage = fieldLabel + " has wrong value! Maximum value: " + field.validators.maxLength;
+                        break;
+                    case "maxlength":
+                        errorMessage = fieldLabel + " has wrong length! Required maximum length: " + field.validators.maxLength;
+                        break;
+                    case "areEqual":
+                        errorMessage = fieldLabel + " must be equal!";
+                        break;
+                    case "pattern":
+                        errorMessage = fieldLabel + " is in incorrect format!";
+                        break;
+                    default:
+                        errorMessage = fieldLabel + ": " + errorType;
+                        break;
+                }
+                return errorMessage;
+            };
+            Object.keys(errors).forEach(function (error) {
+                field = addMessage(field, {
+                    type: "error",
+                    message: getErrorMessage(field.label, error)
+                });
+            });
+            return field;
+        };
+        if (error) {
+            fields[fieldIndex] = setErrorMessages(fields[fieldIndex], errors);
+        }
+        else {
+            fields[fieldIndex]["messages"] = [];
+        }
+        fields[fieldIndex] = highlightFieldError(fields[fieldIndex], error);
+        return fields;
+    }
+    var convertValueFromKwikUIFormatToBasicFormat = function (type, value) {
+        var convertedValue = value;
+        switch (type) {
+            case EFieldType.DATE:
+                var convertDateStringToTuiDayFormat = function (date) {
+                    var splitDate = date.split("-");
+                    var tuiDay = new cdk.TuiDay(Number(splitDate[2]), // Year
+                    Number(splitDate[1]) - 1, // Month, Why '-1' => Because Taiga-UI Required It, So...
+                    Number(splitDate[0]) // Day
+                    );
+                    return tuiDay;
+                };
+                convertedValue = convertDateStringToTuiDayFormat(value);
+                break;
+            default:
+                break;
+        }
+        return convertedValue;
+    };
+    var convertValueFromBasicFormatToKwikUIFormat = function (field, value) {
+        var convertedValue = value;
+        switch (field.type) {
+            case EFieldType.RADIO:
+                if (hasKey$1(value, "label")) {
+                    convertedValue = value.label;
+                }
+                else {
+                    convertedValue = "";
+                }
+                break;
+            case EFieldType.DATE:
+                if (isNull(value)) {
+                    convertedValue = "";
+                }
+                else {
+                    convertedValue = formatDateToStandardFormat(value);
+                }
+                break;
+            case EFieldType.PHONE:
+                var fieldPhone = field;
+                convertedValue = value.replace(String(fieldPhone.properties.countryCode), "");
+                break;
+            case EFieldType.TITLE:
+                break;
+            default:
+                if (isEmpty(value)) {
+                    convertedValue = "";
+                }
+                break;
+        }
+        return convertedValue;
+    };
+
     var Validations = /** @class */ (function () {
         function Validations(field, formData, previousFormData, allFormsData, takeAction) {
             this._field = field;
@@ -1426,18 +1692,15 @@
             if (hasKey$1(field, "validators") &&
                 hasKey$1(field.validators, "pattern") &&
                 isNotEmpty(field.validators.pattern)) {
-                if (field.validators.pattern.key === EPatternKey.CUSTOM) {
-                    validators.push(i5.Validators.pattern(field.validators.pattern.pattern));
-                }
-                else {
-                    validators.push(i5.Validators.pattern(EPattern[field.validators.pattern.key]));
+                if (hasKey$1(field.validators.pattern, "key")) {
+                    if (field.validators.pattern.key === EPatternKey.CUSTOM) {
+                        validators.push(i5.Validators.pattern(field.validators.pattern.pattern));
+                    }
+                    else {
+                        validators.push(i5.Validators.pattern(EPattern[field.validators.pattern.key]));
+                    }
                 }
             }
-            if (hasKey$1(field, "validators") &&
-                hasKey$1(field.validators, "nullValidator") &&
-                isNotEmpty(field.validators.nullValidator)) {
-                validators.push(i5.Validators.nullValidator(field.validators.nullValidator));
-            }
             return validators;
         };
         Validations.prototype.getFormValidationErrors = function (control) {
@@ -1553,39 +1816,41 @@
         // 'init' stage of the form
         KwikIDFormViewService.prototype.createFormGroup = function (fields, formData, previousFormData, allFormsData, takeAction) {
             return __awaiter(this, void 0, void 0, function () {
-                var formGroup, fields_1, fields_1_1, field, defaults, value, validators, e_1_1;
-                var e_1, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var formGroup, fields_1, fields_1_1, field, defaults, value, _a, _b, validators, e_1_1;
+                var e_1, _c;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             formGroup = new i5.FormGroup({});
-                            _b.label = 1;
+                            _d.label = 1;
                         case 1:
-                            _b.trys.push([1, 6, 7, 8]);
+                            _d.trys.push([1, 6, 7, 8]);
                             fields_1 = __values(fields), fields_1_1 = fields_1.next();
-                            _b.label = 2;
+                            _d.label = 2;
                         case 2:
                             if (!!fields_1_1.done) return [3 /*break*/, 5];
                             field = fields_1_1.value;
                             if (!(field.type !== "title")) return [3 /*break*/, 4];
                             defaults = new Defaults(field, allFormsData, formData, previousFormData, takeAction);
+                            _a = convertValueFromBasicFormatToKwikUIFormat;
+                            _b = [field.type];
                             return [4 /*yield*/, defaults.getDefaultValue()];
                         case 3:
-                            value = _b.sent();
+                            value = _a.apply(void 0, _b.concat([_d.sent()]));
                             validators = new Validations(field, formData, previousFormData, allFormsData, takeAction).getFieldValidators(field);
                             formGroup.addControl(field.key, new i5.FormControl({ value: value, disabled: field.disabled }, { validators: validators }));
-                            _b.label = 4;
+                            _d.label = 4;
                         case 4:
                             fields_1_1 = fields_1.next();
                             return [3 /*break*/, 2];
                         case 5: return [3 /*break*/, 8];
                         case 6:
-                            e_1_1 = _b.sent();
+                            e_1_1 = _d.sent();
                             e_1 = { error: e_1_1 };
                             return [3 /*break*/, 8];
                         case 7:
                             try {
-                                if (fields_1_1 && !fields_1_1.done && (_a = fields_1.return)) _a.call(fields_1);
+                                if (fields_1_1 && !fields_1_1.done && (_c = fields_1.return)) _c.call(fields_1);
                             }
                             finally { if (e_1) throw e_1.error; }
                             return [7 /*endfinally*/];
@@ -1830,160 +2095,6 @@
         log
     ], Apis.prototype, "validateApiCallResponse", null);
 
-    var findFieldFromKey = function (fields, key) {
-        var field = fields.find(function (field) {
-            if (field.key === key) {
-                return field;
-            }
-        });
-        return field;
-    };
-    var findFieldIndexFromKey = function (fields, key) {
-        var fieldIndex;
-        fieldIndex = fields.findIndex(function (_) {
-            return key === _.key;
-        });
-        return fieldIndex;
-    };
-    var getSearchTextOptionsFromRemoteFile = function (field, childField, formGroup) { return __awaiter(void 0, void 0, void 0, function () {
-        var parentFieldValue, fileUrl, fileKey, response, data;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    parentFieldValue = formGroup.controls[field.key].value;
-                    if (childField.regexToGetJsonRemoteUrlKey) {
-                        fileKey = parentFieldValue.match(childField.regexToGetJsonRemoteUrlKey)[0];
-                        fileUrl = childField.jsonRemoteUrlMapping[fileKey];
-                    }
-                    else {
-                        fileUrl = childField.fileUrl;
-                    }
-                    // Return early if there is no file URL
-                    if (!fileUrl)
-                        return [2 /*return*/];
-                    return [4 /*yield*/, fetch(fileUrl)];
-                case 1:
-                    response = _a.sent();
-                    return [4 /*yield*/, response.json()];
-                case 2:
-                    data = _a.sent();
-                    // Return the data for the given parent field value
-                    return [2 /*return*/, data[parentFieldValue]];
-            }
-        });
-    }); };
-    var getSearchTextOptionsFromFieldConfig = function (field, childField, formGroup) {
-        var options;
-        var fieldValue = formGroup.controls[field.key].value;
-        if (isNotEmpty(childField["json"])) {
-            options = childField["json"][fieldValue];
-        }
-        return options;
-    };
-    var formatSearchTextOptions = function (options) {
-        return options.map(function (_a) {
-            var title = _a.title;
-            return title;
-        });
-    };
-    var formatDateToStandardFormat = function (date) {
-        var formattedDate;
-        var year = date.year;
-        var month = date.month;
-        var day = date.day;
-        formattedDate = day + "-" + (month + 1) + "-" + year;
-        return formattedDate;
-    };
-    function highlightFieldError(field, error) {
-        field.invalid = error;
-        field.focus = error;
-        // if (!error) {
-        //   field["messages"] = field["messages"].filter(function (fieldMessage: {
-        //     type: string;
-        //     message: string;
-        //   }) {
-        //     return fieldMessage.type === "error";
-        //   });
-        // }
-        return field;
-    }
-    var addMessage = function (field, message) {
-        var isDuplicateMessage = function (messages, message) {
-            return messages.some(function (fieldMessage) {
-                return (fieldMessage.type === message.type &&
-                    fieldMessage.message === message.message);
-            });
-        };
-        field["messages"] = [];
-        if (hasKey$1(field, "messages")) {
-            if (!isDuplicateMessage(field["messages"], message)) {
-                field["messages"].push({
-                    type: message.type,
-                    message: message.message
-                });
-            }
-        }
-        else {
-            field["messages"] = [{ type: message.type, message: message.message }];
-        }
-        return field;
-    };
-    var removeMessage = function (field, message) {
-        field["messages"] = field["messages"].filter(function (fieldMessage) {
-            return fieldMessage.type !== message.type;
-        });
-        return field;
-    };
-    function setFieldError(fields, errors, key, error) {
-        var fieldIndex = fields.findIndex(function (field) {
-            return field.key === key;
-        });
-        var setErrorMessages = function (field, errors) {
-            var getErrorMessage = function (fieldLabel, errorType) {
-                var errorMessage = "";
-                switch (errorType) {
-                    case "required":
-                        errorMessage = fieldLabel + " is required!";
-                        break;
-                    case "pattern":
-                        errorMessage = fieldLabel + " has wrong pattern!";
-                        break;
-                    case "email":
-                        errorMessage = fieldLabel + " has wrong email format!";
-                        break;
-                    case "minlength":
-                        errorMessage = fieldLabel + " has wrong length! Required minimum length: " + field.validators.minLength;
-                        break;
-                    case "maxlength":
-                        errorMessage = fieldLabel + " has wrong length! Required maximum length: " + field.validators.maxLength;
-                        break;
-                    case "areEqual":
-                        errorMessage = fieldLabel + " must be equal!";
-                        break;
-                    default:
-                        errorMessage = fieldLabel + ": " + "error.error_name" + ": " + "error.error_value";
-                        break;
-                }
-                return errorMessage;
-            };
-            Object.keys(errors).forEach(function (error) {
-                field = addMessage(field, {
-                    type: "error",
-                    message: getErrorMessage(field.label, error)
-                });
-            });
-            return field;
-        };
-        if (error) {
-            fields[fieldIndex] = setErrorMessages(fields[fieldIndex], errors);
-        }
-        else {
-            fields[fieldIndex]["messages"] = [];
-        }
-        fields[fieldIndex] = highlightFieldError(fields[fieldIndex], error);
-        return fields;
-    }
-
     var KwikIDFormViewComponent = /** @class */ (function () {
         function KwikIDFormViewComponent(formViewService) {
             this.formViewService = formViewService;
@@ -2468,10 +2579,30 @@
             var e_8, _a, e_9, _b, e_10, _c;
             var _this = this;
             var formData = this.formGroup.getRawValue();
+            try {
+                for (var _d = __values(this.formFields), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var field = _e.value;
+                    if (field.type !== EFieldType.TITLE) {
+                        if (field.hidden) {
+                            delete formData[field.key];
+                        }
+                        else {
+                            formData[field.key] = convertValueFromKwikUIFormatToBasicFormat(field, formData[field.key]);
+                        }
+                    }
+                }
+            }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+                }
+                finally { if (e_8) throw e_8.error; }
+            }
             var _loop_3 = function (field) {
-                if (field.type !== "title" &&
+                if (field.type !== EFieldType.TITLE &&
                     field.validation.triggers.includes("ON_SAVE")) {
-                    var validations_2 = new Validations(field, this_2.formData, this_2.previousFormData, this_2.allFormsData, this_2.takeAction.bind(this_2));
+                    var validations_2 = new Validations(field, formData, this_2.previousFormData, this_2.allFormsData, this_2.takeAction.bind(this_2));
                     (function () { return __awaiter(_this, void 0, void 0, function () {
                         return __generator(this, function (_a) {
                             switch (_a.label) {
@@ -2486,20 +2617,20 @@
             };
             var this_2 = this;
             try {
-                for (var _d = __values(this.formFields), _e = _d.next(); !_e.done; _e = _d.next()) {
-                    var field = _e.value;
+                for (var _f = __values(this.formFields), _g = _f.next(); !_g.done; _g = _f.next()) {
+                    var field = _g.value;
                     _loop_3(field);
                 }
             }
-            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            catch (e_9_1) { e_9 = { error: e_9_1 }; }
             finally {
                 try {
-                    if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+                    if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
                 }
-                finally { if (e_8) throw e_8.error; }
+                finally { if (e_9) throw e_9.error; }
             }
             if (this.formGroup.invalid) {
-                var controls = new Validations(undefined, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this)).findInvalidControlsRecursive(this.formGroup);
+                var controls = new Validations(undefined, formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this)).findInvalidControlsRecursive(this.formGroup);
                 var firstFieldWithError = "";
                 try {
                     for (var controls_1 = __values(controls), controls_1_1 = controls_1.next(); !controls_1_1.done; controls_1_1 = controls_1.next()) {
@@ -2510,54 +2641,15 @@
                         this.formFields = setFieldError(this.formFields, this.formGroup.controls[control.key].errors, control.key, control.invalid);
                     }
                 }
-                catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                catch (e_10_1) { e_10 = { error: e_10_1 }; }
                 finally {
                     try {
-                        if (controls_1_1 && !controls_1_1.done && (_b = controls_1.return)) _b.call(controls_1);
+                        if (controls_1_1 && !controls_1_1.done && (_c = controls_1.return)) _c.call(controls_1);
                     }
-                    finally { if (e_9) throw e_9.error; }
+                    finally { if (e_10) throw e_10.error; }
                 }
                 return;
             }
-            try {
-                // Need to have an API Validator as well here.
-                // if(apiCallSuccess()) { then only proceed further, else highlight the button to click to call api}
-                for (var _f = __values(this.formFields), _g = _f.next(); !_g.done; _g = _f.next()) {
-                    var field = _g.value;
-                    switch (field.type) {
-                        case "radio":
-                            if (hasKey$1(formData[field.key], "label")) {
-                                formData[field.key] = formData[field.key].label;
-                            }
-                            else {
-                                formData[field.key] = "";
-                            }
-                            break;
-                        case "date":
-                            if (isNull(formData[field.key])) {
-                                formData[field.key] = "";
-                            }
-                            else {
-                                formData[field.key] = formatDateToStandardFormat(formData[field.key]);
-                            }
-                            break;
-                        case "title":
-                            break;
-                        default:
-                            if (isEmpty(formData[field.key])) {
-                                formData[field.key] = "";
-                            }
-                            break;
-                    }
-                }
-            }
-            catch (e_10_1) { e_10 = { error: e_10_1 }; }
-            finally {
-                try {
-                    if (_g && !_g.done && (_c = _f.return)) _c.call(_f);
-                }
-                finally { if (e_10) throw e_10.error; }
-            }
             Object.keys(formData).map(function (key) {
                 if (isEmpty(formData[key])) {
                     formData[key] = "";
@@ -2912,6 +3004,7 @@
 
     var KwikIDFormsListComponent = /** @class */ (function () {
         function KwikIDFormsListComponent() {
+            this.showFormFields = {};
             this.userConfig = {};
             this.formsList = [];
             this.formsListCompleted = [];
@@ -2920,21 +3013,50 @@
             this.onClickHideFormsList = new i0.EventEmitter();
             this.onClickSubmitForms = new i0.EventEmitter();
             this.selectedForm = "";
+            this.isAllFormsCompleted = true;
         }
-        KwikIDFormsListComponent.prototype.ngOnInit = function () { };
+        KwikIDFormsListComponent.prototype.ngOnInit = function () {
+            this.isAllFormsCompleted = this.checkIsAllFormsCompleted(this.formsList);
+        };
         KwikIDFormsListComponent.prototype.ngOnChanges = function (changes) {
             var verifyChange = function (key) {
                 return hasKey(changes, key) && !changes[key].firstChange;
             };
+            if (verifyChange("showFormFields")) {
+                this.showFormFields = changes.showFormFields.currentValue;
+            }
             if (verifyChange("formsList")) {
                 this.formsList = changes.formsList.currentValue;
+                this.isAllFormsCompleted = this.checkIsAllFormsCompleted(this.formsList);
             }
             if (verifyChange("isMobileView")) {
                 this.isMobileView = changes.isMobileView.currentValue;
             }
         };
+        KwikIDFormsListComponent.prototype.checkIsAllFormsCompleted = function (formsList) {
+            var e_1, _a;
+            var isAllFormsCompleted = true;
+            try {
+                for (var formsList_1 = __values(formsList), formsList_1_1 = formsList_1.next(); !formsList_1_1.done; formsList_1_1 = formsList_1.next()) {
+                    var forms = formsList_1_1.value;
+                    if (forms.status !== "completed") {
+                        isAllFormsCompleted = false;
+                        break;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (formsList_1_1 && !formsList_1_1.done && (_a = formsList_1.return)) _a.call(formsList_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return isAllFormsCompleted;
+        };
         KwikIDFormsListComponent.prototype.handleOnClickSetActiveForm = function (selectedForm) {
-            if (this.selectedForm !== selectedForm) {
+            if (this.selectedForm !== selectedForm ||
+                (this.isAllFormsCompleted && !this.showFormFields)) {
                 this.selectedForm = selectedForm;
                 this.onClickSetActiveForm.emit(selectedForm);
             }
@@ -2945,7 +3067,7 @@
         return KwikIDFormsListComponent;
     }());
     /** @nocollapse */ KwikIDFormsListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: { userConfig: "userConfig", formsList: "formsList", formsListCompleted: "formsListCompleted", isMobileView: "isMobileView" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", onClickHideFormsList: "onClickHideFormsList", onClickSubmitForms: "onClickSubmitForms" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div id=\"sidebar-container\">\r\n  <div id=\"sidebar\">\r\n    <div ngClass=\"kwikid-form-header\">\r\n      <div id=\"uf-header\">\r\n        <div id=\"uf-header-logo-container\">\r\n          <img\r\n            id=\"uf-header-logo\"\r\n            src=\"{{ this.userConfig.theme.clientLogo }}\"\r\n            [ngClass]=\"'large-icon'\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <hr />\r\n    </div>\r\n    <div id=\"uf-progress\">\r\n      <div id=\"uf-progress-steps\">\r\n        {{ this.formsListCompleted.length }} / {{ this.formsList.length }} Steps\r\n        Completed\r\n      </div>\r\n      <kwikui-progress-segmented\r\n        [max]=\"this.formsList.length\"\r\n        size=\"m\"\r\n        [value]=\"this.formsListCompleted.length\"\r\n      ></kwikui-progress-segmented>\r\n    </div>\r\n    <div id=\"uf-sections-container\">\r\n      <div\r\n        *ngFor=\"let form of formsList; let i = index\"\r\n        [class]=\"'uf-section-item'\"\r\n        [class.completed]=\"form.status === 'completed' && !form.disabled\"\r\n        [class.edit]=\"form.status !== 'completed' && !form.disabled\"\r\n        [class.locked]=\"form.status !== 'completed' && form.disabled\"\r\n        (click)=\"\r\n          form.status !== 'completed' && form.disabled\r\n            ? undefined\r\n            : handleOnClickSetActiveForm(form.key)\r\n        \"\r\n      >\r\n        <div class=\"uf-form-section-card-title\">\r\n          {{ form.title }}\r\n        </div>\r\n        <div class=\"uf-form-section-card-action\">\r\n          <div\r\n            *ngIf=\"form.status === 'completed' && !form.disabled\"\r\n            class=\"uf-form-section-card-action-img completed\"\r\n          >\r\n            <tui-svg src=\"tuiIconCheckLarge\"></tui-svg>\r\n          </div>\r\n          <div\r\n            *ngIf=\"form.status !== 'completed' && !form.disabled\"\r\n            class=\"uf-form-section-card-action-img edit\"\r\n          >\r\n            <tui-svg src=\"tuiIconEdit\"></tui-svg>\r\n          </div>\r\n          <div\r\n            *ngIf=\"form.status !== 'completed' && form.disabled\"\r\n            class=\"uf-form-section-card-action-img locked\"\r\n          >\r\n            <tui-svg src=\"tuiIconLock\"></tui-svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div id=\"submit-sidebar-btn-container\">\r\n      <kwikui-button\r\n        [disabled]=\"false\"\r\n        id=\"\"\r\n        label=\"Submit\"\r\n        [showLoader]=\"false\"\r\n        styles=\"\"\r\n        class=\"\"\r\n        type=\"button\"\r\n        appearance=\"primary\"\r\n        icon=\"\"\r\n        iconRight=\"\"\r\n        shape=\"null\"\r\n        size=\"m\"\r\n        styles=\"width: 100%\"\r\n        (onClick)=\"handleOnSubmitForms($event)\"\r\n      ></kwikui-button>\r\n    </div>\r\n  </div>\r\n</div>\r\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 .1rem .5rem -.25rem gray;border-radius:.5rem;background-color:var(--tui-base-02)}.uf-section-item:hover{box-shadow:0 .2rem .75rem -.5rem #656565}#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-action{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-action .uf-form-section-card-action-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-action-img.completed{background-color:#228b22;padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-action-img.edit{background-color:#dc143c;padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-action-img.locked{background-color:gray;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:#121212}@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__namespace.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["value", "max", "size", "colors"] }, { type: i3__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    /** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: { showFormFields: "showFormFields", userConfig: "userConfig", formsList: "formsList", formsListCompleted: "formsListCompleted", isMobileView: "isMobileView" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", onClickHideFormsList: "onClickHideFormsList", onClickSubmitForms: "onClickSubmitForms" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div id=\"sidebar-container\">\r\n  <div id=\"sidebar\">\r\n    <div ngClass=\"kwikid-form-header\">\r\n      <div id=\"uf-header\">\r\n        <div id=\"uf-header-logo-container\">\r\n          <img\r\n            id=\"uf-header-logo\"\r\n            src=\"{{ this.userConfig.theme.clientLogo }}\"\r\n            [ngClass]=\"'large-icon'\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <hr />\r\n    </div>\r\n    <div id=\"uf-progress\">\r\n      <div id=\"uf-progress-steps\">\r\n        {{ this.formsListCompleted.length }} / {{ this.formsList.length }} Steps\r\n        Completed\r\n      </div>\r\n      <kwikui-progress-segmented\r\n        [max]=\"this.formsList.length\"\r\n        size=\"m\"\r\n        [value]=\"this.formsListCompleted.length\"\r\n      ></kwikui-progress-segmented>\r\n    </div>\r\n    <div id=\"uf-sections-container\">\r\n      <div\r\n        *ngFor=\"let form of formsList; let i = index\"\r\n        [class]=\"'uf-section-item'\"\r\n        [class.completed]=\"form.status === 'completed' && !form.disabled\"\r\n        [class.edit]=\"form.status === 'editable' && !form.disabled\"\r\n        [class.locked]=\"form.status === 'locked' && form.disabled\"\r\n        (click)=\"\r\n          form.status === 'locked' && form.disabled\r\n            ? undefined\r\n            : handleOnClickSetActiveForm(form.key)\r\n        \"\r\n      >\r\n        <div class=\"uf-form-section-card-title\">\r\n          {{ form.title }}\r\n        </div>\r\n        <div class=\"uf-form-section-card-action\">\r\n          <div\r\n            *ngIf=\"form.status === 'completed' && !form.disabled\"\r\n            class=\"uf-form-section-card-action-img completed\"\r\n          >\r\n            <tui-svg src=\"tuiIconCheckLarge\"></tui-svg>\r\n          </div>\r\n          <div\r\n            *ngIf=\"form.status !== 'completed' && !form.disabled\"\r\n            class=\"uf-form-section-card-action-img edit\"\r\n          >\r\n            <tui-svg src=\"tuiIconEdit\"></tui-svg>\r\n          </div>\r\n          <div\r\n            *ngIf=\"form.status !== 'completed' && form.disabled\"\r\n            class=\"uf-form-section-card-action-img locked\"\r\n          >\r\n            <tui-svg src=\"tuiIconLock\"></tui-svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div id=\"submit-sidebar-btn-container\">\r\n      <kwikui-button\r\n        [disabled]=\"false\"\r\n        id=\"\"\r\n        label=\"Submit\"\r\n        [showLoader]=\"false\"\r\n        styles=\"\"\r\n        class=\"\"\r\n        type=\"button\"\r\n        appearance=\"primary\"\r\n        icon=\"\"\r\n        iconRight=\"\"\r\n        shape=\"null\"\r\n        size=\"m\"\r\n        styles=\"width: 100%\"\r\n        (onClick)=\"handleOnSubmitForms($event)\"\r\n      ></kwikui-button>\r\n    </div>\r\n  </div>\r\n</div>\r\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 .1rem .5rem -.25rem gray;border-radius:.5rem;background-color:var(--tui-base-02)}.uf-section-item:hover{box-shadow:0 .2rem .75rem -.5rem #656565}#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-action{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-action .uf-form-section-card-action-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-action-img.completed{background-color:#228b22;padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-action-img.edit{background-color:#dc143c;padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-action-img.locked{background-color:gray;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:#121212}@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__namespace.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["value", "max", "size", "colors"] }, { type: i3__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2953,7 +3075,9 @@
                         templateUrl: "./forms-list.component.html",
                         styleUrls: ["./forms-list.component.scss"]
                     }]
-            }], ctorParameters: function () { return []; }, propDecorators: { userConfig: [{
+            }], ctorParameters: function () { return []; }, propDecorators: { showFormFields: [{
+                    type: i0.Input
+                }], userConfig: [{
                     type: i0.Input
                 }], formsList: [{
                     type: i0.Input
@@ -2999,7 +3123,7 @@
             };
         }
         Converter.prototype.convertFormConfig = function (formConfig) {
-            var e_1, _a;
+            var e_1, _f;
             var _this = this;
             var updateOnFieldType = function (field) {
                 var formatFieldTypeTitle = function (field) {
@@ -3185,12 +3309,11 @@
                     return { field: field, connectedFieldMapping: connectedFieldMapping };
                 };
                 var getConnectedElementParentFieldMapping = function (field, connectedFieldMapping) {
-                    var e_2, _a;
-                    console.log(field, connectedFieldMapping);
+                    var e_2, _f;
                     if (hasKey$2(connectedFieldMapping["child"], field.key)) {
                         try {
-                            for (var _b = __values(connectedFieldMapping["child"][field.key]), _c = _b.next(); !_c.done; _c = _b.next()) {
-                                var connectedParentKey = _c.value;
+                            for (var _g = __values(connectedFieldMapping["child"][field.key]), _h = _g.next(); !_h.done; _h = _g.next()) {
+                                var connectedParentKey = _h.value;
                                 if (hasKey$2(connectedFieldMapping["parent"], connectedParentKey["key"])) {
                                     connectedFieldMapping["parent"][connectedParentKey["key"]].push(field.key);
                                 }
@@ -3204,7 +3327,7 @@
                         catch (e_2_1) { e_2 = { error: e_2_1 }; }
                         finally {
                             try {
-                                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                                if (_h && !_h.done && (_f = _g.return)) _f.call(_g);
                             }
                             finally { if (e_2) throw e_2.error; }
                         }
@@ -3232,37 +3355,48 @@
                 return field;
             };
             var updateFieldValidatorConfig = function (field) {
+                var _a, _b, _c, _d, _e;
                 if (field.type !== "title") {
                     var validators = hasKey$2(field, "validators") ? field.validators : {};
                     field = _this.setMissingFieldKeyValue(field, "validators", {});
                     field = _this.setFieldKeyValue(field, "validators", Object.assign(Object.assign({}, field["validators"]), { min: hasKey$2(validators, "min")
-                            ? validators.min
+                            ? isNotEmpty$1(validators.min)
+                                ? Number(validators.min)
+                                : null
                             : hasKey$2(field, "min")
-                                ? field.min
-                                : undefined, max: hasKey$2(validators, "max")
-                            ? validators.max
+                                ? Number(field.min)
+                                : null, max: hasKey$2(validators, "max")
+                            ? isNotEmpty$1(validators.max)
+                                ? Number(validators.max)
+                                : null
                             : hasKey$2(field, "max")
-                                ? field.max
-                                : undefined, required: hasKey$2(validators, "required")
-                            ? validators.required
+                                ? Number(field.max)
+                                : null, required: hasKey$2(validators, "required")
+                            ? Boolean(validators.required)
                             : hasKey$2(field, "required")
-                                ? field.required
-                                : undefined, minLength: hasKey$2(validators, "minLength")
-                            ? validators.minLength
+                                ? Boolean(field.required)
+                                : false, minLength: hasKey$2(validators, "minLength")
+                            ? isNotEmpty$1(validators.minLength)
+                                ? Number(validators.minLength)
+                                : null
                             : hasKey$2(field, "minLength")
-                                ? field.minLength
-                                : undefined, maxLength: hasKey$2(validators, "maxLength")
-                            ? validators.maxLength
+                                ? Number(field.minLength)
+                                : null, maxLength: hasKey$2(validators, "maxLength")
+                            ? isNotEmpty$1(validators.maxLength)
+                                ? Number(validators.maxLength)
+                                : null
                             : hasKey$2(field, "length")
-                                ? field.length
+                                ? Number(field.length)
                                 : hasKey$2(field, "maxLength")
-                                    ? field.maxLength
-                                    : undefined, pattern: hasKey$2(field.validators, "pattern")
-                            ? field.validators.pattern
+                                    ? Number(field.maxLength)
+                                    : null, pattern: hasKey$2(validators, "pattern")
+                            ? isNotEmpty$1(validators.pattern)
+                                ? validators.pattern
+                                : undefined
                             : hasKey$2(field, "pattern")
-                                ? field.pattern
+                                ? { key: "CUSTOM", pattern: String(field.pattern) }
                                 : hasKey$2(field, "regex")
-                                    ? field.regex
+                                    ? { key: "CUSTOM", pattern: String(field.regex) }
                                     : undefined }));
                     delete field.min;
                     delete field.max;
@@ -3272,6 +3406,29 @@
                     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 (isEmpty$1((_a = field.validators) === null || _a === void 0 ? void 0 : _a.min)) {
+                        delete field.validators.min;
+                    }
+                    if (isEmpty$1((_b = field.validators) === null || _b === void 0 ? void 0 : _b.max)) {
+                        delete field.validators.min;
+                    }
+                    if (isEmpty$1((_c = field.validators) === null || _c === void 0 ? void 0 : _c.minLength)) {
+                        delete field.validators.minLength;
+                    }
+                    if (isEmpty$1((_d = field.validators) === null || _d === void 0 ? void 0 : _d.maxLength)) {
+                        delete field.validators.maxLength;
+                    }
+                    if (isEmpty$1((_e = field.validators) === null || _e === void 0 ? void 0 : _e.pattern)) {
+                        delete field.validators.pattern;
+                    }
                 }
                 return field;
             };
@@ -3506,7 +3663,7 @@
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (fields_1_1 && !fields_1_1.done && (_a = fields_1.return)) _a.call(fields_1);
+                    if (fields_1_1 && !fields_1_1.done && (_f = fields_1.return)) _f.call(fields_1);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
@@ -3843,7 +4000,7 @@
         return KwikIDFormsRendererComponent;
     }());
     /** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsRendererComponent, deps: [{ token: KwikIDRendererService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { userConfig: "userConfig", formsData: "formsData", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, providers: [KwikIDRendererService], usesOnChanges: true, ngImport: i0__namespace, template: "<div ngClass=\"kwikid-renderer\">\r\n  <div\r\n    ngClass=\"kwikid-layout-container\"\r\n    *ngIf=\"!loading\"\r\n  >\r\n    <div\r\n      ngClass=\"kwikid-sections-container\"\r\n      *ngIf=\"showFormSections\"\r\n      class=\"active\"\r\n      [class.active]=\"showFormSections\"\r\n      [class.mobile]=\"rendererService.isMobileView\"\r\n    >\r\n      <kwikid-forms-list\r\n        [userConfig]=\"this.userConfig\"\r\n        [formsList]=\"this.rendererService.formsList\"\r\n        [formsListCompleted]=\"this.rendererService.formsListCompleted\"\r\n        [isMobileView]=\"this.rendererService.isMobileView\"\r\n        (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\r\n        (onClickSubmitForms)=\"this.handleOnClickSubmitForms($event)\"\r\n      ></kwikid-forms-list>\r\n    </div>\r\n    <div\r\n      ngClass=\"kwikid-forms-container\"\r\n      *ngIf=\"this.showForm && this.showFormFields\"\r\n      [class.active]=\"showFormFields\"\r\n      [class.mobile]=\"rendererService.isMobileView\"\r\n      [@panelInOut]\r\n    >\r\n      <kwikid-form-view\r\n        [formConfig]=\"this.rendererService.activeFormConfig\"\r\n        [formData]=\"this.rendererService.activeFormData\"\r\n        [apiCallResponse]=\"this.apiCallResponse\"\r\n        [formsList]=\"this.rendererService.formsList\"\r\n        [allFormsData]=\"this.rendererService.allFormsData\"\r\n        [isMobileView]=\"this.rendererService.isMobileView\"\r\n        (onClickApiCall)=\"this.handleOnClickApiCall($event)\"\r\n        (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\r\n        (onClickSaveForm)=\"this.handleOnClickSaveForm($event)\"\r\n        (getActiveFormData)=\"this.handleGetActiveFormData($event)\"\r\n      ></kwikid-form-view>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".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);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-primary)}.kwikid-sections-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s}.kwikid-forms-container{display:block;width:100%;max-width:50vw;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}@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}}\n"], components: [{ type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["userConfig", "formsList", "formsListCompleted", "isMobileView"], outputs: ["onClickSetActiveForm", "onClickHideFormsList", "onClickSubmitForms"] }, { type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["formConfig", "formData", "apiCallResponse", "isMobileView", "allFormsData", "formsList"], outputs: ["onClickViewForms", "onClickSaveForm", "onClickApiCall", "getActiveFormData"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+    /** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { userConfig: "userConfig", formsData: "formsData", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, providers: [KwikIDRendererService], usesOnChanges: true, ngImport: i0__namespace, template: "<div ngClass=\"kwikid-renderer\">\r\n  <div\r\n    ngClass=\"kwikid-layout-container\"\r\n    *ngIf=\"!loading\"\r\n  >\r\n    <div\r\n      ngClass=\"kwikid-sections-container\"\r\n      *ngIf=\"showFormSections\"\r\n      class=\"active\"\r\n      [class.active]=\"showFormSections\"\r\n      [class.mobile]=\"rendererService.isMobileView\"\r\n    >\r\n      <kwikid-forms-list\r\n        [showFormFields]=\"this.showFormFields\"\r\n        [userConfig]=\"this.userConfig\"\r\n        [formsList]=\"this.rendererService.formsList\"\r\n        [formsListCompleted]=\"this.rendererService.formsListCompleted\"\r\n        [isMobileView]=\"this.rendererService.isMobileView\"\r\n        (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\r\n        (onClickSubmitForms)=\"this.handleOnClickSubmitForms($event)\"\r\n      ></kwikid-forms-list>\r\n    </div>\r\n    <div\r\n      ngClass=\"kwikid-forms-container\"\r\n      *ngIf=\"this.showForm && this.showFormFields\"\r\n      [class.active]=\"showFormFields\"\r\n      [class.mobile]=\"rendererService.isMobileView\"\r\n      [@panelInOut]\r\n    >\r\n      <kwikid-form-view\r\n        [formConfig]=\"this.rendererService.activeFormConfig\"\r\n        [formData]=\"this.rendererService.activeFormData\"\r\n        [apiCallResponse]=\"this.apiCallResponse\"\r\n        [formsList]=\"this.rendererService.formsList\"\r\n        [allFormsData]=\"this.rendererService.allFormsData\"\r\n        [isMobileView]=\"this.rendererService.isMobileView\"\r\n        (onClickApiCall)=\"this.handleOnClickApiCall($event)\"\r\n        (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\r\n        (onClickSaveForm)=\"this.handleOnClickSaveForm($event)\"\r\n        (getActiveFormData)=\"this.handleGetActiveFormData($event)\"\r\n      ></kwikid-form-view>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".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);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-primary)}.kwikid-sections-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s}.kwikid-forms-container{display:block;width:100%;max-width:50vw;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}@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}}\n"], components: [{ type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["showFormFields", "userConfig", "formsList", "formsListCompleted", "isMobileView"], outputs: ["onClickSetActiveForm", "onClickHideFormsList", "onClickSubmitForms"] }, { type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["formConfig", "formData", "apiCallResponse", "isMobileView", "allFormsData", "formsList"], outputs: ["onClickViewForms", "onClickSaveForm", "onClickApiCall", "getActiveFormData"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
             animations.trigger("panelInOut", [
                 animations.transition(":enter", [
                     animations.style({ transform: "translateY(100%)" }),