kwikid-forms 0.0.5 → 0.0.6

package/bundles/kwikid-forms.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/drag-drop'), require('@angular/core'), require('@angular/forms'), require('kwikui'), require('lodash'), require('rxjs/operators'), require('jsonpath'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@angular/common'), require('@angular/animations'), require('@angular/common/http')) :
-    typeof define === 'function' && define.amd ? define('kwikid-forms', ['exports', '@angular/cdk/drag-drop', '@angular/core', '@angular/forms', 'kwikui', 'lodash', 'rxjs/operators', 'jsonpath', '@taiga-ui/cdk', '@taiga-ui/core', '@angular/common', '@angular/animations', '@angular/common/http'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["kwikid-forms"] = {}, global.ng.cdk.dragDrop, global.ng.core, global.ng.forms, global.i2, global._, global.rxjs.operators, global.jp, global["@taiga-ui/cdk"], global["@taiga-ui/core"], global.ng.common, global.ng.animations, global.ng.common.http));
-})(this, (function (exports, dragDrop, i0, i5, i2, _, operators, jp, cdk, i3, i4, animations, http) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/drag-drop'), require('@angular/core'), require('@angular/forms'), require('kwikui'), require('lodash'), require('@taiga-ui/core'), require('@taiga-ui/kit'), require('rxjs/operators'), require('jsonpath'), require('@taiga-ui/cdk'), require('@angular/common'), require('@angular/animations'), require('@angular/common/http')) :
+    typeof define === 'function' && define.amd ? define('kwikid-forms', ['exports', '@angular/cdk/drag-drop', '@angular/core', '@angular/forms', 'kwikui', 'lodash', '@taiga-ui/core', '@taiga-ui/kit', 'rxjs/operators', 'jsonpath', '@taiga-ui/cdk', '@angular/common', '@angular/animations', '@angular/common/http'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["kwikid-forms"] = {}, global.ng.cdk.dragDrop, global.ng.core, global.ng.forms, global.i2, global._, global["@taiga-ui/core"], global["@taiga-ui/kit"], global.rxjs.operators, global.jp, global["@taiga-ui/cdk"], global.ng.common, global.ng.animations, global.ng.common.http));
+})(this, (function (exports, dragDrop, i0, i6, i2, _, i3, i4, operators, jp, cdk, i5, animations, http) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,12 +25,13 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
-    var jp__default = /*#__PURE__*/_interopDefaultLegacy(jp);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var jp__default = /*#__PURE__*/_interopDefaultLegacy(jp);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -394,7 +395,7 @@
                     required: true
                 }
             };
-            this.formGroup = new i5.FormGroup({});
+            this.formGroup = new i6.FormGroup({});
             this.name = "Angular " + i0.VERSION.major;
             this.menu = [
                 {
@@ -454,10 +455,10 @@
                 var clone = _.cloneDeep(event.previousContainer.data[event.previousIndex]);
                 clone.id = clone.key + "__" + this.revisedRandId();
                 event.previousContainer.data[event.previousIndex] = clone;
-                var newFormGroup_1 = new i5.FormGroup({});
+                var newFormGroup_1 = new i6.FormGroup({});
                 var props_1 = clone.props;
                 Object.keys(props_1).forEach(function (key) {
-                    newFormGroup_1.addControl(key, new i5.FormControl({ value: props_1[key], disabled: false }));
+                    newFormGroup_1.addControl(key, new i6.FormControl({ value: props_1[key], disabled: false }));
                 });
                 this.formGroup.addControl(clone.id, newFormGroup_1);
                 dragDrop.copyArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
@@ -932,7 +933,7 @@
         return value;
     };
 
-    var Condition = /** @class */ (function () {
+    var Condition$1 = /** @class */ (function () {
         function Condition(condition, rulesMapping) {
             this._condition = condition;
             this._rulesMapping = rulesMapping;
@@ -974,9 +975,9 @@
     }());
     __decorate([
         log
-    ], Condition.prototype, "evaluate", null);
+    ], Condition$1.prototype, "evaluate", null);
 
-    var Actions = /** @class */ (function () {
+    var Actions$1 = /** @class */ (function () {
         function Actions(action, field, ruleMapping, allFormsData, formData, previousFormData, takeAction) {
             this._action = action;
             this._field = field;
@@ -990,7 +991,7 @@
             return __awaiter(this, void 0, void 0, function () {
                 var condition, actionSuccess;
                 return __generator(this, function (_a) {
-                    condition = new Condition(this._action.condition, this._ruleMapping);
+                    condition = new Condition$1(this._action.condition, this._ruleMapping);
                     actionSuccess = condition.evaluate();
                     if (actionSuccess) {
                         return [2 /*return*/, this._takeAction(this._action, this._field, this._allFormsData, this._formData, this._previousFormData)];
@@ -1003,7 +1004,7 @@
     }());
     __decorate([
         log
-    ], Actions.prototype, "execute", null);
+    ], Actions$1.prototype, "execute", null);
 
     var ERuleKey;
     (function (ERuleKey) {
@@ -1020,6 +1021,7 @@
         ESourceKey["ALL_FORMS_DATA"] = "ALL_FORMS_DATA";
         ESourceKey["BROWSER_STORAGE"] = "BROWSER_STORAGE";
         ESourceKey["PREDEFINED"] = "PREDEFINED";
+        ESourceKey["USER_CONFIG"] = "USER_CONFIG";
         ESourceKey["CUSTOM"] = "CUSTOM";
     })(ESourceKey || (ESourceKey = {}));
     var EBrowserStorageType;
@@ -1028,7 +1030,7 @@
         EBrowserStorageType["SESSION_STORAGE"] = "SESSION_STORAGE";
     })(EBrowserStorageType || (EBrowserStorageType = {}));
 
-    var Sources = /** @class */ (function () {
+    var Sources$1 = /** @class */ (function () {
         function Sources(field, formData, previousFormData, allFormsData) {
             this._field = field;
             this._formData = formData;
@@ -1211,12 +1213,12 @@
     }());
     __decorate([
         log
-    ], Sources.prototype, "getValueFromSource", null);
+    ], Sources$1.prototype, "getValueFromSource", null);
     __decorate([
         log
-    ], Sources.prototype, "setValueToSource", null);
+    ], Sources$1.prototype, "setValueToSource", null);
 
-    var Rules = /** @class */ (function () {
+    var Rules$1 = /** @class */ (function () {
         function Rules(rules, field, formData, previousFormData, allFormsData) {
             this._field = field;
             this._formData = formData;
@@ -1230,7 +1232,7 @@
             if (this._field.type === "radio") {
                 this._formData[this._field.key] = this._formData[this._field.key].label;
             }
-            var source = new Sources(this._field, this._formData, this._previousFormData, this._allFormsData);
+            var source = new Sources$1(this._field, this._formData, this._previousFormData, this._allFormsData);
             switch (ruleType) {
                 case ERuleKey.OBJECT_PATH_EXISTS:
                     var ruleObjectPathExists = rule;
@@ -1302,10 +1304,10 @@
     }());
     __decorate([
         log
-    ], Rules.prototype, "evaluate", null);
+    ], Rules$1.prototype, "evaluate", null);
     __decorate([
         log
-    ], Rules.prototype, "mapping", null);
+    ], Rules$1.prototype, "mapping", null);
 
     var Defaults = /** @class */ (function () {
         function Defaults(field, allFormsData, formData, previousFormData, takeAction) {
@@ -1332,7 +1334,7 @@
                         case 2:
                             if (!!sources_1_1.done) return [3 /*break*/, 12];
                             source = sources_1_1.value;
-                            sources_2 = new Sources(this._field, this._formData, this._previousFormData, this._allFormsData);
+                            sources_2 = new Sources$1(this._field, this._formData, this._previousFormData, this._allFormsData);
                             value = sources_2.getValueFromSource(source);
                             // Set the Value of current source.
                             this._field = setValueToObject(this._field, "default.value.sources.[" + sourceIndex + "].value", value);
@@ -1340,7 +1342,7 @@
                             triggers = validation.triggers;
                             rules = validation.rules;
                             actions = validation.actions;
-                            rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+                            rulesMapping = new Rules$1(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
                             _c.label = 3;
                         case 3:
                             _c.trys.push([3, 8, 9, 10]);
@@ -1349,9 +1351,9 @@
                         case 4:
                             if (!!actions_1_1.done) return [3 /*break*/, 7];
                             action = actions_1_1.value;
-                            conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                            conditionEvaluation = new Condition$1(action.condition, rulesMapping).evaluate();
                             if (!conditionEvaluation) return [3 /*break*/, 6];
-                            actions_2 = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                            actions_2 = new Actions$1(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
                             return [4 /*yield*/, actions_2.execute()];
                         case 5:
                             _c.sent();
@@ -1583,39 +1585,26 @@
     };
     var convertValueFromBasicFormatToKwikUIFormat = function (field, value) {
         var convertedValue = value;
-        switch (field.type) {
-            case EFieldType.RADIO:
-                if (hasKey$1(value, "label")) {
-                    convertedValue = value.label;
-                }
-                else {
-                    convertedValue = "";
-                }
-                break;
-            case EFieldType.DATE:
-                if (isNull(value)) {
-                    convertedValue = "";
-                }
-                else {
+        if (isNotEmpty(value)) {
+            switch (field.type) {
+                case EFieldType.RADIO:
+                    if (hasKey$1(value, "label")) {
+                        convertedValue = value.label;
+                    }
+                    break;
+                case EFieldType.DATE:
                     convertedValue = formatDateToStandardFormat(value);
-                }
-                break;
-            case EFieldType.PHONE:
-                var fieldPhone = field;
-                convertedValue = value.replace(String(fieldPhone.properties.countryCode), "");
-                break;
-            case EFieldType.TITLE:
-                break;
-            default:
-                if (isEmpty(value)) {
-                    convertedValue = "";
-                }
-                break;
+                    break;
+                case EFieldType.TITLE:
+                    break;
+                default:
+                    break;
+            }
         }
         return convertedValue;
     };
 
-    var Validations = /** @class */ (function () {
+    var Validations$1 = /** @class */ (function () {
         function Validations(field, formData, previousFormData, allFormsData, takeAction) {
             this._field = field;
             this._formData = formData;
@@ -1668,36 +1657,36 @@
             if (hasKey$1(field, "validators") &&
                 hasKey$1(field.validators, "min") &&
                 isNotEmpty(field.validators.min)) {
-                validators.push(i5.Validators.min(field.validators.min));
+                validators.push(i6.Validators.min(field.validators.min));
             }
             if (hasKey$1(field, "validators") &&
                 hasKey$1(field.validators, "max") &&
                 isNotEmpty(field.validators.max)) {
-                validators.push(i5.Validators.max(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"))) {
-                validators.push(i5.Validators.required);
+                validators.push(i6.Validators.required);
             }
             if (hasKey$1(field, "validators") &&
                 hasKey$1(field.validators, "minLength") &&
                 isNotEmpty(field.validators.minLength)) {
-                validators.push(i5.Validators.minLength(field.validators.minLength));
+                validators.push(i6.Validators.minLength(field.validators.minLength));
             }
             if (hasKey$1(field, "validators") &&
                 hasKey$1(field.validators, "maxLength") &&
                 isNotEmpty(field.validators.maxLength)) {
-                validators.push(i5.Validators.maxLength(field.validators.maxLength));
+                validators.push(i6.Validators.maxLength(field.validators.maxLength));
             }
             if (hasKey$1(field, "validators") &&
                 hasKey$1(field.validators, "pattern") &&
                 isNotEmpty(field.validators.pattern)) {
                 if (hasKey$1(field.validators.pattern, "key")) {
                     if (field.validators.pattern.key === EPatternKey.CUSTOM) {
-                        validators.push(i5.Validators.pattern(field.validators.pattern.pattern));
+                        validators.push(i6.Validators.pattern(field.validators.pattern.pattern));
                     }
                     else {
-                        validators.push(i5.Validators.pattern(EPattern[field.validators.pattern.key]));
+                        validators.push(i6.Validators.pattern(EPattern[field.validators.pattern.key]));
                     }
                 }
             }
@@ -1738,10 +1727,10 @@
                             invalid: false
                         });
                     }
-                    if (control instanceof i5.FormGroup) {
+                    if (control instanceof i6.FormGroup) {
                         recursiveFunc(control);
                     }
-                    else if (control instanceof i5.FormArray) {
+                    else if (control instanceof i6.FormArray) {
                         recursiveFunc(control);
                     }
                 });
@@ -1760,7 +1749,7 @@
                             triggers = validations.triggers;
                             rules = validations.rules;
                             actions = validations.actions;
-                            rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+                            rulesMapping = new Rules$1(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
                             _b.label = 1;
                         case 1:
                             _b.trys.push([1, 6, 7, 8]);
@@ -1769,9 +1758,9 @@
                         case 2:
                             if (!!actions_1_1.done) return [3 /*break*/, 5];
                             action = actions_1_1.value;
-                            conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                            conditionEvaluation = new Condition$1(action.condition, rulesMapping).evaluate();
                             if (!conditionEvaluation) return [3 /*break*/, 4];
-                            actions_2 = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                            actions_2 = new Actions$1(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
                             return [4 /*yield*/, actions_2.execute()];
                         case 3:
                             _b.sent();
@@ -1799,16 +1788,16 @@
     }());
     __decorate([
         log
-    ], Validations.prototype, "getFieldValidators", null);
+    ], Validations$1.prototype, "getFieldValidators", null);
     __decorate([
         log
-    ], Validations.prototype, "getFormValidationErrors", null);
+    ], Validations$1.prototype, "getFormValidationErrors", null);
     __decorate([
         log
-    ], Validations.prototype, "findInvalidControlsRecursive", null);
+    ], Validations$1.prototype, "findInvalidControlsRecursive", null);
     __decorate([
         log
-    ], Validations.prototype, "validateField", null);
+    ], Validations$1.prototype, "validateField", null);
 
     var KwikIDFormViewService = /** @class */ (function () {
         function KwikIDFormViewService() {
@@ -1816,41 +1805,40 @@
         // 'init' stage of the form
         KwikIDFormViewService.prototype.createFormGroup = function (fields, formData, previousFormData, allFormsData, takeAction) {
             return __awaiter(this, void 0, void 0, function () {
-                var formGroup, fields_1, fields_1_1, field, defaults, value, _a, _b, validators, e_1_1;
-                var e_1, _c;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                var formGroup, fields_1, fields_1_1, field, defaults, value, validators, e_1_1;
+                var e_1, _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            formGroup = new i5.FormGroup({});
-                            _d.label = 1;
+                            formGroup = new i6.FormGroup({});
+                            _b.label = 1;
                         case 1:
-                            _d.trys.push([1, 6, 7, 8]);
+                            _b.trys.push([1, 6, 7, 8]);
                             fields_1 = __values(fields), fields_1_1 = fields_1.next();
-                            _d.label = 2;
+                            _b.label = 2;
                         case 2:
                             if (!!fields_1_1.done) return [3 /*break*/, 5];
                             field = fields_1_1.value;
                             if (!(field.type !== "title")) return [3 /*break*/, 4];
                             defaults = new Defaults(field, allFormsData, formData, previousFormData, takeAction);
-                            _a = convertValueFromBasicFormatToKwikUIFormat;
-                            _b = [field.type];
                             return [4 /*yield*/, defaults.getDefaultValue()];
                         case 3:
-                            value = _a.apply(void 0, _b.concat([_d.sent()]));
-                            validators = new Validations(field, formData, previousFormData, allFormsData, takeAction).getFieldValidators(field);
-                            formGroup.addControl(field.key, new i5.FormControl({ value: value, disabled: field.disabled }, { validators: validators }));
-                            _d.label = 4;
+                            value = _b.sent();
+                            value = convertValueFromBasicFormatToKwikUIFormat(field.type, value);
+                            validators = new Validations$1(field, formData, previousFormData, allFormsData, takeAction).getFieldValidators(field);
+                            formGroup.addControl(field.key, new i6.FormControl({ value: value, disabled: field.disabled }, { validators: validators }));
+                            _b.label = 4;
                         case 4:
                             fields_1_1 = fields_1.next();
                             return [3 /*break*/, 2];
                         case 5: return [3 /*break*/, 8];
                         case 6:
-                            e_1_1 = _d.sent();
+                            e_1_1 = _b.sent();
                             e_1 = { error: e_1_1 };
                             return [3 /*break*/, 8];
                         case 7:
                             try {
-                                if (fields_1_1 && !fields_1_1.done && (_c = fields_1.return)) _c.call(fields_1);
+                                if (fields_1_1 && !fields_1_1.done && (_a = fields_1.return)) _a.call(fields_1);
                             }
                             finally { if (e_1) throw e_1.error; }
                             return [7 /*endfinally*/];
@@ -1905,7 +1893,7 @@
                         case 4:
                             if (!!sources_1_1.done) return [3 /*break*/, 14];
                             source = sources_1_1.value;
-                            sources_2 = new Sources(this._field, this._formData, this._previousFormData, this._allFormsData);
+                            sources_2 = new Sources$1(this._field, this._formData, this._previousFormData, this._allFormsData);
                             value = sources_2.getValueFromSource(source);
                             // Set the Value of current source.
                             this._field = setValueToObject(this._field, "api.request.body.params[" + paramIndex + "].sources[" + sourceIndex + "].value", value);
@@ -1913,7 +1901,7 @@
                             triggers = (_a = validation === null || validation === void 0 ? void 0 : validation.triggers) !== null && _a !== void 0 ? _a : [];
                             rules = (_b = validation === null || validation === void 0 ? void 0 : validation.rules) !== null && _b !== void 0 ? _b : [];
                             actions = (_c = validation === null || validation === void 0 ? void 0 : validation.actions) !== null && _c !== void 0 ? _c : [];
-                            rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+                            rulesMapping = new Rules$1(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
                             _g.label = 5;
                         case 5:
                             _g.trys.push([5, 10, 11, 12]);
@@ -1922,9 +1910,9 @@
                         case 6:
                             if (!!actions_1_1.done) return [3 /*break*/, 9];
                             action = actions_1_1.value;
-                            conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                            conditionEvaluation = new Condition$1(action.condition, rulesMapping).evaluate();
                             if (!conditionEvaluation) return [3 /*break*/, 8];
-                            actions_2 = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                            actions_2 = new Actions$1(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
                             return [4 /*yield*/, actions_2.execute()];
                         case 7:
                             _g.sent();
@@ -1994,7 +1982,7 @@
                             triggers = validation.triggers;
                             rules = validation.rules;
                             actions = validation.actions;
-                            rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+                            rulesMapping = new Rules$1(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
                             _e.label = 1;
                         case 1:
                             _e.trys.push([1, 6, 7, 8]);
@@ -2003,9 +1991,9 @@
                         case 2:
                             if (!!actions_3_1.done) return [3 /*break*/, 5];
                             action = actions_3_1.value;
-                            conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                            conditionSuccess = new Condition$1(action.condition, rulesMapping).evaluate();
                             if (!conditionSuccess) return [3 /*break*/, 4];
-                            actions_4 = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                            actions_4 = new Actions$1(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
                             return [4 /*yield*/, actions_4.execute()];
                         case 3:
                             _e.sent();
@@ -2040,7 +2028,7 @@
                             triggers = validation.triggers;
                             rules = validation.rules;
                             actions = validation.actions;
-                            rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+                            rulesMapping = new Rules$1(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
                             _e.label = 1;
                         case 1:
                             _e.trys.push([1, 6, 7, 8]);
@@ -2049,9 +2037,9 @@
                         case 2:
                             if (!!actions_5_1.done) return [3 /*break*/, 5];
                             action = actions_5_1.value;
-                            conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                            conditionSuccess = new Condition$1(action.condition, rulesMapping).evaluate();
                             if (!conditionSuccess) return [3 /*break*/, 4];
-                            actions_6 = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                            actions_6 = new Actions$1(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
                             return [4 /*yield*/, actions_6.execute()];
                         case 3:
                             _e.sent();
@@ -2096,9 +2084,10 @@
     ], Apis.prototype, "validateApiCallResponse", null);
 
     var KwikIDFormViewComponent = /** @class */ (function () {
-        function KwikIDFormViewComponent(formViewService) {
+        function KwikIDFormViewComponent(push, alert, formViewService) {
+            this.push = push;
+            this.alert = alert;
             this.formViewService = formViewService;
-            this.componentThis = this;
             this.apiCallResponse = {};
             this.isMobileView = false;
             this.onClickViewForms = new i0.EventEmitter();
@@ -2116,7 +2105,8 @@
                 disabled: false,
                 showLoader: false
             };
-            this.formGroup = new i5.FormGroup({});
+            this.formGroup = new i6.FormGroup({});
+            this.showErrorNotification = false;
         }
         KwikIDFormViewComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -2286,7 +2276,7 @@
                     switch (_d.label) {
                         case 0:
                             if (!hasKey$1(connectedFieldConfig, "rules")) return [3 /*break*/, 8];
-                            rulesMapping = new Rules(connectedFieldConfig.rules, connectedField, this.formData, this.previousFormData, this.allFormsData).mapping();
+                            rulesMapping = new Rules$1(connectedFieldConfig.rules, connectedField, this.formData, this.previousFormData, this.allFormsData).mapping();
                             _d.label = 1;
                         case 1:
                             _d.trys.push([1, 6, 7, 8]);
@@ -2295,9 +2285,9 @@
                         case 2:
                             if (!!_b.done) return [3 /*break*/, 5];
                             action = _b.value;
-                            conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                            conditionSuccess = new Condition$1(action.condition, rulesMapping).evaluate();
                             if (!conditionSuccess) return [3 /*break*/, 4];
-                            actions = new Actions(action, connectedField, rulesMapping, this.allFormsData, this.formData, this.previousFormData, this.takeAction.bind(this));
+                            actions = new Actions$1(action, connectedField, rulesMapping, this.allFormsData, this.formData, this.previousFormData, this.takeAction.bind(this));
                             return [4 /*yield*/, actions.execute()];
                         case 3:
                             _d.sent();
@@ -2441,7 +2431,7 @@
             var field = findFieldFromKey(this.formFields, e.key);
             if (field.type !== "title" &&
                 field.validation.triggers.includes("ON_CHANGE")) {
-                var validations_1 = new Validations(field, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
+                var validations_1 = new Validations$1(field, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
                 (function () { return __awaiter(_this, void 0, void 0, function () {
                     return __generator(this, function (_a) {
                         switch (_a.label) {
@@ -2480,7 +2470,7 @@
                             if (!!_d.done) return [3 /*break*/, 6];
                             a = _d.value;
                             resetField = findFieldFromKey(this.formFields, a.props.fieldKey);
-                            actions = new Actions(a, resetField, {}, this.allFormsData, this.formData, this.previousFormData, this.takeAction.bind(this));
+                            actions = new Actions$1(a, resetField, {}, this.allFormsData, this.formData, this.previousFormData, this.takeAction.bind(this));
                             return [4 /*yield*/, actions.execute()];
                         case 4:
                             _g.sent();
@@ -2602,7 +2592,7 @@
             var _loop_3 = function (field) {
                 if (field.type !== EFieldType.TITLE &&
                     field.validation.triggers.includes("ON_SAVE")) {
-                    var validations_2 = new Validations(field, formData, this_2.previousFormData, this_2.allFormsData, this_2.takeAction.bind(this_2));
+                    var validations_2 = new Validations$1(field, formData, this_2.previousFormData, this_2.allFormsData, this_2.takeAction.bind(this_2));
                     (function () { return __awaiter(_this, void 0, void 0, function () {
                         return __generator(this, function (_a) {
                             switch (_a.label) {
@@ -2630,7 +2620,7 @@
                 finally { if (e_9) throw e_9.error; }
             }
             if (this.formGroup.invalid) {
-                var controls = new Validations(undefined, formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this)).findInvalidControlsRecursive(this.formGroup);
+                var controls = new Validations$1(undefined, formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this)).findInvalidControlsRecursive(this.formGroup);
                 var firstFieldWithError = "";
                 try {
                     for (var controls_1 = __values(controls), controls_1_1 = controls_1.next(); !controls_1_1.done; controls_1_1 = controls_1.next()) {
@@ -2648,6 +2638,7 @@
                     }
                     finally { if (e_10) throw e_10.error; }
                 }
+                this.toggleErrorNotification(true);
                 return;
             }
             Object.keys(formData).map(function (key) {
@@ -2655,7 +2646,10 @@
                     formData[key] = "";
                 }
             });
-            this.onClickSaveForm.emit({ data: formData });
+            this.onClickSaveForm.emit({ formConfig: this.formConfig, data: formData });
+        };
+        KwikIDFormViewComponent.prototype.toggleErrorNotification = function (show) {
+            this.showErrorNotification = show;
         };
         // Component Helpers
         KwikIDFormViewComponent.prototype.fieldHide = function (fieldKey) {
@@ -2854,7 +2848,7 @@
                             this.fieldMessageHide(action.props.fieldKey, action.props.message);
                             return [3 /*break*/, 15];
                         case 10:
-                            sources = new Sources(field, this.formData, this.previousFormData, this.allFormsData);
+                            sources = new Sources$1(field, this.formData, this.previousFormData, this.allFormsData);
                             return [4 /*yield*/, sources.getValueFromSource(action.props.value.source)];
                         case 11:
                             sourceValue = _b.sent();
@@ -2876,8 +2870,8 @@
         };
         return KwikIDFormViewComponent;
     }());
-    /** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewComponent, deps: [{ 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 class=\"title\">\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 [hidden]=\"field?.hidden\">\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 [hidden]=\"field?.hidden\">\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 [hidden]=\"field?.hidden\">\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 [hidden]=\"field?.hidden\">\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 [hidden]=\"field?.hidden\">\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 [hidden]=\"field?.hidden\">\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              >\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 [hidden]=\"field?.hidden\">\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 [hidden]=\"field?.hidden\">\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 [hidden]=\"field?.hidden\">\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 [hidden]=\"field?.hidden\">\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", 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}\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"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }] });
+    /** @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" }] });
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "ngOnInit", null);
@@ -2920,6 +2914,9 @@
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "handleOnClickSaveForm", null);
+    __decorate([
+        log
+    ], KwikIDFormViewComponent.prototype, "toggleErrorNotification", null);
     __decorate([
         log
     ], KwikIDFormViewComponent.prototype, "fieldHide", null);
@@ -2976,7 +2973,15 @@
                         styleUrls: ["./form-view.component.scss"],
                         providers: [KwikIDFormViewService]
                     }]
-            }], ctorParameters: function () { return [{ type: KwikIDFormViewService }]; }, propDecorators: { formConfig: [{
+            }], ctorParameters: function () {
+            return [{ type: i4__namespace.TuiPushService, decorators: [{
+                            type: i0.Inject,
+                            args: [i4.TuiPushService]
+                        }] }, { type: i3__namespace.TuiAlertService, decorators: [{
+                            type: i0.Inject,
+                            args: [i3.TuiAlertService]
+                        }] }, { type: KwikIDFormViewService }];
+        }, propDecorators: { formConfig: [{
                     type: i0.Input
                 }], formData: [{
                     type: i0.Input
@@ -2996,7 +3001,7 @@
                     type: i0.Output
                 }], getActiveFormData: [{
                     type: i0.Output
-                }], ngOnInit: [], ngAfterViewInit: [], ngOnChanges: [], initFormConfig: [], setFormFieldsFromFormConfig: [], setFormDataFromAllFormsData: [], handleConnectedElementFieldActions: [], handleConnectedElementFields: [], handleConnectedElements: [], handleGetKeyValue: [], handleOnClickResetFormFields: [], handleOnClickApiCall: [], handleOnClickViewForms: [], handleOnClickSaveForm: [], fieldHide: [], fieldShow: [], fieldDisable: [], fieldEnable: [], fieldReset: [], fieldErrorShow: [], fieldErrorHide: [], fieldMessageShow: [], fieldMessageHide: [], setObjectValue: [], patchFieldControlValue: [], isFieldValid: [], isFieldEnabled: [], getFormGroupRawValues: [], handleFieldTypeSearchText: [], takeAction: [] } });
+                }], 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: [] } });
 
     var hasKey = function (object, key) {
         return object.hasOwnProperty(key);
@@ -3067,7 +3072,7 @@
         return KwikIDFormsListComponent;
     }());
     /** @nocollapse */ KwikIDFormsListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: { showFormFields: "showFormFields", userConfig: "userConfig", formsList: "formsList", formsListCompleted: "formsListCompleted", isMobileView: "isMobileView" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", onClickHideFormsList: "onClickHideFormsList", onClickSubmitForms: "onClickSubmitForms" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div id=\"sidebar-container\">\r\n  <div id=\"sidebar\">\r\n    <div ngClass=\"kwikid-form-header\">\r\n      <div id=\"uf-header\">\r\n        <div id=\"uf-header-logo-container\">\r\n          <img\r\n            id=\"uf-header-logo\"\r\n            src=\"{{ this.userConfig.theme.clientLogo }}\"\r\n            [ngClass]=\"'large-icon'\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <hr />\r\n    </div>\r\n    <div id=\"uf-progress\">\r\n      <div id=\"uf-progress-steps\">\r\n        {{ this.formsListCompleted.length }} / {{ this.formsList.length }} Steps\r\n        Completed\r\n      </div>\r\n      <kwikui-progress-segmented\r\n        [max]=\"this.formsList.length\"\r\n        size=\"m\"\r\n        [value]=\"this.formsListCompleted.length\"\r\n      ></kwikui-progress-segmented>\r\n    </div>\r\n    <div id=\"uf-sections-container\">\r\n      <div\r\n        *ngFor=\"let form of formsList; let i = index\"\r\n        [class]=\"'uf-section-item'\"\r\n        [class.completed]=\"form.status === 'completed' && !form.disabled\"\r\n        [class.edit]=\"form.status === 'editable' && !form.disabled\"\r\n        [class.locked]=\"form.status === 'locked' && form.disabled\"\r\n        (click)=\"\r\n          form.status === 'locked' && form.disabled\r\n            ? undefined\r\n            : handleOnClickSetActiveForm(form.key)\r\n        \"\r\n      >\r\n        <div class=\"uf-form-section-card-title\">\r\n          {{ form.title }}\r\n        </div>\r\n        <div class=\"uf-form-section-card-action\">\r\n          <div\r\n            *ngIf=\"form.status === 'completed' && !form.disabled\"\r\n            class=\"uf-form-section-card-action-img completed\"\r\n          >\r\n            <tui-svg src=\"tuiIconCheckLarge\"></tui-svg>\r\n          </div>\r\n          <div\r\n            *ngIf=\"form.status !== 'completed' && !form.disabled\"\r\n            class=\"uf-form-section-card-action-img edit\"\r\n          >\r\n            <tui-svg src=\"tuiIconEdit\"></tui-svg>\r\n          </div>\r\n          <div\r\n            *ngIf=\"form.status !== 'completed' && form.disabled\"\r\n            class=\"uf-form-section-card-action-img locked\"\r\n          >\r\n            <tui-svg src=\"tuiIconLock\"></tui-svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div id=\"submit-sidebar-btn-container\">\r\n      <kwikui-button\r\n        [disabled]=\"false\"\r\n        id=\"\"\r\n        label=\"Submit\"\r\n        [showLoader]=\"false\"\r\n        styles=\"\"\r\n        class=\"\"\r\n        type=\"button\"\r\n        appearance=\"primary\"\r\n        icon=\"\"\r\n        iconRight=\"\"\r\n        shape=\"null\"\r\n        size=\"m\"\r\n        styles=\"width: 100%\"\r\n        (onClick)=\"handleOnSubmitForms($event)\"\r\n      ></kwikui-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}#sidebar-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}#sidebar{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch}.uf-section-item{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-content:center;padding:1rem;grid-gap:1rem;gap:1rem;cursor:pointer;box-shadow:0 .1rem .5rem -.25rem gray;border-radius:.5rem;background-color:var(--tui-base-02)}.uf-section-item:hover{box-shadow:0 .2rem .75rem -.5rem #656565}#submit-sidebar-btn-container{width:100%;bottom:0px;z-index:1;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;gap:1rem}#submit-sidebar-btn-container *{flex-grow:1}#uf-sections-container{display:flex;flex-direction:column;height:100%;grid-row-gap:20px;row-gap:20px;padding:1rem;overflow-y:auto}.uf-form-section-card{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:10px;column-gap:10px;border:none;border-radius:8px;background-color:#e9e9e9;height:-moz-fit-content;height:fit-content;min-height:60px;padding:10px 15px;width:100%;max-width:350px;margin:0 auto}.uf-section-item.locked{-webkit-user-select:none;user-select:none;cursor:not-allowed}.uf-form-section-card .uf-form-section-card-title{font-size:1.2em;text-align:left;line-height:1.25em}.uf-form-section-card .uf-form-section-card-action{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.uf-form-section-card .uf-form-section-card-action .uf-form-section-card-action-img{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;border-radius:100%;color:#fff;font-weight:bold}.uf-form-section-card-action-img.completed{background-color:#228b22;padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-action-img.edit{background-color:#dc143c;padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-action-img.locked{background-color:gray;padding:.25rem;border-radius:50%;color:#fff}#uf-progress{display:flex;padding:1rem;flex-direction:column;align-content:center;justify-content:center;align-items:stretch;grid-gap:.5rem;gap:.5rem}#uf-progress-steps{font-size:1em;text-align:right;color:#3d3d3d}.uf-form-section-card-title{font-size:1em;font-weight:bold;color:#121212}@media screen and (max-width: 600px){#sidebar-container{max-width:unset}}.kwikid-form-header{height:70px;z-index:6}.kwikid-form-header hr{width:calc(100% - 1rem);margin-left:auto;margin-right:auto}#uf-header{display:flex;flex-direction:row;align-content:center;align-items:center;justify-content:flex-start;grid-column-gap:10px;column-gap:10px;padding:10px 20px;width:100%;max-width:calc(400px + 50vw + 2rem);margin:0 auto;height:70px;z-index:1}#uf-header #uf-header-goback-container{display:none}#uf-header #uf-header-goback-container:hover{border-radius:50%;background-color:#d3d3d3}#uf-header #uf-header-goback-container #uf-header-goback{width:100%;height:auto}#uf-header #uf-header-logo-container{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}#uf-header #uf-header-logo-container #uf-header-logo.small-icon{width:100%;height:50px}#uf-header #uf-header-logo-container #uf-header-logo.large-icon{width:100%;height:50px}#uf-header #uf-header-title-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;grid-row-gap:4px;row-gap:4px}#uf-header #uf-header-title-container #uf-header-title{font-size:1.4em;color:#121212}#uf-header #uf-header-title-container #uf-header-subtitle{font-size:1.2em;color:#121212}\n"], components: [{ type: i2__namespace.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["value", "max", "size", "colors"] }, { type: i3__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    /** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: { showFormFields: "showFormFields", userConfig: "userConfig", formsList: "formsList", formsListCompleted: "formsListCompleted", isMobileView: "isMobileView" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", onClickHideFormsList: "onClickHideFormsList", onClickSubmitForms: "onClickSubmitForms" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div id=\"sidebar-container\">\r\n  <div id=\"sidebar\">\r\n    <div ngClass=\"kwikid-form-header\">\r\n      <div id=\"uf-header\">\r\n        <div id=\"uf-header-logo-container\">\r\n          <img\r\n            id=\"uf-header-logo\"\r\n            src=\"{{ this.userConfig.theme.clientLogo }}\"\r\n            [ngClass]=\"'large-icon'\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <hr />\r\n    </div>\r\n    <div id=\"uf-progress\">\r\n      <div id=\"uf-progress-steps\">\r\n        {{ this.formsListCompleted.length }} / {{ this.formsList.length }} Steps\r\n        Completed\r\n      </div>\r\n      <kwikui-progress-segmented\r\n        [max]=\"this.formsList.length\"\r\n        size=\"m\"\r\n        [value]=\"this.formsListCompleted.length\"\r\n      ></kwikui-progress-segmented>\r\n    </div>\r\n    <div id=\"uf-sections-container\">\r\n      <div\r\n        *ngFor=\"let form of formsList; let i = index\"\r\n        [class]=\"'uf-section-item'\"\r\n        [class.completed]=\"form.status === 'completed' && !form.disabled\"\r\n        [class.edit]=\"form.status === 'editable' && !form.disabled\"\r\n        [class.locked]=\"form.status === 'locked' && form.disabled\"\r\n        (click)=\"\r\n          form.status === 'locked' && form.disabled\r\n            ? undefined\r\n            : handleOnClickSetActiveForm(form.key)\r\n        \"\r\n      >\r\n        <div class=\"uf-form-section-card-title\">\r\n          {{ form.title }}\r\n        </div>\r\n        <div class=\"uf-form-section-card-action\">\r\n          <div\r\n            *ngIf=\"form.status === 'completed' && !form.disabled\"\r\n            class=\"uf-form-section-card-action-img completed\"\r\n          >\r\n            <tui-svg src=\"tuiIconCheckLarge\"></tui-svg>\r\n          </div>\r\n          <div\r\n            *ngIf=\"form.status !== 'completed' && !form.disabled\"\r\n            class=\"uf-form-section-card-action-img edit\"\r\n          >\r\n            <tui-svg src=\"tuiIconEdit\"></tui-svg>\r\n          </div>\r\n          <div\r\n            *ngIf=\"form.status !== 'completed' && form.disabled\"\r\n            class=\"uf-form-section-card-action-img locked\"\r\n          >\r\n            <tui-svg src=\"tuiIconLock\"></tui-svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div id=\"submit-sidebar-btn-container\">\r\n      <kwikui-button\r\n        [disabled]=\"false\"\r\n        id=\"\"\r\n        label=\"Submit\"\r\n        [showLoader]=\"false\"\r\n        styles=\"\"\r\n        class=\"\"\r\n        type=\"button\"\r\n        appearance=\"primary\"\r\n        icon=\"\"\r\n        iconRight=\"\"\r\n        shape=\"null\"\r\n        size=\"m\"\r\n        styles=\"width: 100%\"\r\n        (onClick)=\"handleOnSubmitForms($event)\"\r\n      ></kwikui-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}#sidebar-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}#sidebar{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch}.uf-section-item{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-content:center;padding:1rem;grid-gap:1rem;gap:1rem;cursor:pointer;box-shadow:0 .1rem .5rem -.25rem gray;border-radius:.5rem;background-color:var(--tui-base-02)}.uf-section-item:hover{box-shadow:0 .2rem .75rem -.5rem #656565}#submit-sidebar-btn-container{width:100%;bottom:0px;z-index:1;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;gap:1rem}#submit-sidebar-btn-container *{flex-grow:1}#uf-sections-container{display:flex;flex-direction:column;height:100%;grid-row-gap:20px;row-gap:20px;padding:1rem;overflow-y:auto}.uf-form-section-card{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:10px;column-gap:10px;border:none;border-radius:8px;background-color:#e9e9e9;height:-moz-fit-content;height:fit-content;min-height:60px;padding:10px 15px;width:100%;max-width:350px;margin:0 auto}.uf-section-item.locked{-webkit-user-select:none;user-select:none;cursor:not-allowed}.uf-form-section-card .uf-form-section-card-title{font-size:1.2em;text-align:left;line-height:1.25em}.uf-form-section-card .uf-form-section-card-action{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.uf-form-section-card .uf-form-section-card-action .uf-form-section-card-action-img{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;border-radius:100%;color:#fff;font-weight:bold}.uf-form-section-card-action-img.completed{background-color:#228b22;padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-action-img.edit{background-color:#dc143c;padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-action-img.locked{background-color:gray;padding:.25rem;border-radius:50%;color:#fff}#uf-progress{display:flex;padding:1rem;flex-direction:column;align-content:center;justify-content:center;align-items:stretch;grid-gap:.5rem;gap:.5rem}#uf-progress-steps{font-size:1em;text-align:right;color:#3d3d3d}.uf-form-section-card-title{font-size:1em;font-weight:bold;color:#121212}@media screen and (max-width: 600px){#sidebar-container{max-width:unset}}.kwikid-form-header{height:70px;z-index:6}.kwikid-form-header hr{width:calc(100% - 1rem);margin-left:auto;margin-right:auto}#uf-header{display:flex;flex-direction:row;align-content:center;align-items:center;justify-content:flex-start;grid-column-gap:10px;column-gap:10px;padding:10px 20px;width:100%;max-width:calc(400px + 50vw + 2rem);margin:0 auto;height:70px;z-index:1}#uf-header #uf-header-goback-container{display:none}#uf-header #uf-header-goback-container:hover{border-radius:50%;background-color:#d3d3d3}#uf-header #uf-header-goback-container #uf-header-goback{width:100%;height:auto}#uf-header #uf-header-logo-container{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}#uf-header #uf-header-logo-container #uf-header-logo.small-icon{width:100%;height:50px}#uf-header #uf-header-logo-container #uf-header-logo.large-icon{width:100%;height:50px}#uf-header #uf-header-title-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;grid-row-gap:4px;row-gap:4px}#uf-header #uf-header-title-container #uf-header-title{font-size:1.4em;color:#121212}#uf-header #uf-header-title-container #uf-header-subtitle{font-size:1.2em;color:#121212}\n"], components: [{ type: i2__namespace.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["value", "max", "size", "colors"] }, { type: i3__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3093,6 +3098,308 @@
                     type: i0.Output
                 }] } });
 
+    var Sources = /** @class */ (function () {
+        function Sources(userConfig) {
+            this._userConfig = userConfig;
+        }
+        Object.defineProperty(Sources.prototype, "userConfig", {
+            get: function () {
+                return this._userConfig;
+            },
+            set: function (value) {
+                this._userConfig = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Sources.prototype.getValueFromUserConfig = function (path) {
+            var value = "";
+            if (isNotEmpty(path)) {
+                value = jpQueryWrapper(this._userConfig, path);
+            }
+            else {
+                value = setEmptyValue(this._userConfig);
+            }
+            return value;
+        };
+        Sources.prototype.getValueFromBrowserStorage = function (type, key) {
+            var value = "";
+            switch (type) {
+                case EBrowserStorageType.LOCAL_STORAGE:
+                    value = isNotEmptyBrowserStorageValue(localStorage.getItem(key))
+                        ? localStorage.getItem(key)
+                        : "";
+                    break;
+                case EBrowserStorageType.SESSION_STORAGE:
+                    value = isNotEmptyBrowserStorageValue(sessionStorage.getItem(key))
+                        ? sessionStorage.getItem(key)
+                        : "";
+                    break;
+                default:
+                    value = "";
+                    break;
+            }
+            return value;
+        };
+        Sources.prototype.getValueFromSource = function (source) {
+            var value = "";
+            switch (source.key) {
+                case ESourceKey.USER_CONFIG:
+                    value = this.getValueFromUserConfig(source.props.path);
+                    break;
+                case ESourceKey.BROWSER_STORAGE:
+                    value = this.getValueFromBrowserStorage(source.props.browserStorage.type, source.props.browserStorage.key);
+                    break;
+                case ESourceKey.PREDEFINED:
+                    value = source.value;
+                    break;
+                default:
+                    value = "";
+                    break;
+            }
+            return value;
+        };
+        Sources.prototype.setValueToUserConfig = function (path, value) {
+            this._userConfig = setValueToObject(this._userConfig, path, value);
+        };
+        Sources.prototype.setValueToBrowserStorage = function (type, key, value) {
+            switch (type) {
+                case EBrowserStorageType.LOCAL_STORAGE:
+                    localStorage.setItem(key, value);
+                    break;
+                case EBrowserStorageType.SESSION_STORAGE:
+                    sessionStorage.setItem(key, value);
+                    break;
+                default:
+                    break;
+            }
+        };
+        Sources.prototype.setValueToSource = function (source, value) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = source.key;
+                            switch (_a) {
+                                case ESourceKey.USER_CONFIG: return [3 /*break*/, 1];
+                                case ESourceKey.BROWSER_STORAGE: return [3 /*break*/, 2];
+                            }
+                            return [3 /*break*/, 4];
+                        case 1:
+                            this.setValueToUserConfig(source.props.path, value);
+                            return [3 /*break*/, 5];
+                        case 2: return [4 /*yield*/, this.setValueToBrowserStorage(source.props.browserStorage.type, source.props.browserStorage.key, value)];
+                        case 3:
+                            _b.sent();
+                            return [3 /*break*/, 5];
+                        case 4: return [3 /*break*/, 5];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return Sources;
+    }());
+
+    var Condition = /** @class */ (function () {
+        function Condition(condition, rulesMapping) {
+            this._condition = condition;
+            this._rulesMapping = rulesMapping;
+        }
+        Condition.prototype.parseKeys = function (condition, rulesEvaluationMapping) {
+            Object.keys(rulesEvaluationMapping).forEach(function (key) {
+                condition = replaceString(condition, key, rulesEvaluationMapping[key]);
+            });
+            return condition;
+        };
+        Condition.prototype.parseOperators = function (condition) {
+            return condition.replace(/AND|OR|NOT|XOR|NAND|NOR|XNOR/g, function (match) {
+                switch (match) {
+                    case "AND":
+                        return "&&";
+                    case "OR":
+                        return "||";
+                    case "NOT":
+                        return "!";
+                    case "XOR":
+                        return "^";
+                    case "NAND":
+                        return "!&";
+                    case "NOR":
+                        return "!|";
+                    case "XNOR":
+                        return "!^";
+                    default:
+                        return match;
+                }
+            });
+        };
+        Condition.prototype.evaluate = function () {
+            this._condition = this.parseKeys(this._condition, this._rulesMapping);
+            this._condition = this.parseOperators(this._condition);
+            return eval(this._condition);
+        };
+        return Condition;
+    }());
+
+    var Actions = /** @class */ (function () {
+        function Actions(action, ruleMapping, userConfig, takeAction) {
+            this._action = action;
+            this._userConfig = userConfig;
+            this._ruleMapping = ruleMapping;
+            this._takeAction = takeAction;
+        }
+        Actions.prototype.execute = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var condition, actionSuccess;
+                return __generator(this, function (_a) {
+                    condition = new Condition(this._action.condition, this._ruleMapping);
+                    actionSuccess = condition.evaluate();
+                    if (actionSuccess) {
+                        return [2 /*return*/, this._takeAction(this._action, this._userConfig)];
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
+        return Actions;
+    }());
+
+    var Rules = /** @class */ (function () {
+        function Rules(rules, userConfig) {
+            this._userConfig = userConfig;
+            this._rules = rules;
+        }
+        Rules.prototype.evaluate = function (rule) {
+            var ruleType = rule.key;
+            var ruleEvaluationStatus = false;
+            var source = new Sources(this._userConfig);
+            switch (ruleType) {
+                case ERuleKey.OBJECT_PATH_EXISTS:
+                    var ruleObjectPathExists = rule;
+                    var ruleObjectPathExistsObject = ruleObjectPathExists.props.object;
+                    var ruleObjectPathExistsPath = ruleObjectPathExists.props.path;
+                    switch (ruleObjectPathExistsObject) {
+                        case ESourceKey.USER_CONFIG:
+                            ruleEvaluationStatus = hasPath(this._userConfig, ruleObjectPathExistsPath);
+                            break;
+                        default:
+                            ruleEvaluationStatus = false;
+                            break;
+                    }
+                    break;
+                case ERuleKey.VALUE_CHECK:
+                    var ruleValueCheck = rule;
+                    var ruleValueCheckSource = ruleValueCheck.props.value.source;
+                    var ruleValueCheckValue = source.getValueFromSource(ruleValueCheckSource);
+                    if (ruleValueCheck.props.pattern.key === EPatternKey.CUSTOM) {
+                        var re = new RegExp(ruleValueCheck.props.pattern.pattern);
+                    }
+                    else {
+                        var re = new RegExp(EPattern[ruleValueCheck.props.pattern.key]);
+                    }
+                    ruleEvaluationStatus = re.test(ruleValueCheckValue);
+                    break;
+                case ERuleKey.VALUE_CHANGE:
+                    var ruleValueChange = rule;
+                    var ruleValueChangeCurrentSource = ruleValueChange.props.value.current.source;
+                    var ruleValueChangePreviousSource = ruleValueChange.props.value.previous.source;
+                    var previousValue = source.getValueFromSource(ruleValueChangePreviousSource);
+                    var currentValue = source.getValueFromSource(ruleValueChangeCurrentSource);
+                    ruleEvaluationStatus = previousValue === currentValue;
+                    break;
+                default:
+                    break;
+            }
+            return ruleEvaluationStatus;
+        };
+        Rules.prototype.mapping = function () {
+            var e_1, _a, _b;
+            var rulesEvaluationMapping = {};
+            try {
+                for (var _c = __values(this._rules), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var rule = _d.value;
+                    var ruleEvaluationStatus = this.evaluate(rule);
+                    rulesEvaluationMapping = Object.assign(Object.assign({}, rulesEvaluationMapping), (_b = {}, _b[rule.id] = ruleEvaluationStatus, _b));
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return rulesEvaluationMapping;
+        };
+        return Rules;
+    }());
+
+    var Validations = /** @class */ (function () {
+        function Validations(userConfig, takeAction) {
+            this._userConfig = userConfig;
+            this._takeAction = takeAction;
+        }
+        Object.defineProperty(Validations.prototype, "userConfig", {
+            get: function () {
+                return this._userConfig;
+            },
+            set: function (value) {
+                this._userConfig = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Validations.prototype.validateField = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var validations, triggers, rules, actions, rulesMapping, actions_1, actions_1_1, action, conditionEvaluation, actions_2, e_1_1;
+                var e_1, _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            validations = this._userConfig.userFormFieldsConfig.validation;
+                            triggers = validations === null || validations === void 0 ? void 0 : validations.triggers;
+                            rules = validations.rules;
+                            actions = validations.actions;
+                            rulesMapping = new Rules(rules, this._userConfig).mapping();
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 6, 7, 8]);
+                            actions_1 = __values(actions), actions_1_1 = actions_1.next();
+                            _b.label = 2;
+                        case 2:
+                            if (!!actions_1_1.done) return [3 /*break*/, 5];
+                            action = actions_1_1.value;
+                            conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                            if (!conditionEvaluation) return [3 /*break*/, 4];
+                            actions_2 = new Actions(action, rulesMapping, this._userConfig, this._takeAction);
+                            return [4 /*yield*/, actions_2.execute()];
+                        case 3:
+                            _b.sent();
+                            _b.label = 4;
+                        case 4:
+                            actions_1_1 = actions_1.next();
+                            return [3 /*break*/, 2];
+                        case 5: return [3 /*break*/, 8];
+                        case 6:
+                            e_1_1 = _b.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 8];
+                        case 7:
+                            try {
+                                if (actions_1_1 && !actions_1_1.done && (_a = actions_1.return)) _a.call(actions_1);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 8: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return Validations;
+    }());
+
     var Converter = /** @class */ (function () {
         function Converter() {
             this.getFormFields = function (formConfig) {
@@ -3187,10 +3494,15 @@
                             field = _this.setFieldKeyValue(field, "type", "phone");
                             field.properties = _this.setMissingFieldKeyValue(field.properties, "countryCode", "+91");
                             field.properties = _this.setMissingFieldKeyValue(field.properties, "phoneMaskAfterCountryCode", "####-######");
-                            field.properties = _this.setFieldKeyValue(field.properties, "decimal", "not-zero");
-                            field.properties = _this.setFieldKeyValue(field.properties, "min", -Infinity);
-                            field.properties = _this.setFieldKeyValue(field.properties, "max", Infinity);
-                            field.properties = _this.setFieldKeyValue(field.properties, "precision", 0);
+                            field.properties = _this.setMissingFieldKeyValue(field.properties, "removeCountryCodeFromValue", true);
+                        }
+                        if (field.type === "phone" || field.type === "number") {
+                            field.properties = _this.setMissingFieldKeyValue(field.properties, "decimal", "never");
+                            field.properties = _this.setMissingFieldKeyValue(field.properties, "prefix", "");
+                            field.properties = _this.setMissingFieldKeyValue(field.properties, "postfix", "");
+                            field.properties = _this.setMissingFieldKeyValue(field.properties, "min", -Infinity);
+                            field.properties = _this.setMissingFieldKeyValue(field.properties, "max", Infinity);
+                            field.properties = _this.setMissingFieldKeyValue(field.properties, "precision", 2);
                         }
                     }
                     field = _this.setFieldKeyValue(field, "hidden", false);
@@ -3630,11 +3942,6 @@
                 }
                 return field;
             };
-            var fields = this.getFormFields(formConfig);
-            var connectedFieldMapping = {
-                parent: {},
-                child: {}
-            };
             var setFormFields = function (formConfig, fields) {
                 if (hasKey$2(formConfig, "multiForm")) {
                     formConfig.multiForm["fields"] = fields;
@@ -3644,6 +3951,11 @@
                 }
                 return formConfig;
             };
+            var connectedFieldMapping = {
+                parent: {},
+                child: {}
+            };
+            var fields = this.getFormFields(formConfig);
             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;
@@ -3839,10 +4151,12 @@
             this.getFormData = new i0.EventEmitter();
             this.onClickApiCall = new i0.EventEmitter();
             this.loading = false;
+            this.loader = false;
             // display forms and list conditionally
             this.showForm = false;
             this.showFormFields = true;
             this.showFormSections = true;
+            this.showErrorNotification = false;
         }
         // The final value should be provided to service, so that it can be used in all components
         KwikIDFormsRendererComponent.prototype.windowResizeWatcher = function () {
@@ -3870,9 +4184,11 @@
             }
         };
         KwikIDFormsRendererComponent.prototype.ngOnInit = function () {
+            this.loader = true;
             this.loading = true;
             this.rendererService.setFormsList(this.userConfig.userFormFields);
             this.initializeForms();
+            this.loader = false;
         };
         KwikIDFormsRendererComponent.prototype.ngOnChanges = function (changes) {
             var verifyChange = function (prop) {
@@ -3880,6 +4196,7 @@
             };
             if (verifyChange("userConfig")) {
                 this.userConfig = changes.userConfig.currentValue;
+                this.loader = false;
             }
             if (verifyChange("formsData")) {
                 this.formsData = changes.formsData.currentValue;
@@ -3887,6 +4204,7 @@
             }
             if (verifyChange("apiCallResponse")) {
                 this.apiCallResponse = changes.apiCallResponse.currentValue;
+                this.loader = false;
             }
         };
         KwikIDFormsRendererComponent.prototype.initializeForms = function () {
@@ -3894,6 +4212,7 @@
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
+                            this.loader = true;
                             this.rendererService.setAllFormsData(this.formsData);
                             this.rendererService.updateFormsList();
                             this.handleResize(this.rendererService.formsList);
@@ -3908,6 +4227,7 @@
                             this.showFormFields = false;
                             _b.label = 3;
                         case 3:
+                            this.loader = false;
                             this.loading = false;
                             return [2 /*return*/];
                     }
@@ -3941,6 +4261,7 @@
                     switch (_b.label) {
                         case 0:
                             this.showForm = false;
+                            this.loader = true;
                             activeFormConfig = this.rendererService.formsList.find(function (form) {
                                 if (form.key === selectedForm) {
                                     return form;
@@ -3962,6 +4283,7 @@
                                 this.showFormFields = true;
                             }
                             this.showForm = true;
+                            this.loader = false;
                             return [2 /*return*/];
                     }
                 });
@@ -3969,16 +4291,37 @@
         };
         // forms-list listener
         KwikIDFormsRendererComponent.prototype.handleOnClickSubmitForms = function (e) {
+            var _this = this;
             console.log(e);
-            this.onClickSubmit.emit(e);
+            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 () {
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0: return [4 /*yield*/, validations_1.validateField()];
+                            case 1:
+                                _b.sent();
+                                if (this.userConfig.userFormFieldsConfig.status === "completed") {
+                                    this.onClickSubmit.emit(e);
+                                }
+                                else {
+                                    this.toggleErrorNotification(true);
+                                }
+                                return [2 /*return*/];
+                        }
+                    });
+                }); })();
+            }
         };
         // form-view listener
         KwikIDFormsRendererComponent.prototype.handleOnClickApiCall = function (e) {
+            this.loader = true;
             this.onClickApiCall.emit(e);
         };
         // form-view listener
         KwikIDFormsRendererComponent.prototype.handleGetActiveFormData = function (e) {
             var _b;
+            this.loader = true;
             this.getFormData.emit((_b = {},
                 _b[this.rendererService.activeFormConfig.key] = e["data"],
                 _b));
@@ -3986,6 +4329,7 @@
         // form-view listener
         KwikIDFormsRendererComponent.prototype.handleOnClickSaveForm = function (e) {
             var _b;
+            this.loader = true;
             this.rendererService.setActiveFormData({});
             this.getFormData.emit((_b = {},
                 _b[this.rendererService.activeFormConfig.key] = e["data"],
@@ -3997,10 +4341,38 @@
             this.showForm = false;
             this.showFormFields = false;
         };
+        KwikIDFormsRendererComponent.prototype.toggleErrorNotification = function (show) {
+            this.showErrorNotification = show;
+        };
+        KwikIDFormsRendererComponent.prototype.takeAction = function (action, userConfig) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _b, sources, sourceValue;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            _b = action.key;
+                            switch (_b) {
+                                case EActionKey.SET_VALUE: return [3 /*break*/, 1];
+                            }
+                            return [3 /*break*/, 3];
+                        case 1:
+                            sources = new Sources(userConfig);
+                            return [4 /*yield*/, sources.getValueFromSource(action.props.value.source)];
+                        case 2:
+                            sourceValue = _c.sent();
+                            sources.setValueToSource(action.props.value.destination, sourceValue);
+                            this.userConfig = sources.userConfig;
+                            return [3 /*break*/, 4];
+                        case 3: return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
         return KwikIDFormsRendererComponent;
     }());
     /** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsRendererComponent, deps: [{ token: KwikIDRendererService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { userConfig: "userConfig", formsData: "formsData", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, providers: [KwikIDRendererService], usesOnChanges: true, ngImport: i0__namespace, template: "<div ngClass=\"kwikid-renderer\">\r\n  <div\r\n    ngClass=\"kwikid-layout-container\"\r\n    *ngIf=\"!loading\"\r\n  >\r\n    <div\r\n      ngClass=\"kwikid-sections-container\"\r\n      *ngIf=\"showFormSections\"\r\n      class=\"active\"\r\n      [class.active]=\"showFormSections\"\r\n      [class.mobile]=\"rendererService.isMobileView\"\r\n    >\r\n      <kwikid-forms-list\r\n        [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;height:100%;border-radius:0;max-width:unset}.kwikid-forms-container{display:block;width:100%;max-width:50%;margin:auto 0;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);box-shadow:0 0 12px -8px var(--tui-primary)}.kwikid-forms-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}@media screen and (max-width: 600px){.kwikid-layout-container{padding:0;background:transparent}.kwikid-sections-container{position:absolute;max-width:100%;bottom:-10000px;left:-10000px;opacity:0;padding:0;visibility:hidden}.kwikid-sections-container.active{visibility:visible}.kwikid-sections-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container{display:none;max-width:100%;height:100%;padding:0;border-radius:0;box-shadow:none}.kwikid-forms-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container.active{display:block}}\n"], components: [{ type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["showFormFields", "userConfig", "formsList", "formsListCompleted", "isMobileView"], outputs: ["onClickSetActiveForm", "onClickHideFormsList", "onClickSubmitForms"] }, { type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["formConfig", "formData", "apiCallResponse", "isMobileView", "allFormsData", "formsList"], outputs: ["onClickViewForms", "onClickSaveForm", "onClickApiCall", "getActiveFormData"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+    /** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { userConfig: "userConfig", formsData: "formsData", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, providers: [KwikIDRendererService], usesOnChanges: true, ngImport: i0__namespace, template: "<div ngClass=\"kwikid-renderer\">\r\n  <div\r\n    ngClass=\"kwikid-layout-container\"\r\n    *ngIf=\"!loading\"\r\n  >\r\n    <div\r\n      ngClass=\"kwikid-sections-container\"\r\n      *ngIf=\"showFormSections\"\r\n      class=\"active\"\r\n      [class.active]=\"showFormSections\"\r\n      [class.mobile]=\"rendererService.isMobileView\"\r\n    >\r\n      <kwikid-forms-list\r\n        [showFormFields]=\"this.showFormFields\"\r\n        [userConfig]=\"this.userConfig\"\r\n        [formsList]=\"this.rendererService.formsList\"\r\n        [formsListCompleted]=\"this.rendererService.formsListCompleted\"\r\n        [isMobileView]=\"this.rendererService.isMobileView\"\r\n        (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\r\n        (onClickSubmitForms)=\"this.handleOnClickSubmitForms($event)\"\r\n      ></kwikid-forms-list>\r\n    </div>\r\n    <div\r\n      ngClass=\"kwikid-forms-container\"\r\n      *ngIf=\"this.showForm && this.showFormFields\"\r\n      [class.active]=\"showFormFields\"\r\n      [class.mobile]=\"rendererService.isMobileView\"\r\n      [@panelInOut]\r\n    >\r\n      <kwikid-form-view\r\n        [formConfig]=\"this.rendererService.activeFormConfig\"\r\n        [formData]=\"this.rendererService.activeFormData\"\r\n        [apiCallResponse]=\"this.apiCallResponse\"\r\n        [formsList]=\"this.rendererService.formsList\"\r\n        [allFormsData]=\"this.rendererService.allFormsData\"\r\n        [isMobileView]=\"this.rendererService.isMobileView\"\r\n        (onClickApiCall)=\"this.handleOnClickApiCall($event)\"\r\n        (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\r\n        (onClickSaveForm)=\"this.handleOnClickSaveForm($event)\"\r\n        (getActiveFormData)=\"this.handleGetActiveFormData($event)\"\r\n      ></kwikid-form-view>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div\r\n  ngClass=\"kwikid-forms-renderer-loader\"\r\n  *ngIf=\"loader\"\r\n>\r\n  <span class=\"loader\"></span>\r\n</div>\r\n<tui-push\r\n  id=\"error-notification\"\r\n  *tuiPush=\"showErrorNotification\"\r\n  heading=\"Please complete the required Forms!\"\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: [":host{position:relative}.kwikid-root{width:100%;height:100%}.kwikid-renderer{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%}.kwikid-layout-container{display:flex;flex-direction:row;padding:0 1rem;height:100%;justify-content:center;align-items:stretch;background:var(--tui-secondary);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;height:100%;border-radius:0;max-width:unset}.kwikid-forms-container{display:block;width:100%;max-width:50%;margin:auto 0;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);box-shadow:0 0 12px -8px var(--tui-primary)}.kwikid-forms-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}@media screen and (max-width: 600px){.kwikid-layout-container{padding:0;background:transparent}.kwikid-sections-container{position:absolute;max-width:100%;bottom:-10000px;left:-10000px;opacity:0;padding:0;visibility:hidden}.kwikid-sections-container.active{visibility:visible}.kwikid-sections-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container{display:none;max-width:100%;height:100%;padding:0;border-radius:0;box-shadow:none}.kwikid-forms-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container.active{display:block}}.kwikid-forms-renderer-loader{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;z-index:100}.kwikid-forms-renderer-loader .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:#fff #fff transparent;box-sizing:border-box;animation:rotation 1s linear infinite}.kwikid-forms-renderer-loader .loader:after{content:\"\";box-sizing:border-box;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:3px solid;border-color:transparent var(--tui-primary) var(--tui-primary);width:24px;height:24px;border-radius:50%;animation:rotationBack .5s linear infinite;transform-origin:center center}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.kwikid-forms-renderer-loader .t-loader{display:none!important}#error-notification{background-color:var(--tui-error-fill);color:#fff!important}#error-notification .t-top{color:#fff!important}#error-notification .t-close{color:#fff!important}\n"], components: [{ type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["showFormFields", "userConfig", "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"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4__namespace.TuiPushDirective, selector: "tui-push" }], animations: [
             animations.trigger("panelInOut", [
                 animations.transition(":enter", [
                     animations.style({ transform: "translateY(100%)" }),
@@ -4053,13 +4425,13 @@
         return KwikIDFormBuilderModule;
     }());
     /** @nocollapse */ KwikIDFormBuilderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormBuilderModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ KwikIDFormBuilderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormBuilderModule, declarations: [KwikIDFormsBuilderComponent], imports: [i4.CommonModule, i5.FormsModule, i5.ReactiveFormsModule, dragDrop.DragDropModule], exports: [KwikIDFormsBuilderComponent] });
-    /** @nocollapse */ KwikIDFormBuilderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormBuilderModule, providers: [], imports: [[i4.CommonModule, i5.FormsModule, i5.ReactiveFormsModule, dragDrop.DragDropModule]] });
+    /** @nocollapse */ KwikIDFormBuilderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormBuilderModule, declarations: [KwikIDFormsBuilderComponent], imports: [i5.CommonModule, i6.FormsModule, i6.ReactiveFormsModule, dragDrop.DragDropModule], exports: [KwikIDFormsBuilderComponent] });
+    /** @nocollapse */ KwikIDFormBuilderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormBuilderModule, providers: [], imports: [[i5.CommonModule, i6.FormsModule, i6.ReactiveFormsModule, dragDrop.DragDropModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormBuilderModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [KwikIDFormsBuilderComponent],
-                        imports: [i4.CommonModule, i5.FormsModule, i5.ReactiveFormsModule, dragDrop.DragDropModule],
+                        imports: [i5.CommonModule, i6.FormsModule, i6.ReactiveFormsModule, dragDrop.DragDropModule],
                         providers: [],
                         exports: [KwikIDFormsBuilderComponent]
                     }]
@@ -4071,16 +4443,20 @@
         return KwikIDFormViewModule;
     }());
     /** @nocollapse */ KwikIDFormViewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ KwikIDFormViewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewModule, declarations: [KwikIDFormViewComponent], imports: [i4.CommonModule,
-            i5.FormsModule,
-            i5.ReactiveFormsModule,
+    /** @nocollapse */ KwikIDFormViewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewModule, declarations: [KwikIDFormViewComponent], imports: [i5.CommonModule,
+            i6.FormsModule,
+            i6.ReactiveFormsModule,
             i3.TuiLabelModule,
+            i4.TuiPushModule,
+            i3.TuiSvgModule,
             i2.KwikUIModule], exports: [KwikIDFormViewComponent] });
     /** @nocollapse */ KwikIDFormViewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewModule, imports: [[
-                i4.CommonModule,
-                i5.FormsModule,
-                i5.ReactiveFormsModule,
+                i5.CommonModule,
+                i6.FormsModule,
+                i6.ReactiveFormsModule,
                 i3.TuiLabelModule,
+                i4.TuiPushModule,
+                i3.TuiSvgModule,
                 i2.KwikUIModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewModule, decorators: [{
@@ -4088,10 +4464,12 @@
                 args: [{
                         declarations: [KwikIDFormViewComponent],
                         imports: [
-                            i4.CommonModule,
-                            i5.FormsModule,
-                            i5.ReactiveFormsModule,
+                            i5.CommonModule,
+                            i6.FormsModule,
+                            i6.ReactiveFormsModule,
                             i3.TuiLabelModule,
+                            i4.TuiPushModule,
+                            i3.TuiSvgModule,
                             i2.KwikUIModule
                         ],
                         exports: [KwikIDFormViewComponent]
@@ -4104,15 +4482,15 @@
         return KwikIDFormsListModule;
     }());
     /** @nocollapse */ KwikIDFormsListModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ KwikIDFormsListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListModule, declarations: [KwikIDFormsListComponent], imports: [i4.CommonModule,
-            i5.FormsModule,
-            i5.ReactiveFormsModule,
+    /** @nocollapse */ KwikIDFormsListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListModule, declarations: [KwikIDFormsListComponent], imports: [i5.CommonModule,
+            i6.FormsModule,
+            i6.ReactiveFormsModule,
             i2.KwikUIModule,
             i3.TuiSvgModule], exports: [KwikIDFormsListComponent] });
     /** @nocollapse */ KwikIDFormsListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListModule, imports: [[
-                i4.CommonModule,
-                i5.FormsModule,
-                i5.ReactiveFormsModule,
+                i5.CommonModule,
+                i6.FormsModule,
+                i6.ReactiveFormsModule,
                 i2.KwikUIModule,
                 i3.TuiSvgModule
             ]] });
@@ -4121,9 +4499,9 @@
                 args: [{
                         declarations: [KwikIDFormsListComponent],
                         imports: [
-                            i4.CommonModule,
-                            i5.FormsModule,
-                            i5.ReactiveFormsModule,
+                            i5.CommonModule,
+                            i6.FormsModule,
+                            i6.ReactiveFormsModule,
                             i2.KwikUIModule,
                             i3.TuiSvgModule
                         ],
@@ -4137,28 +4515,37 @@
         return KwikIDFormRendererModule;
     }());
     /** @nocollapse */ KwikIDFormRendererModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormRendererModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ KwikIDFormRendererModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormRendererModule, declarations: [KwikIDFormsRendererComponent], imports: [i4.CommonModule,
+    /** @nocollapse */ KwikIDFormRendererModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormRendererModule, declarations: [KwikIDFormsRendererComponent], imports: [i5.CommonModule,
             http.HttpClientModule,
             KwikIDFormViewModule,
             KwikIDFormsListModule,
-            i2.KwikUIModule], exports: [KwikIDFormsRendererComponent] });
+            i2.KwikUIModule,
+            i3.TuiLoaderModule,
+            i4.TuiPushModule,
+            i3.TuiSvgModule], exports: [KwikIDFormsRendererComponent] });
     /** @nocollapse */ KwikIDFormRendererModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormRendererModule, providers: [], imports: [[
-                i4.CommonModule,
+                i5.CommonModule,
                 http.HttpClientModule,
                 KwikIDFormViewModule,
                 KwikIDFormsListModule,
-                i2.KwikUIModule
+                i2.KwikUIModule,
+                i3.TuiLoaderModule,
+                i4.TuiPushModule,
+                i3.TuiSvgModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormRendererModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [KwikIDFormsRendererComponent],
                         imports: [
-                            i4.CommonModule,
+                            i5.CommonModule,
                             http.HttpClientModule,
                             KwikIDFormViewModule,
                             KwikIDFormsListModule,
-                            i2.KwikUIModule
+                            i2.KwikUIModule,
+                            i3.TuiLoaderModule,
+                            i4.TuiPushModule,
+                            i3.TuiSvgModule
                         ],
                         providers: [],
                         exports: [KwikIDFormsRendererComponent]
@@ -4171,15 +4558,15 @@
         return KwikIDFormsModule;
     }());
     /** @nocollapse */ KwikIDFormsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ KwikIDFormsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsModule, imports: [i4.CommonModule,
-            i5.FormsModule,
-            i5.ReactiveFormsModule,
+    /** @nocollapse */ KwikIDFormsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsModule, imports: [i5.CommonModule,
+            i6.FormsModule,
+            i6.ReactiveFormsModule,
             KwikIDFormBuilderModule,
             KwikIDFormRendererModule], exports: [KwikIDFormBuilderModule, KwikIDFormRendererModule] });
     /** @nocollapse */ KwikIDFormsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsModule, providers: [KwikIDRendererService], imports: [[
-                i4.CommonModule,
-                i5.FormsModule,
-                i5.ReactiveFormsModule,
+                i5.CommonModule,
+                i6.FormsModule,
+                i6.ReactiveFormsModule,
                 KwikIDFormBuilderModule,
                 KwikIDFormRendererModule
             ], KwikIDFormBuilderModule, KwikIDFormRendererModule] });
@@ -4188,9 +4575,9 @@
                 args: [{
                         declarations: [],
                         imports: [
-                            i4.CommonModule,
-                            i5.FormsModule,
-                            i5.ReactiveFormsModule,
+                            i5.CommonModule,
+                            i6.FormsModule,
+                            i6.ReactiveFormsModule,
                             KwikIDFormBuilderModule,
                             KwikIDFormRendererModule
                         ],