kwikid-forms 0.0.8 → 0.1.0

package/bundles/kwikid-forms.umd.js

@@ -529,6 +529,10 @@
         EActionKey["FIELD_RESET"] = "FIELD_RESET";
         EActionKey["HANDLE_CONNECTED_ELEMENTS"] = "HANDLE_CONNECTED_ELEMENTS";
         EActionKey["CUSTOM"] = "CUSTOM";
+        EActionKey["FIELD_GROUP_SHOW"] = "FIELD_GROUP_SHOW";
+        EActionKey["FIELD_GROUP_HIDE"] = "FIELD_GROUP_HIDE";
+        EActionKey["FIELD_GROUP_ENABLE"] = "FIELD_GROUP_ENABLE";
+        EActionKey["FIELD_GROUP_DISABLE"] = "FIELD_GROUP_DISABLE";
     })(EActionKey || (EActionKey = {}));
 
     var EApiStatusType;
@@ -1229,9 +1233,6 @@
         Rules.prototype.evaluate = function (rule) {
             var ruleType = rule.key;
             var ruleEvaluationStatus = false;
-            if (this._field.type === "radio") {
-                this._formData[this._field.key] = this._formData[this._field.key].label;
-            }
             var source = new Sources$1(this._field, this._formData, this._previousFormData, this._allFormsData);
             switch (ruleType) {
                 case ERuleKey.OBJECT_PATH_EXISTS:
@@ -1581,6 +1582,8 @@
                 case EFieldType.DATE:
                     convertedValue = convertTuiDayFormatToDateString(value);
                     break;
+                case EFieldType.RADIO:
+                    convertedValue = value.label;
                 default:
                     break;
             }
@@ -1592,8 +1595,12 @@
         if (isNotEmpty(value)) {
             switch (field.type) {
                 case EFieldType.RADIO:
-                    if (hasKey$1(value, "label")) {
-                        convertedValue = value.label;
+                    if (!hasKey$1(value, "label")) {
+                        var convertedLabelValue = {
+                            label: value,
+                            disabled: false
+                        };
+                        convertedValue = convertedLabelValue;
                     }
                     break;
                 case EFieldType.DATE:
@@ -1668,8 +1675,10 @@
                 isNotEmpty(field.validators.max)) {
                 validators.push(i6.Validators.max(field.validators.max));
             }
-            if (hasKey$1(field, "required") ||
-                (hasKey$1(field, "validators") && hasKey$1(field.validators, "required"))) {
+            if ((hasKey$1(field, "required") && field.required) ||
+                (hasKey$1(field, "validators") &&
+                    hasKey$1(field.validators, "required") &&
+                    field.validators.required)) {
                 validators.push(i6.Validators.required);
             }
             if (hasKey$1(field, "validators") &&
@@ -2098,6 +2107,7 @@
             this.onClickSaveForm = new i0.EventEmitter();
             this.onClickApiCall = new i0.EventEmitter();
             this.getActiveFormData = new i0.EventEmitter();
+            this.fieldGroups = {};
             this.formFields = [];
             this.previousFormData = {};
             this.loading = true;
@@ -2187,6 +2197,7 @@
                     switch (_h.label) {
                         case 0:
                             this.setFormFieldsFromFormConfig(formConfig);
+                            this.setFormFieldGroupsFromFormConfig(formConfig);
                             this.setFormDataFromAllFormsData();
                             _a = this;
                             return [4 /*yield*/, this.formViewService.createFormGroup(this.formFields, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this))];
@@ -2264,6 +2275,9 @@
                 this.formFields = formConfig.multiForm.fields;
             }
         };
+        KwikIDFormViewComponent.prototype.setFormFieldGroupsFromFormConfig = function (formConfig) {
+            this.fieldGroups = formConfig.fieldGroups;
+        };
         KwikIDFormViewComponent.prototype.setFormDataFromAllFormsData = function () {
             if (hasKey$1(this.allFormsData, this.formConfig.key)) {
                 this.formData = this.allFormsData[this.formConfig.key];
@@ -2272,10 +2286,101 @@
                 this.formData = {};
             }
         };
-        KwikIDFormViewComponent.prototype.handleConnectedElementFieldActions = function (connectedFieldConfig, connectedField) {
+        KwikIDFormViewComponent.prototype.handleConnectedElementFieldGroupActions = function (childFieldGroupConfig, parentField) {
             return __awaiter(this, void 0, void 0, function () {
                 var rulesMapping, _a, _b, action, conditionSuccess, actions, e_3_1;
                 var e_3, _c;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            if (!hasKey$1(childFieldGroupConfig, "rules")) return [3 /*break*/, 8];
+                            rulesMapping = new Rules$1(childFieldGroupConfig.rules, parentField, this.formData, this.previousFormData, this.allFormsData).mapping();
+                            _d.label = 1;
+                        case 1:
+                            _d.trys.push([1, 6, 7, 8]);
+                            _a = __values(childFieldGroupConfig.actions), _b = _a.next();
+                            _d.label = 2;
+                        case 2:
+                            if (!!_b.done) return [3 /*break*/, 5];
+                            action = _b.value;
+                            conditionSuccess = new Condition$1(action.condition, rulesMapping).evaluate();
+                            if (!conditionSuccess) return [3 /*break*/, 4];
+                            actions = new Actions$1(action, parentField, rulesMapping, this.allFormsData, this.formData, this.previousFormData, this.takeActionOnFieldGroup.bind(this));
+                            return [4 /*yield*/, actions.execute()];
+                        case 3:
+                            _d.sent();
+                            _d.label = 4;
+                        case 4:
+                            _b = _a.next();
+                            return [3 /*break*/, 2];
+                        case 5: return [3 /*break*/, 8];
+                        case 6:
+                            e_3_1 = _d.sent();
+                            e_3 = { error: e_3_1 };
+                            return [3 /*break*/, 8];
+                        case 7:
+                            try {
+                                if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
+                            }
+                            finally { if (e_3) throw e_3.error; }
+                            return [7 /*endfinally*/];
+                        case 8: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        KwikIDFormViewComponent.prototype.handleConnectedElementFieldGroup = function (currentField, connectedFieldGroupConfig, eventType) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = eventType;
+                            switch (_a) {
+                                case "INIT": return [3 /*break*/, 1];
+                                case "VALUE_CHANGE": return [3 /*break*/, 4];
+                                case "NESTED_LINK": return [3 /*break*/, 7];
+                            }
+                            return [3 /*break*/, 9];
+                        case 1:
+                            if (!(hasKey$1(connectedFieldGroupConfig, "triggers") &&
+                                connectedFieldGroupConfig.triggers.includes("INIT"))) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this.handleConnectedElementFieldGroupActions(connectedFieldGroupConfig, currentField)];
+                        case 2:
+                            _b.sent();
+                            _b.label = 3;
+                        case 3: return [3 /*break*/, 12];
+                        case 4:
+                            if (!(hasKey$1(connectedFieldGroupConfig, "triggers") &&
+                                connectedFieldGroupConfig.triggers.includes("VALUE_CHANGE"))) return [3 /*break*/, 6];
+                            return [4 /*yield*/, this.handleConnectedElementFieldGroupActions(connectedFieldGroupConfig, currentField)];
+                        case 5:
+                            _b.sent();
+                            _b.label = 6;
+                        case 6: return [3 /*break*/, 12];
+                        case 7:
+                            if (!(hasKey$1(connectedFieldGroupConfig, "triggers") &&
+                                connectedFieldGroupConfig.triggers.includes("NESTED_LINK"))) return [3 /*break*/, 9];
+                            return [4 /*yield*/, this.handleConnectedElementFieldGroupActions(connectedFieldGroupConfig, currentField)];
+                        case 8:
+                            _b.sent();
+                            _b.label = 9;
+                        case 9:
+                            if (!hasKey$1(connectedFieldGroupConfig, "triggers")) return [3 /*break*/, 11];
+                            return [4 /*yield*/, this.handleConnectedElementFieldGroupActions(connectedFieldGroupConfig, currentField)];
+                        case 10:
+                            _b.sent();
+                            _b.label = 11;
+                        case 11: return [3 /*break*/, 12];
+                        case 12: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        KwikIDFormViewComponent.prototype.handleConnectedElementFieldActions = function (connectedFieldConfig, connectedField) {
+            return __awaiter(this, void 0, void 0, function () {
+                var rulesMapping, _a, _b, action, conditionSuccess, actions, e_4_1;
+                var e_4, _c;
                 return __generator(this, function (_d) {
                     switch (_d.label) {
                         case 0:
@@ -2301,14 +2406,14 @@
                             return [3 /*break*/, 2];
                         case 5: return [3 /*break*/, 8];
                         case 6:
-                            e_3_1 = _d.sent();
-                            e_3 = { error: e_3_1 };
+                            e_4_1 = _d.sent();
+                            e_4 = { error: e_4_1 };
                             return [3 /*break*/, 8];
                         case 7:
                             try {
                                 if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
                             }
-                            finally { if (e_3) throw e_3.error; }
+                            finally { if (e_4) throw e_4.error; }
                             return [7 /*endfinally*/];
                         case 8: return [2 /*return*/, connectedField];
                     }
@@ -2318,7 +2423,7 @@
         KwikIDFormViewComponent.prototype.handleConnectedElementFields = function (currentField, connectedFieldConfig, eventType) {
             return __awaiter(this, void 0, void 0, function () {
                 var connectedField, _a, _b, _c, _d, _e, connectedFieldConfig_1;
-                var e_4, _f;
+                var e_5, _f;
                 return __generator(this, function (_g) {
                     switch (_g.label) {
                         case 0:
@@ -2384,19 +2489,21 @@
                         case 19: return [3 /*break*/, 20];
                         case 20:
                             if (hasKey$1(connectedField, "connectedElements")) {
-                                try {
-                                    for (_d = __values(connectedField.connectedElements
-                                        .fields), _e = _d.next(); !_e.done; _e = _d.next()) {
-                                        connectedFieldConfig_1 = _e.value;
-                                        connectedField = this.handleConnectedElementFields(connectedField, connectedFieldConfig_1, "NESTED_LINK");
-                                    }
-                                }
-                                catch (e_4_1) { e_4 = { error: e_4_1 }; }
-                                finally {
+                                if (hasKey$1(connectedField.connectedElements, "connectedFields")) {
                                     try {
-                                        if (_e && !_e.done && (_f = _d.return)) _f.call(_d);
+                                        for (_d = __values(connectedField.connectedElements
+                                            .connectedFields), _e = _d.next(); !_e.done; _e = _d.next()) {
+                                            connectedFieldConfig_1 = _e.value;
+                                            connectedField = this.handleConnectedElementFields(connectedField, connectedFieldConfig_1, "NESTED_LINK");
+                                        }
+                                    }
+                                    catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                                    finally {
+                                        try {
+                                            if (_e && !_e.done && (_f = _d.return)) _f.call(_d);
+                                        }
+                                        finally { if (e_5) throw e_5.error; }
                                     }
-                                    finally { if (e_4) throw e_4.error; }
                                 }
                             }
                             return [2 /*return*/, currentField];
@@ -2405,24 +2512,75 @@
             });
         };
         KwikIDFormViewComponent.prototype.handleConnectedElements = function (e, eventType) {
-            var e_5, _a;
-            var currentField = findFieldFromKey(this.formFields, e.key);
-            if (hasKey$1(currentField, "connectedElements")) {
-                var connectedFields = currentField.connectedElements.connectedFields;
-                try {
-                    for (var connectedFields_1 = __values(connectedFields), connectedFields_1_1 = connectedFields_1.next(); !connectedFields_1_1.done; connectedFields_1_1 = connectedFields_1.next()) {
-                        var connectedFieldConfig = connectedFields_1_1.value;
-                        currentField = this.handleConnectedElementFields(currentField, connectedFieldConfig, eventType);
-                    }
-                }
-                catch (e_5_1) { e_5 = { error: e_5_1 }; }
-                finally {
-                    try {
-                        if (connectedFields_1_1 && !connectedFields_1_1.done && (_a = connectedFields_1.return)) _a.call(connectedFields_1);
+            return __awaiter(this, void 0, void 0, function () {
+                var currentField, connectedFieldGroups, connectedFieldGroups_1, connectedFieldGroups_1_1, connectedFieldGroupConfig, e_6_1, connectedFields, connectedFields_1, connectedFields_1_1, connectedFieldConfig, e_7_1;
+                var e_6, _a, e_7, _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            currentField = findFieldFromKey(this.formFields, e.key);
+                            if (!hasKey$1(currentField, "connectedElements")) return [3 /*break*/, 16];
+                            if (!hasKey$1(currentField.connectedElements, "connectedFieldGroups")) return [3 /*break*/, 8];
+                            connectedFieldGroups = currentField.connectedElements.connectedFieldGroups;
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 6, 7, 8]);
+                            connectedFieldGroups_1 = __values(connectedFieldGroups), connectedFieldGroups_1_1 = connectedFieldGroups_1.next();
+                            _c.label = 2;
+                        case 2:
+                            if (!!connectedFieldGroups_1_1.done) return [3 /*break*/, 5];
+                            connectedFieldGroupConfig = connectedFieldGroups_1_1.value;
+                            return [4 /*yield*/, this.handleConnectedElementFieldGroup(currentField, connectedFieldGroupConfig, eventType)];
+                        case 3:
+                            _c.sent();
+                            _c.label = 4;
+                        case 4:
+                            connectedFieldGroups_1_1 = connectedFieldGroups_1.next();
+                            return [3 /*break*/, 2];
+                        case 5: return [3 /*break*/, 8];
+                        case 6:
+                            e_6_1 = _c.sent();
+                            e_6 = { error: e_6_1 };
+                            return [3 /*break*/, 8];
+                        case 7:
+                            try {
+                                if (connectedFieldGroups_1_1 && !connectedFieldGroups_1_1.done && (_a = connectedFieldGroups_1.return)) _a.call(connectedFieldGroups_1);
+                            }
+                            finally { if (e_6) throw e_6.error; }
+                            return [7 /*endfinally*/];
+                        case 8:
+                            if (!hasKey$1(currentField.connectedElements, "connectedFields")) return [3 /*break*/, 16];
+                            connectedFields = currentField.connectedElements.connectedFields;
+                            _c.label = 9;
+                        case 9:
+                            _c.trys.push([9, 14, 15, 16]);
+                            connectedFields_1 = __values(connectedFields), connectedFields_1_1 = connectedFields_1.next();
+                            _c.label = 10;
+                        case 10:
+                            if (!!connectedFields_1_1.done) return [3 /*break*/, 13];
+                            connectedFieldConfig = connectedFields_1_1.value;
+                            return [4 /*yield*/, this.handleConnectedElementFields(currentField, connectedFieldConfig, eventType)];
+                        case 11:
+                            currentField = _c.sent();
+                            _c.label = 12;
+                        case 12:
+                            connectedFields_1_1 = connectedFields_1.next();
+                            return [3 /*break*/, 10];
+                        case 13: return [3 /*break*/, 16];
+                        case 14:
+                            e_7_1 = _c.sent();
+                            e_7 = { error: e_7_1 };
+                            return [3 /*break*/, 16];
+                        case 15:
+                            try {
+                                if (connectedFields_1_1 && !connectedFields_1_1.done && (_b = connectedFields_1.return)) _b.call(connectedFields_1);
+                            }
+                            finally { if (e_7) throw e_7.error; }
+                            return [7 /*endfinally*/];
+                        case 16: return [2 /*return*/];
                     }
-                    finally { if (e_5) throw e_5.error; }
-                }
-            }
+                });
+            });
         };
         // DOM Event Handlers
         KwikIDFormViewComponent.prototype.handleGetKeyValue = function (e) {
@@ -2454,8 +2612,8 @@
         };
         KwikIDFormViewComponent.prototype.handleOnClickResetFormFields = function (e, field) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, _b, f, _c, _d, a, resetField, actions, e_6_1, e_7_1;
-                var e_7, _e, e_6, _f;
+                var _a, _b, f, _c, _d, a, resetField, actions, e_8_1, e_9_1;
+                var e_9, _e, e_8, _f;
                 return __generator(this, function (_g) {
                     switch (_g.label) {
                         case 0:
@@ -2468,7 +2626,7 @@
                             _g.label = 2;
                         case 2:
                             _g.trys.push([2, 7, 8, 9]);
-                            _c = (e_6 = void 0, __values(f.actions)), _d = _c.next();
+                            _c = (e_8 = void 0, __values(f.actions)), _d = _c.next();
                             _g.label = 3;
                         case 3:
                             if (!!_d.done) return [3 /*break*/, 6];
@@ -2484,28 +2642,28 @@
                             return [3 /*break*/, 3];
                         case 6: return [3 /*break*/, 9];
                         case 7:
-                            e_6_1 = _g.sent();
-                            e_6 = { error: e_6_1 };
+                            e_8_1 = _g.sent();
+                            e_8 = { error: e_8_1 };
                             return [3 /*break*/, 9];
                         case 8:
                             try {
                                 if (_d && !_d.done && (_f = _c.return)) _f.call(_c);
                             }
-                            finally { if (e_6) throw e_6.error; }
+                            finally { if (e_8) throw e_8.error; }
                             return [7 /*endfinally*/];
                         case 9:
                             _b = _a.next();
                             return [3 /*break*/, 1];
                         case 10: return [3 /*break*/, 13];
                         case 11:
-                            e_7_1 = _g.sent();
-                            e_7 = { error: e_7_1 };
+                            e_9_1 = _g.sent();
+                            e_9 = { error: e_9_1 };
                             return [3 /*break*/, 13];
                         case 12:
                             try {
                                 if (_b && !_b.done && (_e = _a.return)) _e.call(_a);
                             }
-                            finally { if (e_7) throw e_7.error; }
+                            finally { if (e_9) throw e_9.error; }
                             return [7 /*endfinally*/];
                         case 13: return [2 /*return*/];
                     }
@@ -2571,7 +2729,7 @@
             });
         };
         KwikIDFormViewComponent.prototype.handleOnClickSaveForm = function (e) {
-            var e_8, _a, e_9, _b, e_10, _c;
+            var e_10, _a, e_11, _b, e_12, _c;
             var _this = this;
             var formData = this.formGroup.getRawValue();
             try {
@@ -2587,12 +2745,12 @@
                     }
                 }
             }
-            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            catch (e_10_1) { e_10 = { error: e_10_1 }; }
             finally {
                 try {
                     if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
                 }
-                finally { if (e_8) throw e_8.error; }
+                finally { if (e_10) throw e_10.error; }
             }
             var _loop_3 = function (field) {
                 if (field.type !== EFieldType.TITLE &&
@@ -2617,12 +2775,12 @@
                     _loop_3(field);
                 }
             }
-            catch (e_9_1) { e_9 = { error: e_9_1 }; }
+            catch (e_11_1) { e_11 = { error: e_11_1 }; }
             finally {
                 try {
                     if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
                 }
-                finally { if (e_9) throw e_9.error; }
+                finally { if (e_11) throw e_11.error; }
             }
             if (this.formGroup.invalid) {
                 var controls = new Validations$1(undefined, formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this)).findInvalidControlsRecursive(this.formGroup);
@@ -2636,14 +2794,17 @@
                         this.formFields = setFieldError(this.formFields, this.formGroup.controls[control.key].errors, control.key, control.invalid);
                     }
                 }
-                catch (e_10_1) { e_10 = { error: e_10_1 }; }
+                catch (e_12_1) { e_12 = { error: e_12_1 }; }
                 finally {
                     try {
                         if (controls_1_1 && !controls_1_1.done && (_c = controls_1.return)) _c.call(controls_1);
                     }
-                    finally { if (e_10) throw e_10.error; }
+                    finally { if (e_12) throw e_12.error; }
                 }
                 this.toggleErrorNotification(true);
+                setTimeout(function () {
+                    _this.toggleErrorNotification(false);
+                }, 3000);
                 return;
             }
             Object.keys(formData).map(function (key) {
@@ -2663,6 +2824,23 @@
                 return field.key === _.key;
             });
             this.formFields[fieldIndex]["hidden"] = true;
+            this.formGroup.updateValueAndValidity();
+        };
+        KwikIDFormViewComponent.prototype.fieldGroupHide = function (fieldGroup) {
+            var e_13, _a;
+            try {
+                for (var _b = __values(this.fieldGroups[fieldGroup]), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var fieldKey = _c.value;
+                    this.fieldHide(fieldKey);
+                }
+            }
+            catch (e_13_1) { e_13 = { error: e_13_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_13) throw e_13.error; }
+            }
         };
         KwikIDFormViewComponent.prototype.fieldShow = function (fieldKey) {
             var field = findFieldFromKey(this.formFields, fieldKey);
@@ -2672,16 +2850,51 @@
             this.formFields[fieldIndex]["hidden"] = false;
             this.formGroup.updateValueAndValidity();
         };
+        KwikIDFormViewComponent.prototype.fieldGroupShow = function (fieldGroup) {
+            var e_14, _a;
+            try {
+                for (var _b = __values(this.fieldGroups[fieldGroup]), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var fieldKey = _c.value;
+                    this.fieldShow(fieldKey);
+                }
+            }
+            catch (e_14_1) { e_14 = { error: e_14_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_14) throw e_14.error; }
+            }
+        };
         KwikIDFormViewComponent.prototype.fieldDisable = function (fieldKey) {
             var field = findFieldFromKey(this.formFields, fieldKey);
             var fieldIndex = this.formFields.findIndex(function (_) {
                 return field.key === _.key;
             });
-            this.formFields[fieldIndex]["disabled"] = true;
-            if (isNotEmpty(this.formGroup.controls)) {
-                this.formGroup.controls[field.key].disable({
-                    emitEvent: false
-                });
+            if (field.type !== EFieldType.TITLE) {
+                this.formFields[fieldIndex]["disabled"] = true;
+                if (isNotEmpty(this.formGroup.controls)) {
+                    this.formGroup.controls[field.key].disable({
+                        emitEvent: false
+                    });
+                }
+                this.formGroup.updateValueAndValidity();
+            }
+        };
+        KwikIDFormViewComponent.prototype.fieldGroupDisable = function (fieldGroup) {
+            var e_15, _a;
+            try {
+                for (var _b = __values(this.fieldGroups[fieldGroup]), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var fieldKey = _c.value;
+                    this.fieldDisable(fieldKey);
+                }
+            }
+            catch (e_15_1) { e_15 = { error: e_15_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_15) throw e_15.error; }
             }
         };
         KwikIDFormViewComponent.prototype.fieldEnable = function (fieldKey) {
@@ -2689,11 +2902,30 @@
             var fieldIndex = this.formFields.findIndex(function (_) {
                 return field.key === _.key;
             });
-            this.formFields[fieldIndex]["disabled"] = false;
-            if (isNotEmpty(this.formGroup.controls)) {
-                this.formGroup.controls[field.key].enable({
-                    emitEvent: false
-                });
+            if (field.type !== EFieldType.TITLE) {
+                this.formFields[fieldIndex]["disabled"] = false;
+                if (isNotEmpty(this.formGroup.controls)) {
+                    this.formGroup.controls[field.key].enable({
+                        emitEvent: false
+                    });
+                }
+                this.formGroup.updateValueAndValidity();
+            }
+        };
+        KwikIDFormViewComponent.prototype.fieldGroupEnable = function (fieldGroup) {
+            var e_16, _a;
+            try {
+                for (var _b = __values(this.fieldGroups[fieldGroup]), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var fieldKey = _c.value;
+                    this.fieldEnable(fieldKey);
+                }
+            }
+            catch (e_16_1) { e_16 = { error: e_16_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_16) throw e_16.error; }
             }
         };
         KwikIDFormViewComponent.prototype.fieldReset = function (fieldKey) {
@@ -2803,6 +3035,29 @@
                 });
             });
         };
+        KwikIDFormViewComponent.prototype.takeActionOnFieldGroup = function (action, field, allFormsData, formData, previousFormData) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (action.key) {
+                        case EActionKey.FIELD_GROUP_HIDE:
+                            this.fieldGroupHide(action.props.groupKey);
+                            break;
+                        case EActionKey.FIELD_GROUP_SHOW:
+                            this.fieldGroupShow(action.props.groupKey);
+                            break;
+                        case EActionKey.FIELD_GROUP_ENABLE:
+                            this.fieldGroupEnable(action.props.groupKey);
+                            break;
+                        case EActionKey.FIELD_GROUP_DISABLE:
+                            this.fieldGroupDisable(action.props.groupKey);
+                            break;
+                        default:
+                            break;
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
         KwikIDFormViewComponent.prototype.takeAction = function (action, field, allFormsData, formData, previousFormData) {
             return __awaiter(this, void 0, void 0, function () {
                 var _a, sources, sourceValue;
@@ -2876,7 +3131,7 @@
         return KwikIDFormViewComponent;
     }());
     /** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewComponent, deps: [{ token: i4.TuiPushService }, { token: i3.TuiAlertService }, { token: KwikIDFormViewService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", apiCallResponse: "apiCallResponse", isMobileView: "isMobileView", allFormsData: "allFormsData", formsList: "formsList" }, outputs: { onClickViewForms: "onClickViewForms", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall", getActiveFormData: "getActiveFormData" }, providers: [KwikIDFormViewService], usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n  class=\"kwikid-form-container\"\r\n  *ngIf=\"!this.loading\"\r\n>\r\n  <div id=\"uf-form-fields-header-container\">\r\n    <div id=\"uf-form-fields-title\">\r\n      {{ this.formConfig.title }}\r\n    </div>\r\n    <div id=\"uf-form-fields-steps\">\r\n      Step {{ this.formConfig.sequenceNo }} of {{ this.formsList.length }}\r\n    </div>\r\n    <hr />\r\n  </div>\r\n  <form\r\n    class=\"kwikid-form show\"\r\n    [formGroup]=\"this.formGroup\"\r\n  >\r\n    <ng-container *ngFor=\"let field of this.formFields; let i = index\">\r\n      <ng-container [ngSwitch]=\"field.type\">\r\n        <!-- Form Title -->\r\n        <ng-container *ngSwitchCase=\"'title'\">\r\n          <div\r\n            class=\"title\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <div>\r\n              {{ field.label }}\r\n            </div>\r\n            <kwikui-button\r\n              *ngIf=\"field?.reset\"\r\n              appearance=\"whiteblock\"\r\n              size=\"s\"\r\n              label=\"Reset\"\r\n              (onClick)=\"this.handleOnClickResetFormFields($event, field)\"\r\n            ></kwikui-button>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Text -->\r\n        <ng-container *ngSwitchCase=\"'text'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-input\r\n              [case]=\"field?.properties?.case\"\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field.label\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [type]=\"'text'\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Checkbox -->\r\n        <ng-container *ngSwitchCase=\"'checkbox'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-checkbox-block\r\n              [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.properties?.placeholder\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [size]=\"field?.properties?.size ?? 'l'\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-checkbox-block\r\n            ><kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Number -->\r\n        <ng-container *ngSwitchCase=\"'number'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-input-number\r\n              [decimal]=\"field?.properties?.decimal\"\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.label\"\r\n              [max]=\"field?.properties?.max\"\r\n              [min]=\"field?.properties?.min\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [postfix]=\"field?.properties?.postfix ?? ''\"\r\n              [precision]=\"field?.properties?.precision\"\r\n              [prefix]=\"field?.properties?.prefix ?? ''\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-number\r\n            ><kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Date -->\r\n        <ng-container *ngSwitchCase=\"'date'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-input-date\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field.label\"\r\n              [max]=\"field?.properties?.max\"\r\n              [min]=\"field?.properties?.min\"\r\n              [placeholder]=\"field?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-date>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Phone -->\r\n        <ng-container *ngSwitchCase=\"'phone'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-input-phone\r\n              [countryCode]=\"field?.properties?.countryCode\"\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.label\"\r\n              [phoneMaskAfterCountryCode]=\"\r\n                field?.properties?.phoneMaskAfterCountryCode\r\n              \"\r\n              [placeholder]=\"field?.placeholder\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-phone>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Radio -->\r\n        <ng-container *ngSwitchCase=\"'radio'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <label\r\n              [tuiLabel]=\"labelTemplate\"\r\n              style=\"min-height: auto\"\r\n            >\r\n              <kwikui-radio-list\r\n                [disabled]=\"field?.disabled\"\r\n                [focus]=\"field?.focus\"\r\n                [formControl]=\"formGroup.controls[field.key]\"\r\n                [formControlName]=\"field.key\"\r\n                [id]=\"field.key\"\r\n                [invalid]=\"field?.invalid\"\r\n                [items]=\"field?.options\"\r\n                [label]=\"field?.label\"\r\n                [orientation]=\"field?.properties?.orientation\"\r\n                [placeholder]=\"field?.placeholder\"\r\n                [properties]=\"field?.properties\"\r\n                [size]=\"field?.properties?.size\"\r\n                [validators]=\"field?.validators\"\r\n                (getKeyValue)=\"handleGetKeyValue($event)\"\r\n              ></kwikui-radio-list>\r\n            </label>\r\n            <ng-template #labelTemplate>\r\n              <p\r\n                class=\"tui-space_bottom-2\"\r\n                [hidden]=\"field?.hidden\"\r\n                id=\"field_{{ field.key }}\"\r\n              >\r\n                <b>\r\n                  {{ field.label }}\r\n                  <span *ngIf=\"field.validators?.required\"></span>\r\n                </b>\r\n              </p>\r\n            </ng-template>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Dropdown -->\r\n        <ng-container *ngSwitchCase=\"'dropdown-with-search'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-select-combobox\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field.label\"\r\n              [options]=\"field.options\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-select-combobox>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- API Call -->\r\n        <ng-container *ngSwitchCase=\"'api-call'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-button-api-call\r\n              [apiStatus]=\"field?.api?.status?.value\"\r\n              [class]=\"field?.class\"\r\n              [disabled]=\"field?.disabled\"\r\n              [id]=\"field.key\"\r\n              [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\r\n              [showLoader]=\"field?.disabled === 'loading'\"\r\n              shape=\"null\"\r\n              size=\"m\"\r\n              styles=\"width: fit-content\"\r\n              (onClick)=\"this.handleOnClickApiCall($event)\"\r\n            ></kwikui-button-api-call>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Mobile OTP -->\r\n        <ng-container *ngSwitchCase=\"'otp'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-input-otp\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.label\"\r\n              [mask]=\"field?.properties?.mask\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-otp>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Aadhaar Number -->\r\n        <ng-container *ngSwitchCase=\"'aadhaar-number'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-input-aadhaar\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.label\"\r\n              [placeholder]=\"field?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-aadhaar>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </form>\r\n  <div class=\"kwikid-form-buttons\">\r\n    <kwikui-button\r\n      *ngIf=\"this.isMobileView\"\r\n      [disabled]=\"viewFormsButton.disabled\"\r\n      id=\"\"\r\n      label=\"View Forms\"\r\n      [showLoader]=\"viewFormsButton.showLoader\"\r\n      styles=\"\"\r\n      class=\"\"\r\n      type=\"button\"\r\n      appearance=\"secondary\"\r\n      icon=\"\"\r\n      iconRight=\"\"\r\n      shape=\"null\"\r\n      size=\"m\"\r\n      styles=\"width: 100%\"\r\n      (onClick)=\"this.handleOnClickViewForms($event)\"\r\n    ></kwikui-button>\r\n    <kwikui-button\r\n      [disabled]=\"saveFormButton.disabled\"\r\n      id=\"\"\r\n      label=\"Save\"\r\n      [showLoader]=\"saveFormButton.showLoader\"\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)=\"this.handleOnClickSaveForm($event)\"\r\n    ></kwikui-button>\r\n  </div>\r\n</div>\r\n<div\r\n  class=\"kwikid-form-container-loading\"\r\n  *ngIf=\"this.loading\"\r\n>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n</div>\r\n<tui-push\r\n  id=\"field-error-notification\"\r\n  *tuiPush=\"showErrorNotification\"\r\n  heading=\"Missing/Incorrect Fields!\"\r\n  type=\"Error\"\r\n  (close)=\"toggleErrorNotification(false)\"\r\n>\r\n  <tui-svg\r\n    src=\"tuiIconCancel\"\r\n    style=\"color: #fff !important\"\r\n  >\r\n  </tui-svg>\r\n</tui-push>\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}.kwikid-form-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}.kwikid-form.show{width:100%;height:100%;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-row-gap:1rem;row-gap:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-column-gap:10px;column-gap:10px}.kwikid-form-buttons *{flex-grow:1}#uf-form-fields-header-container{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start;grid-row-gap:.5rem;row-gap:.5rem;padding:1rem}#uf-form-fields-header-container hr{width:100%}#uf-form-fields-title{color:#000;font-size:1.75em;font-weight:bold}#uf-form-fields-steps{color:var(--color-on-secondary-container);font-size:1em}.title{border-left:.25rem solid var(--tui-primary);padding:.75rem;font-size:1.4em;font-weight:bold;background-color:var(--tui-secondary);display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-gap:.5rem;gap:.5rem}.title:not(:first-child){margin-top:.5rem}.large-wrapper{width:100%;height:60px}.large-wrapper:first-child{margin-bottom:auto}.large-wrapper:last-child{margin-top:auto}.kwikid-form-container-loading{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;grid-row-gap:1rem;row-gap:1rem;padding:1rem}#field-error-notification{background-color:var(--tui-error-fill);color:#fff!important}#field-error-notification .t-top{color:#fff!important}#field-error-notification .t-close{color:#fff!important}\n"], components: [{ type: i2__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i2__namespace.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i2__namespace.KwikUICheckboxBlockComponent, selector: "kwikui-checkbox-block", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "contentAlign", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "min", "max", "prefix", "postfix", "precision", "decimal", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "min", "max", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "countryCode", "phoneMaskAfterCountryCode", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3__namespace.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i2__namespace.KwikUIRadioListComponent, selector: "kwikui-radio-list", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "items", "orientation", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i2__namespace.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i4__namespace.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4__namespace.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4__namespace.TuiPushDirective, selector: "tui-push" }] });
+    /** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", apiCallResponse: "apiCallResponse", isMobileView: "isMobileView", allFormsData: "allFormsData", formsList: "formsList" }, outputs: { onClickViewForms: "onClickViewForms", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall", getActiveFormData: "getActiveFormData" }, providers: [KwikIDFormViewService], usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n  class=\"kwikid-form-container\"\r\n  *ngIf=\"!this.loading\"\r\n>\r\n  <div id=\"uf-form-fields-header-container\">\r\n    <div id=\"uf-form-fields-title\">\r\n      {{ this.formConfig.title }}\r\n    </div>\r\n    <div id=\"uf-form-fields-steps\">\r\n      Step {{ this.formConfig.sequenceNo }} of {{ this.formsList.length }}\r\n    </div>\r\n    <hr />\r\n  </div>\r\n  <form\r\n    class=\"kwikid-form show\"\r\n    [formGroup]=\"this.formGroup\"\r\n  >\r\n    <ng-container *ngFor=\"let field of this.formFields; let i = index\">\r\n      <ng-container [ngSwitch]=\"field.type\">\r\n        <!-- Form Title -->\r\n        <ng-container *ngSwitchCase=\"'title'\">\r\n          <div\r\n            class=\"title\"\r\n            [class.hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <div>\r\n              {{ field.label }}\r\n            </div>\r\n            <kwikui-button\r\n              *ngIf=\"field?.reset\"\r\n              appearance=\"whiteblock\"\r\n              size=\"s\"\r\n              label=\"Reset\"\r\n              (onClick)=\"this.handleOnClickResetFormFields($event, field)\"\r\n            ></kwikui-button>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Text -->\r\n        <ng-container *ngSwitchCase=\"'text'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-input\r\n              [case]=\"field?.properties?.case\"\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field.label\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [type]=\"'text'\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Checkbox -->\r\n        <ng-container *ngSwitchCase=\"'checkbox'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-checkbox-block\r\n              [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.properties?.placeholder\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [size]=\"field?.properties?.size ?? 'l'\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-checkbox-block\r\n            ><kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Number -->\r\n        <ng-container *ngSwitchCase=\"'number'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-input-number\r\n              [decimal]=\"field?.properties?.decimal\"\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.label\"\r\n              [max]=\"field?.properties?.max\"\r\n              [min]=\"field?.properties?.min\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [postfix]=\"field?.properties?.postfix ?? ''\"\r\n              [precision]=\"field?.properties?.precision\"\r\n              [prefix]=\"field?.properties?.prefix ?? ''\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-number\r\n            ><kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Date -->\r\n        <ng-container *ngSwitchCase=\"'date'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-input-date\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field.label\"\r\n              [max]=\"field?.properties?.max\"\r\n              [min]=\"field?.properties?.min\"\r\n              [placeholder]=\"field?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-date>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Phone -->\r\n        <ng-container *ngSwitchCase=\"'phone'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-input-phone\r\n              [countryCode]=\"field?.properties?.countryCode\"\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.label\"\r\n              [phoneMaskAfterCountryCode]=\"\r\n                field?.properties?.phoneMaskAfterCountryCode\r\n              \"\r\n              [placeholder]=\"field?.placeholder\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-phone>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Radio -->\r\n        <ng-container *ngSwitchCase=\"'radio'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <label\r\n              [tuiLabel]=\"labelTemplate\"\r\n              style=\"min-height: auto\"\r\n            >\r\n              <kwikui-radio-list\r\n                [disabled]=\"field?.disabled\"\r\n                [focus]=\"field?.focus\"\r\n                [formControl]=\"formGroup.controls[field.key]\"\r\n                [formControlName]=\"field.key\"\r\n                [id]=\"field.key\"\r\n                [invalid]=\"field?.invalid\"\r\n                [items]=\"field?.options\"\r\n                [label]=\"field?.label\"\r\n                [orientation]=\"field?.properties?.orientation\"\r\n                [placeholder]=\"field?.properties?.placeholder\"\r\n                [properties]=\"field?.properties\"\r\n                [size]=\"field?.properties?.size\"\r\n                [validators]=\"field?.validators\"\r\n                (getKeyValue)=\"handleGetKeyValue($event)\"\r\n              ></kwikui-radio-list>\r\n            </label>\r\n            <ng-template #labelTemplate>\r\n              <p\r\n                class=\"tui-space_bottom-2\"\r\n                [hidden]=\"field?.hidden\"\r\n                id=\"field_{{ field.key }}\"\r\n              >\r\n                <b>\r\n                  {{ field.label }}\r\n                  <span *ngIf=\"field.validators?.required\"></span>\r\n                </b>\r\n              </p>\r\n            </ng-template>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Dropdown -->\r\n        <ng-container *ngSwitchCase=\"'dropdown-with-search'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-select-combobox\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field.label\"\r\n              [options]=\"field.options\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-select-combobox>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- API Call -->\r\n        <ng-container *ngSwitchCase=\"'api-call'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-button-api-call\r\n              [apiStatus]=\"field?.api?.status?.value\"\r\n              [class]=\"field?.class\"\r\n              [disabled]=\"field?.disabled\"\r\n              [id]=\"field.key\"\r\n              [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\r\n              [showLoader]=\"field?.disabled === 'loading'\"\r\n              shape=\"null\"\r\n              size=\"m\"\r\n              styles=\"width: fit-content\"\r\n              (onClick)=\"this.handleOnClickApiCall($event)\"\r\n            ></kwikui-button-api-call>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Mobile OTP -->\r\n        <ng-container *ngSwitchCase=\"'otp'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-input-otp\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.label\"\r\n              [mask]=\"field?.properties?.mask\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-otp>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Aadhaar Number -->\r\n        <ng-container *ngSwitchCase=\"'aadhaar-number'\">\r\n          <div\r\n            [hidden]=\"field?.hidden\"\r\n            id=\"field_{{ field.key }}\"\r\n          >\r\n            <kwikui-input-aadhaar\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.label\"\r\n              [placeholder]=\"field?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-aadhaar>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </form>\r\n  <div class=\"kwikid-form-buttons\">\r\n    <kwikui-button\r\n      *ngIf=\"this.isMobileView\"\r\n      [disabled]=\"viewFormsButton.disabled\"\r\n      id=\"\"\r\n      label=\"View Forms\"\r\n      [showLoader]=\"viewFormsButton.showLoader\"\r\n      styles=\"\"\r\n      class=\"\"\r\n      type=\"button\"\r\n      appearance=\"secondary\"\r\n      icon=\"\"\r\n      iconRight=\"\"\r\n      shape=\"null\"\r\n      size=\"m\"\r\n      styles=\"width: 100%\"\r\n      (onClick)=\"this.handleOnClickViewForms($event)\"\r\n    ></kwikui-button>\r\n    <kwikui-button\r\n      [disabled]=\"saveFormButton.disabled\"\r\n      id=\"\"\r\n      label=\"Save\"\r\n      [showLoader]=\"saveFormButton.showLoader\"\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)=\"this.handleOnClickSaveForm($event)\"\r\n    ></kwikui-button>\r\n  </div>\r\n</div>\r\n<div\r\n  class=\"kwikid-form-container-loading\"\r\n  *ngIf=\"this.loading\"\r\n>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n</div>\r\n<tui-push\r\n  id=\"field-error-notification\"\r\n  *tuiPush=\"showErrorNotification\"\r\n  heading=\"Missing/Incorrect Fields!\"\r\n  type=\"Error\"\r\n  (close)=\"toggleErrorNotification(false)\"\r\n>\r\n  <tui-svg\r\n    src=\"tuiIconCancel\"\r\n    style=\"color: #fff !important\"\r\n  >\r\n  </tui-svg>\r\n</tui-push>\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}.kwikid-form-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}.kwikid-form.show{width:100%;height:100%;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-row-gap:1rem;row-gap:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-column-gap:10px;column-gap:10px}.kwikid-form-buttons *{flex-grow:1}#uf-form-fields-header-container{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start;grid-row-gap:.5rem;row-gap:.5rem;padding:1rem}#uf-form-fields-header-container hr{width:100%}#uf-form-fields-title{color:#000;font-size:1.75em;font-weight:bold}#uf-form-fields-steps{color:var(--color-on-secondary-container);font-size:1em}.title{border-left:.25rem solid var(--tui-primary);padding:.75rem;font-size:1.4em;font-weight:bold;background-color:var(--tui-secondary);display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-gap:.5rem;gap:.5rem}.title:not(:first-child){margin-top:.5rem}.title.hidden{display:none}.large-wrapper{width:100%;height:60px}.large-wrapper:first-child{margin-bottom:auto}.large-wrapper:last-child{margin-top:auto}.kwikid-form-container-loading{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;grid-row-gap:1rem;row-gap:1rem;padding:1rem}#field-error-notification{background-color:var(--tui-error-fill);color:#fff!important}#field-error-notification .t-top{color:#fff!important}#field-error-notification .t-close{color:#fff!important}\n"], components: [{ type: i2__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i2__namespace.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i2__namespace.KwikUICheckboxBlockComponent, selector: "kwikui-checkbox-block", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "contentAlign", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "prefix", "postfix", "precision", "decimal", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "countryCode", "phoneMaskAfterCountryCode", "removeCountryCodeFromValue", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3__namespace.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i2__namespace.KwikUIRadioListComponent, selector: "kwikui-radio-list", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "orientation", "items", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i2__namespace.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i4__namespace.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4__namespace.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4__namespace.TuiPushDirective, selector: "tui-push" }] });
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "ngOnInit", null);
@@ -2892,9 +3147,18 @@
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "setFormFieldsFromFormConfig", null);
+    __decorate([
+        log
+    ], KwikIDFormViewComponent.prototype, "setFormFieldGroupsFromFormConfig", null);
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "setFormDataFromAllFormsData", null);
+    __decorate([
+        log
+    ], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldGroupActions", null);
+    __decorate([
+        log
+    ], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldGroup", null);
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldActions", null);
@@ -2925,15 +3189,27 @@
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "fieldHide", null);
+    __decorate([
+        log
+    ], KwikIDFormViewComponent.prototype, "fieldGroupHide", null);
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "fieldShow", null);
+    __decorate([
+        log
+    ], KwikIDFormViewComponent.prototype, "fieldGroupShow", null);
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "fieldDisable", null);
+    __decorate([
+        log
+    ], KwikIDFormViewComponent.prototype, "fieldGroupDisable", null);
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "fieldEnable", null);
+    __decorate([
+        log
+    ], KwikIDFormViewComponent.prototype, "fieldGroupEnable", null);
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "fieldReset", null);
@@ -2967,6 +3243,9 @@
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "handleFieldTypeSearchText", null);
+    __decorate([
+        log
+    ], KwikIDFormViewComponent.prototype, "takeActionOnFieldGroup", null);
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "takeAction", null);
@@ -3006,7 +3285,7 @@
                     type: i0.Output
                 }], getActiveFormData: [{
                     type: i0.Output
-                }], ngOnInit: [], ngAfterViewInit: [], ngOnChanges: [], initFormConfig: [], setFormFieldsFromFormConfig: [], setFormDataFromAllFormsData: [], handleConnectedElementFieldActions: [], handleConnectedElementFields: [], handleConnectedElements: [], handleGetKeyValue: [], handleOnClickResetFormFields: [], handleOnClickApiCall: [], handleOnClickViewForms: [], handleOnClickSaveForm: [], toggleErrorNotification: [], fieldHide: [], fieldShow: [], fieldDisable: [], fieldEnable: [], fieldReset: [], fieldErrorShow: [], fieldErrorHide: [], fieldMessageShow: [], fieldMessageHide: [], setObjectValue: [], patchFieldControlValue: [], isFieldValid: [], isFieldEnabled: [], getFormGroupRawValues: [], handleFieldTypeSearchText: [], takeAction: [] } });
+                }], ngOnInit: [], ngAfterViewInit: [], ngOnChanges: [], initFormConfig: [], setFormFieldsFromFormConfig: [], setFormFieldGroupsFromFormConfig: [], setFormDataFromAllFormsData: [], handleConnectedElementFieldGroupActions: [], handleConnectedElementFieldGroup: [], handleConnectedElementFieldActions: [], handleConnectedElementFields: [], handleConnectedElements: [], handleGetKeyValue: [], handleOnClickResetFormFields: [], handleOnClickApiCall: [], handleOnClickViewForms: [], handleOnClickSaveForm: [], toggleErrorNotification: [], fieldHide: [], fieldGroupHide: [], fieldShow: [], fieldGroupShow: [], fieldDisable: [], fieldGroupDisable: [], fieldEnable: [], fieldGroupEnable: [], fieldReset: [], fieldErrorShow: [], fieldErrorHide: [], fieldMessageShow: [], fieldMessageHide: [], setObjectValue: [], patchFieldControlValue: [], isFieldValid: [], isFieldEnabled: [], getFormGroupRawValues: [], handleFieldTypeSearchText: [], takeActionOnFieldGroup: [], takeAction: [] } });
 
     var hasKey = function (object, key) {
         return object.hasOwnProperty(key);
@@ -3439,11 +3718,6 @@
             var _this = this;
             var updateOnFieldType = function (field) {
                 var formatFieldTypeTitle = function (field) {
-                    var fieldKey = field.type + "_" + field.label
-                        .split(" ")
-                        .join("_")
-                        .toLocaleLowerCase();
-                    field = _this.setFieldKeyValue(field, "key", fieldKey);
                     field = _this.setFieldKeyValue(field, "hidden", false);
                     return field;
                 };
@@ -3452,7 +3726,14 @@
                     field.properties = _this.setMissingFieldKeyValue(field.properties, "orientation", "vertical");
                     field = _this.setFieldKeyValue(field, "hidden", false);
                     field.options = field.options.map(function (x) {
-                        return { label: x, disabled: false };
+                        if (typeof x === "string" || typeof x === "number") {
+                            return { label: x, disabled: false };
+                        }
+                        else {
+                            if (hasKey$2(x, "label") && hasKey$2(x, "disabled")) {
+                                return x;
+                            }
+                        }
                     });
                     return field;
                 };
@@ -3948,11 +4229,27 @@
                 }
                 return formConfig;
             };
+            var setFormFieldGroups = function (formConfig, groups) {
+                formConfig["fieldGroups"] = groups;
+                return formConfig;
+            };
+            var updateFormFieldGroups = function (fieldGroups, field) {
+                if (hasKey$2(field, "groupKey")) {
+                    if (hasKey$2(fieldGroups, field.groupKey)) {
+                        fieldGroups[field.groupKey].push(field.key);
+                    }
+                    else {
+                        fieldGroups[field.groupKey] = [field.key];
+                    }
+                }
+                return fieldGroups;
+            };
             var connectedFieldMapping = {
                 parent: {},
                 child: {}
             };
             var fields = this.getFormFields(formConfig);
+            var fieldGroups = {};
             try {
                 for (var fields_1 = __values(fields), fields_1_1 = fields_1.next(); !fields_1_1.done; fields_1_1 = fields_1.next()) {
                     var field = fields_1_1.value;
@@ -3963,6 +4260,7 @@
                     //   connectedFieldMapping
                     // );
                     // field = updateConnectedElementsKeyValue(field, connectedFieldMapping);
+                    fieldGroups = updateFormFieldGroups(fieldGroups, field);
                     field = updateFieldDefaultValueConfig(field);
                     field = updateFieldValidatorConfig(field);
                     field = updateFieldResetButton(field);
@@ -3976,6 +4274,7 @@
                 }
                 finally { if (e_1) throw e_1.error; }
             }
+            formConfig = setFormFieldGroups(formConfig, fieldGroups);
             formConfig = setFormFields(formConfig, fields);
             return formConfig;
         };
@@ -4112,12 +4411,39 @@
             }
             return formsList;
         };
+        KwikIDRendererService.prototype.filterAllFormsData = function (allFormsData, formsList) {
+            var e_4, _a, _b;
+            var currentUserFormAllFormsData = {};
+            try {
+                for (var formsList_4 = __values(formsList), formsList_4_1 = formsList_4.next(); !formsList_4_1.done; formsList_4_1 = formsList_4.next()) {
+                    var form = formsList_4_1.value;
+                    if (hasKey$2(allFormsData, form.key)) {
+                        currentUserFormAllFormsData = Object.assign(Object.assign({}, currentUserFormAllFormsData), (_b = {}, _b[form.key] = allFormsData[form.key], _b));
+                    }
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (formsList_4_1 && !formsList_4_1.done && (_a = formsList_4.return)) _a.call(formsList_4);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            return currentUserFormAllFormsData;
+        };
         KwikIDRendererService.prototype.updateFormsList = function () {
             var formsList = this.formsList;
             var formsListCompleted;
             var activeFormConfig;
             formsList = this.assignSequenceNoToForm(formsList);
-            formsListCompleted = this.findCompletedFormsList(this.allFormsData);
+            /**
+             * Below code identifies the allFormsData required for the current User Form.
+             * Why? Because allFormsData will actually contain the whole journey's all
+             * possible User Form steps. So, it is important to set the form data which
+             * this particular User Form only has to LOCAL METHOD Variable.
+             */
+            var currentUserFormAllFormsData = this.filterAllFormsData(this.allFormsData, formsList);
+            formsListCompleted = this.findCompletedFormsList(currentUserFormAllFormsData);
             formsList = this.markFormInFormsListAsCompleted(formsList, formsListCompleted);
             formsList = this.markFormInFormsListAsDisabled(formsList, formsListCompleted);
             if (formsList.length !== formsListCompleted.length) {
@@ -4293,6 +4619,7 @@
             if (this.userConfig.userFormFieldsConfig.validation) {
                 var validations_1 = new Validations(this.userConfig, this.takeAction.bind(this));
                 (function () { return __awaiter(_this, void 0, void 0, function () {
+                    var _this = this;
                     return __generator(this, function (_b) {
                         switch (_b.label) {
                             case 0: return [4 /*yield*/, validations_1.validateField()];
@@ -4303,6 +4630,9 @@
                                 }
                                 else {
                                     this.toggleErrorNotification(true);
+                                    setTimeout(function () {
+                                        _this.toggleErrorNotification(false);
+                                    }, 3000);
                                 }
                                 return [2 /*return*/];
                         }