kwikid-forms 0.0.3 → 0.0.4

package/fesm2015/kwikid-forms.js

@@ -176,41 +176,95 @@ var EApiStatusType;
 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) {
@@ -220,6 +274,21 @@ var EMessageType;
     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.
@@ -362,21 +431,6 @@ const isSingleForm = (formsList) => {
     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 = {}));
-
 const hasKey$1 = (object, key) => {
     return object.hasOwnProperty(key);
 };
@@ -879,6 +933,208 @@ __decorate([
     log
 ], Defaults.prototype, "getDefaultValue", null);
 
+const findFieldFromKey = (fields, key) => {
+    const field = fields.find((field) => {
+        if (field.key === key) {
+            return field;
+        }
+    });
+    return field;
+};
+const findFieldIndexFromKey = (fields, key) => {
+    let fieldIndex;
+    fieldIndex = fields.findIndex((_) => {
+        return key === _.key;
+    });
+    return fieldIndex;
+};
+const getSearchTextOptionsFromRemoteFile = (field, childField, formGroup) => __awaiter(void 0, void 0, void 0, function* () {
+    const parentFieldValue = formGroup.controls[field.key].value;
+    // Determine the URL of the remote file to fetch
+    let fileUrl;
+    if (childField.regexToGetJsonRemoteUrlKey) {
+        const 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;
+    // Fetch the remote file and parse its JSON data
+    const response = yield fetch(fileUrl);
+    const data = yield response.json();
+    // Return the data for the given parent field value
+    return data[parentFieldValue];
+});
+const getSearchTextOptionsFromFieldConfig = (field, childField, formGroup) => {
+    let options;
+    const fieldValue = formGroup.controls[field.key].value;
+    if (isNotEmpty(childField["json"])) {
+        options = childField["json"][fieldValue];
+    }
+    return options;
+};
+const formatSearchTextOptions = (options) => {
+    return options.map(({ title }) => title);
+};
+const formatDateToStandardFormat = (date) => {
+    let formattedDate;
+    let year = date.year;
+    let month = date.month;
+    let 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;
+}
+const addMessage = (field, message) => {
+    const isDuplicateMessage = (messages, message) => {
+        return messages.some((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;
+};
+const removeMessage = (field, message) => {
+    field["messages"] = field["messages"].filter(function (fieldMessage) {
+        return fieldMessage.type !== message.type;
+    });
+    return field;
+};
+function setFieldError(fields, errors, key, error) {
+    const fieldIndex = fields.findIndex((field) => {
+        return field.key === key;
+    });
+    const setErrorMessages = (field, errors) => {
+        const getErrorMessage = (fieldLabel, errorType) => {
+            let 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((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;
+}
+const convertValueFromKwikUIFormatToBasicFormat = (type, value) => {
+    let convertedValue = value;
+    switch (type) {
+        case EFieldType.DATE:
+            const convertDateStringToTuiDayFormat = (date) => {
+                const splitDate = date.split("-");
+                const tuiDay = new 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;
+};
+const convertValueFromBasicFormatToKwikUIFormat = (field, value) => {
+    let 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:
+            let fieldPhone = field;
+            convertedValue = value.replace(String(fieldPhone.properties.countryCode), "");
+            break;
+        case EFieldType.TITLE:
+            break;
+        default:
+            if (isEmpty(value)) {
+                convertedValue = "";
+            }
+            break;
+    }
+    return convertedValue;
+};
+
 class Validations {
     constructor(field, formData, previousFormData, allFormsData, takeAction) {
         this._field = field;
@@ -940,18 +1196,15 @@ class Validations {
         if (hasKey$1(field, "validators") &&
             hasKey$1(field.validators, "pattern") &&
             isNotEmpty(field.validators.pattern)) {
-            if (field.validators.pattern.key === EPatternKey.CUSTOM) {
-                validators.push(Validators.pattern(field.validators.pattern.pattern));
-            }
-            else {
-                validators.push(Validators.pattern(EPattern[field.validators.pattern.key]));
+            if (hasKey$1(field.validators.pattern, "key")) {
+                if (field.validators.pattern.key === EPatternKey.CUSTOM) {
+                    validators.push(Validators.pattern(field.validators.pattern.pattern));
+                }
+                else {
+                    validators.push(Validators.pattern(EPattern[field.validators.pattern.key]));
+                }
             }
         }
-        if (hasKey$1(field, "validators") &&
-            hasKey$1(field.validators, "nullValidator") &&
-            isNotEmpty(field.validators.nullValidator)) {
-            validators.push(Validators.nullValidator(field.validators.nullValidator));
-        }
         return validators;
     }
     getFormValidationErrors(control) {
@@ -1036,7 +1289,7 @@ class KwikIDFormViewService {
             for (let field of fields) {
                 if (field.type !== "title") {
                     const defaults = new Defaults(field, allFormsData, formData, previousFormData, takeAction);
-                    const value = yield defaults.getDefaultValue();
+                    const value = convertValueFromBasicFormatToKwikUIFormat(field.type, yield defaults.getDefaultValue());
                     const validators = new Validations(field, formData, previousFormData, allFormsData, takeAction).getFieldValidators(field);
                     formGroup.addControl(field.key, new FormControl({ value: value, disabled: field.disabled }, { validators: validators }));
                 }
@@ -1147,150 +1400,6 @@ __decorate([
     log
 ], Apis.prototype, "validateApiCallResponse", null);
 
-const findFieldFromKey = (fields, key) => {
-    const field = fields.find((field) => {
-        if (field.key === key) {
-            return field;
-        }
-    });
-    return field;
-};
-const findFieldIndexFromKey = (fields, key) => {
-    let fieldIndex;
-    fieldIndex = fields.findIndex((_) => {
-        return key === _.key;
-    });
-    return fieldIndex;
-};
-const getSearchTextOptionsFromRemoteFile = (field, childField, formGroup) => __awaiter(void 0, void 0, void 0, function* () {
-    const parentFieldValue = formGroup.controls[field.key].value;
-    // Determine the URL of the remote file to fetch
-    let fileUrl;
-    if (childField.regexToGetJsonRemoteUrlKey) {
-        const 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;
-    // Fetch the remote file and parse its JSON data
-    const response = yield fetch(fileUrl);
-    const data = yield response.json();
-    // Return the data for the given parent field value
-    return data[parentFieldValue];
-});
-const getSearchTextOptionsFromFieldConfig = (field, childField, formGroup) => {
-    let options;
-    const fieldValue = formGroup.controls[field.key].value;
-    if (isNotEmpty(childField["json"])) {
-        options = childField["json"][fieldValue];
-    }
-    return options;
-};
-const formatSearchTextOptions = (options) => {
-    return options.map(({ title }) => title);
-};
-const formatDateToStandardFormat = (date) => {
-    let formattedDate;
-    let year = date.year;
-    let month = date.month;
-    let 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;
-}
-const addMessage = (field, message) => {
-    const isDuplicateMessage = (messages, message) => {
-        return messages.some((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;
-};
-const removeMessage = (field, message) => {
-    field["messages"] = field["messages"].filter(function (fieldMessage) {
-        return fieldMessage.type !== message.type;
-    });
-    return field;
-};
-function setFieldError(fields, errors, key, error) {
-    const fieldIndex = fields.findIndex((field) => {
-        return field.key === key;
-    });
-    const setErrorMessages = (field, errors) => {
-        const getErrorMessage = (fieldLabel, errorType) => {
-            let 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((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;
-}
-
 class KwikIDFormViewComponent {
     constructor(formViewService) {
         this.formViewService = formViewService;
@@ -1558,16 +1667,26 @@ class KwikIDFormViewComponent {
     handleOnClickSaveForm(e) {
         let formData = this.formGroup.getRawValue();
         for (let field of this.formFields) {
-            if (field.type !== "title" &&
+            if (field.type !== EFieldType.TITLE) {
+                if (field.hidden) {
+                    delete formData[field.key];
+                }
+                else {
+                    formData[field.key] = convertValueFromKwikUIFormatToBasicFormat(field, formData[field.key]);
+                }
+            }
+        }
+        for (let field of this.formFields) {
+            if (field.type !== EFieldType.TITLE &&
                 field.validation.triggers.includes("ON_SAVE")) {
-                const validations = new Validations(field, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
+                const validations = new Validations(field, formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
                 (() => __awaiter(this, void 0, void 0, function* () {
                     yield validations.validateField();
                 }))();
             }
         }
         if (this.formGroup.invalid) {
-            const controls = new Validations(undefined, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this)).findInvalidControlsRecursive(this.formGroup);
+            const controls = new Validations(undefined, formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this)).findInvalidControlsRecursive(this.formGroup);
             let firstFieldWithError = "";
             for (let control of controls) {
                 if (control.invalid && isEmpty(firstFieldWithError)) {
@@ -1577,35 +1696,6 @@ class KwikIDFormViewComponent {
             }
             return;
         }
-        // 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 (let field of this.formFields) {
-            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;
-            }
-        }
         Object.keys(formData).map((key) => {
             if (isEmpty(formData[key])) {
                 formData[key] = "";
@@ -1928,6 +2018,7 @@ const hasKey = (object, key) => {
 
 class KwikIDFormsListComponent {
     constructor() {
+        this.showFormFields = {};
         this.userConfig = {};
         this.formsList = [];
         this.formsListCompleted = [];
@@ -1936,21 +2027,39 @@ class KwikIDFormsListComponent {
         this.onClickHideFormsList = new EventEmitter();
         this.onClickSubmitForms = new EventEmitter();
         this.selectedForm = "";
+        this.isAllFormsCompleted = true;
+    }
+    ngOnInit() {
+        this.isAllFormsCompleted = this.checkIsAllFormsCompleted(this.formsList);
     }
-    ngOnInit() { }
     ngOnChanges(changes) {
         const verifyChange = (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;
         }
     }
+    checkIsAllFormsCompleted(formsList) {
+        let isAllFormsCompleted = true;
+        for (let forms of formsList) {
+            if (forms.status !== "completed") {
+                isAllFormsCompleted = false;
+                break;
+            }
+        }
+        return isAllFormsCompleted;
+    }
     handleOnClickSetActiveForm(selectedForm) {
-        if (this.selectedForm !== selectedForm) {
+        if (this.selectedForm !== selectedForm ||
+            (this.isAllFormsCompleted && !this.showFormFields)) {
             this.selectedForm = selectedForm;
             this.onClickSetActiveForm.emit(selectedForm);
         }
@@ -1960,7 +2069,7 @@ class KwikIDFormsListComponent {
     }
 }
 /** @nocollapse */ KwikIDFormsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0.ɵɵ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, 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.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["value", "max", "size", "colors"] }, { type: i3.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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+/** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0.ɵɵ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, 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.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["value", "max", "size", "colors"] }, { type: i3.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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1968,7 +2077,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     templateUrl: "./forms-list.component.html",
                     styleUrls: ["./forms-list.component.scss"]
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { userConfig: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { showFormFields: [{
+                type: Input
+            }], userConfig: [{
                 type: Input
             }], formsList: [{
                 type: Input
@@ -2198,7 +2309,6 @@ class Converter {
                 return { field: field, connectedFieldMapping: connectedFieldMapping };
             };
             const getConnectedElementParentFieldMapping = (field, connectedFieldMapping) => {
-                console.log(field, connectedFieldMapping);
                 if (hasKey$2(connectedFieldMapping["child"], field.key)) {
                     for (let connectedParentKey of connectedFieldMapping["child"][field.key]) {
                         if (hasKey$2(connectedFieldMapping["parent"], connectedParentKey["key"])) {
@@ -2234,37 +2344,48 @@ class Converter {
             return field;
         };
         const updateFieldValidatorConfig = (field) => {
+            var _a, _b, _c, _d, _e;
             if (field.type !== "title") {
                 const 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;
@@ -2274,6 +2395,29 @@ class Converter {
                 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;
         };
@@ -2770,7 +2914,7 @@ class KwikIDFormsRendererComponent {
     }
 }
 /** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsRendererComponent, deps: [{ token: KwikIDRendererService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0.ɵɵ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, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+/** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0.ɵɵ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, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
         trigger("panelInOut", [
             transition(":enter", [
                 style({ transform: "translateY(100%)" }),