kwikid-forms 0.6.43 → 0.6.45

package/bundles/kwikid-forms.umd.js

@@ -518,19 +518,19 @@
           if (kwikidToolkit.checkObjectKeyExists(form, "formContent")) {
               if (kwikidToolkit.checkObjectKeyExists(form.formContent, "url")) {
                   form = kwikidToolkit.setValueToObjectPath(form, "props.url", form.formContent.url);
-                  delete form["formContent"]["url"];
+                  delete form.formContent.url;
               }
               if (kwikidToolkit.checkObjectKeyExists(form.formContent, "path")) {
                   form = kwikidToolkit.setValueToObjectPath(form, "props.path", form.formContent.path);
-                  delete form["formContent"]["path"];
+                  delete form.formContent.path;
               }
           }
           if (kwikidToolkit.isEmptyValue(form.formContent)) {
-              delete form["formContent"];
+              delete form.formContent;
           }
           if (kwikidToolkit.checkObjectKeyExists(form, "title")) {
               form = kwikidToolkit.setValueToObjectPath(form, "props.title", form.title);
-              delete form["title"];
+              delete form.title;
           }
           if (!kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
               form.hidden = false;
@@ -556,18 +556,16 @@
                       htmlContent: form.htmlContent
                   };
               }
-              delete form["htmlContent"];
+              delete form.htmlContent;
           }
-          else {
-              if (!kwikidToolkit.checkObjectKeyExists(form, "props")) {
-                  form.props = {
-                      htmlContent: ""
-                  };
-              }
+          else if (!kwikidToolkit.checkObjectKeyExists(form, "props")) {
+              form.props = {
+                  htmlContent: ""
+              };
           }
           if (kwikidToolkit.checkObjectKeyExists(form, "title")) {
               form = kwikidToolkit.setValueToObjectPath(form, "props.title", form.title);
-              delete form["title"];
+              delete form.title;
           }
           if (!kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
               form.hidden = false;
@@ -602,10 +600,9 @@
               title: new i3.FormControl("", i3.Validators.required)
           });
       }
-      KwikIDBuilderFormsListComponent.prototype.setSelectedForm = function (selected_form) {
-          this.selectedForm = selected_form;
+      KwikIDBuilderFormsListComponent.prototype.setSelectedForm = function (selectedForm) {
+          this.selectedForm = selectedForm;
       };
-      KwikIDBuilderFormsListComponent.prototype.ngOnInit = function () { };
       KwikIDBuilderFormsListComponent.prototype.ngOnChanges = function (changes) {
           var verifyChange = function (key) {
               return kwikidToolkit.checkObjectKeyExists(changes, key) && !changes[key].firstChange;
@@ -626,7 +623,6 @@
       KwikIDBuilderFormsListComponent.prototype.handleOnClickAddForm = function () {
           if (this.addForm.invalid) {
               alert("Please fill all the fields");
-              return;
           }
           else {
               if (kwikidToolkit.isEmptyValue(this.activeFormConfig)) {
@@ -669,7 +665,7 @@
                       templateUrl: "./builder-forms-list.component.html",
                       styleUrls: ["../shared.scss", "./builder-forms-list.component.scss"]
                   }]
-          }], ctorParameters: function () { return []; }, propDecorators: { activeFormConfig: [{
+          }], propDecorators: { activeFormConfig: [{
                   type: i0.Input
               }], formsList: [{
                   type: i0.Input
@@ -708,6 +704,7 @@
       EFieldType["RECORD"] = "record";
       EFieldType["STAR_RATING"] = "star-rating";
       EFieldType["LIVE_LOCATION"] = "live-location";
+      EFieldType["DATA_HOLDER"] = "data-holder";
       EFieldType["CURRENCY"] = "currency";
   })(EFieldType || (EFieldType = {}));
 
@@ -856,14 +853,31 @@
           uploadFileToServer: true
       },
       capture: {
-          containerStyles: "",
           buttonText: "Camera",
+          containerStyles: "",
           icon: "tuiIconCameraLarge",
-          showMediaFiles: true,
-          uploadFileToServer: false,
           isCroppedImage: false,
           isMaskedImage: false,
-          watermarkDataSources: [],
+          showMediaFiles: true,
+          uploadFileToServer: false,
+          features: {
+              ocr: {
+                  isEnabled: false,
+                  documentType: "",
+                  documentSide: "",
+                  isOcrFromServer: false
+              },
+              facematch: {
+                  isEnabled: false,
+                  isFacematchFromServer: false,
+                  sources: []
+              },
+              watermark: {
+                  isEnabled: false,
+                  isWatermarkFromServer: false,
+                  sources: []
+              }
+          },
           cameraConfig: {
               header: {
                   title: "Camera",
@@ -878,8 +892,6 @@
               },
               others: {
                   isFrontCamera: false,
-                  isWatermark: false,
-                  isWatermarkForImageUpload: false,
                   flipHorizontal: false,
                   mask: {
                       shape: ""
@@ -958,16 +970,10 @@
   };
 
   var getFormFieldByKey = function (fields, key) {
-      var field = fields.find(function (field) {
-          if (field.key === key) {
-              return field;
-          }
-      });
-      return field;
+      return fields.find(function (field) { return field.key === key; });
   };
   var getFormFieldIndexByKey = function (fields, key) {
-      var fieldIndex;
-      fieldIndex = fields.findIndex(function (_) {
+      var fieldIndex = fields.findIndex(function (_) {
           return key === _.key;
       });
       return fieldIndex;
@@ -993,17 +999,17 @@
                   fieldMessage.message === message.message);
           });
       };
-      field["messages"] = [];
+      field.messages = [];
       if (kwikidToolkit.checkObjectKeyExists(field, "messages")) {
-          if (!hasDuplicateMessage(field["messages"], message)) {
-              field["messages"].push({
+          if (!hasDuplicateMessage(field.messages, message)) {
+              field.messages.push({
                   type: message.type,
                   message: message.message
               });
           }
       }
       else {
-          field["messages"] = [{ type: message.type, message: message.message }];
+          field.messages = [{ type: message.type, message: message.message }];
       }
       return field;
   };
@@ -1030,19 +1036,19 @@
   };
   var removeFormFieldMessage = function (field, message) {
       if (kwikidToolkit.isNotEmptyValue(field === null || field === void 0 ? void 0 : field.messages)) {
-          field["messages"] = field["messages"].filter(function (fieldMessage) {
+          field.messages = field.messages.filter(function (fieldMessage) {
               return fieldMessage.type !== message.type;
           });
       }
       else {
-          field["messages"] = [];
+          field.messages = [];
       }
       return field;
   };
   var setApiTimerMessage = function (field, timer) {
       if (timer === void 0) { timer = {}; }
       if (kwikidToolkit.checkObjectKeyExists(field, "api")) {
-          field["api"]["timer"] = timer;
+          field.api.timer = timer;
       }
       else {
           kwikidToolkit.setMissingKeyValue(field, "api", { timer: timer });
@@ -1102,7 +1108,7 @@
           fields[fieldIndex] = setErrorMessages(fields[fieldIndex], errors);
       }
       else {
-          fields[fieldIndex]["messages"] = [];
+          fields[fieldIndex].messages = [];
       }
       fields[fieldIndex] = highlightFormFieldError(fields[fieldIndex], error);
       return fields;
@@ -1117,14 +1123,17 @@
   };
   var convertFormFieldTypeTimeToKwikUIFormat = function (time) {
       var timeParts = time.split(/[.:]/);
-      var hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
+      var hours = 0;
+      var minutes = 0;
+      var seconds = 0;
+      var milliseconds = 0;
       if (timeParts.length >= 2) {
-          hours = parseInt(timeParts[0]);
-          minutes = parseInt(timeParts[1]);
+          hours = parseInt(timeParts[0], 10);
+          minutes = parseInt(timeParts[1], 10);
           if (timeParts.length >= 3) {
-              seconds = parseInt(timeParts[2]);
+              seconds = parseInt(timeParts[2], 10);
               if (timeParts.length === 4) {
-                  milliseconds = parseInt(timeParts[3]);
+                  milliseconds = parseInt(timeParts[3], 10);
               }
           }
       }
@@ -1132,22 +1141,17 @@
       return tuiTime;
   };
   var convertFormFieldTypeDateToStandardFormat = function (date) {
-      var formattedDate;
-      var year = date.year;
-      var month = date.month;
-      var day = date.day;
-      formattedDate = day.toString().padStart(2, "0") + "-" + (month + 1)
+      var day = date.day, month = date.month, year = date.year;
+      var formattedDate = day.toString().padStart(2, "0") + "-" + (month + 1)
           .toString()
           .padStart(2, "0") + "-" + year;
       return formattedDate;
   };
   var convertFormFieldTypeTimeToStandardFormat = function (time) {
-      var formattedDate;
       var hour = time.hours;
-      var minutes = time.minutes;
-      var seconds = time.seconds;
+      var seconds = time.seconds, minutes = time.minutes;
       var milliseconds = time.ms;
-      formattedDate = hour.toString().padStart(2, "0") + ":" + minutes
+      var formattedDate = hour.toString().padStart(2, "0") + ":" + minutes
           .toString()
           .padStart(2, "0") + (seconds > 0 ? ":" + seconds.toString().padStart(2, "0") : "") + (seconds > 0 && milliseconds > 0
           ? ":" + milliseconds.toString().padStart(2, "0")
@@ -1173,16 +1177,15 @@
                   break;
               case EFieldType.SELECT:
                   if (Array.isArray(field.options)) {
-                      field.options.find(function (item) {
-                          if (kwikidToolkit.isObject(item)) {
-                              if (item.title == value) {
-                                  convertedValue = item.value;
-                              }
-                          }
+                      var foundItem = field.options.find(function (item) {
+                          return kwikidToolkit.isObject(item) && item.title === value;
                       });
+                      if (foundItem) {
+                          convertedValue = foundItem.value;
+                      }
                   }
                   break;
-              case EFieldType.PHONE:
+              case EFieldType.PHONE: {
                   var phoneField = field;
                   if (phoneField.properties.removeCountryCodeFromValue) {
                       convertedValue = value
@@ -1190,6 +1193,7 @@
                           .replace(phoneField.properties.countryCode, "");
                   }
                   break;
+              }
               case EFieldType.CAPTURE:
                   if (Array.isArray(value) && kwikidToolkit.isNotEmptyValue(value[0])) {
                       convertedValue = value[0];
@@ -1217,6 +1221,40 @@
       }
       return convertedValue;
   };
+  var convertFormFieldEmptyValueToKwikUIFormat = function (field) {
+      var fieldType = field.type;
+      var value;
+      switch (fieldType) {
+          case EFieldType.CHECKBOX:
+              value = false;
+              break;
+          case EFieldType.NUMBER:
+              value = null;
+              break;
+          case EFieldType.DATE:
+              value = null;
+              break;
+          case EFieldType.FILE:
+              value = [];
+              break;
+          case EFieldType.CAPTURE:
+              value = [];
+              break;
+          case EFieldType.RECORD:
+              value = [];
+              break;
+          case EFieldType.SELECT:
+              value = null;
+              break;
+          case EFieldType.DROPDOWN_WITH_SEARCH:
+              value = null;
+              break;
+          default:
+              value = "";
+              break;
+      }
+      return value;
+  };
   var convertFormFieldValueToKwikUIFormat = function (field, value) {
       var convertedValue = value;
       if (kwikidToolkit.isNotEmptyValue(value)) {
@@ -1232,13 +1270,12 @@
                   break;
               case EFieldType.SELECT:
                   if (Array.isArray(field.options)) {
-                      field.options.find(function (item) {
-                          if (kwikidToolkit.isObject(item)) {
-                              if (item.value == value) {
-                                  convertedValue = item.title;
-                              }
-                          }
+                      var foundItem = field.options.find(function (item) {
+                          return kwikidToolkit.isObject(item) && item.value === value;
                       });
+                      if (foundItem) {
+                          convertedValue = foundItem.title;
+                      }
                   }
                   break;
               case EFieldType.DATE:
@@ -1251,25 +1288,37 @@
                   convertedValue = value;
                   break;
               case EFieldType.CAPTURE:
-                  if (typeof value === "string") {
+                  if (Array.isArray(value)) {
+                      convertedValue = value.filter(function (item) {
+                          return (typeof item === "string" ||
+                              (kwikidToolkit.isObject(item) && kwikidToolkit.checkObjectKeyExists(item, "image")));
+                      });
+                  }
+                  else if (typeof value === "string") {
                       convertedValue = [value];
                   }
-                  else if (!Array.isArray(value)) {
-                      convertedValue = [];
+                  else if (kwikidToolkit.isObject(value) && kwikidToolkit.checkObjectKeyExists(value, "image")) {
+                      convertedValue = [value];
                   }
                   else {
-                      convertedValue = value;
+                      convertedValue = [];
                   }
                   break;
               case EFieldType.RECORD:
-                  if (typeof value === "string") {
+                  if (Array.isArray(value)) {
+                      convertedValue = value.filter(function (item) {
+                          return (typeof item === "string" ||
+                              (kwikidToolkit.isObject(item) && kwikidToolkit.checkObjectKeyExists(item, "video")));
+                      });
+                  }
+                  else if (typeof value === "string") {
                       convertedValue = [value];
                   }
-                  else if (!Array.isArray(value)) {
-                      convertedValue = [];
+                  else if (kwikidToolkit.isObject(value) && kwikidToolkit.checkObjectKeyExists(value, "video")) {
+                      convertedValue = [value];
                   }
                   else {
-                      convertedValue = value;
+                      convertedValue = [];
                   }
                   break;
               default:
@@ -1281,40 +1330,6 @@
       }
       return convertedValue;
   };
-  var convertFormFieldEmptyValueToKwikUIFormat = function (field) {
-      var fieldType = field.type;
-      var value;
-      switch (fieldType) {
-          case EFieldType.CHECKBOX:
-              value = false;
-              break;
-          case EFieldType.NUMBER:
-              value = null;
-              break;
-          case EFieldType.DATE:
-              value = null;
-              break;
-          case EFieldType.FILE:
-              value = [];
-              break;
-          case EFieldType.CAPTURE:
-              value = [];
-              break;
-          case EFieldType.RECORD:
-              value = [];
-              break;
-          case EFieldType.SELECT:
-              value = null;
-              break;
-          case EFieldType.DROPDOWN_WITH_SEARCH:
-              value = null;
-              break;
-          default:
-              value = "";
-              break;
-      }
-      return value;
-  };
 
   var getFormFields = function (formConfig) {
       var fields = [];
@@ -1339,6 +1354,9 @@
   var setFieldKeyHidden = function (field) {
       return setMissingFieldKeyValue(field, "hidden", false);
   };
+  var setFieldKeyDisabled = function (field) {
+      return setMissingFieldKeyValue(field, "disabled", true);
+  };
   var setFieldAsFormElement = function (field, value) {
       return setFieldKeyValue(field, "isFormElement", value);
   };
@@ -1348,11 +1366,9 @@
            * This is to handler old version of config.
            *  Please don't add "min" at field level, add it insider field.properties only.
            */
-          return convertFormFieldTypeDateToKwikUIFormat(field["min"]);
-      }
-      else {
-          return {};
+          return convertFormFieldTypeDateToKwikUIFormat(field.min);
       }
+      return {};
   };
   var getMaxDate = function (field) {
       if (kwikidToolkit.checkObjectKeyExists(field, "max")) {
@@ -1360,11 +1376,9 @@
            * This is to handler old version of config.
            *  Please don't add "max" at field level, add it insider field.properties only.
            */
-          return convertFormFieldTypeDateToKwikUIFormat(field["max"]);
-      }
-      else {
-          return {};
+          return convertFormFieldTypeDateToKwikUIFormat(field.max);
       }
+      return {};
   };
   var updateLanguage = function (object, language) {
       if (kwikidToolkit.isObject(object)) {
@@ -1372,7 +1386,7 @@
               object = object[language];
           }
           else {
-              object = object["en"];
+              object = object.en;
           }
       }
       return object;
@@ -1461,7 +1475,7 @@
           return formConfig;
       };
       Converter.prototype.convertFormConfig = function (formConfig) {
-          var e_1, _f;
+          var e_1, _l;
           var formatOnFieldType = function (field) {
               var updateFormFieldProperties = function (field) {
                   if (kwikidToolkit.checkObjectKeyExists(FIELD_PROPERTIES, field.type)) {
@@ -1576,20 +1590,18 @@
                       if (typeof x === "string" || typeof x === "number") {
                           return { label: x, disabled: false, description: "" };
                       }
-                      else {
-                          if (kwikidToolkit.checkObjectKeyExists(x, "label") &&
-                              kwikidToolkit.checkObjectKeyExists(x, "disabled") &&
-                              kwikidToolkit.checkObjectKeyExists(x, "description")) {
-                              return x;
-                          }
-                          if (!kwikidToolkit.checkObjectKeyExists(x, "disabled")) {
-                              x = Object.assign(Object.assign({}, x), { disabled: false });
-                          }
-                          if (!kwikidToolkit.checkObjectKeyExists(x, "description")) {
-                              x = Object.assign(Object.assign({}, x), { description: false });
-                          }
+                      if (kwikidToolkit.checkObjectKeyExists(x, "label") &&
+                          kwikidToolkit.checkObjectKeyExists(x, "disabled") &&
+                          kwikidToolkit.checkObjectKeyExists(x, "description")) {
                           return x;
                       }
+                      if (!kwikidToolkit.checkObjectKeyExists(x, "disabled")) {
+                          x = Object.assign(Object.assign({}, x), { disabled: false });
+                      }
+                      if (!kwikidToolkit.checkObjectKeyExists(x, "description")) {
+                          x = Object.assign(Object.assign({}, x), { description: false });
+                      }
+                      return x;
                   });
                   return field;
               };
@@ -1676,6 +1688,13 @@
                   }
                   return field;
               };
+              var formatFieldTypeDataHolder = function (field) {
+                  field = setFieldKeyHidden(field);
+                  field = setFieldKeyDisabled(field);
+                  field = setFieldAsFormElement(field, true);
+                  field = updateFormFieldProperties(field);
+                  return field;
+              };
               var formatFieldTypeOtp = function (field) {
                   var _a, _b;
                   field = setFieldKeyHidden(field);
@@ -1700,9 +1719,22 @@
                   return field;
               };
               var formatFieldTypeCapture = function (field) {
+                  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                   field = setFieldKeyHidden(field);
                   field = setFieldAsFormElement(field, true);
                   field = updateFormFieldProperties(field);
+                  field.properties = kwikidToolkit.getObjectDeepCopy(Object.assign(Object.assign({}, field.properties), { features: Object.assign(Object.assign({}, field.properties.features), { watermark: {
+                              isEnabled: (_d = (_c = (_b = (_a = field === null || field === void 0 ? void 0 : field.properties) === null || _a === void 0 ? void 0 : _a.cameraConfig) === null || _b === void 0 ? void 0 : _b.others) === null || _c === void 0 ? void 0 : _c.isWatermark) !== null && _d !== void 0 ? _d : field.properties.features.watermark.isWatermark,
+                              isWatermarkFromServer: (_h = (_g = (_f = (_e = field === null || field === void 0 ? void 0 : field.properties) === null || _e === void 0 ? void 0 : _e.cameraConfig) === null || _f === void 0 ? void 0 : _f.others) === null || _g === void 0 ? void 0 : _g.isWatermarkFromServer) !== null && _h !== void 0 ? _h : field.properties.features.watermark.isWatermarkFromServer,
+                              sources: (_k = (_j = field === null || field === void 0 ? void 0 : field.properties) === null || _j === void 0 ? void 0 : _j.watermarkDataSources) !== null && _k !== void 0 ? _k : field.properties.features.watermark.sources
+                          } }) }));
+                  delete field.properties.watermarkDataSources;
+                  /**
+                   * Current commented because in kwikid-camera new config structure is not handled
+                   * Will uncomment once handled here and modify the structure a little bit here as well.
+                   */
+                  // delete field.properties.cameraConfig.others.isWatermark;
+                  // delete field.properties.cameraConfig.others.isWatermarkForImageUpload;
                   return field;
               };
               var formatFieldTypeRecord = function (field) {
@@ -1779,11 +1811,11 @@
                   case EFieldType.LIVE_LOCATION:
                       field = formatFieldTypeLiveLocation(field);
                       break;
+                  case EFieldType.DATA_HOLDER:
+                      field = formatFieldTypeDataHolder(field);
+                      break;
                   case EFieldType.API:
                       field = formatFieldTypeApi(field);
-                  case EFieldType.LIVE_LOCATION:
-                      field = formatFieldTypeLiveLocation(field);
-                      break;
                       break;
                   case EFieldType.OTP:
                       field = formatFieldTypeOtp(field);
@@ -1818,7 +1850,7 @@
                       ? field.validators
                       : {};
                   field = setMissingFieldKeyValue(field, "validators", {});
-                  field = setFieldKeyValue(field, "validators", Object.assign(Object.assign({}, field["validators"]), { min: kwikidToolkit.checkObjectKeyExists(validators, "min")
+                  field = setFieldKeyValue(field, "validators", Object.assign(Object.assign({}, field.validators), { min: kwikidToolkit.checkObjectKeyExists(validators, "min")
                           ? kwikidToolkit.isNotEmptyValue(validators.min)
                               ? Number(validators.min)
                               : null
@@ -1870,6 +1902,10 @@
                           delete field.validators.min;
                           delete field.validators.max;
                           break;
+                      case EFieldType.DATA_HOLDER:
+                          delete field.validators.min;
+                          delete field.validators.max;
+                          break;
                       case EFieldType.CHECKBOX:
                           delete field.validators.min;
                           delete field.validators.max;
@@ -1929,18 +1965,18 @@
                   if (kwikidToolkit.checkObjectKeyExists(field, "defaultValue")) {
                       return field;
                   }
-                  else if (kwikidToolkit.checkObjectPathExists(field, "default.value.sources")) {
+                  if (kwikidToolkit.checkObjectPathExists(field, "default.value.sources")) {
                       return field;
                   }
-                  else if (kwikidToolkit.checkObjectPathExists(field, "default.value.rules") &&
+                  if (kwikidToolkit.checkObjectPathExists(field, "default.value.rules") &&
                       kwikidToolkit.checkObjectPathExists(field, "default.value.actions")) {
                       return field;
                   }
-                  else if (kwikidToolkit.checkObjectPathExists(field, "default.value.value") &&
+                  if (kwikidToolkit.checkObjectPathExists(field, "default.value.value") &&
                       kwikidToolkit.isNotEmptyValue(field.default.value.value)) {
                       return field;
                   }
-                  else if (!kwikidToolkit.checkObjectPathExists(field, "default.value.sources")) {
+                  if (!kwikidToolkit.checkObjectPathExists(field, "default.value.sources")) {
                       var defaultValue = {
                           value: "",
                           triggers: ["ON_INIT"],
@@ -1969,8 +2005,8 @@
                       field = kwikidToolkit.setValueToObjectPath(field, "default.value", defaultValue);
                       return field;
                   }
-                  delete field["defaultVal"];
-                  delete field["defaultValue"];
+                  delete field.defaultVal;
+                  delete field.defaultValue;
               }
               return field;
           };
@@ -1998,30 +2034,30 @@
           };
           var setFormFields = function (formConfig, fields) {
               if (kwikidToolkit.checkObjectKeyExists(formConfig, "multiForm")) {
-                  formConfig.multiForm["fields"] = fields;
+                  formConfig.multiForm.fields = fields;
               }
               else {
-                  formConfig["fields"] = fields;
+                  formConfig.fields = fields;
               }
               return formConfig;
           };
           var setFormFieldGroups = function (formConfig, groups) {
-              formConfig["fieldGroups"] = groups;
+              formConfig.fieldGroups = groups;
               return formConfig;
           };
           var updateFieldGroupKey = function (field) {
               if (kwikidToolkit.checkObjectKeyExists(field, "groupKey") &&
                   !Array.isArray(field.groupKey)) {
-                  field["groupKey"] = [field.groupKey];
+                  field.groupKey = [field.groupKey];
               }
               return field;
           };
           var updateFormFieldGroups = function (fieldGroups, field) {
-              var e_2, _f;
+              var e_2, _l;
               if (kwikidToolkit.checkObjectKeyExists(field, "groupKey")) {
                   try {
-                      for (var _g = __values(field.groupKey), _h = _g.next(); !_h.done; _h = _g.next()) {
-                          var groupKey = _h.value;
+                      for (var _m = __values(field.groupKey), _o = _m.next(); !_o.done; _o = _m.next()) {
+                          var groupKey = _o.value;
                           if (kwikidToolkit.checkObjectKeyExists(fieldGroups, groupKey)) {
                               fieldGroups[groupKey].push(field.key);
                           }
@@ -2033,7 +2069,7 @@
                   catch (e_2_1) { e_2 = { error: e_2_1 }; }
                   finally {
                       try {
-                          if (_h && !_h.done && (_f = _g.return)) _f.call(_g);
+                          if (_o && !_o.done && (_l = _m.return)) _l.call(_m);
                       }
                       finally { if (e_2) throw e_2.error; }
                   }
@@ -2045,26 +2081,28 @@
                   field.label = updateLanguage(field.label, language);
               }
               if (kwikidToolkit.checkObjectPathExists(field, "properties.placeholder")) {
-                  field.properties["placeholder"] = updateLanguage(field.properties["placeholder"], language);
+                  field.properties.placeholder = updateLanguage(field.properties.placeholder, language);
               }
               if (kwikidToolkit.checkObjectPathExists(field, "properties.label")) {
-                  field.properties["label"] = updateLanguage(field.properties["label"], language);
+                  field.properties.label = updateLanguage(field.properties.label, language);
               }
               var updateApiStatus = function (fieldApiStatus) {
                   for (var status in fieldApiStatus) {
-                      fieldApiStatus[status] = updateLanguage(fieldApiStatus[status], language);
+                      if (kwikidToolkit.isNotEmptyValue(status)) {
+                          fieldApiStatus[status] = updateLanguage(fieldApiStatus[status], language);
+                      }
                   }
                   return fieldApiStatus;
               };
               switch (field.type) {
                   case EFieldType.HTML:
-                      field["html"] = updateLanguage(field["html"], language);
+                      field.html = updateLanguage(field.html, language);
                       break;
                   case EFieldType.CAPTURE:
-                      field.properties["cameraConfig"].header.title = updateLanguage(field.properties["cameraConfig"].header.title, language);
+                      field.properties.cameraConfig.header.title = updateLanguage(field.properties.cameraConfig.header.title, language);
                       break;
                   case EFieldType.RECORD:
-                      field.properties["cameraConfig"].header.title = updateLanguage(field.properties["cameraConfig"].header.title, language);
+                      field.properties.cameraConfig.header.title = updateLanguage(field.properties.cameraConfig.header.title, language);
                       break;
                   case EFieldType.SELECT:
                       field.options = field.options.map(function (option) {
@@ -2106,10 +2144,10 @@
                       });
                       break;
                   case EFieldType.API_CALL:
-                      field["api"]["status"]["labels"] = updateApiStatus(field["api"]["status"]["labels"]);
+                      field.api.status.labels = updateApiStatus(field.api.status.labels);
                       break;
                   case EFieldType.LIVE_LOCATION:
-                      field["api"]["status"]["labels"] = updateApiStatus(field["api"]["status"]["labels"]);
+                      field.api.status.labels = updateApiStatus(field.api.status.labels);
                       break;
                   default:
                       break;
@@ -2135,7 +2173,7 @@
           catch (e_1_1) { e_1 = { error: e_1_1 }; }
           finally {
               try {
-                  if (fields_1_1 && !fields_1_1.done && (_f = fields_1.return)) _f.call(fields_1);
+                  if (fields_1_1 && !fields_1_1.done && (_l = fields_1.return)) _l.call(fields_1);
               }
               finally { if (e_1) throw e_1.error; }
           }
@@ -2158,6 +2196,7 @@
       kwikidToolkit.logMethod
   ], Converter.prototype, "convertFormConfig", null);
 
+  /* eslint-disable no-unused-vars */
   var EFormEditorType;
   (function (EFormEditorType) {
       EFormEditorType["FIELDS"] = "FIELDS";
@@ -2166,9 +2205,7 @@
 
   var removeField = function (fields, fieldKey) {
       fields = fields.filter(function (row) {
-          if (row.key !== fieldKey) {
-              return row;
-          }
+          return row.key !== fieldKey;
       });
       return fields;
   };
@@ -2401,16 +2438,16 @@
       number: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "number", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.number) }),
       date: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "date", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.date) }),
       phone: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "phone", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.phone) }),
-      radio: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "radio", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG["radio"]), options: [] }),
+      radio: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "radio", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.radio), options: [] }),
       "radio-list": Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "radio-list", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG["radio-list"]), options: [] }),
-      select: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "select", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG["select"]), options: [] }),
+      select: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "select", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.select), options: [] }),
       slider: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "slider", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.slider) }),
       otp: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "otp", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.otp) }),
-      api: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "api", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG["api"]) }),
+      api: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "api", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.api) }),
       "api-call": Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "api-call", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG["api-call"]) }),
       "aadhaar-number": Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "aadhaar-number", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG["aadhaar-number"]) }),
       "input-aadhaar": Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "input-aadhaar", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG["input-aadhaar"]) }),
-      image: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "image", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG["image"]) }),
+      image: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "image", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.image) }),
       "preview-image": Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "preview-image", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG["preview-image"]) }),
       html: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "html", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.html), html: {
               before: "",
@@ -2456,7 +2493,9 @@
       KwikIDFormBuilderFormEditorService.prototype.createNestedFormGroup = function (object) {
           var formGroup = {};
           for (var index in object) {
-              formGroup[index] = new i3.FormControl(object[index]);
+              if (kwikidToolkit.isNotEmptyValue(index)) {
+                  formGroup[index] = new i3.FormControl(object[index]);
+              }
           }
           return new i3.FormGroup(formGroup);
       };
@@ -2524,7 +2563,7 @@
           ];
           this.activeEditorType = EFormEditorType.FIELDS;
           this.activeFormConfig_Fields = [];
-          this.activeFormConfig_NoFields = {};
+          this.activeFormConfigNoFields = {};
           this.showConfigPreview = false;
           // Forms
           this.formGroup = new i3.FormGroup({});
@@ -2556,7 +2595,6 @@
       /**
        * Angular Lifecycle Methods
        */
-      KwikIDBuilderFormEditorComponent.prototype.ngOnInit = function () { };
       KwikIDBuilderFormEditorComponent.prototype.ngOnChanges = function (changes) {
           var verifyChange = function (key) {
               return kwikidToolkit.checkObjectKeyExists(changes, key) && !changes[key].firstChange;
@@ -2571,8 +2609,8 @@
       KwikIDBuilderFormEditorComponent.prototype.initFormEditor = function (activeFormConfig) {
           this.toggleLoader(true);
           this.activeFormConfig_Fields = kwikidToolkit.getObjectDeepCopy(activeFormConfig.fields);
-          this.activeFormConfig_NoFields = kwikidToolkit.getObjectDeepCopy(activeFormConfig);
-          delete this.activeFormConfig_NoFields.fields;
+          this.activeFormConfigNoFields = kwikidToolkit.getObjectDeepCopy(activeFormConfig);
+          delete this.activeFormConfigNoFields.fields;
           this.rows = this.activeFormConfig_Fields.map(function (field) {
               var _a;
               return {
@@ -2622,21 +2660,21 @@
        */
       KwikIDBuilderFormEditorComponent.prototype.handleOnClickEditValidators = function (e) {
           var fieldConfig = this.formGroup.getRawValue()[e.index];
-          var fieldConfigValidators = fieldConfig["validators"];
+          var fieldConfigValidators = fieldConfig.validators;
           this.activeFieldConfigValidatorsConfig = kwikidToolkit.mergeObjects(FIELD_VALIDATORS_CONFIG, fieldConfigValidators);
           this.showFieldConfigValidatorsConfigEditor = true;
           this.activeFieldConfigEditing = fieldConfig;
       };
       KwikIDBuilderFormEditorComponent.prototype.handleOnClickEditProperties = function (e) {
           var fieldConfig = this.formGroup.getRawValue()[e.index];
-          var fieldConfigProperties = fieldConfig["properties"];
+          var fieldConfigProperties = fieldConfig.properties;
           this.activeFieldConfigPropertiesConfig = kwikidToolkit.mergeObjects(FIELD_PROPERTIES_CONFIG[e.type], fieldConfigProperties);
           this.showFieldConfigPropertiesConfigEditor = true;
           this.activeFieldConfigEditing = fieldConfig;
       };
       KwikIDBuilderFormEditorComponent.prototype.handleOnClickEditOptions = function (e) {
           var fieldConfig = this.formGroup.getRawValue()[e.index];
-          var fieldConfigOptions = fieldConfig["options"];
+          var fieldConfigOptions = fieldConfig.options;
           this.activeFieldConfigOptionsConfig = kwikidToolkit.mergeObjects([], fieldConfigOptions);
           this.showFieldConfigOptionsConfigEditor = true;
           this.activeFieldConfigEditing = fieldConfig;
@@ -2734,8 +2772,8 @@
       /**
        * Non Fields Editor Related Methods
        */
-      KwikIDBuilderFormEditorComponent.prototype.handleOnClickSaveActiveFormConfig_NoFields = function (e) {
-          this.activeFormConfig_NoFields = JSON.parse(e);
+      KwikIDBuilderFormEditorComponent.prototype.handleOnClickSaveActiveFormConfigNoFields = function (e) {
+          this.activeFormConfigNoFields = JSON.parse(e);
       };
       /**
        * Other Component Methods
@@ -2772,7 +2810,7 @@
           try {
               for (var _c = __values(Object.values(kwikidToolkit.getObjectDeepCopy(this.formGroup.getRawValue()))), _d = _c.next(); !_d.done; _d = _c.next()) {
                   var field = _d.value;
-                  fields.push(kwikidToolkit.setValueToObjectPath(findModifiedKeys(FIELD_CONFIG[field["type"]], field, ""), "type", field["type"]));
+                  fields.push(kwikidToolkit.setValueToObjectPath(findModifiedKeys(FIELD_CONFIG[field.type], field, ""), "type", field.type));
               }
           }
           catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -2782,8 +2820,8 @@
               }
               finally { if (e_1) throw e_1.error; }
           }
-          var activeFormConfig_NoFields_Minified = findModifiedKeys(NOFIELD_CONFIG, kwikidToolkit.getObjectDeepCopy(this.activeFormConfig_NoFields), "");
-          this.activeFormConfig = kwikidToolkit.mergeObjects({}, activeFormConfig_NoFields_Minified, {
+          var activeFormConfigNoFieldsMinified = findModifiedKeys(NOFIELD_CONFIG, kwikidToolkit.getObjectDeepCopy(this.activeFormConfigNoFields), "");
+          this.activeFormConfig = kwikidToolkit.mergeObjects({}, activeFormConfigNoFieldsMinified, {
               fields: fields
           });
       };
@@ -2801,24 +2839,20 @@
       KwikIDBuilderFormEditorComponent.prototype.getOptions = function (index, value, key, path) {
           if (path.includes("properties")) {
               var fieldType = this.rows[index].type;
-              var finalPath = path + "['" + fieldType + "']." + key;
-              return kwikidToolkit.getObjectValueFromPath(OPTIONS, finalPath);
-          }
-          else {
-              var finalPath = path !== "" ? path + "." + key : key;
-              return kwikidToolkit.getObjectValueFromPath(OPTIONS, finalPath);
+              var finalPath_1 = path + "['" + fieldType + "']." + key;
+              return kwikidToolkit.getObjectValueFromPath(OPTIONS, finalPath_1);
           }
+          var finalPath = path !== "" ? path + "." + key : key;
+          return kwikidToolkit.getObjectValueFromPath(OPTIONS, finalPath);
       };
       KwikIDBuilderFormEditorComponent.prototype.isOptions = function (index, value, key, path) {
           if (path.includes("properties")) {
               var fieldType = this.rows[index].type;
-              var finalPath = path + "['" + fieldType + "']." + key;
-              return Array.isArray(kwikidToolkit.getObjectValueFromPath(OPTIONS, finalPath));
-          }
-          else {
-              var finalPath = path !== "" ? path + "." + key : key;
-              return Array.isArray(kwikidToolkit.getObjectValueFromPath(OPTIONS, finalPath));
+              var finalPath_2 = path + "['" + fieldType + "']." + key;
+              return Array.isArray(kwikidToolkit.getObjectValueFromPath(OPTIONS, finalPath_2));
           }
+          var finalPath = path !== "" ? path + "." + key : key;
+          return Array.isArray(kwikidToolkit.getObjectValueFromPath(OPTIONS, finalPath));
       };
       KwikIDBuilderFormEditorComponent.prototype.isBoolean = function (value) {
           return typeof value === "boolean";
@@ -2841,14 +2875,12 @@
           if (typeof item === "string") {
               return String(index) + "_" + item + "_" + new Date().getTime();
           }
-          else {
-              return String(index) + "_" + key + "_" + value + "_" + new Date().getTime();
-          }
+          return String(index) + "_" + key + "_" + value + "_" + new Date().getTime();
       };
       return KwikIDBuilderFormEditorComponent;
   }());
   /** @nocollapse */ KwikIDBuilderFormEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDBuilderFormEditorComponent, deps: [{ token: i3__namespace.KwikUILoaderService }, { token: KwikIDFormBuilderFormEditorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  /** @nocollapse */ KwikIDBuilderFormEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDBuilderFormEditorComponent, selector: "kwikid-builder-form-editor", inputs: { activeFormConfig: "activeFormConfig" }, outputs: { onClickSaveActiveFormConfig: "onClickSaveActiveFormConfig" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!-- Component Loader -->\n<kwikui-loader></kwikui-loader>\n\n<!-- Component Main View -->\n<div class=\"container\">\n  <ng-container *ngIf=\"activeFormConfig; else noFormSelectedTemplate\">\n    <header>\n      <div>\n        &nbsp;Editing Config of Form: <b>{{ activeFormConfig.props.title }}</b>\n      </div>\n      <div class=\"header-form-editor-btns\">\n        <button (click)=\"handleOnClickPreview()\">preview</button>\n        <div>Editor&nbsp;Type:</div>\n        <select (change)=\"handleOnClickChangeActiveEditor($event.target.value)\">\n          <option\n            *ngFor=\"let option of editorTypeOptions\"\n            [value]=\"option.key\"\n            [selected]=\"option.key === activeEditorType\"\n          >\n            {{ option.label }}\n          </option>\n        </select>\n      </div>\n    </header>\n    <main>\n      <div\n        class=\"form-config-fields\"\n        *ngIf=\"activeEditorType == 'FIELDS'; else nonFieldsEditorTemplate\"\n      >\n        <ng-container *ngIf=\"rows.length <= 0\">\n          <div class=\"no-fields disclaimer\">\n            <div><p>Please add field to get started</p></div>\n            <div class=\"icon\"><h1>&plus;</h1></div>\n            <button (click)=\"handleOnClickAddField()\">add field</button>\n          </div>\n        </ng-container>\n        <table>\n          <thead>\n            <tr>\n              <th *ngFor=\"let column of columns\">\n                {{ column }}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <ng-container\n              *ngFor=\"let row of rows; let i = index; trackBy: trackByFn\"\n            >\n              <tr>\n                <ng-container *ngFor=\"let column of columns; let j = index\">\n                  <td>\n                    <div [class]=\"column\">\n                      <ng-container\n                        *ngIf=\"\n                          column !== 'delete' &&\n                          column !== 'validators' &&\n                          column !== 'properties' &&\n                          column !== 'type' &&\n                          column !== 'disabled' &&\n                          column !== 'options'\n                        \"\n                        [ngTemplateOutlet]=\"getFieldTemplate\"\n                        [ngTemplateOutletContext]=\"{\n                          index: i,\n                          fieldValue: row[column],\n                          fieldKey: column,\n                          parentPath: ''\n                        }\"\n                      ></ng-container>\n                      <ng-container *ngIf=\"column === 'type'\">\n                        <ng-container\n                          [ngTemplateOutlet]=\"optionFieldTemplate\"\n                          [ngTemplateOutletContext]=\"{\n                            index: i,\n                            key: column,\n                            value: row[column],\n                            path: '',\n                            options: memoizedGetOptions(\n                              i,\n                              row[column],\n                              column,\n                              ''\n                            )\n                          }\"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-container *ngIf=\"column === 'disabled'\">\n                        <ng-container\n                          [ngTemplateOutlet]=\"booleanFieldTemplate\"\n                          [ngTemplateOutletContext]=\"{\n                            index: i,\n                            key: column,\n                            value: row[column],\n                            path: '',\n                            options: memoizedGetOptions(\n                              i,\n                              row[column],\n                              column,\n                              ''\n                            )\n                          }\"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-container *ngIf=\"column === 'delete'\">\n                        <button\n                          (click)=\"\n                            handleOnClickDeleteField({\n                              index: i,\n                              key: row['key']\n                            })\n                          \"\n                          [disabled]=\"rows.length === 1\"\n                        >\n                          delete\n                        </button>\n                      </ng-container>\n                      <ng-container *ngIf=\"column === 'validators'\">\n                        <button\n                          (click)=\"\n                            handleOnClickEditValidators({\n                              index: i,\n                              key: row['key'],\n                              type: row['type']\n                            })\n                          \"\n                        >\n                          edit\n                        </button>\n                      </ng-container>\n                      <ng-container *ngIf=\"column === 'properties'\">\n                        <button\n                          (click)=\"\n                            handleOnClickEditProperties({\n                              index: i,\n                              key: row['key'],\n                              type: row['type']\n                            })\n                          \"\n                        >\n                          edit\n                        </button>\n                      </ng-container>\n                      <ng-container\n                        *ngIf=\"row['type'] === 'radio' && column === 'options'\"\n                      >\n                        <button\n                          (click)=\"\n                            handleOnClickEditOptions({\n                              index: i,\n                              key: row['key'],\n                              type: row['type']\n                            })\n                          \"\n                        >\n                          add\n                        </button>\n                      </ng-container>\n                      <ng-container\n                        *ngIf=\"row['type'] === 'select' && column === 'options'\"\n                      >\n                        <button\n                          (click)=\"\n                            handleOnClickEditOptions({\n                              index: i,\n                              key: row['key'],\n                              type: row['type']\n                            })\n                          \"\n                        >\n                          add\n                        </button>\n                      </ng-container>\n                    </div>\n                  </td>\n                </ng-container>\n              </tr>\n            </ng-container>\n          </tbody>\n        </table>\n        <div class=\"add-field-btn-container\"> </div>\n      </div>\n      <ng-template #nonFieldsEditorTemplate>\n        <div class=\"form-config-no-fields\">\n          <div\n            class=\"json-editor\"\n            contenteditable=\"true\"\n            (keyup)=\"\n              handleOnClickSaveActiveFormConfig_NoFields(\n                $event.target.innerHTML\n              )\n            \"\n          >\n            {{ activeFormConfig_NoFields | json }}\n          </div>\n        </div>\n      </ng-template>\n    </main>\n    <footer>\n      <button\n        *ngIf=\"rows.length > 0\"\n        (click)=\"handleOnClickAddField()\"\n      >\n        add field\n      </button>\n      <button\n        (click)=\"handleOnClickSaveActiveFormConfig()\"\n        [class.secondary]=\"!savedConfig\"\n      >\n        {{ savedConfig ? \"saved\" : \"unsaved\" }}\n      </button>\n    </footer>\n  </ng-container>\n  <ng-template #noFormSelectedTemplate>\n    <div class=\"no-form-selected disclaimer\">\n      <div class=\"icon\"><h1>&#10150;</h1></div>\n      <div><p>Please select a form to edit it's fields</p></div>\n    </div>\n  </ng-template>\n</div>\n\n<!-- Component Dialog -->\n<div\n  class=\"modal\"\n  [class.error]=\"dialogError === true\"\n  *ngIf=\"\n    dialogOpen ||\n    showFieldConfigValidatorsConfigEditor ||\n    showFieldConfigPropertiesConfigEditor ||\n    showFieldConfigOptionsConfigEditor\n  \"\n  [@panelInOut]\n>\n  <div class=\"modal-box\">\n    <div\n      class=\"modal-content\"\n      *ngIf=\"dialogOpen\"\n    >\n      <div class=\"modal-heading\">\n        <div class=\"modal-title\">\n          {{ activeFormConfig.props.title }}'s Config Preview\n        </div>\n        <div class=\"modal-actions\">\n          <button (click)=\"convertToMinifiedJson()\">minify</button>\n          <button (click)=\"convertToCompleteJson()\">full</button>\n          <button (click)=\"downloadJSON()\">download</button>\n          <button (click)=\"copyToClipboard()\">copy</button>\n          <button (click)=\"closeJSONPopup()\">close</button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"json-editor\">\n          <code>{{ activeFormConfig | json }}</code>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"modal-content\"\n      *ngIf=\"showFieldConfigValidatorsConfigEditor\"\n    >\n      <div class=\"modal-heading\">\n        <div class=\"modal-title\">\n          {{ activeFormConfig.props.title }}'s Validator Config Editor\n        </div>\n        <div class=\"modal-actions\">\n          <button (click)=\"closeJSONPopup()\">close</button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <div\n          class=\"json-editor\"\n          contenteditable=\"true\"\n          (keyup)=\"\n            handleOnInputFieldConfigValidatorsConfig($event.target.innerHTML)\n          \"\n        >\n          {{ this.activeFieldConfigValidatorsConfig | json }}\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"modal-content\"\n      *ngIf=\"showFieldConfigPropertiesConfigEditor\"\n    >\n      <div class=\"modal-heading\">\n        <div class=\"modal-title\">\n          {{ activeFormConfig.props.title }}'s Properties Config Editor\n        </div>\n        <div class=\"modal-actions\">\n          <button (click)=\"closeJSONPopup()\">close</button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <div\n          class=\"json-editor\"\n          contenteditable=\"true\"\n          (keyup)=\"\n            handleOnInputFieldConfigPropertiesConfig($event.target.innerHTML)\n          \"\n        >\n          {{ this.activeFieldConfigPropertiesConfig | json }}\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"modal-content\"\n      *ngIf=\"showFieldConfigOptionsConfigEditor\"\n    >\n      <div class=\"modal-heading\">\n        <div class=\"modal-title\">\n          {{ activeFormConfig.props.title }}'s Options Config Editor\n        </div>\n        <div class=\"modal-actions\">\n          <button (click)=\"closeJSONPopup()\">close</button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <div\n          class=\"json-editor\"\n          contenteditable=\"true\"\n          (keyup)=\"\n            handleOnInputFieldConfigOptionsConfig($event.target.innerHTML)\n          \"\n        >\n          {{ this.activeFieldConfigOptionsConfig | json }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- END -->\n\n<!-- Template for rendering different field types -->\n<!-- General Field Template -->\n<ng-template\n  #getFieldTemplate\n  let-index=\"index\"\n  let-value=\"fieldValue\"\n  let-key=\"fieldKey\"\n  let-path=\"parentPath\"\n>\n  <div>\n    <ng-container\n      [ngTemplateOutlet]=\"\n        isObject(value) ? objectFieldTemplate : notObjectFieldTemplate\n      \"\n      [ngTemplateOutletContext]=\"{\n        index: index,\n        fieldValue: value,\n        fieldKey: key,\n        parentPath: path\n      }\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Object Type Field Template -->\n<ng-template\n  #objectFieldTemplate\n  let-index=\"index\"\n  let-value=\"fieldValue\"\n  let-key=\"fieldKey\"\n  let-path=\"parentPath\"\n>\n  <ng-container *ngFor=\"let item of value | keyvalue\">\n    <ng-container\n      [ngTemplateOutlet]=\"getFieldTemplate\"\n      [ngTemplateOutletContext]=\"{\n        index: index,\n        fieldValue: item.value,\n        fieldKey: item.key,\n        parentPath: path === '' ? key : path + '.' + key\n      }\"\n    >\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<!-- Non Object Type Field Template -->\n<ng-template\n  #notObjectFieldTemplate\n  let-index=\"index\"\n  let-value=\"fieldValue\"\n  let-key=\"fieldKey\"\n  let-path=\"parentPath\"\n>\n  <div>\n    <ng-container *ngIf=\"isOptions(index, value, key, path)\">\n      <ng-container\n        [ngTemplateOutlet]=\"optionFieldTemplate\"\n        [ngTemplateOutletContext]=\"{\n          index: index,\n          key: key,\n          value: value,\n          path: path,\n          options: memoizedGetOptions(index, value, key, path)\n        }\"\n      ></ng-container>\n    </ng-container>\n    <ng-container\n      *ngIf=\"!isOptions(index, value, key, path) && isString(value)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          textFieldTemplate;\n          context: { index: index, key: key, value: value, path: path }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-container\n      *ngIf=\"!isOptions(index, value, key, path) && isNumber(value)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          numberFieldTemplate;\n          context: { index: index, key: key, value: value, path: path }\n        \"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Options Field Template -->\n<ng-template\n  #optionFieldTemplate\n  let-index=\"index\"\n  let-key=\"key\"\n  let-value=\"value\"\n  let-path=\"path\"\n  let-options=\"options\"\n>\n  <div class=\"field-container options\">\n    <select\n      (change)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n    >\n      <option\n        *ngFor=\"let option of options\"\n        [value]=\"option\"\n        [selected]=\"option === value\"\n        >{{ option }}</option\n      >\n    </select>\n  </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Boolean Field Template -->\n<ng-template\n  #booleanFieldTemplate\n  let-index=\"index\"\n  let-key=\"key\"\n  let-value=\"value\"\n  let-path=\"path\"\n>\n  <div class=\"field-container checkbox\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"value\"\n      (change)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.checked }, path })\"\n    />\n  </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Text Field Template -->\n<ng-template\n  #textFieldTemplate\n  let-index=\"index\"\n  let-key=\"key\"\n  let-value=\"value\"\n  let-path=\"path\"\n>\n  <div class=\"field-container text\">\n    <input\n      placeholder=\"Enter {{ key }}\"\n      type=\"text\"\n      [value]=\"value\"\n      (blur)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n    />\n  </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Number Field Template -->\n<ng-template\n  #numberFieldTemplate\n  let-index=\"index\"\n  let-key=\"key\"\n  let-value=\"value\"\n  let-path=\"path\"\n>\n  <div class=\"field-container number\">\n    <input\n      placeholder=\"Enter {{ key }}\"\n      type=\"number\"\n      [value]=\"value\"\n      (blur)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n    />\n  </div>\n</ng-template>\n<!-- END -->\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}input[type=text],input[type=number]{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;appearance:auto!important}input[type=checkbox]{appearance:auto!important;width:1rem;height:1rem}select{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}textarea{overflow-wrap:anywhere;resize:none;unicode-bidi:embed;white-space:pre-wrap}button{display:inline-block;padding:8px 12px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:4px;border:none;cursor:pointer}button:hover{background-color:#0069d9}button:active{background-color:#0056b3}button:focus{outline:none}button.secondary{padding:7px 11px;border:1px solid #007bff;background-color:#fff;color:#007bff}button.secondary:hover{background-color:#b7daff}button.secondary:active{background-color:#b7daff}button.secondary:focus{outline:none}.field-container{display:flex}.field-container label{color:gray}.field-container.checkbox{flex-direction:row;align-items:center;justify-content:center;padding:8px 12px;margin:auto}.field-container.options,.field-container.number,.field-container.text{flex-direction:column}.disclaimer{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#121212;width:100%;height:100%}.disclaimer>*:not(:last-child){margin-bottom:1.5rem}.disclaimer .icon{width:3rem;height:3rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.disclaimer.no-form-selected h1{transform:scaleX(-1)}.disclaimer h1{font-size:5rem;font-weight:100}.disclaimer p{font-size:1rem}\n", ":host{all:unset;position:relative;width:100%;height:100%;overflow:auto}.container{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;height:100%;border:1px solid #ccc}.container header{padding:.5rem;display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;border-bottom:1px solid #ccc}.container header .header-form-editor-btns{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center}.container header .header-form-editor-btns>*:not(:last-child){margin-right:1rem}.container main{padding:.5rem;flex-grow:1;overflow:auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;white-space:nowrap;position:relative}.container main>*:not(:last-child){margin-right:1rem}.container main .no-fields{position:absolute;top:0;left:0;background:white}.container main .form-config-no-fields{overflow:auto;width:100%}.container main .form-config-fields{overflow:auto;width:100%}.container main .form-config-fields .add-field-btn-container{width:100%;text-align:center}.container main .validators,.container main .properties{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.container main .validators>*:not(:last-child),.container main .properties>*:not(:last-child){margin-bottom:.5rem}.container main .input-checkbox-container{display:flex;flex-direction:row}.container footer{padding:.5rem;display:flex;flex-direction:row;justify-content:flex-end;align-items:stretch;border-top:1px solid lightgray}.container footer>*:not(:last-child){margin-right:1rem}.modal{position:absolute;top:0;background-color:#0000004d;width:100%;height:100%;display:flex;justify-content:center;align-items:center;left:0;flex-direction:row}.modal.error{background-color:#ff00004d}.modal-box{width:75%;height:75%;margin:auto;background-color:#fff;border-radius:1rem;box-shadow:#64646f33 0 7px 29px}.modal-content{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;width:100%;height:100%}.modal-heading{padding:.5rem 1rem;width:100%;display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid lightgray;align-items:center}.modal-title{font-weight:bold;font-size:1rem}.modal-actions{display:flex;flex-direction:row;cursor:pointer}.modal-actions>*:not(:last-child){margin-right:1rem}.modal-body{overflow:auto;flex:1}.modal-body .json-editor{font-family:monospace;white-space:pre-wrap;border:none;padding:0;background-color:#f5f5f5;height:100%;outline:none;overflow:auto}.json-editor{font-family:monospace;white-space:pre-wrap;border:none;padding:0;background-color:#f5f5f5;height:100%;outline:none;overflow:auto}table{width:100%;border-collapse:collapse;margin-bottom:20px}table th,table td{padding:8px;text-align:left;border:1px solid #ccc;vertical-align:top}table th{background-color:#f2f2f2}table tr:nth-child(even){background-color:#f9f9f9}table tr:hover{background-color:#eaeaea}\n"], components: [{ type: i3__namespace.KwikUILoaderComponent, selector: "kwikui-loader" }], directives: [{ type: i3__namespace$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "json": i3__namespace$2.JsonPipe, "keyvalue": i3__namespace$2.KeyValuePipe }, animations: [
+  /** @nocollapse */ KwikIDBuilderFormEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDBuilderFormEditorComponent, selector: "kwikid-builder-form-editor", inputs: { activeFormConfig: "activeFormConfig" }, outputs: { onClickSaveActiveFormConfig: "onClickSaveActiveFormConfig" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!-- Component Loader -->\n<kwikui-loader></kwikui-loader>\n\n<!-- Component Main View -->\n<div class=\"container\">\n  <ng-container *ngIf=\"activeFormConfig; else noFormSelectedTemplate\">\n    <header>\n      <div>\n        &nbsp;Editing Config of Form: <b>{{ activeFormConfig.props.title }}</b>\n      </div>\n      <div class=\"header-form-editor-btns\">\n        <button (click)=\"handleOnClickPreview()\">preview</button>\n        <div>Editor&nbsp;Type:</div>\n        <select (change)=\"handleOnClickChangeActiveEditor($event.target.value)\">\n          <option\n            *ngFor=\"let option of editorTypeOptions\"\n            [value]=\"option.key\"\n            [selected]=\"option.key === activeEditorType\"\n          >\n            {{ option.label }}\n          </option>\n        </select>\n      </div>\n    </header>\n    <main>\n      <div\n        class=\"form-config-fields\"\n        *ngIf=\"activeEditorType == 'FIELDS'; else nonFieldsEditorTemplate\"\n      >\n        <ng-container *ngIf=\"rows.length <= 0\">\n          <div class=\"no-fields disclaimer\">\n            <div><p>Please add field to get started</p></div>\n            <div class=\"icon\"><h1>&plus;</h1></div>\n            <button (click)=\"handleOnClickAddField()\">add field</button>\n          </div>\n        </ng-container>\n        <table>\n          <thead>\n            <tr>\n              <th *ngFor=\"let column of columns\">\n                {{ column }}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <ng-container\n              *ngFor=\"let row of rows; let i = index; trackBy: trackByFn\"\n            >\n              <tr>\n                <ng-container *ngFor=\"let column of columns; let j = index\">\n                  <td>\n                    <div [class]=\"column\">\n                      <ng-container\n                        *ngIf=\"\n                          column !== 'delete' &&\n                          column !== 'validators' &&\n                          column !== 'properties' &&\n                          column !== 'type' &&\n                          column !== 'disabled' &&\n                          column !== 'options'\n                        \"\n                        [ngTemplateOutlet]=\"getFieldTemplate\"\n                        [ngTemplateOutletContext]=\"{\n                          index: i,\n                          fieldValue: row[column],\n                          fieldKey: column,\n                          parentPath: ''\n                        }\"\n                      ></ng-container>\n                      <ng-container *ngIf=\"column === 'type'\">\n                        <ng-container\n                          [ngTemplateOutlet]=\"optionFieldTemplate\"\n                          [ngTemplateOutletContext]=\"{\n                            index: i,\n                            key: column,\n                            value: row[column],\n                            path: '',\n                            options: memoizedGetOptions(\n                              i,\n                              row[column],\n                              column,\n                              ''\n                            )\n                          }\"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-container *ngIf=\"column === 'disabled'\">\n                        <ng-container\n                          [ngTemplateOutlet]=\"booleanFieldTemplate\"\n                          [ngTemplateOutletContext]=\"{\n                            index: i,\n                            key: column,\n                            value: row[column],\n                            path: '',\n                            options: memoizedGetOptions(\n                              i,\n                              row[column],\n                              column,\n                              ''\n                            )\n                          }\"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-container *ngIf=\"column === 'delete'\">\n                        <button\n                          (click)=\"\n                            handleOnClickDeleteField({\n                              index: i,\n                              key: row['key']\n                            })\n                          \"\n                          [disabled]=\"rows.length === 1\"\n                        >\n                          delete\n                        </button>\n                      </ng-container>\n                      <ng-container *ngIf=\"column === 'validators'\">\n                        <button\n                          (click)=\"\n                            handleOnClickEditValidators({\n                              index: i,\n                              key: row['key'],\n                              type: row['type']\n                            })\n                          \"\n                        >\n                          edit\n                        </button>\n                      </ng-container>\n                      <ng-container *ngIf=\"column === 'properties'\">\n                        <button\n                          (click)=\"\n                            handleOnClickEditProperties({\n                              index: i,\n                              key: row['key'],\n                              type: row['type']\n                            })\n                          \"\n                        >\n                          edit\n                        </button>\n                      </ng-container>\n                      <ng-container\n                        *ngIf=\"row['type'] === 'radio' && column === 'options'\"\n                      >\n                        <button\n                          (click)=\"\n                            handleOnClickEditOptions({\n                              index: i,\n                              key: row['key'],\n                              type: row['type']\n                            })\n                          \"\n                        >\n                          add\n                        </button>\n                      </ng-container>\n                      <ng-container\n                        *ngIf=\"row['type'] === 'select' && column === 'options'\"\n                      >\n                        <button\n                          (click)=\"\n                            handleOnClickEditOptions({\n                              index: i,\n                              key: row['key'],\n                              type: row['type']\n                            })\n                          \"\n                        >\n                          add\n                        </button>\n                      </ng-container>\n                    </div>\n                  </td>\n                </ng-container>\n              </tr>\n            </ng-container>\n          </tbody>\n        </table>\n        <div class=\"add-field-btn-container\"> </div>\n      </div>\n      <ng-template #nonFieldsEditorTemplate>\n        <div class=\"form-config-no-fields\">\n          <div\n            class=\"json-editor\"\n            contenteditable=\"true\"\n            (keyup)=\"\n              handleOnClickSaveActiveFormConfigNoFields($event.target.innerHTML)\n            \"\n          >\n            {{ activeFormConfigNoFields | json }}\n          </div>\n        </div>\n      </ng-template>\n    </main>\n    <footer>\n      <button\n        *ngIf=\"rows.length > 0\"\n        (click)=\"handleOnClickAddField()\"\n      >\n        add field\n      </button>\n      <button\n        (click)=\"handleOnClickSaveActiveFormConfig()\"\n        [class.secondary]=\"!savedConfig\"\n      >\n        {{ savedConfig ? \"saved\" : \"unsaved\" }}\n      </button>\n    </footer>\n  </ng-container>\n  <ng-template #noFormSelectedTemplate>\n    <div class=\"no-form-selected disclaimer\">\n      <div class=\"icon\"><h1>&#10150;</h1></div>\n      <div><p>Please select a form to edit it's fields</p></div>\n    </div>\n  </ng-template>\n</div>\n\n<!-- Component Dialog -->\n<div\n  class=\"modal\"\n  [class.error]=\"dialogError === true\"\n  *ngIf=\"\n    dialogOpen ||\n    showFieldConfigValidatorsConfigEditor ||\n    showFieldConfigPropertiesConfigEditor ||\n    showFieldConfigOptionsConfigEditor\n  \"\n  [@panelInOut]\n>\n  <div class=\"modal-box\">\n    <div\n      class=\"modal-content\"\n      *ngIf=\"dialogOpen\"\n    >\n      <div class=\"modal-heading\">\n        <div class=\"modal-title\">\n          {{ activeFormConfig.props.title }}'s Config Preview\n        </div>\n        <div class=\"modal-actions\">\n          <button (click)=\"convertToMinifiedJson()\">minify</button>\n          <button (click)=\"convertToCompleteJson()\">full</button>\n          <button (click)=\"downloadJSON()\">download</button>\n          <button (click)=\"copyToClipboard()\">copy</button>\n          <button (click)=\"closeJSONPopup()\">close</button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"json-editor\">\n          <code>{{ activeFormConfig | json }}</code>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"modal-content\"\n      *ngIf=\"showFieldConfigValidatorsConfigEditor\"\n    >\n      <div class=\"modal-heading\">\n        <div class=\"modal-title\">\n          {{ activeFormConfig.props.title }}'s Validator Config Editor\n        </div>\n        <div class=\"modal-actions\">\n          <button (click)=\"closeJSONPopup()\">close</button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <div\n          class=\"json-editor\"\n          contenteditable=\"true\"\n          (keyup)=\"\n            handleOnInputFieldConfigValidatorsConfig($event.target.innerHTML)\n          \"\n        >\n          {{ this.activeFieldConfigValidatorsConfig | json }}\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"modal-content\"\n      *ngIf=\"showFieldConfigPropertiesConfigEditor\"\n    >\n      <div class=\"modal-heading\">\n        <div class=\"modal-title\">\n          {{ activeFormConfig.props.title }}'s Properties Config Editor\n        </div>\n        <div class=\"modal-actions\">\n          <button (click)=\"closeJSONPopup()\">close</button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <div\n          class=\"json-editor\"\n          contenteditable=\"true\"\n          (keyup)=\"\n            handleOnInputFieldConfigPropertiesConfig($event.target.innerHTML)\n          \"\n        >\n          {{ this.activeFieldConfigPropertiesConfig | json }}\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"modal-content\"\n      *ngIf=\"showFieldConfigOptionsConfigEditor\"\n    >\n      <div class=\"modal-heading\">\n        <div class=\"modal-title\">\n          {{ activeFormConfig.props.title }}'s Options Config Editor\n        </div>\n        <div class=\"modal-actions\">\n          <button (click)=\"closeJSONPopup()\">close</button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <div\n          class=\"json-editor\"\n          contenteditable=\"true\"\n          (keyup)=\"\n            handleOnInputFieldConfigOptionsConfig($event.target.innerHTML)\n          \"\n        >\n          {{ this.activeFieldConfigOptionsConfig | json }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- END -->\n\n<!-- Template for rendering different field types -->\n<!-- General Field Template -->\n<ng-template\n  #getFieldTemplate\n  let-index=\"index\"\n  let-value=\"fieldValue\"\n  let-key=\"fieldKey\"\n  let-path=\"parentPath\"\n>\n  <div>\n    <ng-container\n      [ngTemplateOutlet]=\"\n        isObject(value) ? objectFieldTemplate : notObjectFieldTemplate\n      \"\n      [ngTemplateOutletContext]=\"{\n        index: index,\n        fieldValue: value,\n        fieldKey: key,\n        parentPath: path\n      }\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Object Type Field Template -->\n<ng-template\n  #objectFieldTemplate\n  let-index=\"index\"\n  let-value=\"fieldValue\"\n  let-key=\"fieldKey\"\n  let-path=\"parentPath\"\n>\n  <ng-container *ngFor=\"let item of value | keyvalue\">\n    <ng-container\n      [ngTemplateOutlet]=\"getFieldTemplate\"\n      [ngTemplateOutletContext]=\"{\n        index: index,\n        fieldValue: item.value,\n        fieldKey: item.key,\n        parentPath: path === '' ? key : path + '.' + key\n      }\"\n    >\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<!-- Non Object Type Field Template -->\n<ng-template\n  #notObjectFieldTemplate\n  let-index=\"index\"\n  let-value=\"fieldValue\"\n  let-key=\"fieldKey\"\n  let-path=\"parentPath\"\n>\n  <div>\n    <ng-container *ngIf=\"isOptions(index, value, key, path)\">\n      <ng-container\n        [ngTemplateOutlet]=\"optionFieldTemplate\"\n        [ngTemplateOutletContext]=\"{\n          index: index,\n          key: key,\n          value: value,\n          path: path,\n          options: memoizedGetOptions(index, value, key, path)\n        }\"\n      ></ng-container>\n    </ng-container>\n    <ng-container\n      *ngIf=\"!isOptions(index, value, key, path) && isString(value)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          textFieldTemplate;\n          context: { index: index, key: key, value: value, path: path }\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-container\n      *ngIf=\"!isOptions(index, value, key, path) && isNumber(value)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          numberFieldTemplate;\n          context: { index: index, key: key, value: value, path: path }\n        \"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Options Field Template -->\n<ng-template\n  #optionFieldTemplate\n  let-index=\"index\"\n  let-key=\"key\"\n  let-value=\"value\"\n  let-path=\"path\"\n  let-options=\"options\"\n>\n  <div class=\"field-container options\">\n    <select\n      (change)=\"\n        handleOnInput({\n          index,\n          key,\n          value: { previous: value, new: $event.target.value },\n          path\n        })\n      \"\n    >\n      <option\n        *ngFor=\"let option of options\"\n        [value]=\"option\"\n        [selected]=\"option === value\"\n        >{{ option }}</option\n      >\n    </select>\n  </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Boolean Field Template -->\n<ng-template\n  #booleanFieldTemplate\n  let-index=\"index\"\n  let-key=\"key\"\n  let-value=\"value\"\n  let-path=\"path\"\n>\n  <div class=\"field-container checkbox\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"value\"\n      (change)=\"\n        handleOnInput({\n          index,\n          key,\n          value: { previous: value, new: $event.target.checked },\n          path\n        })\n      \"\n    />\n  </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Text Field Template -->\n<ng-template\n  #textFieldTemplate\n  let-index=\"index\"\n  let-key=\"key\"\n  let-value=\"value\"\n  let-path=\"path\"\n>\n  <div class=\"field-container text\">\n    <input\n      placeholder=\"Enter {{ key }}\"\n      type=\"text\"\n      [value]=\"value\"\n      (blur)=\"\n        handleOnInput({\n          index,\n          key,\n          value: { previous: value, new: $event.target.value },\n          path\n        })\n      \"\n    />\n  </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Number Field Template -->\n<ng-template\n  #numberFieldTemplate\n  let-index=\"index\"\n  let-key=\"key\"\n  let-value=\"value\"\n  let-path=\"path\"\n>\n  <div class=\"field-container number\">\n    <input\n      placeholder=\"Enter {{ key }}\"\n      type=\"number\"\n      [value]=\"value\"\n      (blur)=\"\n        handleOnInput({\n          index,\n          key,\n          value: { previous: value, new: $event.target.value },\n          path\n        })\n      \"\n    />\n  </div>\n</ng-template>\n<!-- END -->\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}input[type=text],input[type=number]{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;appearance:auto!important}input[type=checkbox]{appearance:auto!important;width:1rem;height:1rem}select{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}textarea{overflow-wrap:anywhere;resize:none;unicode-bidi:embed;white-space:pre-wrap}button{display:inline-block;padding:8px 12px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:4px;border:none;cursor:pointer}button:hover{background-color:#0069d9}button:active{background-color:#0056b3}button:focus{outline:none}button.secondary{padding:7px 11px;border:1px solid #007bff;background-color:#fff;color:#007bff}button.secondary:hover{background-color:#b7daff}button.secondary:active{background-color:#b7daff}button.secondary:focus{outline:none}.field-container{display:flex}.field-container label{color:gray}.field-container.checkbox{flex-direction:row;align-items:center;justify-content:center;padding:8px 12px;margin:auto}.field-container.options,.field-container.number,.field-container.text{flex-direction:column}.disclaimer{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#121212;width:100%;height:100%}.disclaimer>*:not(:last-child){margin-bottom:1.5rem}.disclaimer .icon{width:3rem;height:3rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.disclaimer.no-form-selected h1{transform:scaleX(-1)}.disclaimer h1{font-size:5rem;font-weight:100}.disclaimer p{font-size:1rem}\n", ":host{all:unset;position:relative;width:100%;height:100%;overflow:auto}.container{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;height:100%;border:1px solid #ccc}.container header{padding:.5rem;display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;border-bottom:1px solid #ccc}.container header .header-form-editor-btns{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center}.container header .header-form-editor-btns>*:not(:last-child){margin-right:1rem}.container main{padding:.5rem;flex-grow:1;overflow:auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;white-space:nowrap;position:relative}.container main>*:not(:last-child){margin-right:1rem}.container main .no-fields{position:absolute;top:0;left:0;background:white}.container main .form-config-no-fields{overflow:auto;width:100%}.container main .form-config-fields{overflow:auto;width:100%}.container main .form-config-fields .add-field-btn-container{width:100%;text-align:center}.container main .validators,.container main .properties{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.container main .validators>*:not(:last-child),.container main .properties>*:not(:last-child){margin-bottom:.5rem}.container main .input-checkbox-container{display:flex;flex-direction:row}.container footer{padding:.5rem;display:flex;flex-direction:row;justify-content:flex-end;align-items:stretch;border-top:1px solid lightgray}.container footer>*:not(:last-child){margin-right:1rem}.modal{position:absolute;top:0;background-color:#0000004d;width:100%;height:100%;display:flex;justify-content:center;align-items:center;left:0;flex-direction:row}.modal.error{background-color:#ff00004d}.modal-box{width:75%;height:75%;margin:auto;background-color:#fff;border-radius:1rem;box-shadow:#64646f33 0 7px 29px}.modal-content{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;width:100%;height:100%}.modal-heading{padding:.5rem 1rem;width:100%;display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid lightgray;align-items:center}.modal-title{font-weight:bold;font-size:1rem}.modal-actions{display:flex;flex-direction:row;cursor:pointer}.modal-actions>*:not(:last-child){margin-right:1rem}.modal-body{overflow:auto;flex:1}.modal-body .json-editor{font-family:monospace;white-space:pre-wrap;border:none;padding:0;background-color:#f5f5f5;height:100%;outline:none;overflow:auto}.json-editor{font-family:monospace;white-space:pre-wrap;border:none;padding:0;background-color:#f5f5f5;height:100%;outline:none;overflow:auto}table{width:100%;border-collapse:collapse;margin-bottom:20px}table th,table td{padding:8px;text-align:left;border:1px solid #ccc;vertical-align:top}table th{background-color:#f2f2f2}table tr:nth-child(even){background-color:#f9f9f9}table tr:hover{background-color:#eaeaea}\n"], components: [{ type: i3__namespace.KwikUILoaderComponent, selector: "kwikui-loader" }], directives: [{ type: i3__namespace$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "json": i3__namespace$2.JsonPipe, "keyvalue": i3__namespace$2.KeyValuePipe }, animations: [
           animations.trigger("panelInOut", [
               animations.transition(":enter", [
                   animations.style({ transform: "translateY(100%)" }),
@@ -2859,9 +2891,6 @@
               ])
           ])
       ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-  __decorate([
-      kwikidToolkit.logMethod
-  ], KwikIDBuilderFormEditorComponent.prototype, "ngOnInit", null);
   __decorate([
       kwikidToolkit.logMethod
   ], KwikIDBuilderFormEditorComponent.prototype, "ngOnChanges", null);
@@ -2903,7 +2932,7 @@
   ], KwikIDBuilderFormEditorComponent.prototype, "handleOnClickDeleteField", null);
   __decorate([
       kwikidToolkit.logMethod
-  ], KwikIDBuilderFormEditorComponent.prototype, "handleOnClickSaveActiveFormConfig_NoFields", null);
+  ], KwikIDBuilderFormEditorComponent.prototype, "handleOnClickSaveActiveFormConfigNoFields", null);
   __decorate([
       kwikidToolkit.logMethod
   ], KwikIDBuilderFormEditorComponent.prototype, "handleOnClickPreview", null);
@@ -2948,7 +2977,7 @@
                   type: i0.Input
               }], onClickSaveActiveFormConfig: [{
                   type: i0.Output
-              }], ngOnInit: [], ngOnChanges: [], initFormEditor: [], handleOnClickChangeActiveEditor: [], handleOnClickSaveActiveFormConfig: [], handleOnClickAddField: [], handleOnClickEditValidators: [], handleOnClickEditProperties: [], handleOnClickEditOptions: [], handleOnInput: [], handleOnInputFieldConfigValidatorsConfig: [], handleOnInputFieldConfigPropertiesConfig: [], handleOnInputFieldConfigOptionsConfig: [], handleOnClickDeleteField: [], handleOnClickSaveActiveFormConfig_NoFields: [], handleOnClickPreview: [], toggleLoader: [], closeJSONPopup: [], copyToClipboard: [], convertToMinifiedJson: [], convertToCompleteJson: [], downloadJSON: [] } });
+              }], ngOnChanges: [], initFormEditor: [], handleOnClickChangeActiveEditor: [], handleOnClickSaveActiveFormConfig: [], handleOnClickAddField: [], handleOnClickEditValidators: [], handleOnClickEditProperties: [], handleOnClickEditOptions: [], handleOnInput: [], handleOnInputFieldConfigValidatorsConfig: [], handleOnInputFieldConfigPropertiesConfig: [], handleOnInputFieldConfigOptionsConfig: [], handleOnClickDeleteField: [], handleOnClickSaveActiveFormConfigNoFields: [], handleOnClickPreview: [], toggleLoader: [], closeJSONPopup: [], copyToClipboard: [], convertToMinifiedJson: [], convertToCompleteJson: [], downloadJSON: [] } });
 
   var KwikIDFormsBuilderComponent = /** @class */ (function () {
       function KwikIDFormsBuilderComponent(loaderService) {
@@ -3001,27 +3030,24 @@
                       case 0:
                           this.toggleLoader(true);
                           activeFormConfig = this.formsList.find(function (form) {
-                              if (form.key === selectedFormKey) {
-                                  return form;
-                              }
+                              return form.key === selectedFormKey;
                           });
-                          formConfig = undefined;
                           if (!kwikidToolkit.getObjectFromLocalStorage(activeFormConfig.key)) return [3 /*break*/, 1];
                           formConfig = kwikidToolkit.getObjectFromLocalStorage(activeFormConfig.key);
                           return [3 /*break*/, 14];
                       case 1:
                           if (!kwikidToolkit.checkObjectKeyExists(activeFormConfig, "props")) return [3 /*break*/, 7];
-                          if (!kwikidToolkit.checkObjectKeyExists(activeFormConfig["props"], "url")) return [3 /*break*/, 3];
-                          return [4 /*yield*/, this.fetchFormConfig(activeFormConfig["props"].url)];
+                          if (!kwikidToolkit.checkObjectKeyExists(activeFormConfig.props, "url")) return [3 /*break*/, 3];
+                          return [4 /*yield*/, this.fetchFormConfig(activeFormConfig.props.url)];
                       case 2:
                           formConfigFromUrl = _e.sent();
                           formConfig = Object.assign(Object.assign({}, activeFormConfig), formConfigFromUrl);
                           return [3 /*break*/, 6];
                       case 3:
-                          if (!(kwikidToolkit.checkObjectKeyExists(activeFormConfig["props"], "path") &&
+                          if (!(kwikidToolkit.checkObjectKeyExists(activeFormConfig.props, "path") &&
                               kwikidToolkit.checkObjectKeyExists(this.userConfig, "backend") &&
                               kwikidToolkit.checkObjectKeyExists(this.userConfig.backend, "CONFIG_BASE_URL"))) return [3 /*break*/, 5];
-                          url = "" + ((_b = (_a = this.userConfig) === null || _a === void 0 ? void 0 : _a.backend) === null || _b === void 0 ? void 0 : _b.CONFIG_BASE_URL) + activeFormConfig["props"].path;
+                          url = "" + ((_b = (_a = this.userConfig) === null || _a === void 0 ? void 0 : _a.backend) === null || _b === void 0 ? void 0 : _b.CONFIG_BASE_URL) + activeFormConfig.props.path;
                           return [4 /*yield*/, this.fetchFormConfig(url)];
                       case 4:
                           formConfigFromPath = _e.sent();
@@ -3048,7 +3074,7 @@
                           if (!(kwikidToolkit.checkObjectKeyExists(activeFormConfig.formContent, "path") &&
                               kwikidToolkit.checkObjectKeyExists(this.userConfig, "backend") &&
                               kwikidToolkit.checkObjectKeyExists(this.userConfig.backend, "CONFIG_BASE_URL"))) return [3 /*break*/, 11];
-                          url = "" + ((_d = (_c = this.userConfig) === null || _c === void 0 ? void 0 : _c.backend) === null || _d === void 0 ? void 0 : _d.CONFIG_BASE_URL) + activeFormConfig["props"].path;
+                          url = "" + ((_d = (_c = this.userConfig) === null || _c === void 0 ? void 0 : _c.backend) === null || _d === void 0 ? void 0 : _d.CONFIG_BASE_URL) + activeFormConfig.props.path;
                           return [4 /*yield*/, this.fetchFormConfig(url)];
                       case 10:
                           formConfigFromPath = _e.sent();
@@ -3105,7 +3131,7 @@
       return KwikIDFormsBuilderComponent;
   }());
   /** @nocollapse */ KwikIDFormsBuilderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormsBuilderComponent, deps: [{ token: i3__namespace.KwikUILoaderService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  /** @nocollapse */ KwikIDFormsBuilderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsBuilderComponent, selector: "kwikid-forms-builder", inputs: { userConfig: "userConfig" }, ngImport: i0__namespace, template: "<div class=\"container\">\n  <kwikid-builder-forms-list\n    [activeFormConfig]=\"this.activeFormConfig\"\n    [formsList]=\"this.formsList\"\n    (getFormsList)=\"this.handleGetFormsList($event)\"\n    (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\n  ></kwikid-builder-forms-list>\n  <kwikid-builder-form-editor\n    [activeFormConfig]=\"activeFormConfig\"\n    (onClickSaveActiveFormConfig)=\"\n      this.handleOnClickSaveActiveFormConfig($event)\n    \"\n  ></kwikid-builder-form-editor>\n</div>\n\n<kwikui-loader\n></kwikui-loader>\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}input[type=text],input[type=number]{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;appearance:auto!important}input[type=checkbox]{appearance:auto!important;width:1rem;height:1rem}select{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}textarea{overflow-wrap:anywhere;resize:none;unicode-bidi:embed;white-space:pre-wrap}button{display:inline-block;padding:8px 12px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:4px;border:none;cursor:pointer}button:hover{background-color:#0069d9}button:active{background-color:#0056b3}button:focus{outline:none}button.secondary{padding:7px 11px;border:1px solid #007bff;background-color:#fff;color:#007bff}button.secondary:hover{background-color:#b7daff}button.secondary:active{background-color:#b7daff}button.secondary:focus{outline:none}.field-container{display:flex}.field-container label{color:gray}.field-container.checkbox{flex-direction:row;align-items:center;justify-content:center;padding:8px 12px;margin:auto}.field-container.options,.field-container.number,.field-container.text{flex-direction:column}.disclaimer{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#121212;width:100%;height:100%}.disclaimer>*:not(:last-child){margin-bottom:1.5rem}.disclaimer .icon{width:3rem;height:3rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.disclaimer.no-form-selected h1{transform:scaleX(-1)}.disclaimer h1{font-size:5rem;font-weight:100}.disclaimer p{font-size:1rem}\n", ":host{all:unset;position:relative;width:100%;height:100%}.container{width:100%;height:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;padding:1rem}.container>*:not(:last-child){margin-right:1rem}\n"], components: [{ type: KwikIDBuilderFormsListComponent, selector: "kwikid-builder-forms-list", inputs: ["activeFormConfig", "formsList"], outputs: ["onClickSetActiveForm", "getFormsList"] }, { type: KwikIDBuilderFormEditorComponent, selector: "kwikid-builder-form-editor", inputs: ["activeFormConfig"], outputs: ["onClickSaveActiveFormConfig"] }, { type: i3__namespace.KwikUILoaderComponent, selector: "kwikui-loader" }] });
+  /** @nocollapse */ KwikIDFormsBuilderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsBuilderComponent, selector: "kwikid-forms-builder", inputs: { userConfig: "userConfig" }, ngImport: i0__namespace, template: "<div class=\"container\">\n  <kwikid-builder-forms-list\n    [activeFormConfig]=\"this.activeFormConfig\"\n    [formsList]=\"this.formsList\"\n    (getFormsList)=\"this.handleGetFormsList($event)\"\n    (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\n  ></kwikid-builder-forms-list>\n  <kwikid-builder-form-editor\n    [activeFormConfig]=\"activeFormConfig\"\n    (onClickSaveActiveFormConfig)=\"\n      this.handleOnClickSaveActiveFormConfig($event)\n    \"\n  ></kwikid-builder-form-editor>\n</div>\n\n<kwikui-loader></kwikui-loader>\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}input[type=text],input[type=number]{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;appearance:auto!important}input[type=checkbox]{appearance:auto!important;width:1rem;height:1rem}select{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}textarea{overflow-wrap:anywhere;resize:none;unicode-bidi:embed;white-space:pre-wrap}button{display:inline-block;padding:8px 12px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:4px;border:none;cursor:pointer}button:hover{background-color:#0069d9}button:active{background-color:#0056b3}button:focus{outline:none}button.secondary{padding:7px 11px;border:1px solid #007bff;background-color:#fff;color:#007bff}button.secondary:hover{background-color:#b7daff}button.secondary:active{background-color:#b7daff}button.secondary:focus{outline:none}.field-container{display:flex}.field-container label{color:gray}.field-container.checkbox{flex-direction:row;align-items:center;justify-content:center;padding:8px 12px;margin:auto}.field-container.options,.field-container.number,.field-container.text{flex-direction:column}.disclaimer{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#121212;width:100%;height:100%}.disclaimer>*:not(:last-child){margin-bottom:1.5rem}.disclaimer .icon{width:3rem;height:3rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.disclaimer.no-form-selected h1{transform:scaleX(-1)}.disclaimer h1{font-size:5rem;font-weight:100}.disclaimer p{font-size:1rem}\n", ":host{all:unset;position:relative;width:100%;height:100%}.container{width:100%;height:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;padding:1rem}.container>*:not(:last-child){margin-right:1rem}\n"], components: [{ type: KwikIDBuilderFormsListComponent, selector: "kwikid-builder-forms-list", inputs: ["activeFormConfig", "formsList"], outputs: ["onClickSetActiveForm", "getFormsList"] }, { type: KwikIDBuilderFormEditorComponent, selector: "kwikid-builder-form-editor", inputs: ["activeFormConfig"], outputs: ["onClickSaveActiveFormConfig"] }, { type: i3__namespace.KwikUILoaderComponent, selector: "kwikui-loader" }] });
   __decorate([
       kwikidToolkit.logMethod
   ], KwikIDFormsBuilderComponent.prototype, "fetchFormConfig", null);
@@ -3132,6 +3158,7 @@
                   type: i0.Input
               }], fetchFormConfig: [], handleGetFormsList: [], handleOnClickSetActiveForm: [], handleOnClickSaveActiveFormConfig: [], toggleLoader: [] } });
 
+  /* eslint-disable no-unused-vars */
   var EFormsListStatus;
   (function (EFormsListStatus) {
       EFormsListStatus["COMPLETED"] = "completed";
@@ -3215,6 +3242,7 @@
       EApiRequestUrlType["CALCULATED"] = "CALCULATED";
   })(EApiRequestUrlType || (EApiRequestUrlType = {}));
 
+  /* eslint-disable no-unused-vars */
   var EMessageType;
   (function (EMessageType) {
       EMessageType["DEFAULT"] = "default";
@@ -3228,6 +3256,7 @@
       EFormViewGoBackMode["TABBED"] = "TABBED";
   })(EFormViewGoBackMode || (EFormViewGoBackMode = {}));
 
+  /* eslint-disable no-unused-vars */
   var ELogEventType$1;
   (function (ELogEventType) {
       ELogEventType["FORM__ACTION_EXECUTE"] = "FORM__ACTION_EXECUTE";
@@ -3318,24 +3347,23 @@
                   .join("");
               return outputString;
           }
-          else {
-              return undefined;
-          }
+          return undefined;
       };
       // Function to preprocess header data
       KwikIDFormViewApiService.prototype.preProcessHeader = function (headerData, isVerifySignature) {
           if (!headerData)
               headerData = {};
           if (!headerData.headers)
-              headerData["headers"] = {};
+              headerData.headers = {};
           // Generate a unique identifier if signature verification is required
           if (isVerifySignature) {
-              headerData["headers"]["xrid"] = uuid.v4();
+              headerData.headers.xrid = uuid.v4();
           }
           // Retrieve session ID from local storage and add it to headers
-          var session_id = localStorage.getItem("session_id");
-          if (session_id)
-              headerData["headers"]["ses"] = session_id;
+          var sessionId = localStorage.getItem("session_id");
+          if (sessionId) {
+              headerData.headers.ses = sessionId;
+          }
           return headerData;
       };
       // Function to verify the signature
@@ -3345,16 +3373,16 @@
               if (!isVerifySignature) {
                   resolve(true);
               }
-              // Check if data is invalid
               else if (!data) {
+                  // Check if data is invalid
                   resolve(true);
               }
-              // Check if the signature is missing in headers when authentication is not skipped
               else if (isVerifySignature && header && !(header === null || header === void 0 ? void 0 : header.sig)) {
+                  // Check if the signature is missing in headers when authentication is not skipped
                   reject(false);
               }
-              // Verify the signature when public key and header with signature are present and authentication is not skipped
               else if (isVerifySignature && header && (header === null || header === void 0 ? void 0 : header.sig)) {
+                  // Verify the signature when public key and header with signature are present and authentication is not skipped
                   // Extract the signature and decode it
                   var signature = header.sig.split(".")[0];
                   var rawSignature = atob(signature);
@@ -3366,7 +3394,7 @@
                   if (signature) {
                       // Check if the current time is before the expiration time
                       var dateValue = new Date().valueOf();
-                      var dateCheck = dateValue < parseInt(exp);
+                      var dateCheck = dateValue < parseInt(exp, 10);
                       // Check if the signature matches the data
                       var res = signature === data;
                       // Resolve the promise if the signature is valid and the date check passes
@@ -3402,7 +3430,7 @@
               preProcessedHeader = this.preProcessHeader(headerData, isVerifySignature);
           }
           else {
-              preProcessedHeader["observe"] = "response";
+              preProcessedHeader.observe = "response";
           }
           // Encrypt body if required
           if (isEncrypt) {
@@ -3414,7 +3442,7 @@
                   return __generator(this, function (_c) {
                       switch (_c.label) {
                           case 0:
-                              data = res["data"];
+                              data = res.data;
                               if (!(data && isDecrypt)) return [3 /*break*/, 2];
                               encryptedResponse = data;
                               return [4 /*yield*/, kwikidToolkit.decryptWithAES(encryptedResponse)];
@@ -3478,7 +3506,7 @@
               preProcessedHeader = this.preProcessHeader(headerData, isVerifySignature);
           }
           else {
-              preProcessedHeader["observe"] = "response";
+              preProcessedHeader.observe = "response";
           }
           return new rxjs.Observable(function (subscriber) {
               axios__default["default"].get(url, preProcessedHeader).then(function (res) { return __awaiter(_this, void 0, void 0, function () {
@@ -3486,7 +3514,7 @@
                   return __generator(this, function (_c) {
                       switch (_c.label) {
                           case 0:
-                              data = res["data"];
+                              data = res.data;
                               if (!isDecrypt) return [3 /*break*/, 2];
                               encryptedResponse = data;
                               return [4 /*yield*/, kwikidToolkit.decryptWithAES(encryptedResponse)];
@@ -3541,7 +3569,7 @@
       KwikIDFormViewApiService.prototype.executeApiCall = function (url, method, body, headers, isEncrypt, isDecrypt, isVerifySignature) {
           var _this = this;
           return new Promise(function (resolve) {
-              if (method == "GET") {
+              if (method === "GET") {
                   _this.get(url, { headers: headers }, isDecrypt, isVerifySignature).subscribe(function (res) {
                       resolve(res);
                   }, function (err) {
@@ -3575,16 +3603,39 @@
       kwikidToolkit.logMethod
   ], KwikIDFormViewApiService.prototype, "get", null);
 
+  var FORM_VIEW_TIMERS = {
+      WAIT_FOR_CHANGES_BEFORE_MOVING_TO_NEXT_TASK: 10,
+      WAIT_FOR_FILE_METADATA_DEEPCOPY: 300,
+      WAIT_FOR_KWIKID_CAMERA_TO_LOAD: 500,
+      WAIT_FOR_KWIKID_CAMERA_MEDIA_TO_BE_SET: 500,
+      LOCATION_PERMISSION_ERROR_TOGGLE: 3000,
+      LOCATION_PERMISSION_RESET_BUTTON_STATUS: 500,
+      INVALID_FIELDS_SAVE_FORM_ERROR_TOGGLE: 3000,
+      TIMER_300: 300,
+      TIMER_500: 500,
+      TIMER_1000: 1000,
+      TIMER_3000: 3000,
+      WAIT_FOR_API_MOCK_DATA: 1000,
+      API_MOCK_SUCCESS_STATUS_CODE: 200,
+      API_MOCK_ERROR_STATUS_CODE: 200
+  };
+
   var Defaults = /** @class */ (function () {
-      function Defaults(field, formFields, allFormsData, formData, previousFormData, extraData, takeAction) {
+      function Defaults(field, object, takeAction) {
           this._field = field;
-          this._formFields = formFields;
-          this._allFormsData = allFormsData;
-          this._formData = formData;
-          this._previousFormData = previousFormData;
-          this._extraData = extraData;
+          this._object = object;
           this._takeAction = takeAction;
       }
+      Object.defineProperty(Defaults.prototype, "object", {
+          get: function () {
+              return this._object;
+          },
+          set: function (value) {
+              this._object = value;
+          },
+          enumerable: false,
+          configurable: true
+      });
       Defaults.prototype.getFormFieldValue = function () {
           return __awaiter(this, void 0, void 0, function () {
               var defaultValue, engine, triggers, rules, actions, rulesMapping, actions_1, actions_1_1, action, conditionEvaluation, actions_3, e_1_1, sources, sourceIndex, sources_1, sources_1_1, source, sources_2, value, validation, triggers, rules, actions, rulesMapping, actions_2, actions_2_1, action, conditionEvaluation, actions_4, e_2_1, e_3_1;
@@ -3602,17 +3653,8 @@
                       case 1:
                           if (!!kwikidToolkit.checkObjectKeyExists(this._field.default.value, "sources")) return [3 /*break*/, 10];
                           engine = this._field.default.value;
-                          triggers = engine.triggers;
-                          rules = engine.rules;
-                          actions = engine.actions;
-                          rulesMapping = new kwikidToolkit.Rule(rules, {
-                              FIELD_CONFIG: this._field,
-                              FORM_FIELDS: this._formFields,
-                              FORM_DATA: this._formData,
-                              PREVIOUS_FORM_DATA: this._previousFormData,
-                              ALL_FORMS_DATA: this._allFormsData,
-                              EXTRA_DATA: this._extraData
-                          }).mapping();
+                          triggers = engine.triggers, rules = engine.rules, actions = engine.actions;
+                          rulesMapping = new kwikidToolkit.Rule(rules, Object.assign(Object.assign({}, this._object), { FIELD_CONFIG: this._field })).mapping();
                           _d.label = 2;
                       case 2:
                           _d.trys.push([2, 7, 8, 9]);
@@ -3623,14 +3665,7 @@
                           action = actions_1_1.value;
                           conditionEvaluation = new kwikidToolkit.Condition(action.condition, rulesMapping).evaluate();
                           if (!conditionEvaluation) return [3 /*break*/, 5];
-                          actions_3 = new kwikidToolkit.Action(action, rulesMapping, {
-                              FIELD_CONFIG: this._field,
-                              FORM_FIELDS: this._formFields,
-                              FORM_DATA: this._formData,
-                              PREVIOUS_FORM_DATA: this._previousFormData,
-                              ALL_FORMS_DATA: this._allFormsData,
-                              EXTRA_DATA: this._extraData
-                          }, this._takeAction);
+                          actions_3 = new kwikidToolkit.Action(action, rulesMapping, Object.assign(Object.assign({}, this._object), { FIELD_CONFIG: this._field }), this._takeAction);
                           return [4 /*yield*/, actions_3.execute()];
                       case 4:
                           _d.sent();
@@ -3666,14 +3701,7 @@
                       case 12:
                           if (!!sources_1_1.done) return [3 /*break*/, 22];
                           source = sources_1_1.value;
-                          sources_2 = new kwikidToolkit.Source({
-                              FIELD_CONFIG: this._field,
-                              FORM_FIELDS: this._formFields,
-                              FORM_DATA: this._formData,
-                              PREVIOUS_FORM_DATA: this._previousFormData,
-                              ALL_FORMS_DATA: this._allFormsData,
-                              EXTRA_DATA: this._extraData
-                          });
+                          sources_2 = new kwikidToolkit.Source(Object.assign(Object.assign({}, this._object), { FIELD_CONFIG: this._field }));
                           value = sources_2.getValueFromSource(source);
                           // Set the Value of current source.
                           this._field = kwikidToolkit.setValueToObjectPath(this._field, "default.value.sources.[" + sourceIndex + "].value", value);
@@ -3681,14 +3709,7 @@
                           triggers = validation.triggers;
                           rules = validation.rules;
                           actions = validation.actions;
-                          rulesMapping = new kwikidToolkit.Rule(rules, {
-                              FIELD_CONFIG: this._field,
-                              FORM_FIELDS: this._formFields,
-                              FORM_DATA: this._formData,
-                              PREVIOUS_FORM_DATA: this._previousFormData,
-                              ALL_FORMS_DATA: this._allFormsData,
-                              EXTRA_DATA: this._extraData
-                          }).mapping();
+                          rulesMapping = new kwikidToolkit.Rule(rules, Object.assign(Object.assign({}, this._object), { FIELD_CONFIG: this._field })).mapping();
                           _d.label = 13;
                       case 13:
                           _d.trys.push([13, 18, 19, 20]);
@@ -3699,14 +3720,7 @@
                           action = actions_2_1.value;
                           conditionEvaluation = new kwikidToolkit.Condition(action.condition, rulesMapping).evaluate();
                           if (!conditionEvaluation) return [3 /*break*/, 16];
-                          actions_4 = new kwikidToolkit.Action(action, rulesMapping, {
-                              FIELD_CONFIG: this._field,
-                              FORM_FIELDS: this._formFields,
-                              FORM_DATA: this._formData,
-                              PREVIOUS_FORM_DATA: this._previousFormData,
-                              ALL_FORMS_DATA: this._allFormsData,
-                              EXTRA_DATA: this._extraData
-                          }, this._takeAction);
+                          actions_4 = new kwikidToolkit.Action(action, rulesMapping, Object.assign(Object.assign({}, this._object), { FIELD_CONFIG: this._field }), this._takeAction);
                           return [4 /*yield*/, actions_4.execute()];
                       case 15:
                           _d.sent();
@@ -3726,7 +3740,7 @@
                           finally { if (e_2) throw e_2.error; }
                           return [7 /*endfinally*/];
                       case 20:
-                          sourceIndex++;
+                          sourceIndex += 1;
                           _d.label = 21;
                       case 21:
                           sources_1_1 = sources_1.next();
@@ -3763,14 +3777,7 @@
                           apiConfig = this._field.default.api;
                           rules = apiConfig.rules;
                           actions = apiConfig.actions;
-                          rulesMapping = new kwikidToolkit.Rule(rules, {
-                              FIELD_CONFIG: this._field,
-                              FORM_FIELDS: this._formFields,
-                              FORM_DATA: this._formData,
-                              PREVIOUS_FORM_DATA: this._previousFormData,
-                              ALL_FORMS_DATA: this._allFormsData,
-                              EXTRA_DATA: this._extraData
-                          }).mapping();
+                          rulesMapping = new kwikidToolkit.Rule(rules, Object.assign(Object.assign({}, this._object), { FIELD_CONFIG: this._field })).mapping();
                           _b.label = 1;
                       case 1:
                           _b.trys.push([1, 6, 7, 8]);
@@ -3781,14 +3788,7 @@
                           action = actions_5_1.value;
                           conditionEvaluation = new kwikidToolkit.Condition(action.condition, rulesMapping).evaluate();
                           if (!conditionEvaluation) return [3 /*break*/, 4];
-                          actions_6 = new kwikidToolkit.Action(action, rulesMapping, {
-                              FIELD_CONFIG: this._field,
-                              FORM_FIELDS: this._formFields,
-                              FORM_DATA: this._formData,
-                              PREVIOUS_FORM_DATA: this._previousFormData,
-                              ALL_FORMS_DATA: this._allFormsData,
-                              EXTRA_DATA: this._extraData
-                          }, this._takeAction);
+                          actions_6 = new kwikidToolkit.Action(action, rulesMapping, Object.assign(Object.assign({}, this._object), { FIELD_CONFIG: this._field }), this._takeAction);
                           return [4 /*yield*/, actions_6.execute()];
                       case 3:
                           _b.sent();
@@ -3822,14 +3822,7 @@
                           optionsConfig = this._field.default.options;
                           rules = optionsConfig.rules;
                           actions = optionsConfig.actions;
-                          rulesMapping = new kwikidToolkit.Rule(rules, {
-                              FIELD_CONFIG: this._field,
-                              FORM_FIELDS: this._formFields,
-                              FORM_DATA: this._formData,
-                              PREVIOUS_FORM_DATA: this._previousFormData,
-                              ALL_FORMS_DATA: this._allFormsData,
-                              EXTRA_DATA: this._extraData
-                          }).mapping();
+                          rulesMapping = new kwikidToolkit.Rule(rules, Object.assign(Object.assign({}, this._object), { FIELD_CONFIG: this._field })).mapping();
                           _b.label = 1;
                       case 1:
                           _b.trys.push([1, 6, 7, 8]);
@@ -3840,14 +3833,7 @@
                           action = actions_7_1.value;
                           conditionEvaluation = new kwikidToolkit.Condition(action.condition, rulesMapping).evaluate();
                           if (!conditionEvaluation) return [3 /*break*/, 4];
-                          actions_8 = new kwikidToolkit.Action(action, rulesMapping, {
-                              FIELD_CONFIG: this._field,
-                              FORM_FIELDS: this._formFields,
-                              FORM_DATA: this._formData,
-                              PREVIOUS_FORM_DATA: this._previousFormData,
-                              ALL_FORMS_DATA: this._allFormsData,
-                              EXTRA_DATA: this._extraData
-                          }, this._takeAction);
+                          actions_8 = new kwikidToolkit.Action(action, rulesMapping, Object.assign(Object.assign({}, this._object), { FIELD_CONFIG: this._field }), this._takeAction);
                           return [4 /*yield*/, actions_8.execute()];
                       case 3:
                           _b.sent();
@@ -3883,6 +3869,15 @@
       kwikidToolkit.logMethod
   ], Defaults.prototype, "getFormFieldOptions", null);
 
+  function NoWhitespacesValidator() {
+      return function (control) {
+          var value = control.value;
+          if (!value || typeof value !== "string") {
+              return null;
+          }
+          return kwikidToolkit.hasWhitespacesOnly(value) ? { onlyWhitespaces: true } : null;
+      };
+  }
   var FormValidation = /** @class */ (function () {
       function FormValidation() {
       }
@@ -3936,14 +3931,16 @@
       FormValidation.prototype.getFormFieldsValidationErrors = function (formGroup) {
           var errors = [];
           var _loop_1 = function (key) {
-              var controlErrors = formGroup.controls[key].errors;
-              if (controlErrors !== null && controlErrors !== undefined) {
-                  Object.keys(controlErrors).forEach(function (keyError) {
-                      errors.push({
-                          name: keyError,
-                          value: controlErrors[keyError]
+              if (kwikidToolkit.isNotEmptyValue(key)) {
+                  var controlErrors_1 = formGroup.controls[key].errors;
+                  if (controlErrors_1 !== null && controlErrors_1 !== undefined) {
+                      Object.keys(controlErrors_1).forEach(function (keyError) {
+                          errors.push({
+                              name: keyError,
+                              value: controlErrors_1[keyError]
+                          });
                       });
-                  });
+                  }
               }
           };
           for (var key in formGroup.controls) {
@@ -3990,21 +3987,12 @@
   __decorate([
       kwikidToolkit.logMethod
   ], FormValidation.prototype, "getFormFieldsInvalidControls", null);
-  function NoWhitespacesValidator() {
-      return function (control) {
-          var value = control.value;
-          if (!value || typeof value !== "string") {
-              return null;
-          }
-          return kwikidToolkit.hasWhitespacesOnly(value) ? { onlyWhitespaces: true } : null;
-      };
-  }
 
   var KwikIDFormViewService = /** @class */ (function () {
       function KwikIDFormViewService() {
       }
       // 'init' stage of the form
-      KwikIDFormViewService.prototype.createFormGroup = function (fields, formData, previousFormData, allFormsData, extraData, takeAction) {
+      KwikIDFormViewService.prototype.createFormGroup = function (fields, object, takeAction) {
           return __awaiter(this, void 0, void 0, function () {
               var formGroup, fields_1, fields_1_1, field, defaults, value, validators, e_1_1;
               var e_1, _a;
@@ -4021,7 +4009,7 @@
                           if (!!fields_1_1.done) return [3 /*break*/, 10];
                           field = fields_1_1.value;
                           if (!field.isFormElement) return [3 /*break*/, 9];
-                          defaults = new Defaults(field, fields, allFormsData, formData, previousFormData, extraData, takeAction);
+                          defaults = new Defaults(field, Object.assign(Object.assign({}, object), { FORM_FIELDS: fields }), takeAction);
                           value = "";
                           if (!kwikidToolkit.checkObjectKeyExists(field, "default")) return [3 /*break*/, 4];
                           if (!kwikidToolkit.checkObjectKeyExists(field.default, "value")) return [3 /*break*/, 4];
@@ -4097,7 +4085,7 @@
               return __generator(this, function (_l) {
                   switch (_l.label) {
                       case 0:
-                          if (!(this._request.url.hasOwnProperty("type") &&
+                          if (!(kwikidToolkit.checkObjectKeyExists(this._request.url, "type") &&
                               this._request.url.type === EApiRequestUrlType.CALCULATED)) return [3 /*break*/, 2];
                           source = new kwikidToolkit.Source(this._object);
                           return [4 /*yield*/, source.getValueFromSource(this._request.url.props.value.source)];
@@ -4123,7 +4111,7 @@
               return __generator(this, function (_q) {
                   switch (_q.label) {
                       case 0:
-                          if (!kwikidToolkit.checkObjectKeyExists(this._request, "body")) return [3 /*break*/, 34];
+                          if (!kwikidToolkit.checkObjectKeyExists(this._request, "body")) return [3 /*break*/, 33];
                           if (!kwikidToolkit.checkObjectKeyExists(this._request.body, "params")) return [3 /*break*/, 23];
                           params = this._request.body.params;
                           paramIndex = 0;
@@ -4184,7 +4172,7 @@
                           finally { if (e_1) throw e_1.error; }
                           return [7 /*endfinally*/];
                       case 12:
-                          sourceIndex++;
+                          sourceIndex += 1;
                           _q.label = 13;
                       case 13:
                           sources_1_1 = sources_1.next();
@@ -4201,7 +4189,7 @@
                           finally { if (e_2) throw e_2.error; }
                           return [7 /*endfinally*/];
                       case 17:
-                          paramIndex++;
+                          paramIndex += 1;
                           _q.label = 18;
                       case 18:
                           params_1_1 = params_1.next();
@@ -4256,9 +4244,7 @@
                           return [7 /*endfinally*/];
                       case 31: return [2 /*return*/, this._object.API_CONFIG];
                       case 32: return [2 /*return*/, this._object.API_CONFIG];
-                      case 33: return [3 /*break*/, 35];
-                      case 34: return [2 /*return*/, this._object.API_CONFIG];
-                      case 35: return [2 /*return*/];
+                      case 33: return [2 /*return*/, this._object.API_CONFIG];
                   }
               });
           });
@@ -4271,7 +4257,7 @@
               return __generator(this, function (_o) {
                   switch (_o.label) {
                       case 0:
-                          if (!kwikidToolkit.checkObjectKeyExists(this._request, "body")) return [3 /*break*/, 20];
+                          if (!kwikidToolkit.checkObjectKeyExists(this._request, "body")) return [3 /*break*/, 19];
                           if (!kwikidToolkit.checkObjectKeyExists(this._request.body, "validation")) return [3 /*break*/, 9];
                           body = this._request.body;
                           validation = body.validation;
@@ -4349,11 +4335,9 @@
                       case 18:
                           this._object = kwikidToolkit.setValueToObjectPath(this._object, "API_CONFIG.request.body.is_valid", true);
                           return [2 /*return*/, this._object.API_CONFIG];
-                      case 19: return [3 /*break*/, 21];
-                      case 20:
+                      case 19:
                           this._object = kwikidToolkit.setValueToObjectPath(this._object, "API_CONFIG.request.body.is_valid", true);
                           return [2 /*return*/, this._object.API_CONFIG];
-                      case 21: return [2 /*return*/];
                   }
               });
           });
@@ -4366,7 +4350,7 @@
               return __generator(this, function (_q) {
                   switch (_q.label) {
                       case 0:
-                          if (!kwikidToolkit.checkObjectKeyExists(this._request, "headers")) return [3 /*break*/, 34];
+                          if (!kwikidToolkit.checkObjectKeyExists(this._request, "headers")) return [3 /*break*/, 33];
                           if (!kwikidToolkit.checkObjectKeyExists(this._request.headers, "params")) return [3 /*break*/, 23];
                           params = this._request.headers.params;
                           paramIndex = 0;
@@ -4427,7 +4411,7 @@
                           finally { if (e_7) throw e_7.error; }
                           return [7 /*endfinally*/];
                       case 12:
-                          sourceIndex++;
+                          sourceIndex += 1;
                           _q.label = 13;
                       case 13:
                           sources_3_1 = sources_3.next();
@@ -4444,7 +4428,7 @@
                           finally { if (e_8) throw e_8.error; }
                           return [7 /*endfinally*/];
                       case 17:
-                          paramIndex++;
+                          paramIndex += 1;
                           _q.label = 18;
                       case 18:
                           params_2_1 = params_2.next();
@@ -4499,9 +4483,7 @@
                           return [7 /*endfinally*/];
                       case 31: return [2 /*return*/, this._object.API_CONFIG];
                       case 32: return [2 /*return*/, this._object.API_CONFIG];
-                      case 33: return [3 /*break*/, 35];
-                      case 34: return [2 /*return*/, this._object.API_CONFIG];
-                      case 35: return [2 /*return*/];
+                      case 33: return [2 /*return*/, this._object.API_CONFIG];
                   }
               });
           });
@@ -4515,7 +4497,7 @@
                   switch (_o.label) {
                       case 0:
                           headers = this._request.headers;
-                          if (!kwikidToolkit.checkObjectKeyExists(this._request, "headers")) return [3 /*break*/, 20];
+                          if (!kwikidToolkit.checkObjectKeyExists(this._request, "headers")) return [3 /*break*/, 19];
                           if (!kwikidToolkit.checkObjectKeyExists(this._request.headers, "validation")) return [3 /*break*/, 9];
                           validation = headers.validation;
                           triggers = (_a = validation === null || validation === void 0 ? void 0 : validation.triggers) !== null && _a !== void 0 ? _a : [];
@@ -4592,11 +4574,9 @@
                       case 18:
                           this._object = kwikidToolkit.setValueToObjectPath(this._object, "API_CONFIG.request.headers.is_valid", true);
                           return [2 /*return*/, this._object.API_CONFIG];
-                      case 19: return [3 /*break*/, 21];
-                      case 20:
+                      case 19:
                           this._object = kwikidToolkit.setValueToObjectPath(this._object, "API_CONFIG.request.headers.is_valid", true);
                           return [2 /*return*/, this._object.API_CONFIG];
-                      case 21: return [2 /*return*/];
                   }
               });
           });
@@ -4757,61 +4737,61 @@
   ], Apis.prototype, "callNextApi", null);
 
   var CameraHelper = /** @class */ (function () {
-      function CameraHelper(field, formFields, allFormsData, formData, previousFormData, extraData) {
-          this.cameraData = {};
+      function CameraHelper(field, object) {
+          this.activeCameraData = {};
           this._field = field;
-          this._formFields = formFields;
-          this._allFormsData = allFormsData;
-          this._formData = formData;
-          this._previousFormData = previousFormData;
-          this._extraData = extraData;
+          this._object = object;
       }
+      Object.defineProperty(CameraHelper.prototype, "object", {
+          get: function () {
+              return this._object;
+          },
+          set: function (value) {
+              this._object = value;
+          },
+          enumerable: false,
+          configurable: true
+      });
       CameraHelper.prototype.getCameraWatermarkData = function () {
+          var _a, _b;
           return __awaiter(this, void 0, void 0, function () {
               var sources, sources_1, sources_1_1, source, sources_2, value, e_1_1;
-              var e_1, _a;
-              return __generator(this, function (_b) {
-                  switch (_b.label) {
+              var e_1, _c;
+              return __generator(this, function (_d) {
+                  switch (_d.label) {
                       case 0:
-                          sources = this._field.properties["watermarkDataSources"];
-                          _b.label = 1;
+                          sources = (_b = (_a = this._field.properties.features) === null || _a === void 0 ? void 0 : _a.watermark) === null || _b === void 0 ? void 0 : _b.sources;
+                          _d.label = 1;
                       case 1:
-                          _b.trys.push([1, 6, 7, 8]);
+                          _d.trys.push([1, 6, 7, 8]);
                           sources_1 = __values(sources), sources_1_1 = sources_1.next();
-                          _b.label = 2;
+                          _d.label = 2;
                       case 2:
                           if (!!sources_1_1.done) return [3 /*break*/, 5];
                           source = sources_1_1.value;
-                          sources_2 = new kwikidToolkit.Source({
-                              FIELD_CONFIG: this._field,
-                              FORM_FIELDS: this._formFields,
-                              FORM_DATA: this._formData,
-                              PREVIOUS_FORM_DATA: this._previousFormData,
-                              ALL_FORMS_DATA: this._allFormsData,
-                              EXTRA_DATA: this._extraData
-                          });
+                          sources_2 = new kwikidToolkit.Source(Object.assign(Object.assign({}, this._object), { FIELD_CONFIG: this._field }));
                           return [4 /*yield*/, sources_2.getValueFromSource(source)];
                       case 3:
-                          value = _b.sent();
+                          value = _d.sent();
                           if (kwikidToolkit.checkObjectKeyExists(source, "id")) {
-                              this.cameraData[source.id] = value;
+                              this.activeCameraData[source.id] = value;
                           }
-                          _b.label = 4;
+                          _d.label = 4;
                       case 4:
                           sources_1_1 = sources_1.next();
                           return [3 /*break*/, 2];
                       case 5: return [3 /*break*/, 8];
                       case 6:
-                          e_1_1 = _b.sent();
+                          e_1_1 = _d.sent();
                           e_1 = { error: e_1_1 };
                           return [3 /*break*/, 8];
                       case 7:
                           try {
-                              if (sources_1_1 && !sources_1_1.done && (_a = sources_1.return)) _a.call(sources_1);
+                              if (sources_1_1 && !sources_1_1.done && (_c = sources_1.return)) _c.call(sources_1);
                           }
                           finally { if (e_1) throw e_1.error; }
                           return [7 /*endfinally*/];
-                      case 8: return [2 /*return*/, this.cameraData];
+                      case 8: return [2 /*return*/, this.activeCameraData];
                   }
               });
           });
@@ -4848,20 +4828,18 @@
       }
       Tasks.prototype.execute = function () {
           return __awaiter(this, void 0, void 0, function () {
-              var 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) {
+              var _a, triggers, rules, actions, rulesMapping, actions_1, actions_1_1, action, conditionEvaluation, actions_2, e_1_1;
+              var e_1, _b;
+              return __generator(this, function (_c) {
+                  switch (_c.label) {
                       case 0:
-                          triggers = this._task.triggers;
-                          rules = this._task.rules;
-                          actions = this._task.actions;
+                          _a = this._task, triggers = _a.triggers, rules = _a.rules, actions = _a.actions;
                           rulesMapping = new kwikidToolkit.Rule(rules, this._object).mapping();
-                          _b.label = 1;
+                          _c.label = 1;
                       case 1:
-                          _b.trys.push([1, 6, 7, 8]);
+                          _c.trys.push([1, 6, 7, 8]);
                           actions_1 = __values(actions), actions_1_1 = actions_1.next();
-                          _b.label = 2;
+                          _c.label = 2;
                       case 2:
                           if (!!actions_1_1.done) return [3 /*break*/, 5];
                           action = actions_1_1.value;
@@ -4870,19 +4848,19 @@
                           actions_2 = new kwikidToolkit.Action(action, rulesMapping, this._object, this._takeAction);
                           return [4 /*yield*/, actions_2.execute()];
                       case 3:
-                          _b.sent();
-                          _b.label = 4;
+                          _c.sent();
+                          _c.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_1 = _c.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);
+                              if (actions_1_1 && !actions_1_1.done && (_b = actions_1.return)) _b.call(actions_1);
                           }
                           finally { if (e_1) throw e_1.error; }
                           return [7 /*endfinally*/];
@@ -4915,6 +4893,69 @@
                   }]
           }], ctorParameters: function () { return [{ type: i1__namespace.DomSanitizer }]; } });
 
+  var FilterImageUrlOrBase64FromObjectPipe = /** @class */ (function () {
+      function FilterImageUrlOrBase64FromObjectPipe() {
+      }
+      FilterImageUrlOrBase64FromObjectPipe.prototype.transform = function (mediaFiles) {
+          if (kwikidToolkit.isEmptyValue(mediaFiles)) {
+              return [];
+          }
+          return mediaFiles
+              .map(function (item) {
+              if (kwikidToolkit.isObject(item) && kwikidToolkit.checkObjectKeyExists(item, "image")) {
+                  return item.image;
+              }
+              if (kwikidToolkit.isNotEmptyValue(item)) {
+                  return item;
+              }
+              return null; // Use null to filter out unwanted items
+          })
+              .filter(function (item) { return kwikidToolkit.isNotEmptyValue(item); });
+      };
+      return FilterImageUrlOrBase64FromObjectPipe;
+  }());
+  /** @nocollapse */ FilterImageUrlOrBase64FromObjectPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FilterImageUrlOrBase64FromObjectPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+  /** @nocollapse */ FilterImageUrlOrBase64FromObjectPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FilterImageUrlOrBase64FromObjectPipe, name: "filterImageUrlOrBase64FromObject" });
+  __decorate([
+      kwikidToolkit.logMethod
+  ], FilterImageUrlOrBase64FromObjectPipe.prototype, "transform", null);
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FilterImageUrlOrBase64FromObjectPipe, decorators: [{
+              type: i0.Pipe,
+              args: [{
+                      name: "filterImageUrlOrBase64FromObject"
+                  }]
+          }], propDecorators: { transform: [] } });
+
+  var FilterVideoUrlOrBase64FromObjectPipe = /** @class */ (function () {
+      function FilterVideoUrlOrBase64FromObjectPipe() {
+      }
+      FilterVideoUrlOrBase64FromObjectPipe.prototype.transform = function (mediaFiles) {
+          if (kwikidToolkit.isEmptyValue(mediaFiles)) {
+              return [];
+          }
+          return mediaFiles
+              .map(function (item) {
+              if (kwikidToolkit.isObject(item) && kwikidToolkit.checkObjectKeyExists(item, "video")) {
+                  return item.video;
+              }
+              if (kwikidToolkit.isNotEmptyValue(item)) {
+                  return item;
+              }
+              return null; // Use null to filter out unwanted items
+          })
+              .filter(function (item) { return kwikidToolkit.isNotEmptyValue(item); });
+      };
+      return FilterVideoUrlOrBase64FromObjectPipe;
+  }());
+  /** @nocollapse */ FilterVideoUrlOrBase64FromObjectPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FilterVideoUrlOrBase64FromObjectPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+  /** @nocollapse */ FilterVideoUrlOrBase64FromObjectPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FilterVideoUrlOrBase64FromObjectPipe, name: "filterVideoUrlOrBase64FromObject" });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FilterVideoUrlOrBase64FromObjectPipe, decorators: [{
+              type: i0.Pipe,
+              args: [{
+                      name: "filterVideoUrlOrBase64FromObject"
+                  }]
+          }] });
+
   var TimerPipe = /** @class */ (function () {
       function TimerPipe() {
       }
@@ -4964,18 +5005,19 @@
           this.fieldGroups = {};
           this.formFields = [];
           this.previousFormData = {};
+          this.cameraData = {};
           this.isShowCamera = false;
           this.isShowCameraFullscreen = false;
-          this.cameraFieldKey = "";
-          this.cameraData = undefined;
-          this.cameraType = undefined;
-          this.cameraImage = "";
-          this.cameraVideo = "";
-          this.cameraConfig = undefined;
-          this.cameraRecordingTime = 0;
-          this.cameraRecordingTimerSubcription = undefined;
-          this.cameraRecordingState = "NONE";
-          this.cameraRecordingStateSubcription = undefined;
+          this.activeCameraFieldKey = "";
+          this.activeCameraData = {};
+          this.activeCameraType = undefined;
+          this.activeCameraImage = "";
+          this.activeCameraVideo = "";
+          this.activeCameraConfig = undefined;
+          this.activeCameraRecordingTime = 0;
+          this.activeCameraRecordingTimerSubcription = undefined;
+          this.activeCameraRecordingState = "NONE";
+          this.activeCameraRecordingStateSubcription = undefined;
           this.previewProperties = {
               html: {
                   before: "",
@@ -5022,14 +5064,14 @@
       KwikIDFormViewComponent.prototype.resetCamera = function () {
           this.isShowCamera = false;
           this.isShowCameraFullscreen = false;
-          this.cameraFieldKey = "";
-          this.cameraData = undefined;
-          this.cameraType = undefined;
-          this.cameraImage = "";
-          this.cameraVideo = "";
-          this.cameraConfig = undefined;
-          this.cameraRecordingTime = 0;
-          this.cameraRecordingState = "NONE";
+          this.activeCameraFieldKey = "";
+          this.activeCameraData = undefined;
+          this.activeCameraType = undefined;
+          this.activeCameraImage = "";
+          this.activeCameraVideo = "";
+          this.activeCameraConfig = undefined;
+          this.activeCameraRecordingTime = 0;
+          this.activeCameraRecordingState = "NONE";
       };
       KwikIDFormViewComponent.prototype.ngOnInit = function () {
           var _this = this;
@@ -5043,16 +5085,16 @@
                           res = _15.sent();
                           if (res) {
                               this.loading = false;
-                              this.cameraRecordingTimerSubcription = this.cameraRecordService
+                              this.activeCameraRecordingTimerSubcription = this.cameraRecordService
                                   .getTimerUpdate()
                                   .subscribe(function (time) {
-                                  _this.cameraRecordingTime = time;
+                                  _this.activeCameraRecordingTime = time;
                                   _this.ref.detectChanges();
                               });
-                              this.cameraRecordingStateSubcription = this.cameraRecordService
+                              this.activeCameraRecordingStateSubcription = this.cameraRecordService
                                   .getRecordingState()
                                   .subscribe(function (state) {
-                                  _this.cameraRecordingState = state;
+                                  _this.activeCameraRecordingState = state;
                                   _this.ref.detectChanges();
                               });
                           }
@@ -5080,7 +5122,7 @@
           if (verifyChange("formData")) {
               if (kwikidToolkit.checkObjectKeyExists(changes.formData.currentValue, "data") &&
                   kwikidToolkit.checkObjectKeyExists(changes.formData.currentValue, "extendedData")) {
-                  this.formData = Object.assign(Object.assign({}, this.formData), changes.formData.currentValue["data"]);
+                  this.formData = Object.assign(Object.assign({}, this.formData), changes.formData.currentValue.data);
               }
               else {
                   this.formData = Object.assign(Object.assign({}, this.formData), changes.formData.currentValue);
@@ -5090,7 +5132,7 @@
               if (kwikidToolkit.isNotEmptyValue(changes.popupFormCallback.currentValue)) {
                   var popupFormData = kwikidToolkit.checkObjectKeyExists(changes.popupFormCallback.currentValue.popupFormData, "data") &&
                       kwikidToolkit.checkObjectKeyExists(changes.popupFormCallback.currentValue.popupFormData, "extendedData")
-                      ? changes.popupFormCallback.currentValue.popupFormData["data"]
+                      ? changes.popupFormCallback.currentValue.popupFormData.data
                       : changes.popupFormCallback.currentValue.popupFormData;
                   var popupFormConfig = changes.popupFormCallback.currentValue.popupFormConfig;
                   this.popupFormData = kwikidToolkit.mergeObjects(this.popupFormData, (_15 = {},
@@ -5141,14 +5183,20 @@
                       if (response) {
                           this.resetCamera();
                           var image = response === null || response === void 0 ? void 0 : response.image_url;
-                          this.formData[field_1.key] = kwikidToolkit.getObjectDeepCopy([image]);
-                          this.mediaFiles[field_1.key] = kwikidToolkit.getObjectDeepCopy([image]);
-                          this.formGroup.controls[field_1.key].patchValue(kwikidToolkit.getObjectDeepCopy([image]), {
+                          var imageOcr = response === null || response === void 0 ? void 0 : response.image_ocr;
+                          var imageFacematch = response === null || response === void 0 ? void 0 : response.image_facematch;
+                          var imageWatermark = response === null || response === void 0 ? void 0 : response.image_watermark;
+                          var imageData = imageOcr || imageFacematch || imageWatermark
+                              ? Object.assign(Object.assign(Object.assign({ image: image }, (imageOcr && { ocr: imageOcr })), (imageFacematch && { facematch: imageFacematch })), (imageWatermark && { watermark: imageWatermark })) : image;
+                          this.formData[field_1.key] = kwikidToolkit.getObjectDeepCopy([imageData]);
+                          this.cameraData[field_1.key] = kwikidToolkit.getObjectDeepCopy(imageData);
+                          this.mediaFiles[field_1.key] = kwikidToolkit.getObjectDeepCopy([imageData]);
+                          this.formGroup.controls[field_1.key].patchValue(kwikidToolkit.getObjectDeepCopy([imageData]), {
                               emitEvent: false,
                               onlySelf: false
                           });
                           this.formGroup.patchValue((_16 = {},
-                              _16[field_1.key] = kwikidToolkit.getObjectDeepCopy([image]),
+                              _16[field_1.key] = kwikidToolkit.getObjectDeepCopy([imageData]),
                               _16), { emitEvent: false });
                           this.formGroup.controls[field_1.key].updateValueAndValidity({
                               emitEvent: false
@@ -5164,6 +5212,7 @@
                                   FIELD_CONFIG: field_1,
                                   FORM_FIELDS: this.formFields,
                                   FORM_DATA: this.formData,
+                                  CAMERA_DATA: this.cameraData,
                                   TASK_DATA: this.taskData,
                                   PREVIOUS_FORM_DATA: this.previousFormData,
                                   ALL_FORMS_DATA: this.allFormsData,
@@ -5209,6 +5258,7 @@
                           this.resetCamera();
                           var video = response === null || response === void 0 ? void 0 : response.video_url;
                           this.formData[field_1.key] = kwikidToolkit.getObjectDeepCopy([video]);
+                          this.cameraData[field_1.key] = kwikidToolkit.getObjectDeepCopy(video);
                           this.mediaFiles[field_1.key] = kwikidToolkit.getObjectDeepCopy([video]);
                           this.formGroup.controls[field_1.key].patchValue(kwikidToolkit.getObjectDeepCopy([video]), {
                               emitEvent: false,
@@ -5231,6 +5281,7 @@
                                   FIELD_CONFIG: field_1,
                                   FORM_FIELDS: this.formFields,
                                   FORM_DATA: this.formData,
+                                  CAMERA_DATA: this.cameraData,
                                   TASK_DATA: this.taskData,
                                   PREVIOUS_FORM_DATA: this.previousFormData,
                                   ALL_FORMS_DATA: this.allFormsData,
@@ -5274,7 +5325,6 @@
                   case EFieldType.LIVE_LOCATION:
                       if (response) {
                           this.formData[field_1.key] = kwikidToolkit.getObjectDeepCopy(response);
-                          this.mediaFiles[field_1.key] = kwikidToolkit.getObjectDeepCopy(response);
                           this.formGroup.controls[field_1.key].patchValue(kwikidToolkit.getObjectDeepCopy(response), {
                               emitEvent: false,
                               onlySelf: false
@@ -5295,6 +5345,7 @@
                               API_RESPONSE: response,
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -5319,6 +5370,7 @@
                                   FIELD_CONFIG: field_1,
                                   FORM_FIELDS: this.formFields,
                                   FORM_DATA: this.formData,
+                                  CAMERA_DATA: this.cameraData,
                                   TASK_DATA: this.taskData,
                                   PREVIOUS_FORM_DATA: this.previousFormData,
                                   ALL_FORMS_DATA: this.allFormsData,
@@ -5362,6 +5414,7 @@
                               API_RESPONSE: {},
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -5393,15 +5446,15 @@
                   var field_2 = getFormFieldByKey(this.formFields, (_d = this.buttonClickResponse) === null || _d === void 0 ? void 0 : _d.key);
                   if (kwikidToolkit.checkObjectKeyExists(this.buttonClickResponse, "default")) {
                       field_2.default = kwikidToolkit.getObjectDeepCopy(this.buttonClickResponse.default);
-                      delete this.buttonClickResponse["default"];
+                      delete this.buttonClickResponse.default;
                   }
                   if (kwikidToolkit.checkObjectKeyExists(this.buttonClickResponse, "messages")) {
                       field_2.messages = kwikidToolkit.getObjectDeepCopy(this.buttonClickResponse.messages);
-                      delete this.buttonClickResponse["messages"];
+                      delete this.buttonClickResponse.messages;
                   }
                   if (kwikidToolkit.checkObjectKeyExists(this.buttonClickResponse, "validation")) {
                       field_2.validation = kwikidToolkit.getObjectDeepCopy(this.buttonClickResponse.validation);
-                      delete this.buttonClickResponse["validation"];
+                      delete this.buttonClickResponse.validation;
                   }
                   field_2 = kwikidToolkit.getObjectDeepCopy(kwikidToolkit.mergeObjects(field_2, this.buttonClickResponse));
                   if (kwikidToolkit.checkObjectKeyExists(field_2, "validation")) {
@@ -5411,6 +5464,7 @@
                               FIELD_CONFIG: field_2,
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -5448,11 +5502,11 @@
           }
       };
       KwikIDFormViewComponent.prototype.ngOnDestroy = function () {
-          if (this.cameraRecordingTimerSubcription) {
-              this.cameraRecordingTimerSubcription.unsubscribe();
+          if (this.activeCameraRecordingTimerSubcription) {
+              this.activeCameraRecordingTimerSubcription.unsubscribe();
           }
-          if (this.cameraRecordingStateSubcription) {
-              this.cameraRecordingStateSubcription.unsubscribe();
+          if (this.activeCameraRecordingStateSubcription) {
+              this.activeCameraRecordingStateSubcription.unsubscribe();
           }
       };
       KwikIDFormViewComponent.prototype.triggerLogs = function (eventType, logs) {
@@ -5490,6 +5544,7 @@
                               FORM_CONFIG: this.formConfig,
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -5512,7 +5567,7 @@
                                           clearInterval(intervalId);
                                           resolve();
                                       }
-                                  }, 10);
+                                  }, FORM_VIEW_TIMERS.WAIT_FOR_CHANGES_BEFORE_MOVING_TO_NEXT_TASK);
                               })];
                       case 4:
                           // Wait for ngOnChanges to be called before continuing to the next task
@@ -5543,7 +5598,15 @@
                               return [2 /*return*/, false];
                           }
                           _17 = this;
-                          return [4 /*yield*/, this.formViewService.createFormGroup(this.formFields, this.formData, this.previousFormData, this.allFormsData, this.extraData, this.takeAction.bind(this))];
+                          return [4 /*yield*/, this.formViewService.createFormGroup(this.formFields, {
+                                  FORM_CONFIG: this.formConfig,
+                                  FORM_DATA: this.formData,
+                                  CAMERA_DATA: this.cameraData,
+                                  TASK_DATA: this.taskData,
+                                  PREVIOUS_FORM_DATA: this.previousFormData,
+                                  ALL_FORMS_DATA: this.allFormsData,
+                                  EXTRA_DATA: this.extraData
+                              }, this.takeAction.bind(this))];
                       case 11:
                           _17.formGroup = _25.sent();
                           /**
@@ -5552,10 +5615,10 @@
                            * Below piece of code is to remove that redundent value from formData.
                            */
                           if (kwikidToolkit.checkObjectKeyExists(this.formData, "undefined")) {
-                              delete this.formData["undefined"];
+                              delete this.formData.undefined;
                           }
                           _loop_1 = function (field) {
-                              var _26, _27;
+                              var _26, _27, _28, _29;
                               if (field.isFormElement) {
                                   this_1.previousFormData = Object.assign(Object.assign({}, this_1.previousFormData), (_26 = {}, _26[field.key] = convertFormFieldValueToStandardFormat(field, this_1.formGroup.controls[field.key].value), _26));
                                   this_1.formData = Object.assign(Object.assign({}, this_1.formData), (_27 = {}, _27[field.key] = convertFormFieldValueToStandardFormat(field, this_1.formGroup.controls[field.key].value), _27));
@@ -5564,17 +5627,19 @@
                                   }
                                   if (field.type === EFieldType.CAPTURE) {
                                       this_1.resetCamera();
+                                      this_1.cameraData = Object.assign(Object.assign({}, this_1.cameraData), (_28 = {}, _28[field.key] = convertFormFieldValueToStandardFormat(field, this_1.formGroup.controls[field.key].value), _28));
                                       this_1.mediaFiles[field.key] = this_1.formGroup.controls[field.key].value;
                                   }
                                   if (field.type === EFieldType.RECORD) {
                                       this_1.resetCamera();
+                                      this_1.cameraData = Object.assign(Object.assign({}, this_1.cameraData), (_29 = {}, _29[field.key] = convertFormFieldValueToStandardFormat(field, this_1.formGroup.controls[field.key].value), _29));
                                       this_1.mediaFiles[field.key] = this_1.formGroup.controls[field.key].value;
                                   }
                                   this_1.formGroup.controls[field.key].valueChanges
                                       .pipe(operators.pairwise())
                                       .subscribe(function (_15) {
-                                      var _16, _17;
-                                      var _18 = __read(_15, 2), previousValue = _18[0], currentValue = _18[1];
+                                      var _16, _17, _18, _19;
+                                      var _20 = __read(_15, 2), previousValue = _20[0], currentValue = _20[1];
                                       _this.previousFormData = Object.assign(Object.assign({}, _this.previousFormData), (_16 = {}, _16[field.key] = convertFormFieldValueToStandardFormat(field, previousValue), _16));
                                       _this.formData = Object.assign(Object.assign({}, _this.formData), (_17 = {}, _17[field.key] = convertFormFieldValueToStandardFormat(field, currentValue), _17));
                                       if (field.type === EFieldType.FILE) {
@@ -5582,10 +5647,12 @@
                                       }
                                       if (field.type === EFieldType.CAPTURE) {
                                           _this.resetCamera();
+                                          _this.cameraData = Object.assign(Object.assign({}, _this.cameraData), (_18 = {}, _18[field.key] = convertFormFieldValueToStandardFormat(field, currentValue), _18));
                                           _this.mediaFiles[field.key] = currentValue;
                                       }
                                       if (field.type === EFieldType.RECORD) {
                                           _this.resetCamera();
+                                          _this.cameraData = Object.assign(Object.assign({}, _this.cameraData), (_19 = {}, _19[field.key] = convertFormFieldValueToStandardFormat(field, currentValue), _19));
                                           _this.mediaFiles[field.key] = currentValue;
                                       }
                                   });
@@ -5620,6 +5687,7 @@
                               FIELD_CONFIG: field,
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -5673,7 +5741,7 @@
               var formData = this.allFormsData[this.formConfig.key];
               if (kwikidToolkit.checkObjectKeyExists(formData, "data") &&
                   kwikidToolkit.checkObjectKeyExists(formData, "extendedData")) {
-                  this.formData = Object.assign(Object.assign({}, this.formData), formData["data"]);
+                  this.formData = Object.assign(Object.assign({}, this.formData), formData.data);
               }
               else {
                   this.formData = Object.assign(Object.assign({}, this.formData), formData);
@@ -5694,6 +5762,7 @@
                           rulesMapping = new kwikidToolkit.Rule(childFieldGroupConfig.rules, {
                               FIELD_CONFIG: parentField,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -5713,6 +5782,7 @@
                               FIELD_CONFIG: parentField,
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -5768,6 +5838,7 @@
                           rulesMapping = new kwikidToolkit.Rule(connectedFieldConfig.rules, {
                               FIELD_CONFIG: connectedField,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -5787,6 +5858,7 @@
                               FORM_FIELDS: this.formFields,
                               FIELD_CONFIG: connectedField,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -5821,7 +5893,7 @@
               return __generator(this, function (_15) {
                   switch (_15.label) {
                       case 0:
-                          connectedField = getFormFieldByKey(this.formFields, connectedFieldConfig["key"]);
+                          connectedField = getFormFieldByKey(this.formFields, connectedFieldConfig.key);
                           if (!kwikidToolkit.checkObjectKeyExists(connectedFieldConfig, "triggers")) return [3 /*break*/, 2];
                           if (!connectedFieldConfig.triggers.includes(eventType)) return [3 /*break*/, 2];
                           return [4 /*yield*/, this.handleConnectedElementFieldActions(connectedFieldConfig, connectedField)];
@@ -5917,7 +5989,7 @@
           var _15;
           var _a, _b, _c, _d, _e, _f, _g, _h, _j;
           this.showApiLoader();
-          if (this.formGroup["controls"][e.key].enabled) {
+          if (this.formGroup.controls[e.key].enabled) {
               this.files[e.key] = e.files;
               this.formData[e.key] = filterDuplicatesFiles(this.files[e.key]);
               this.formGroup.patchValue((_15 = {},
@@ -5997,7 +6069,7 @@
                                                           lastModified: value.lastModified,
                                                           webkitRelativePath: value.webkitRelativePath
                                                       });
-                                                  }, 300); // 1000 ms = 1 sec
+                                                  }, FORM_VIEW_TIMERS.WAIT_FOR_FILE_METADATA_DEEPCOPY); // 1000 ms = 1 sec
                                               })];
                                       case 1:
                                           updatedFile = _18.apply(void 0, [_19.sent()]);
@@ -6044,23 +6116,60 @@
       /** Methods for Camera related fields like 'CAPTURE' or  'RECORD' */
       KwikIDFormViewComponent.prototype.handleOnClickGetRemovedMediaFile = function (e) {
           var _15;
+          var _this = this;
           var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-          this.showApiLoader();
-          if (this.formGroup["controls"][e.key].enabled) {
+          if (this.formGroup.controls[e.key].enabled) {
+              this.showApiLoader();
+              var field_3 = getFormFieldByKey(this.formFields, e.key);
               this.resetCamera();
               this.mediaFiles[e.key] = e.mediaFiles;
               this.formData[e.key] = filterDuplicatesMediaFiles(this.mediaFiles[e.key]);
+              this.cameraData[e.key] = convertFormFieldValueToStandardFormat(field_3, this.formData[e.key]);
               this.formGroup.patchValue((_15 = {},
                   _15[e.key] = this.formData[e.key],
                   _15), { emitEvent: false });
               this.triggerLogs(ELogEventType$1.FORM__FIELD_MEDIA_FILE_REMOVE, Object.assign(Object.assign(Object.assign({ field_key: e.key }, ((_b = (_a = e.file) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : { file_name: (_c = e.file) === null || _c === void 0 ? void 0 : _c.name })), ((_e = (_d = e.file) === null || _d === void 0 ? void 0 : _d.size) !== null && _e !== void 0 ? _e : { file_size: (_f = e.file) === null || _f === void 0 ? void 0 : _f.size })), ((_h = (_g = e.file) === null || _g === void 0 ? void 0 : _g.type) !== null && _h !== void 0 ? _h : { file_type: (_j = e.file) === null || _j === void 0 ? void 0 : _j.type })));
+              this.getUnsavedDataState.emit(true);
+              if (field_3.isFormElement &&
+                  kwikidToolkit.checkObjectKeyExists(field_3, "validation") &&
+                  field_3.validation.triggers.includes("ON_CHANGE")) {
+                  var ruleEngine_5 = new kwikidToolkit.RuleEngine({
+                      FIELD_CONFIG: field_3,
+                      FORM_FIELDS: this.formFields,
+                      FORM_DATA: this.formData,
+                      CAMERA_DATA: this.cameraData,
+                      TASK_DATA: this.taskData,
+                      PREVIOUS_FORM_DATA: this.previousFormData,
+                      ALL_FORMS_DATA: this.allFormsData,
+                      EXTRA_DATA: this.extraData
+                  }, this.takeAction.bind(this));
+                  (function () { return __awaiter(_this, void 0, void 0, function () {
+                      return __generator(this, function (_15) {
+                          switch (_15.label) {
+                              case 0: return [4 /*yield*/, ruleEngine_5.run(field_3.validation)];
+                              case 1:
+                                  _15.sent();
+                                  return [2 /*return*/];
+                          }
+                      });
+                  }); })();
+              }
+              if (field_3.isFormElement &&
+                  kwikidToolkit.checkObjectKeyExists(field_3, "connectedElements")) {
+                  this.handleConnectedElements({
+                      key: field_3.key,
+                      value: this.formGroup.controls[field_3.key].value
+                  }, "ON_CHANGE");
+              }
+              setTimeout(function () {
+                  _this.hideApiLoader();
+              }, 500);
           }
-          this.hideApiLoader();
       };
       KwikIDFormViewComponent.prototype.handleOnClickInputCamera = function (e, field) {
           var _a, _b, _c, _d, _e, _f;
           return __awaiter(this, void 0, void 0, function () {
-              var fieldKey, fieldcameraConfig, _15, cameraHelper, _16, _17;
+              var fieldKey, fieldCameraConfig, _15, cameraHelper, _16, _17;
               return __generator(this, function (_18) {
                   switch (_18.label) {
                       case 0:
@@ -6069,49 +6178,56 @@
                               fullscreen: true
                           });
                           fieldKey = field.key;
-                          fieldcameraConfig = (_b = (_a = field === null || field === void 0 ? void 0 : field.properties) === null || _a === void 0 ? void 0 : _a.cameraConfig) !== null && _b !== void 0 ? _b : {};
-                          this.cameraType = (field === null || field === void 0 ? void 0 : field.type.toUpperCase()) || "";
-                          this.cameraFieldKey = fieldKey;
+                          fieldCameraConfig = (_a = field === null || field === void 0 ? void 0 : field.properties) !== null && _a !== void 0 ? _a : {};
+                          this.activeCameraType = (field === null || field === void 0 ? void 0 : field.type.toUpperCase()) || "";
+                          this.activeCameraFieldKey = fieldKey;
                           this.triggerLogs(ELogEventType$1.FORM__FIELD_CAMERA_BUTTON_CLICK, {
                               field_key: field.key,
                               field_type: field.type,
-                              camera_type: this.cameraType
+                              camera_type: this.activeCameraType
                           });
-                          _15 = this.cameraType;
+                          _15 = this.activeCameraType;
                           switch (_15) {
                               case "CAPTURE": return [3 /*break*/, 1];
-                              case "RECORD": return [3 /*break*/, 5];
+                              case "RECORD": return [3 /*break*/, 4];
                           }
-                          return [3 /*break*/, 6];
+                          return [3 /*break*/, 5];
                       case 1:
-                          this.cameraConfig = kwikidToolkit.mergeObjectsDeep([
-                              FIELD_PROPERTIES.capture.cameraConfig,
-                              fieldcameraConfig
+                          this.activeCameraConfig = kwikidToolkit.mergeObjectsDeep([
+                              FIELD_PROPERTIES.capture,
+                              fieldCameraConfig
                           ]);
-                          if (!(((_d = (_c = this.cameraConfig) === null || _c === void 0 ? void 0 : _c.others) === null || _d === void 0 ? void 0 : _d.isWatermark) ||
-                              ((_f = (_e = this.cameraConfig) === null || _e === void 0 ? void 0 : _e.others) === null || _f === void 0 ? void 0 : _f.isWatermarkForImageUpload))) return [3 /*break*/, 3];
-                          cameraHelper = new CameraHelper(field, this.formFields, this.allFormsData, this.formData, this.previousFormData, this.extraData);
+                          this.activeCameraData = {};
+                          if (!(((_d = (_c = (_b = this.activeCameraConfig) === null || _b === void 0 ? void 0 : _b.features) === null || _c === void 0 ? void 0 : _c.watermark) === null || _d === void 0 ? void 0 : _d.isEnabled) &&
+                              !((_f = (_e = this.activeCameraConfig.features) === null || _e === void 0 ? void 0 : _e.watermark) === null || _f === void 0 ? void 0 : _f.isWatermarkFromServer))) return [3 /*break*/, 3];
+                          cameraHelper = new CameraHelper(field, {
+                              FORM_FIELDS: this.formFields,
+                              FIELD_CONFIG: field,
+                              FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
+                              TASK_DATA: this.taskData,
+                              PREVIOUS_FORM_DATA: this.previousFormData,
+                              ALL_FORMS_DATA: this.allFormsData,
+                              EXTRA_DATA: this.extraData
+                          });
                           _16 = this;
                           _17 = {};
                           return [4 /*yield*/, cameraHelper.getCameraWatermarkData()];
                       case 2:
-                          _16.cameraData = (_17.watermark = _18.sent(),
+                          _16.activeCameraData = (_17.watermark = _18.sent(),
                               _17);
-                          return [3 /*break*/, 4];
-                      case 3:
-                          this.cameraData = undefined;
-                          _18.label = 4;
-                      case 4: return [3 /*break*/, 7];
-                      case 5:
-                          this.cameraConfig = kwikidToolkit.mergeObjectsDeep([
-                              FIELD_PROPERTIES.record.cameraConfig,
-                              fieldcameraConfig
+                          _18.label = 3;
+                      case 3: return [3 /*break*/, 6];
+                      case 4:
+                          this.activeCameraConfig = kwikidToolkit.mergeObjectsDeep([
+                              FIELD_PROPERTIES.record,
+                              fieldCameraConfig
                           ]);
-                          return [3 /*break*/, 7];
-                      case 6:
+                          return [3 /*break*/, 6];
+                      case 5:
                           this.resetCamera();
-                          return [3 /*break*/, 7];
-                      case 7:
+                          return [3 /*break*/, 6];
+                      case 6:
                           /**
                            * Config and other data is set now, so we can show the camera.
                            */
@@ -6126,13 +6242,13 @@
       /** CameraType = CAPTURE */
       KwikIDFormViewComponent.prototype.setCameraMedia = function (media) {
           return __awaiter(this, void 0, void 0, function () {
-              var field, ruleEngine_5;
+              var field, activeCameraData, updatedMedia, ruleEngine_6;
               var _15;
               var _this = this;
               return __generator(this, function (_16) {
                   switch (_16.label) {
                       case 0:
-                          field = getFormFieldByKey(this.formFields, this.cameraFieldKey);
+                          field = getFormFieldByKey(this.formFields, this.activeCameraFieldKey);
                           if (!(kwikidToolkit.checkObjectKeyExists(field, "properties") &&
                               kwikidToolkit.checkObjectKeyExists(field.properties, "uploadFileToServer") &&
                               field.properties.uploadFileToServer)) return [3 /*break*/, 2];
@@ -6141,15 +6257,28 @@
                           _16.sent();
                           return [3 /*break*/, 3];
                       case 2:
+                          activeCameraData = this.activeCameraData;
                           this.resetCamera();
-                          this.formData[field.key] = kwikidToolkit.getObjectDeepCopy([media]);
-                          this.mediaFiles[field.key] = kwikidToolkit.getObjectDeepCopy([media]);
-                          this.formGroup.controls[field.key].patchValue(kwikidToolkit.getObjectDeepCopy([media]), {
+                          updatedMedia = {};
+                          switch (field.type) {
+                              case EFieldType.CAPTURE:
+                                  updatedMedia = Object.assign(Object.assign({}, (kwikidToolkit.isNotEmptyValue(activeCameraData) ? activeCameraData : {})), { image: media });
+                                  break;
+                              case EFieldType.RECORD:
+                                  updatedMedia = Object.assign(Object.assign({}, (kwikidToolkit.isNotEmptyValue(activeCameraData) ? activeCameraData : {})), { video: media });
+                                  break;
+                              default:
+                                  break;
+                          }
+                          this.formData[field.key] = kwikidToolkit.getObjectDeepCopy([updatedMedia]);
+                          this.cameraData[field.key] = kwikidToolkit.getObjectDeepCopy(updatedMedia);
+                          this.mediaFiles[field.key] = kwikidToolkit.getObjectDeepCopy([updatedMedia]);
+                          this.formGroup.controls[field.key].patchValue(kwikidToolkit.getObjectDeepCopy([updatedMedia]), {
                               emitEvent: false,
                               onlySelf: false
                           });
                           this.formGroup.patchValue((_15 = {},
-                              _15[field.key] = kwikidToolkit.getObjectDeepCopy([media]),
+                              _15[field.key] = kwikidToolkit.getObjectDeepCopy([updatedMedia]),
                               _15), { emitEvent: false });
                           this.formGroup.controls[field.key].updateValueAndValidity({
                               emitEvent: false
@@ -6161,10 +6290,11 @@
                           if (field.isFormElement &&
                               kwikidToolkit.checkObjectKeyExists(field, "validation") &&
                               field.validation.triggers.includes("ON_CHANGE")) {
-                              ruleEngine_5 = new kwikidToolkit.RuleEngine({
+                              ruleEngine_6 = new kwikidToolkit.RuleEngine({
                                   FIELD_CONFIG: field,
                                   FORM_FIELDS: this.formFields,
                                   FORM_DATA: this.formData,
+                                  CAMERA_DATA: this.cameraData,
                                   TASK_DATA: this.taskData,
                                   PREVIOUS_FORM_DATA: this.previousFormData,
                                   ALL_FORMS_DATA: this.allFormsData,
@@ -6173,7 +6303,7 @@
                               (function () { return __awaiter(_this, void 0, void 0, function () {
                                   return __generator(this, function (_15) {
                                       switch (_15.label) {
-                                          case 0: return [4 /*yield*/, ruleEngine_5.run(field.validation)];
+                                          case 0: return [4 /*yield*/, ruleEngine_6.run(field.validation)];
                                           case 1:
                                               _15.sent();
                                               return [2 /*return*/];
@@ -6199,14 +6329,14 @@
           });
       };
       /** Camera Common Methods */
-      KwikIDFormViewComponent.prototype.handleGetCameraMedia = function (e, cameraType) {
+      KwikIDFormViewComponent.prototype.handleGetCameraMedia = function (e, activeCameraType) {
           var _this = this;
-          switch (cameraType) {
+          switch (activeCameraType) {
               case "CAPTURE":
                   this.showApiLoader();
-                  this.cameraImage = "";
+                  this.activeCameraImage = "";
                   setTimeout(function () {
-                      var _a, _b, _c, _d, _e, _f, _g;
+                      var _a, _b, _c, _d, _e, _f, _g, _h;
                       /**
                        * Priority of Image to Set for Config Based
                        * 1. Masked
@@ -6215,77 +6345,98 @@
                        *
                        * If no masked or cropped image is available then directly set Original Image
                        */
-                      var field = getFormFieldByKey(_this.formFields, _this.cameraFieldKey);
+                      var field = getFormFieldByKey(_this.formFields, _this.activeCameraFieldKey);
                       var image = ((_a = field.properties) === null || _a === void 0 ? void 0 : _a.isMaskedImage)
                           ? (_b = e === null || e === void 0 ? void 0 : e.maskedImage) !== null && _b !== void 0 ? _b : e === null || e === void 0 ? void 0 : e.originalImage
                           : ((_c = field.properties) === null || _c === void 0 ? void 0 : _c.isCroppedImage)
                               ? (_d = e === null || e === void 0 ? void 0 : e.croppedImage) !== null && _d !== void 0 ? _d : e === null || e === void 0 ? void 0 : e.originalImage
                               : e === null || e === void 0 ? void 0 : e.originalImage;
-                      var isShowImagePreview = (_g = (_f = (_e = _this.cameraConfig) === null || _e === void 0 ? void 0 : _e.others) === null || _f === void 0 ? void 0 : _f.preview) === null || _g === void 0 ? void 0 : _g.show;
+                      var isShowImagePreview = (_h = (_g = (_f = (_e = _this.activeCameraConfig) === null || _e === void 0 ? void 0 : _e.cameraConfig) === null || _f === void 0 ? void 0 : _f.others) === null || _g === void 0 ? void 0 : _g.preview) === null || _h === void 0 ? void 0 : _h.show;
                       if (isShowImagePreview) {
-                          _this.cameraImage = image;
+                          _this.activeCameraImage = image;
                       }
                       else {
                           _this.setCameraMedia(image);
                       }
                       _this.hideApiLoader();
-                  }, 500); // Delay is added due to issus with KwikID Camera not being able to handle to fast processing.
+                  }, FORM_VIEW_TIMERS.WAIT_FOR_KWIKID_CAMERA_TO_LOAD); // Delay is added due to issus with KwikID Camera not being able to handle to fast processing.
                   break;
               case "RECORD":
                   this.showApiLoader();
-                  this.cameraVideo = "";
+                  this.activeCameraVideo = "";
                   setTimeout(function () {
                       var _a, _b, _c;
                       /**
                        * Priority of Image to Set for Config Based
                        * 1. Original
                        */
-                      var field = getFormFieldByKey(_this.formFields, _this.cameraFieldKey);
+                      var field = getFormFieldByKey(_this.formFields, _this.activeCameraFieldKey);
                       var video = e === null || e === void 0 ? void 0 : e.originalVideo;
-                      var isShowVideoPreview = (_c = (_b = (_a = _this.cameraConfig) === null || _a === void 0 ? void 0 : _a.others) === null || _b === void 0 ? void 0 : _b.preview) === null || _c === void 0 ? void 0 : _c.show;
+                      var isShowVideoPreview = (_c = (_b = (_a = _this.activeCameraConfig) === null || _a === void 0 ? void 0 : _a.others) === null || _b === void 0 ? void 0 : _b.preview) === null || _c === void 0 ? void 0 : _c.show;
                       if (isShowVideoPreview) {
-                          _this.cameraVideo = video;
+                          _this.activeCameraVideo = video;
                       }
                       else {
                           _this.setCameraMedia(video);
                       }
                       _this.hideApiLoader();
-                  }, 500); // Delay is added due to issus with KwikID Camera not being able to handle to fast processing.
+                  }, FORM_VIEW_TIMERS.WAIT_FOR_KWIKID_CAMERA_TO_LOAD); // Delay is added due to issus with KwikID Camera not being able to handle to fast processing.
                   break;
               default:
                   break;
           }
       };
-      KwikIDFormViewComponent.prototype.handleOnClickSaveCameraMedia = function (e, cameraType) {
+      KwikIDFormViewComponent.prototype.handleOnClickSaveCameraMedia = function (e, activeCameraType) {
           var _this = this;
           this.showApiLoader();
-          var field = getFormFieldByKey(this.formFields, this.cameraFieldKey);
+          var field = getFormFieldByKey(this.formFields, this.activeCameraFieldKey);
           this.triggerLogs(ELogEventType$1.FORM__CAMERA_SAVE_BUTTON_CLICK, {
               field_key: field.key,
               field_type: field.type,
-              camera_type: cameraType
+              camera_type: activeCameraType
           });
-          switch (cameraType) {
+          switch (activeCameraType) {
               case "CAPTURE":
-                  this.cameraImage = "";
+                  this.activeCameraImage = "";
                   setTimeout(function () {
-                      var image = e === null || e === void 0 ? void 0 : e.originalImage;
+                      var _a, _b, _c, _d;
+                      /**
+                       * Priority of Image to Set for Config Based
+                       * 1. Masked
+                       * 2. Cropped
+                       * 3. Original
+                       *
+                       * If no masked or cropped image is available then directly set Original Image
+                       */
+                      var field = getFormFieldByKey(_this.formFields, _this.activeCameraFieldKey);
+                      var image = ((_a = field.properties) === null || _a === void 0 ? void 0 : _a.isMaskedImage)
+                          ? (_b = e === null || e === void 0 ? void 0 : e.maskedImage) !== null && _b !== void 0 ? _b : e === null || e === void 0 ? void 0 : e.originalImage
+                          : ((_c = field.properties) === null || _c === void 0 ? void 0 : _c.isCroppedImage)
+                              ? (_d = e === null || e === void 0 ? void 0 : e.croppedImage) !== null && _d !== void 0 ? _d : e === null || e === void 0 ? void 0 : e.originalImage
+                              : e === null || e === void 0 ? void 0 : e.originalImage;
                       _this.setCameraMedia(image);
                       _this.hideApiLoader();
-                  }, 500);
+                  }, FORM_VIEW_TIMERS.WAIT_FOR_KWIKID_CAMERA_TO_LOAD); // Delay is added due to issus with KwikID Camera not being able to handle to fast processing.
                   break;
               case "RECORD":
-                  this.cameraVideo = "";
+                  this.activeCameraVideo = "";
                   setTimeout(function () {
+                      /**
+                       * Priority of Image to Set for Config Based
+                       * 1. Original
+                       */
+                      var field = getFormFieldByKey(_this.formFields, _this.activeCameraFieldKey);
                       var video = e === null || e === void 0 ? void 0 : e.originalVideo;
                       _this.setCameraMedia(video);
                       _this.hideApiLoader();
-                  }, 500);
+                  }, FORM_VIEW_TIMERS.WAIT_FOR_KWIKID_CAMERA_TO_LOAD); // Delay is added due to issus with KwikID Camera not being able to handle to fast processing.
+                  break;
+              default:
                   break;
           }
       };
       KwikIDFormViewComponent.prototype.handleOnClickCameraBack = function (e) {
-          var field = getFormFieldByKey(this.formFields, this.cameraFieldKey);
+          var field = getFormFieldByKey(this.formFields, this.activeCameraFieldKey);
           this.triggerLogs(ELogEventType$1.FORM__CAMERA_BACK_BUTTON_CLICK, {
               field_key: field.key,
               field_type: field.type
@@ -6293,7 +6444,7 @@
           this.resetCamera();
       };
       KwikIDFormViewComponent.prototype.handleOnClickCameraClose = function (e) {
-          var field = getFormFieldByKey(this.formFields, this.cameraFieldKey);
+          var field = getFormFieldByKey(this.formFields, this.activeCameraFieldKey);
           this.triggerLogs(ELogEventType$1.FORM__CAMERA_CLOSE_BUTTON_CLICK, {
               field_key: field.key,
               field_type: field.type
@@ -6339,10 +6490,11 @@
           if (field.isFormElement &&
               kwikidToolkit.checkObjectKeyExists(field, "validation") &&
               field.validation.triggers.includes("ON_CHANGE")) {
-              var ruleEngine_6 = new kwikidToolkit.RuleEngine({
+              var ruleEngine_7 = new kwikidToolkit.RuleEngine({
                   FIELD_CONFIG: field,
                   FORM_FIELDS: this.formFields,
                   FORM_DATA: this.formData,
+                  CAMERA_DATA: this.cameraData,
                   TASK_DATA: this.taskData,
                   PREVIOUS_FORM_DATA: this.previousFormData,
                   ALL_FORMS_DATA: this.allFormsData,
@@ -6351,7 +6503,7 @@
               (function () { return __awaiter(_this, void 0, void 0, function () {
                   return __generator(this, function (_15) {
                       switch (_15.label) {
-                          case 0: return [4 /*yield*/, ruleEngine_6.run(field.validation)];
+                          case 0: return [4 /*yield*/, ruleEngine_7.run(field.validation)];
                           case 1:
                               _15.sent();
                               return [2 /*return*/];
@@ -6371,10 +6523,21 @@
        * This is a api upload mocking method. Set's to loading at first at point when API is called and then changes the status to random status after 2 seconds of delay showing a mocked response from API.
        */
       KwikIDFormViewComponent.prototype.uploadFile = function (field, file) {
+          var _a, _b, _c, _d, _e, _f;
           return __awaiter(this, void 0, void 0, function () {
-              return __generator(this, function (_15) {
-                  switch (field.type) {
-                      case EFieldType.FILE:
+              var _15, ocrPayload, facematchPayload, facematchSources, facematchSources_1, facematchSources_1_1, facematchSourceConfig, source, sourceValue, facematchSource, e_10_1, watermarkPayload, watermarkSources, watermarkSources_1, watermarkSources_1_1, watermarkSourceConfig, source, sourceValue, watermarkSource, e_11_1, imageUploadPayload;
+              var e_10, _16, e_11, _17;
+              return __generator(this, function (_18) {
+                  switch (_18.label) {
+                      case 0:
+                          _15 = field.type;
+                          switch (_15) {
+                              case EFieldType.FILE: return [3 /*break*/, 1];
+                              case EFieldType.CAPTURE: return [3 /*break*/, 2];
+                              case EFieldType.RECORD: return [3 /*break*/, 19];
+                          }
+                          return [3 /*break*/, 20];
+                      case 1:
                           this.updateFiles(file, "LOADING", field.key);
                           this.triggerLogs(ELogEventType$1.FORM__API_REQUEST_UPLOAD_FILE, {
                               field_key: field.key,
@@ -6407,30 +6570,137 @@
                           catch (err) {
                               this.updateFiles(file, "ERROR", field.key);
                           }
-                          break;
-                      case EFieldType.CAPTURE:
-                          // Actual API Call
+                          return [3 /*break*/, 21];
+                      case 2:
+                          ocrPayload = {};
+                          if (kwikidToolkit.isNotEmptyValue((_b = (_a = field === null || field === void 0 ? void 0 : field.properties) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.ocr)) {
+                              ocrPayload = field.properties.features.ocr;
+                          }
+                          facematchPayload = {};
+                          if (!kwikidToolkit.isNotEmptyValue((_d = (_c = field === null || field === void 0 ? void 0 : field.properties) === null || _c === void 0 ? void 0 : _c.features) === null || _d === void 0 ? void 0 : _d.facematch)) return [3 /*break*/, 10];
+                          facematchPayload.isEnabled =
+                              field.properties.features.facematch.isEnabled;
+                          facematchPayload.isFacematchFromServer =
+                              field.properties.features.facematch.isFacematchFromServer;
+                          facematchPayload.images = [];
+                          facematchSources = field.properties.features.facematch.sources;
+                          _18.label = 3;
+                      case 3:
+                          _18.trys.push([3, 8, 9, 10]);
+                          facematchSources_1 = __values(facematchSources), facematchSources_1_1 = facematchSources_1.next();
+                          _18.label = 4;
+                      case 4:
+                          if (!!facematchSources_1_1.done) return [3 /*break*/, 7];
+                          facematchSourceConfig = facematchSources_1_1.value;
+                          source = new kwikidToolkit.Source({
+                              FIELD_CONFIG: field,
+                              FORM_FIELDS: this.formFields,
+                              FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
+                              TASK_DATA: this.taskData,
+                              PREVIOUS_FORM_DATA: this.previousFormData,
+                              ALL_FORMS_DATA: this.allFormsData,
+                              EXTRA_DATA: this.extraData
+                          });
+                          return [4 /*yield*/, source.getValueFromSource(facematchSourceConfig)];
+                      case 5:
+                          sourceValue = _18.sent();
+                          facematchSource = {
+                              key: facematchSourceConfig.id,
+                              value: sourceValue
+                          };
+                          facematchPayload.images.push(facematchSource);
+                          _18.label = 6;
+                      case 6:
+                          facematchSources_1_1 = facematchSources_1.next();
+                          return [3 /*break*/, 4];
+                      case 7: return [3 /*break*/, 10];
+                      case 8:
+                          e_10_1 = _18.sent();
+                          e_10 = { error: e_10_1 };
+                          return [3 /*break*/, 10];
+                      case 9:
+                          try {
+                              if (facematchSources_1_1 && !facematchSources_1_1.done && (_16 = facematchSources_1.return)) _16.call(facematchSources_1);
+                          }
+                          finally { if (e_10) throw e_10.error; }
+                          return [7 /*endfinally*/];
+                      case 10:
+                          watermarkPayload = {};
+                          if (!kwikidToolkit.isNotEmptyValue((_f = (_e = field === null || field === void 0 ? void 0 : field.properties) === null || _e === void 0 ? void 0 : _e.features) === null || _f === void 0 ? void 0 : _f.watermark)) return [3 /*break*/, 18];
+                          watermarkPayload.isEnabled =
+                              field.properties.features.watermark.isEnabled;
+                          watermarkPayload.isWatermarkFromServer =
+                              field.properties.features.watermark.isWatermarkFromServer;
+                          watermarkPayload.data = [];
+                          watermarkSources = field.properties.features.watermark.sources;
+                          watermarkPayload.config = field.properties.features.watermark.sources;
+                          _18.label = 11;
+                      case 11:
+                          _18.trys.push([11, 16, 17, 18]);
+                          watermarkSources_1 = __values(watermarkSources), watermarkSources_1_1 = watermarkSources_1.next();
+                          _18.label = 12;
+                      case 12:
+                          if (!!watermarkSources_1_1.done) return [3 /*break*/, 15];
+                          watermarkSourceConfig = watermarkSources_1_1.value;
+                          source = new kwikidToolkit.Source({
+                              FIELD_CONFIG: field,
+                              FORM_FIELDS: this.formFields,
+                              FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
+                              TASK_DATA: this.taskData,
+                              PREVIOUS_FORM_DATA: this.previousFormData,
+                              ALL_FORMS_DATA: this.allFormsData,
+                              EXTRA_DATA: this.extraData
+                          });
+                          return [4 /*yield*/, source.getValueFromSource(watermarkSourceConfig)];
+                      case 13:
+                          sourceValue = _18.sent();
+                          watermarkSource = {
+                              key: watermarkSourceConfig.id,
+                              value: sourceValue
+                          };
+                          watermarkPayload.data.push(watermarkSource);
+                          _18.label = 14;
+                      case 14:
+                          watermarkSources_1_1 = watermarkSources_1.next();
+                          return [3 /*break*/, 12];
+                      case 15: return [3 /*break*/, 18];
+                      case 16:
+                          e_11_1 = _18.sent();
+                          e_11 = { error: e_11_1 };
+                          return [3 /*break*/, 18];
+                      case 17:
+                          try {
+                              if (watermarkSources_1_1 && !watermarkSources_1_1.done && (_17 = watermarkSources_1.return)) _17.call(watermarkSources_1);
+                          }
+                          finally { if (e_11) throw e_11.error; }
+                          return [7 /*endfinally*/];
+                      case 18:
+                          imageUploadPayload = Object.assign(Object.assign(Object.assign({ image: file }, ((ocrPayload === null || ocrPayload === void 0 ? void 0 : ocrPayload.isEnabled) && {
+                              ocr: ocrPayload
+                          })), ((facematchPayload === null || facematchPayload === void 0 ? void 0 : facematchPayload.isEnabled) && {
+                              facematch: facematchPayload
+                          })), ((watermarkPayload === null || watermarkPayload === void 0 ? void 0 : watermarkPayload.isEnabled) && {
+                              watermark: watermarkPayload
+                          }));
                           this.triggerLogs(ELogEventType$1.FORM__API_REQUEST_UPLOAD_IMAGE, {
                               field_key: field.key,
                               field_type: field.type,
-                              request: {
-                                  image: file
-                              }
+                              request: imageUploadPayload
                           });
                           try {
                               this.onClickApiCall.emit({
                                   key: field.key,
                                   type: field.type,
-                                  payload: {
-                                      image: file
-                                  }
+                                  payload: imageUploadPayload
                               });
                           }
                           catch (err) {
                               console.log("Failed to upload image to server!");
                           }
-                          break;
-                      case EFieldType.RECORD:
+                          return [3 /*break*/, 21];
+                      case 19:
                           // Actual API Call
                           this.triggerLogs(ELogEventType$1.FORM__API_REQUEST_UPLOAD_VIDEO, {
                               field_key: field.key,
@@ -6451,34 +6721,35 @@
                           catch (err) {
                               console.log("Failed to upload video to server!");
                           }
-                          break;
+                          return [3 /*break*/, 21];
+                      case 20: return [3 /*break*/, 21];
+                      case 21: return [2 /*return*/];
                   }
-                  return [2 /*return*/];
               });
           });
       };
       KwikIDFormViewComponent.prototype.handleOnClickFormFieldButton = function (field) {
-          var e_10, _15;
+          var e_12, _15;
           var formData = this.formGroup.getRawValue();
           try {
               for (var _16 = __values(this.formFields), _17 = _16.next(); !_17.done; _17 = _16.next()) {
-                  var field_3 = _17.value;
-                  if (field_3.isFormElement) {
-                      if (field_3.hidden) {
-                          delete formData[field_3.key];
+                  var field_4 = _17.value;
+                  if (field_4.isFormElement) {
+                      if (field_4.hidden) {
+                          delete formData[field_4.key];
                       }
                       else {
-                          formData[field_3.key] = convertFormFieldValueToStandardFormat(field_3, formData[field_3.key]);
+                          formData[field_4.key] = convertFormFieldValueToStandardFormat(field_4, formData[field_4.key]);
                       }
                   }
               }
           }
-          catch (e_10_1) { e_10 = { error: e_10_1 }; }
+          catch (e_12_1) { e_12 = { error: e_12_1 }; }
           finally {
               try {
                   if (_17 && !_17.done && (_15 = _16.return)) _15.call(_16);
               }
-              finally { if (e_10) throw e_10.error; }
+              finally { if (e_12) throw e_12.error; }
           }
           var extendedFormData = this.formFields.reduce(function (result, field, index) {
               var _15;
@@ -6514,8 +6785,8 @@
               return field.key === _.key;
           });
           // set button status to default
-          field["api"]["status"]["value"] = EApiStatusType.LOADING;
-          field["showLoader"] = true;
+          field.api.status.value = EApiStatusType.LOADING;
+          field.showLoader = true;
           this.formFields[fieldIndex] = field;
           this.showApiLoader();
           this.fieldShowApiLoader(field.key);
@@ -6527,7 +6798,7 @@
               this.togglePermissionErrorNotification(true);
               setTimeout(function () {
                   _this.togglePermissionErrorNotification(false);
-              }, 3000);
+              }, FORM_VIEW_TIMERS.LOCATION_PERMISSION_ERROR_TOGGLE);
           }
           else {
               this.triggerLogs(ELogEventType$1.FORM__LIVE_LOCATION_PERMISSION_SUCCESS, {
@@ -6537,16 +6808,16 @@
           }
           setTimeout(function () {
               // set button status to default
-              field["api"]["status"]["value"] = EApiStatusType.DEFAULT;
-              field["showLoader"] = false;
+              field.api.status.value = EApiStatusType.DEFAULT;
+              field.showLoader = false;
               _this.formFields[fieldIndex] = field;
               _this.hideApiLoader();
               _this.fieldHideApiLoader(field.key);
-          }, 500);
+          }, FORM_VIEW_TIMERS.LOCATION_PERMISSION_RESET_BUTTON_STATUS);
       };
       KwikIDFormViewComponent.prototype.handleOnClickLiveLocation = function (e) {
           return __awaiter(this, void 0, void 0, function () {
-              var field, ruleEngine_7;
+              var field, ruleEngine_8;
               var _15;
               var _this = this;
               return __generator(this, function (_16) {
@@ -6558,8 +6829,8 @@
                               field_type: field.type
                           });
                           // set button status to loading
-                          field["api"]["status"]["value"] = EApiStatusType.LOADING;
-                          field["showLoader"] = true;
+                          field.api.status.value = EApiStatusType.LOADING;
+                          field.showLoader = true;
                           this.showApiLoader();
                           this.formGroup.patchValue((_15 = {},
                               _15[e.key] = e.value,
@@ -6578,20 +6849,21 @@
                       case 1: return [4 /*yield*/, new Promise(function (resolve) {
                               setTimeout(function () {
                                   resolve(true);
-                              }, 300); // 1000 ms = 1 sec
+                              }, FORM_VIEW_TIMERS.TIMER_300); // 1000 ms = 1 sec
                           })];
                       case 2:
                           _16.sent();
                           // set button status to success
-                          field["api"]["status"]["value"] = EApiStatusType.SUCCESS;
-                          field["showLoader"] = false;
+                          field.api.status.value = EApiStatusType.SUCCESS;
+                          field.showLoader = false;
                           if (field.isFormElement &&
                               kwikidToolkit.checkObjectKeyExists(field, "validation") &&
                               field.validation.triggers.includes("ON_CHANGE")) {
-                              ruleEngine_7 = new kwikidToolkit.RuleEngine({
+                              ruleEngine_8 = new kwikidToolkit.RuleEngine({
                                   FIELD_CONFIG: field,
                                   FORM_FIELDS: this.formFields,
                                   FORM_DATA: this.formData,
+                                  CAMERA_DATA: this.cameraData,
                                   TASK_DATA: this.taskData,
                                   PREVIOUS_FORM_DATA: this.previousFormData,
                                   ALL_FORMS_DATA: this.allFormsData,
@@ -6600,7 +6872,7 @@
                               (function () { return __awaiter(_this, void 0, void 0, function () {
                                   return __generator(this, function (_15) {
                                       switch (_15.label) {
-                                          case 0: return [4 /*yield*/, ruleEngine_7.run(field.validation)];
+                                          case 0: return [4 /*yield*/, ruleEngine_8.run(field.validation)];
                                           case 1:
                                               _15.sent();
                                               return [2 /*return*/];
@@ -6635,10 +6907,11 @@
           if (field.isFormElement &&
               kwikidToolkit.checkObjectKeyExists(field, "validation") &&
               field.validation.triggers.includes("ON_CHANGE")) {
-              var ruleEngine_8 = new kwikidToolkit.RuleEngine({
+              var ruleEngine_9 = new kwikidToolkit.RuleEngine({
                   FIELD_CONFIG: field,
                   FORM_FIELDS: this.formFields,
                   FORM_DATA: this.formData,
+                  CAMERA_DATA: this.cameraData,
                   TASK_DATA: this.taskData,
                   PREVIOUS_FORM_DATA: this.previousFormData,
                   ALL_FORMS_DATA: this.allFormsData,
@@ -6647,7 +6920,7 @@
               (function () { return __awaiter(_this, void 0, void 0, function () {
                   return __generator(this, function (_15) {
                       switch (_15.label) {
-                          case 0: return [4 /*yield*/, ruleEngine_8.run(field.validation)];
+                          case 0: return [4 /*yield*/, ruleEngine_9.run(field.validation)];
                           case 1:
                               _15.sent();
                               return [2 /*return*/];
@@ -6663,95 +6936,6 @@
               }, "ON_CHANGE");
           }
       };
-      KwikIDFormViewComponent.prototype.handleOnClickResetFormFields2 = function (e, field) {
-          var _a;
-          return __awaiter(this, void 0, void 0, function () {
-              var resetFormFields, BYPASS_RESET_CONFIRM, CONFIRM_RESET;
-              var _this = this;
-              return __generator(this, function (_15) {
-                  this.triggerLogs(ELogEventType$1.FORM__FIELD_RESET_BUTTON_CLICK, {
-                      field_key: field.key
-                  });
-                  resetFormFields = function () { return __awaiter(_this, void 0, void 0, function () {
-                      var _15, _16, f, _17, _18, action, resetField, actions, e_11_1, e_12_1;
-                      var e_12, _19, e_11, _20;
-                      return __generator(this, function (_21) {
-                          switch (_21.label) {
-                              case 0:
-                                  _21.trys.push([0, 11, 12, 13]);
-                                  _15 = __values(field.reset.fields), _16 = _15.next();
-                                  _21.label = 1;
-                              case 1:
-                                  if (!!_16.done) return [3 /*break*/, 10];
-                                  f = _16.value;
-                                  _21.label = 2;
-                              case 2:
-                                  _21.trys.push([2, 7, 8, 9]);
-                                  _17 = (e_11 = void 0, __values(f.actions)), _18 = _17.next();
-                                  _21.label = 3;
-                              case 3:
-                                  if (!!_18.done) return [3 /*break*/, 6];
-                                  action = _18.value;
-                                  resetField = getFormFieldByKey(this.formFields, action.props.fieldKey);
-                                  actions = new kwikidToolkit.Action(action, {}, {
-                                      FIELD_CONFIG: resetField,
-                                      FORM_FIELDS: this.formFields,
-                                      FORM_DATA: this.formData,
-                                      TASK_DATA: this.taskData,
-                                      PREVIOUS_FORM_DATA: this.previousFormData,
-                                      ALL_FORMS_DATA: this.allFormsData,
-                                      EXTRA_DATA: this.extraData
-                                  }, this.takeAction.bind(this));
-                                  return [4 /*yield*/, actions.execute()];
-                              case 4:
-                                  _21.sent();
-                                  _21.label = 5;
-                              case 5:
-                                  _18 = _17.next();
-                                  return [3 /*break*/, 3];
-                              case 6: return [3 /*break*/, 9];
-                              case 7:
-                                  e_11_1 = _21.sent();
-                                  e_11 = { error: e_11_1 };
-                                  return [3 /*break*/, 9];
-                              case 8:
-                                  try {
-                                      if (_18 && !_18.done && (_20 = _17.return)) _20.call(_17);
-                                  }
-                                  finally { if (e_11) throw e_11.error; }
-                                  return [7 /*endfinally*/];
-                              case 9:
-                                  _16 = _15.next();
-                                  return [3 /*break*/, 1];
-                              case 10: return [3 /*break*/, 13];
-                              case 11:
-                                  e_12_1 = _21.sent();
-                                  e_12 = { error: e_12_1 };
-                                  return [3 /*break*/, 13];
-                              case 12:
-                                  try {
-                                      if (_16 && !_16.done && (_19 = _15.return)) _19.call(_15);
-                                  }
-                                  finally { if (e_12) throw e_12.error; }
-                                  return [7 /*endfinally*/];
-                              case 13: return [2 /*return*/];
-                          }
-                      });
-                  }); };
-                  BYPASS_RESET_CONFIRM = (_a = field === null || field === void 0 ? void 0 : field.properties) === null || _a === void 0 ? void 0 : _a.bypassResetConfirmation;
-                  if (!BYPASS_RESET_CONFIRM) {
-                      CONFIRM_RESET = window.confirm("This action will reset all the fields. Do you still want to continue?");
-                      if (CONFIRM_RESET) {
-                          resetFormFields();
-                      }
-                  }
-                  else {
-                      resetFormFields();
-                  }
-                  return [2 /*return*/];
-              });
-          });
-      };
       KwikIDFormViewComponent.prototype.handleOnClickResetFormFields = function (e, field) {
           var _a;
           return __awaiter(this, void 0, void 0, function () {
@@ -6789,6 +6973,7 @@
                                       FIELD_CONFIG: resetField,
                                       FORM_FIELDS: this.formFields,
                                       FORM_DATA: this.formData,
+                                      CAMERA_DATA: this.cameraData,
                                       TASK_DATA: this.taskData,
                                       PREVIOUS_FORM_DATA: this.previousFormData,
                                       ALL_FORMS_DATA: this.allFormsData,
@@ -6857,6 +7042,7 @@
                                       FIELD_CONFIG: resetField,
                                       FORM_FIELDS: this.formFields,
                                       FORM_DATA: this.formData,
+                                      CAMERA_DATA: this.cameraData,
                                       TASK_DATA: this.taskData,
                                       PREVIOUS_FORM_DATA: this.previousFormData,
                                       ALL_FORMS_DATA: this.allFormsData,
@@ -6937,6 +7123,7 @@
                               API_CONFIG: api,
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -6957,6 +7144,7 @@
                               API_RESPONSE: api.response,
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -6968,9 +7156,9 @@
                           return [3 /*break*/, 4];
                       case 3:
                           setTimeout(function () {
-                              field["api"]["status"]["value"] = EApiStatusType.FAILED;
-                              field["showLoader"] = false;
-                          }, 500);
+                              field.api.status.value = EApiStatusType.FAILED;
+                              field.showLoader = false;
+                          }, FORM_VIEW_TIMERS.TIMER_500);
                           _17.label = 4;
                       case 4: return [2 /*return*/, { field: field, api: api }];
                   }
@@ -6987,6 +7175,7 @@
                               API_CONFIG: api,
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -6999,6 +7188,7 @@
                               API_CONFIG: api,
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -7039,16 +7229,17 @@
                           api = _15.sent();
                           apiCallResponse = {};
                           if (!this.isValidRequestHeadersAndBody(api)) return [3 /*break*/, 17];
-                          if (!(api.request.url.hasOwnProperty("type") &&
+                          if (!(kwikidToolkit.checkObjectKeyExists(api.request.url, "type") &&
                               api.request.url.type === EApiRequestUrlType.MOCK)) return [3 /*break*/, 7];
                           return [4 /*yield*/, new Promise(function (resolve) {
                                   setTimeout(function () {
                                       resolve(api.request.url.props.mockedData);
-                                  }, 1000); // 1000 ms = 1 sec
+                                  }, FORM_VIEW_TIMERS.WAIT_FOR_API_MOCK_DATA); // 1000 ms = 1 sec
                               })];
                       case 6:
                           apiCallResponse = _15.sent();
-                          apiCallResponseStatusCode = (_b = (_a = api.request.url.props) === null || _a === void 0 ? void 0 : _a.statusCode) !== null && _b !== void 0 ? _b : 200; // Default Status Code for Mocked APIs
+                          apiCallResponseStatusCode =
+                              (_b = (_a = api.request.url.props) === null || _a === void 0 ? void 0 : _a.statusCode) !== null && _b !== void 0 ? _b : FORM_VIEW_TIMERS.API_MOCK_SUCCESS_STATUS_CODE; // Default Status Code for Mocked APIs
                           return [3 /*break*/, 16];
                       case 7:
                           url = api.request.url.value;
@@ -7077,7 +7268,8 @@
                           _13_1 = _15.sent();
                           // Handle any errors
                           apiCallResponse = {};
-                          apiCallResponseStatusCode = 500; // Internal Server Error
+                          apiCallResponseStatusCode =
+                              FORM_VIEW_TIMERS.API_MOCK_ERROR_STATUS_CODE; // Internal Server Error
                           return [3 /*break*/, 11];
                       case 11: return [3 /*break*/, 16];
                       case 12:
@@ -7102,7 +7294,8 @@
                           _14_1 = _15.sent();
                           // Handle any errors
                           apiCallResponse = {};
-                          apiCallResponseStatusCode = 500; // Internal Server Error
+                          apiCallResponseStatusCode =
+                              FORM_VIEW_TIMERS.API_MOCK_ERROR_STATUS_CODE; // Internal Server Error
                           return [3 /*break*/, 16];
                       case 16:
                           api.response = kwikidToolkit.setValueToObjectPath(api.response, "value", apiCallResponse);
@@ -7138,17 +7331,17 @@
               fullscreen: true,
               loaderText: "Please wait"
           });
-          this.viewFormsButton["disabled"] = true;
-          this.viewFormsButton["showLoader"] = true;
-          this.saveFormButton["disabled"] = true;
-          this.saveFormButton["showLoader"] = true;
+          this.viewFormsButton.disabled = true;
+          this.viewFormsButton.showLoader = true;
+          this.saveFormButton.disabled = true;
+          this.saveFormButton.showLoader = true;
       };
       KwikIDFormViewComponent.prototype.hideApiLoader = function () {
           this.loaderService.hide();
-          this.viewFormsButton["disabled"] = false;
-          this.viewFormsButton["showLoader"] = false;
-          this.saveFormButton["disabled"] = false;
-          this.saveFormButton["showLoader"] = false;
+          this.viewFormsButton.disabled = false;
+          this.viewFormsButton.showLoader = false;
+          this.saveFormButton.disabled = false;
+          this.saveFormButton.showLoader = false;
       };
       KwikIDFormViewComponent.prototype.handleOnClickApiCall = function (e) {
           return __awaiter(this, void 0, void 0, function () {
@@ -7163,8 +7356,8 @@
                               field_type: field.type
                           });
                           // set button status to loading
-                          field["api"]["status"]["value"] = EApiStatusType.LOADING;
-                          field["showLoader"] = true;
+                          field.api.status.value = EApiStatusType.LOADING;
+                          field.showLoader = true;
                           this.showApiLoader();
                           if (!kwikidToolkit.checkObjectKeyExists(field.api, "request")) return [3 /*break*/, 2];
                           return [4 /*yield*/, this.handleFieldApiCall(field, field.api)];
@@ -7177,6 +7370,7 @@
                               API_CONFIG: {},
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -7296,6 +7490,7 @@
                               FIELD_CONFIG: field,
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -7308,7 +7503,7 @@
                               this.toggleErrorNotification(true);
                               setTimeout(function () {
                                   _this.toggleErrorNotification(false);
-                              }, 3000);
+                              }, FORM_VIEW_TIMERS.INVALID_FIELDS_SAVE_FORM_ERROR_TOGGLE);
                               return [2 /*return*/];
                           }
                           _25.label = 4;
@@ -7368,6 +7563,7 @@
                               if (kwikidToolkit.isEmptyValue(formData[key])) {
                                   formData[key] = "";
                               }
+                              return null;
                           });
                           if (!(kwikidToolkit.checkObjectKeyExists(this.formConfig, "tasks") &&
                               kwikidToolkit.checkObjectKeyExists(this.formConfig.tasks, "post"))) return [3 /*break*/, 18];
@@ -7384,6 +7580,7 @@
                               FORM_CONFIG: this.formConfig,
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -7406,7 +7603,7 @@
                                           clearInterval(intervalId);
                                           resolve();
                                       }
-                                  }, 10);
+                                  }, FORM_VIEW_TIMERS.WAIT_FOR_CHANGES_BEFORE_MOVING_TO_NEXT_TASK);
                               })];
                       case 12:
                           // Wait for ngOnChanges to be called before continuing to the next task
@@ -7483,7 +7680,7 @@
           var fieldIndex = this.formFields.findIndex(function (_) {
               return field.key === _.key;
           });
-          this.formFields[fieldIndex]["hidden"] = true;
+          this.formFields[fieldIndex].hidden = true;
           this.formGroup.updateValueAndValidity();
           this.triggerLogs(ELogEventType$1.FORM__FIELD_HIDE, {
               field_key: fieldKey,
@@ -7511,7 +7708,7 @@
           var fieldIndex = this.formFields.findIndex(function (_) {
               return field.key === _.key;
           });
-          this.formFields[fieldIndex]["hidden"] = false;
+          this.formFields[fieldIndex].hidden = false;
           this.formGroup.updateValueAndValidity();
           this.triggerLogs(ELogEventType$1.FORM__FIELD_SHOW, {
               field_key: fieldKey,
@@ -7540,17 +7737,16 @@
               return field.key === _.key;
           });
           if (field.isFormElement) {
-              this.formFields[fieldIndex]["disabled"] = true;
+              this.formFields[fieldIndex].disabled = true;
               if (kwikidToolkit.isNotEmptyValue(this.formGroup.controls)) {
                   this.formGroup.controls[field.key].disable({
                       emitEvent: false
                   });
               }
               this.formGroup.updateValueAndValidity();
-              console.log("YES DISABLING THE FIELD");
           }
           else if (field.type === EFieldType.BUTTON) {
-              this.formFields[fieldIndex]["disabled"] = true;
+              this.formFields[fieldIndex].disabled = true;
           }
           this.triggerLogs(ELogEventType$1.FORM__FIELD_DISABLE, {
               field_key: fieldKey,
@@ -7579,7 +7775,7 @@
               return field.key === _.key;
           });
           if (field.isFormElement) {
-              this.formFields[fieldIndex]["disabled"] = false;
+              this.formFields[fieldIndex].disabled = false;
               if (kwikidToolkit.isNotEmptyValue(this.formGroup.controls)) {
                   this.formGroup.controls[field.key].enable({
                       emitEvent: false
@@ -7588,7 +7784,7 @@
               this.formGroup.updateValueAndValidity();
           }
           else if (field.type === EFieldType.BUTTON) {
-              this.formFields[fieldIndex]["disabled"] = false;
+              this.formFields[fieldIndex].disabled = false;
           }
           this.triggerLogs(ELogEventType$1.FORM__FIELD_ENABLE, {
               field_key: fieldKey,
@@ -7644,23 +7840,24 @@
           });
           // Reset the value of the field in the formFields array
           switch (field.type) {
-              case EFieldType.API:
+              case EFieldType.API: {
                   var fieldApiCall = field;
                   fieldApiCall.api.status.value = EApiStatusType.DEFAULT;
                   this.formFields[fieldIndex] = fieldApiCall;
                   break;
-              case EFieldType.LIVE_LOCATION:
+              }
+              case EFieldType.LIVE_LOCATION: {
                   var fieldLiveLocation = field;
                   fieldLiveLocation.api.status.value = EApiStatusType.DEFAULT;
                   this.formFields[fieldIndex] = fieldLiveLocation;
                   break;
-              default:
-                  console.log("BAIJU BEFORE", kwikidToolkit.getObjectDeepCopy(field), kwikidToolkit.getObjectDeepCopy(this.formFields));
+              }
+              default: {
                   field.focus = false;
                   field.invalid = false;
                   this.formFields[fieldIndex] = field;
-                  console.log("BAIJU AFTER", kwikidToolkit.getObjectDeepCopy(field), kwikidToolkit.getObjectDeepCopy(this.formFields));
                   break;
+              }
           }
           this.triggerLogs(ELogEventType$1.FORM__FIELD_RESET, {
               field_key: fieldKey,
@@ -7690,18 +7887,21 @@
           });
           // Reset the value of the field in the formFields array
           switch (field.type) {
-              case EFieldType.API:
+              case EFieldType.API: {
                   var fieldApiCall = field;
                   fieldApiCall.disabled = false;
                   this.formFields[fieldIndex] = fieldApiCall;
                   break;
-              case EFieldType.LIVE_LOCATION:
+              }
+              case EFieldType.LIVE_LOCATION: {
                   var fieldLiveLocation = field;
                   fieldLiveLocation.disabled = false;
                   this.formFields[fieldIndex] = fieldLiveLocation;
                   break;
-              default:
+              }
+              default: {
                   break;
+              }
           }
       };
       KwikIDFormViewComponent.prototype.fieldShowApiLoader = function (fieldKey) {
@@ -7711,18 +7911,21 @@
           });
           // Reset the value of the field in the formFields array
           switch (field.type) {
-              case EFieldType.API:
+              case EFieldType.API: {
                   var fieldApiCall = field;
                   fieldApiCall.disabled = true;
                   this.formFields[fieldIndex] = fieldApiCall;
                   break;
-              case EFieldType.LIVE_LOCATION:
+              }
+              case EFieldType.LIVE_LOCATION: {
                   var fieldLiveLocation = field;
                   fieldLiveLocation.disabled = true;
                   this.formFields[fieldIndex] = fieldLiveLocation;
                   break;
-              default:
+              }
+              default: {
                   break;
+              }
           }
       };
       KwikIDFormViewComponent.prototype.setHtml = function (fieldKey, message) {
@@ -7809,7 +8012,7 @@
       };
       KwikIDFormViewComponent.prototype.fieldApiTimerMessageHide = function (fieldKey) {
           return __awaiter(this, void 0, void 0, function () {
-              var field, fieldIndex, ruleEngine_9;
+              var field, fieldIndex, ruleEngine_10;
               var _this = this;
               return __generator(this, function (_15) {
                   field = getFormFieldByKey(this.formFields, fieldKey);
@@ -7820,10 +8023,11 @@
                   if (field.isFormElement &&
                       kwikidToolkit.checkObjectKeyExists(field, "validation") &&
                       field.validation.triggers.includes("ON_API_TIMER_STOP")) {
-                      ruleEngine_9 = new kwikidToolkit.RuleEngine({
+                      ruleEngine_10 = new kwikidToolkit.RuleEngine({
                           FIELD_CONFIG: field,
                           FORM_FIELDS: this.formFields,
                           FORM_DATA: this.formData,
+                          CAMERA_DATA: this.cameraData,
                           TASK_DATA: this.taskData,
                           PREVIOUS_FORM_DATA: this.previousFormData,
                           ALL_FORMS_DATA: this.allFormsData,
@@ -7832,7 +8036,7 @@
                       (function () { return __awaiter(_this, void 0, void 0, function () {
                           return __generator(this, function (_15) {
                               switch (_15.label) {
-                                  case 0: return [4 /*yield*/, ruleEngine_9.run(field.validation)];
+                                  case 0: return [4 /*yield*/, ruleEngine_10.run(field.validation)];
                                   case 1:
                                       _15.sent();
                                       return [2 /*return*/];
@@ -8130,11 +8334,12 @@
                           entrypointApiKey = action.props.apiKey;
                           field = getFormFieldByKey(this.formFields, action.props.fieldKey);
                           endpoints = field.api.endpoints;
-                          nextApiIndex = endpoints.findIndex(function (api) { return api.apiKey == entrypointApiKey; });
+                          nextApiIndex = endpoints.findIndex(function (api) { return api.apiKey === entrypointApiKey; });
                           apiConfig = endpoints[nextApiIndex];
                           return [4 /*yield*/, this.handleFieldApiCall(field, apiConfig)];
                       case 1:
                           response = _15.sent();
+                          // eslint-disable-next-line prefer-destructuring
                           field = response.field;
                           field.api.endpoints[nextApiIndex] = response.api;
                           return [2 /*return*/];
@@ -8149,7 +8354,7 @@
               return __generator(this, function (_16) {
                   field = getFormFieldByKey(this.formFields, action.props.fieldKey);
                   multipleApiCallResponses = {};
-                  field.api.endpoints.map(function (api) {
+                  field.api.endpoints.forEach(function (api) {
                       if (kwikidToolkit.checkObjectKeyExists(api.response, "value"))
                           multipleApiCallResponses = kwikidToolkit.setValueToObjectPath(multipleApiCallResponses, "" + api.apiKey, api.response.value);
                   });
@@ -8191,7 +8396,7 @@
                           if (!kwikidToolkit.checkObjectKeyExists(action.props, "apiKey")) return [3 /*break*/, 2];
                           entrypointApiKey_1 = action.props.apiKey;
                           endpoints = multipleApiConfig.endpoints;
-                          nextApiIndex = endpoints.findIndex(function (api) { return api.apiKey == entrypointApiKey_1; });
+                          nextApiIndex = endpoints.findIndex(function (api) { return api.apiKey === entrypointApiKey_1; });
                           apiConfig = endpoints[nextApiIndex];
                           return [4 /*yield*/, this.handleApiCall(apiConfig)];
                       case 1:
@@ -8206,6 +8411,7 @@
                               API_CONFIG: multipleApiConfig,
                               FORM_FIELDS: this.formFields,
                               FORM_DATA: this.formData,
+                              CAMERA_DATA: this.cameraData,
                               TASK_DATA: this.taskData,
                               PREVIOUS_FORM_DATA: this.previousFormData,
                               ALL_FORMS_DATA: this.allFormsData,
@@ -8227,7 +8433,7 @@
               return __generator(this, function (_16) {
                   multipleApiConfig = this.formConfig.apis[action.props.formApiKey];
                   multipleApiCallResponses = {};
-                  multipleApiConfig.endpoints.map(function (api) {
+                  multipleApiConfig.endpoints.forEach(function (api) {
                       if (kwikidToolkit.checkObjectKeyExists(api.response, "value"))
                           multipleApiCallResponses = kwikidToolkit.setValueToObjectPath(multipleApiCallResponses, "" + api.apiKey, api.response.value);
                   });
@@ -8269,7 +8475,8 @@
               if (kwikidToolkit.checkObjectKeyExists(action.props.url, "url")) {
                   var timeout = 2000;
                   if (kwikidToolkit.checkObjectKeyExists(action.props.url, "timeout") &&
-                      typeof action.props.url.timeout == "number") {
+                      typeof action.props.url.timeout === "number") {
+                      // eslint-disable-next-line prefer-destructuring
                       timeout = action.props.url.timeout;
                   }
                   this.triggerLogs(ELogEventType$1.FORM__REDIRECT_URL, {
@@ -8300,10 +8507,12 @@
           else {
               var formDataInKwikUIFormat = {};
               for (var fieldKey in formData) {
-                  var field = getFormFieldByKey(this.formFields, fieldKey);
-                  if (!kwikidToolkit.isUndefined(field) && !kwikidToolkit.isNull(field)) {
-                      formDataInKwikUIFormat[fieldKey] =
-                          convertFormFieldValueToKwikUIFormat(field, formData[fieldKey]);
+                  if (kwikidToolkit.isNotEmptyValue(fieldKey)) {
+                      var field = getFormFieldByKey(this.formFields, fieldKey);
+                      if (!kwikidToolkit.isUndefined(field) && !kwikidToolkit.isNull(field)) {
+                          formDataInKwikUIFormat[fieldKey] =
+                              convertFormFieldValueToKwikUIFormat(field, formData[fieldKey]);
+                      }
                   }
               }
               this.formGroup.patchValue(formDataInKwikUIFormat, { emitEvent: false });
@@ -8487,7 +8696,7 @@
       KwikIDFormViewComponent.prototype.takeAction = function (action, object) {
           var _a, _b, _c, _d, _e, _f;
           return __awaiter(this, void 0, void 0, function () {
-              var _15, fieldErrorShow_Source, fieldErrorShowSourceValue, fieldErrorHide_Source, fieldErrorHideSourceValue, redirectToUrl_Source, redirectToUrlSourceValue, previewErrorShow_Source, previewErrorShowSourceValue, fieldHtmlMessage_Source, fieldHtmlMessageSourceValue;
+              var _15, fieldErrorShowSource, fieldErrorShowSourceValue, fieldErrorHideSource, fieldErrorHideSourceValue, redirectToUrlSource, redirectToUrlSourceValue, previewErrorShowSource, previewErrorShowSourceValue, fieldHtmlMessageSource, fieldHtmlMessageSourceValue;
               return __generator(this, function (_16) {
                   switch (_16.label) {
                       case 0:
@@ -8562,12 +8771,12 @@
                           return [3 /*break*/, 73];
                       case 8:
                           if (!kwikidToolkit.checkObjectKeyExists(action.props.message, "source")) return [3 /*break*/, 10];
-                          fieldErrorShow_Source = new kwikidToolkit.Source(object);
-                          return [4 /*yield*/, fieldErrorShow_Source.getValueFromSource(action.props.message.source)];
+                          fieldErrorShowSource = new kwikidToolkit.Source(object);
+                          return [4 /*yield*/, fieldErrorShowSource.getValueFromSource(action.props.message.source)];
                       case 9:
                           fieldErrorShowSourceValue = _16.sent();
-                          if (typeof fieldErrorShowSourceValue == "string" ||
-                              typeof fieldErrorShowSourceValue == "number") {
+                          if (typeof fieldErrorShowSourceValue === "string" ||
+                              typeof fieldErrorShowSourceValue === "number") {
                               fieldErrorShowSourceValue = String(fieldErrorShowSourceValue);
                           }
                           else {
@@ -8581,12 +8790,12 @@
                           return [3 /*break*/, 73];
                       case 11:
                           if (!kwikidToolkit.checkObjectKeyExists(action.props.message, "source")) return [3 /*break*/, 13];
-                          fieldErrorHide_Source = new kwikidToolkit.Source(object);
-                          return [4 /*yield*/, fieldErrorHide_Source.getValueFromSource(action.props.message.source)];
+                          fieldErrorHideSource = new kwikidToolkit.Source(object);
+                          return [4 /*yield*/, fieldErrorHideSource.getValueFromSource(action.props.message.source)];
                       case 12:
                           fieldErrorHideSourceValue = _16.sent();
-                          if (typeof fieldErrorHideSourceValue == "string" ||
-                              typeof fieldErrorHideSourceValue == "number") {
+                          if (typeof fieldErrorHideSourceValue === "string" ||
+                              typeof fieldErrorHideSourceValue === "number") {
                               fieldErrorHideSourceValue = String(fieldErrorHideSourceValue);
                           }
                           else {
@@ -8676,8 +8885,8 @@
                           return [3 /*break*/, 73];
                       case 51:
                           if (!kwikidToolkit.checkObjectKeyExists(action.props.url, "source")) return [3 /*break*/, 53];
-                          redirectToUrl_Source = new kwikidToolkit.Source(object);
-                          return [4 /*yield*/, redirectToUrl_Source.getValueFromSource(action.props.url.source)];
+                          redirectToUrlSource = new kwikidToolkit.Source(object);
+                          return [4 /*yield*/, redirectToUrlSource.getValueFromSource(action.props.url.source)];
                       case 52:
                           redirectToUrlSourceValue = _16.sent();
                           if (kwikidToolkit.isEmptyString(redirectToUrlSourceValue)) {
@@ -8687,18 +8896,18 @@
                           _16.label = 53;
                       case 53:
                           this.redirectToUrl(action);
-                          _16.label = 54;
+                          return [3 /*break*/, 73];
                       case 54:
                           this.showPreview(action.props);
                           return [3 /*break*/, 73];
                       case 55:
                           if (!kwikidToolkit.checkObjectKeyExists(action.props.message, "source")) return [3 /*break*/, 57];
-                          previewErrorShow_Source = new kwikidToolkit.Source(object);
-                          return [4 /*yield*/, previewErrorShow_Source.getValueFromSource(action.props.message.source)];
+                          previewErrorShowSource = new kwikidToolkit.Source(object);
+                          return [4 /*yield*/, previewErrorShowSource.getValueFromSource(action.props.message.source)];
                       case 56:
                           previewErrorShowSourceValue = _16.sent();
-                          if (typeof previewErrorShowSourceValue == "string" ||
-                              typeof previewErrorShowSourceValue == "number") {
+                          if (typeof previewErrorShowSourceValue === "string" ||
+                              typeof previewErrorShowSourceValue === "number") {
                               previewErrorShowSourceValue = String(previewErrorShowSourceValue);
                           }
                           else {
@@ -8749,12 +8958,12 @@
                           return [3 /*break*/, 73];
                       case 69:
                           if (!kwikidToolkit.checkObjectKeyExists(action.props.message, "source")) return [3 /*break*/, 71];
-                          fieldHtmlMessage_Source = new kwikidToolkit.Source(object);
-                          return [4 /*yield*/, fieldHtmlMessage_Source.getValueFromSource(action.props.message.source)];
+                          fieldHtmlMessageSource = new kwikidToolkit.Source(object);
+                          return [4 /*yield*/, fieldHtmlMessageSource.getValueFromSource(action.props.message.source)];
                       case 70:
                           fieldHtmlMessageSourceValue = _16.sent();
-                          if (typeof fieldHtmlMessageSourceValue == "string" ||
-                              typeof fieldHtmlMessageSourceValue == "number") {
+                          if (typeof fieldHtmlMessageSourceValue === "string" ||
+                              typeof fieldHtmlMessageSourceValue === "number") {
                               fieldHtmlMessageSourceValue = String(fieldHtmlMessageSourceValue);
                           }
                           else {
@@ -8775,7 +8984,7 @@
       return KwikIDFormViewComponent;
   }());
   /** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormViewComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: KwikIDFormViewService }, { token: KwikIDFormViewApiService }, { token: i6.TuiPushService }, { token: i5.TuiAlertService }, { token: i7.TuiPreviewDialogService }, { token: i5.TuiDialogService }, { token: i3__namespace.KwikUILoaderService }, { token: i4__namespace.KwikIDCameraRecordService }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  /** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { allFormsData: "allFormsData", extraData: "extraData", apiCallResponse: "apiCallResponse", buttonClickResponse: "buttonClickResponse", formConfig: "formConfig", formData: "formData", isMobileView: "isMobileView", popupFormCallback: "popupFormCallback", userConfig: "userConfig", stepConfig: "stepConfig" }, outputs: { getLogs: "getLogs", getUnsavedDataState: "getUnsavedDataState", onActionShowPopupForm: "onActionShowPopupForm", onClickApiCall: "onClickApiCall", onClickViewFile: "onClickViewFile", onClickFormFieldButton: "onClickFormFieldButton", onClickGoBack: "onClickGoBack", onClickSaveForm: "onClickSaveForm", onClickViewForms: "onClickViewForms" }, providers: [KwikIDFormViewService, KwikIDFormViewApiService], viewQueries: [{ propertyName: "formFieldContainerRef", first: true, predicate: ["formFieldContainerRef"], descendants: true }, { propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }, { propertyName: "preview", first: true, predicate: ["preview"], descendants: true }, { propertyName: "formFieldsRef", predicate: ["formFieldsRef"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"kwikid-form-container\"\n  *ngIf=\"!loading\"\n>\n  <div\n    id=\"uf-form-fields-header-container\"\n    *ngIf=\"\n      !formConfig.properties?.header?.title?.hidden ||\n      !formConfig.properties?.header?.logo?.hidden ||\n      !formConfig.properties?.header?.steps?.hidden ||\n      !formConfig.properties?.header?.backButton?.hidden\n    \"\n  >\n    <img\n      id=\"uf-header-logo\"\n      *ngIf=\"!formConfig.properties?.header?.logo?.hidden && isMobileView\"\n      [src]=\"formConfig.properties?.header?.logo?.src\"\n      [alt]=\"formConfig.properties?.header?.logo?.alt\"\n      [style]=\"\n        formConfig.properties?.header?.logo?.styles ?? '' | styleSanitizer\n      \"\n    />\n    <div id=\"uf-form-fields-header-main\">\n      <div id=\"uf-form-fields-header-left\">\n        <kwikui-button\n          *ngIf=\"\n            !formConfig.properties?.header.backButton.hidden && isMobileView\n          \"\n          [disabled]=\"backButton.disabled\"\n          [showLoader]=\"backButton.showLoader\"\n          appearance=\"mono\"\n          icon=\"tuiIconArrowLeft\"\n          shape=\"rounded\"\n          (onClick)=\"\n            handleOnClickGoBack(\n              $event,\n              formConfig.properties?.header.backButton.mode\n            )\n          \"\n        ></kwikui-button>\n      </div>\n      <div id=\"uf-form-fields-header-right\">\n        <div\n          id=\"uf-form-fields-title\"\n          *ngIf=\"!formConfig.properties?.header.title.hidden\"\n          >{{ formConfig.properties?.header.title.label }}</div\n        >\n        <div\n          id=\"uf-form-fields-steps\"\n          *ngIf=\"!formConfig.properties?.header.steps.hidden\"\n        >\n          Step {{ formConfig.sequenceNo }} of {{ formConfig.formsListLength }}\n        </div>\n      </div>\n    </div>\n    <hr\n      *ngIf=\"\n        !formConfig.properties?.header.title.hidden ||\n        !formConfig.properties?.header.steps.hidden ||\n        !formConfig.properties?.header.backButton.hidden\n      \"\n    />\n  </div>\n  <form\n    #formFieldContainerRef\n    class=\"kwikid-form show\"\n    [style]=\"formConfig.properties?.main?.styles ?? '' | styleSanitizer\"\n    [formGroup]=\"formGroup\"\n  >\n    <ng-container\n      *ngFor=\"\n        let field of formFields;\n        let i = index;\n        trackBy: getUniqueIdentifier\n      \"\n    >\n      <ng-container [ngSwitch]=\"field.type\">\n        <!-- HTML Content -->\n        <ng-container *ngSwitchCase=\"'html'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <div [innerHtml]=\"field.html | kwikuiSafeHtml\"></div>\n          </div>\n        </ng-container>\n        <!-- Form Title -->\n        <ng-container *ngSwitchCase=\"'title'\">\n          <div\n            #formFieldsRef\n            class=\"title\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            [class.hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <div>\n              {{ field.label }}\n            </div>\n            <kwikui-button\n              *ngIf=\"field?.reset\"\n              appearance=\"whiteblock\"\n              size=\"s\"\n              [label]=\"field?.properties?.resetButtonLabel ?? 'Reset'\"\n              (onClick)=\"handleOnClickResetFormFields($event, field)\"\n            ></kwikui-button>\n          </div>\n        </ng-container>\n        <!-- Button -->\n        <ng-container *ngSwitchCase=\"'button'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-button\n              [appearance]=\"field?.properties?.appearance ?? 'primary'\"\n              [class]=\"field?.properties?.class\"\n              [disabled]=\"field?.disabled\"\n              [icon]=\"field?.properties?.icon\"\n              [iconRight]=\"field?.properties?.iconRight\"\n              [id]=\"field?.key\"\n              [label]=\"field?.label\"\n              [shape]=\"field?.properties?.shape\"\n              [showLoader]=\"field?.properties?.loading ?? false\"\n              [size]=\"field?.properties?.size\"\n              [styles]=\"field?.properties?.styles\"\n              [type]=\"'button'\"\n              (onClick)=\"handleOnClickFormFieldButton(field)\"\n            ></kwikui-button>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Text -->\n        <ng-container *ngSwitchCase=\"'text'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input\n              [case]=\"field?.properties?.case\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [type]=\"'text'\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Currency -->\n        <ng-container *ngSwitchCase=\"'currency'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-currency\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [currencyType]=\"field?.properties?.currencyType\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              [value]=\"formGroup.controls[field.key].value\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-currency>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Email -->\n        <ng-container *ngSwitchCase=\"'email'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-email\n              [case]=\"field?.properties?.case\"\n              [disabled]=\"field?.disabled\"\n              [domains]=\"field?.properties?.domains\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-email>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Password -->\n        <ng-container *ngSwitchCase=\"'password'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-password\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [hintContent]=\"field?.properties?.hintContent\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-password>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Textarea -->\n        <ng-container *ngSwitchCase=\"'textarea'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-textarea\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-textarea>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Checkbox -->\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-checkbox\n              [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.properties?.placeholder\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [size]=\"field?.properties?.size ?? 'l'\"\n              [validators]=\"field?.validators\"\n              [variant]=\"field?.properties?.variant ?? 'block'\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-checkbox>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Number -->\n        <ng-container *ngSwitchCase=\"'number'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-number\n              [decimal]=\"field?.properties?.decimal\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [max]=\"field?.properties?.max\"\n              [min]=\"field?.properties?.min\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix ?? ''\"\n              [precision]=\"field?.properties?.precision\"\n              [prefix]=\"field?.properties?.prefix ?? ''\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-number>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Date -->\n        <ng-container *ngSwitchCase=\"'date'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-date\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [max]=\"field?.properties?.max\"\n              [maxCalculatedFromToday]=\"\n                field?.properties?.maxCalculatedFromToday\n              \"\n              [min]=\"field?.properties?.min\"\n              [minCalculatedFromToday]=\"\n                field?.properties?.minCalculatedFromToday\n              \"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-date>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Time -->\n        <ng-container *ngSwitchCase=\"'time'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-time\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [items]=\"field?.properties?.items\"\n              [label]=\"field?.label\"\n              [mode]=\"field?.properties?.mode\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-time>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Phone -->\n        <ng-container *ngSwitchCase=\"'phone'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-phone\n              [countryCode]=\"field?.properties?.countryCode\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [phoneMaskAfterCountryCode]=\"\n                field?.properties?.phoneMaskAfterCountryCode\n              \"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [removeCountryCodeFromValue]=\"\n                field?.properties?.removeCountryCodeFromValue\n              \"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-phone>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Radio -->\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <label\n              [tuiLabel]=\"labelTemplate\"\n              style=\"min-height: auto; padding: 0px 0.5rem\"\n            >\n              <kwikui-input-radio\n                [disabled]=\"field?.disabled\"\n                [focus]=\"field?.focus\"\n                [formControl]=\"formGroup.controls[field.key]\"\n                [formControlName]=\"field.key\"\n                [id]=\"field.key\"\n                [invalid]=\"field?.invalid\"\n                [items]=\"field?.options\"\n                [label]=\"field?.label\"\n                [orientation]=\"field?.properties?.orientation\"\n                [placeholder]=\"field?.properties?.placeholder\"\n                [properties]=\"field?.properties\"\n                [size]=\"field?.properties?.size\"\n                [validators]=\"field?.validators\"\n                (getKeyValue)=\"handleGetKeyValue($event)\"\n              ></kwikui-input-radio>\n            </label>\n            <ng-template #labelTemplate>\n              <p\n                class=\"tui-space_bottom-2\"\n                [hidden]=\"field?.hidden\"\n                id=\"field_{{ field.key }}\"\n              >\n                <b>\n                  {{ field.label }}\n                  <span *ngIf=\"field.validators?.required\">*</span>\n                </b>\n              </p>\n            </ng-template>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Dropdown -->\n        <ng-container *ngSwitchCase=\"'select'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-select\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [options]=\"field.options\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [searchable]=\"field?.properties?.searchable\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-select>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Slider -->\n        <ng-container *ngSwitchCase=\"'slider'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-slider\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [max]=\"field?.properties?.max\"\n              [min]=\"field?.properties?.min\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [quantum]=\"field?.properties?.quantum\"\n              [size]=\"field?.properties?.size\"\n              [steps]=\"field?.properties?.steps\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-slider>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- API Call -->\n        <ng-container *ngSwitchCase=\"'api'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-button-api-call\n              [apiStatus]=\"field?.api?.status?.value\"\n              [apiTimer]=\"field?.api?.timer\"\n              [class]=\"field?.class\"\n              [disabled]=\"field?.disabled\"\n              [id]=\"field.key\"\n              [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\n              [showLoader]=\"field?.disabled === 'loading'\"\n              [size]=\"field?.properties?.size\"\n              [styles]=\"\n                field?.properties?.styles\n                  ? field?.properties?.styles\n                  : 'width: fit-content'\n              \"\n              (onClick)=\"handleOnClickApiCall($event)\"\n              (onApiTimerStop)=\"handleOnApiTimerStop($event)\"\n            ></kwikui-button-api-call>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Live Location -->\n        <ng-container *ngSwitchCase=\"'live-location'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-button-live-location\n              [class]=\"field?.class\"\n              [disabled]=\"field?.disabled\"\n              [id]=\"field.key\"\n              [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\n              [liveLocationStatus]=\"field?.api?.status?.value\"\n              [shape]=\"field?.properties?.shape\"\n              [isShowLatLongCaptureTimestamp]=\"\n                field?.properties?.isShowLatLongCaptureTimestamp\n              \"\n              [showLoader]=\"field?.disabled\"\n              [size]=\"field?.properties?.size\"\n              styles=\"width: fit-content\"\n              (onClick)=\"handleOnClickLiveLocation($event)\"\n              (onLocationPermission)=\"handleOnLocationPermission($event)\"\n            ></kwikui-button-live-location>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Mobile OTP -->\n        <ng-container *ngSwitchCase=\"'otp'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-otp\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [mask]=\"field?.properties?.mask\"\n              [mode]=\"field?.properties?.mode\"\n              [otpLength]=\"field?.properties?.otpLength\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [size]=\"field?.properties?.size\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-otp>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Aadhaar Number -->\n        <ng-container *ngSwitchCase=\"'aadhaar-number'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-aadhaar\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [mask]=\"field?.properties?.mask\"\n              [placeholder]=\"field?.placeholder\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-aadhaar>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Preview Image -->\n        <ng-container *ngSwitchCase=\"'image'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-image\n              [altText]=\"field?.properties?.altText\"\n              [class]=\"field?.properties?.class\"\n              [html]=\"field?.properties?.html\"\n              [id]=\"field.key\"\n              [imageSrc]=\"formGroup.controls[field.key].value ?? ''\"\n              [imageType]=\"field?.properties?.imageType\"\n              [loadingType]=\"field?.properties?.loadingType\"\n              [styles]=\"field?.properties?.styles\"\n            ></kwikui-image>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- File Upload -->\n        <ng-container *ngSwitchCase=\"'file'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <label\n              [tuiLabel]=\"labelTemplate\"\n              style=\"min-height: auto\"\n            >\n              <kwikui-input-files\n                [accept]=\"field?.properties?.accept\"\n                [class]=\"field?.properties?.class\"\n                [disabled]=\"field?.disabled\"\n                [files]=\"files[field.key]\"\n                [formControl]=\"formGroup.controls[field.key]\"\n                [formControlName]=\"field.key\"\n                [id]=\"field?.key\"\n                [label]=\"field?.properties?.label\"\n                [link]=\"field?.properties?.link\"\n                [maxFileSize]=\"field?.properties?.maxFileSize\"\n                [multiple]=\"field?.properties?.multiple\"\n                [setFileTypesToForm]=\"['NORMAL']\"\n                [styles]=\"field?.properties?.styles\"\n                [validators]=\"field?.validators\"\n                [showViewButton]=\"field?.properties?.showViewButton\"\n                (getKeyValue)=\"handleGetKeyValueFile($event)\"\n                (getRemovedFile)=\"handleRemovedFile($event)\"\n                (getViewButtonClick)=\"handleViewButtonClick($event, field)\"\n              ></kwikui-input-files>\n            </label>\n            <ng-template #labelTemplate>\n              <p\n                style=\"padding: 0px 0.25rem; margin-bottom: 0.25rem\"\n                [hidden]=\"field?.hidden\"\n                id=\"field_{{ field.key }}\"\n              >\n                <b>\n                  {{ field.label }}\n                  <span *ngIf=\"field.validators?.required\">*</span>\n                </b>\n              </p>\n            </ng-template>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Camera Capture -->\n        <ng-container *ngSwitchCase=\"'capture'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <label\n              *ngIf=\"\n                field?.label !== '' &&\n                field?.label !== undefined &&\n                field?.label !== null\n              \"\n              style=\"min-height: auto\"\n            >\n              <p\n                *ngIf=\"field?.label !== ''\"\n                style=\"padding: 0px 0.25rem; margin-bottom: 0.5rem\"\n                [hidden]=\"field?.hidden\"\n                id=\"field_{{ field.key }}\"\n              >\n                <b>\n                  {{ field.label }}\n                  <span *ngIf=\"field.validators?.required\">*</span>\n                </b>\n              </p>\n            </label>\n            <kwikui-input-camera\n              [buttonText]=\"field?.properties?.buttonText\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [icon]=\"field?.properties?.icon\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [mediaFiles]=\"mediaFiles[field.key]\"\n              [properties]=\"field?.properties\"\n              [showMediaFiles]=\"field?.properties?.showMediaFiles\"\n              [type]=\"'capture'\"\n              [validators]=\"field?.validators\"\n              (onClick)=\"handleOnClickInputCamera($event, field)\"\n              (getRemovedFile)=\"handleOnClickGetRemovedMediaFile($event)\"\n            ></kwikui-input-camera>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Camera Record -->\n        <ng-container *ngSwitchCase=\"'record'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <label\n              *ngIf=\"\n                field?.label !== '' &&\n                field?.label !== undefined &&\n                field?.label !== null\n              \"\n              style=\"min-height: auto\"\n            >\n              <p\n                *ngIf=\"field?.label !== ''\"\n                style=\"padding: 0px 0.25rem; margin-bottom: 0.5rem\"\n                [hidden]=\"field?.hidden\"\n                id=\"field_{{ field.key }}\"\n              >\n                <b>\n                  {{ field.label }}\n                  <span *ngIf=\"field.validators?.required\">*</span>\n                </b>\n              </p>\n            </label>\n            <kwikui-input-camera\n              [buttonText]=\"field?.properties?.buttonText\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [icon]=\"field?.properties?.icon\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [mediaFiles]=\"mediaFiles[field.key]\"\n              [properties]=\"field?.properties\"\n              [showMediaFiles]=\"field?.properties?.showMediaFiles\"\n              [type]=\"'record'\"\n              [validators]=\"field?.validators\"\n              (onClick)=\"handleOnClickInputCamera($event, field)\"\n              (getRemovedFile)=\"handleOnClickGetRemovedMediaFile($event)\"\n            ></kwikui-input-camera>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Star Rating -->\n        <ng-container *ngSwitchCase=\"'star-rating'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <label\n              [tuiLabel]=\"labelTemplate\"\n              style=\"min-height: auto; padding: 0px 0.5rem\"\n            >\n              <kwikui-star-rating\n                [color]=\"field?.properties?.color\"\n                [disabled]=\"field?.disabled\"\n                [focus]=\"field?.focus\"\n                [formControl]=\"formGroup.controls[field.key]\"\n                [formControlName]=\"field.key\"\n                [icon]=\"field?.properties?.icon\"\n                [iconMarked]=\"field?.properties?.iconMarked\"\n                [id]=\"field.key\"\n                [invalid]=\"field?.invalid\"\n                [label]=\"field?.label\"\n                [max]=\"field?.properties?.max\"\n                [min]=\"field?.properties?.min\"\n                [placeholder]=\"field?.properties?.placeholder\"\n                [properties]=\"field?.properties\"\n                [size]=\"field?.properties?.size\"\n                [validators]=\"field?.validators\"\n                (getKeyValue)=\"handleGetKeyValue($event)\"\n              ></kwikui-star-rating>\n            </label>\n            <ng-template #labelTemplate>\n              <p>\n                <b\n                  >{{ field?.properties?.placeholder }}\n                  <span *ngIf=\"field.validators?.required\">*</span></b\n                >\n              </p>\n            </ng-template>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </form>\n  <div\n    class=\"kwikid-form-buttons\"\n    *ngIf=\"\n      !formConfig.properties.footer.viewFormsButton.hidden ||\n      !formConfig.properties.footer.saveButton.hidden\n    \"\n  >\n    <kwikui-button\n      *ngIf=\"\n        !formConfig.properties.footer.viewFormsButton.hidden && isMobileView\n      \"\n      [appearance]=\"'secondary'\"\n      [disabled]=\"viewFormsButton.disabled\"\n      [label]=\"formConfig.properties.footer.viewFormsButton.label\"\n      [showLoader]=\"viewFormsButton.showLoader\"\n      [styles]=\"'width: 100%'\"\n      (onClick)=\"handleOnClickViewForms($event)\"\n    ></kwikui-button>\n    <kwikui-button\n      *ngIf=\"!formConfig.properties.footer.saveButton.hidden\"\n      [disabled]=\"saveFormButton.disabled\"\n      [label]=\"formConfig.properties.footer.saveButton.label\"\n      [showLoader]=\"saveFormButton.showLoader\"\n      [styles]=\"'width: 100%'\"\n      (onClick)=\"handleOnClickSaveForm($event)\"\n    ></kwikui-button>\n  </div>\n</div>\n<div\n  class=\"kwikid-form-container-loading\"\n  *ngIf=\"loading\"\n>\n  <div\n    *ngFor=\"let item of [].constructor(7); let i = index\"\n    class=\"large-wrapper tui-skeleton tui-skeleton_rounded\"\n  >\n  </div>\n</div>\n\n<kwikui-loader></kwikui-loader>\n\n<tui-push\n  id=\"field-error-notification\"\n  *tuiPush=\"showErrorNotification\"\n  heading=\"Missing/Incorrect Fields!\"\n  type=\"Error\"\n  (close)=\"toggleErrorNotification(false)\"\n>\n  <tui-svg\n    src=\"tuiIconXCircle\"\n    style=\"color: #fff !important\"\n  >\n  </tui-svg>\n</tui-push>\n\n<tui-push\n  id=\"permission-error-notification\"\n  *tuiPush=\"showPermissionErrorNotification\"\n  heading=\"Please provide required permissions!\"\n  type=\"Error\"\n  (close)=\"togglePermissionErrorNotification(false)\"\n>\n  <tui-svg\n    src=\"tuiIconXCircle\"\n    style=\"color: #fff !important\"\n  >\n  </tui-svg>\n</tui-push>\n\n<ng-template\n  #preview\n  let-preview\n>\n  <tui-preview\n    [rotatable]=\"false\"\n    [zoomable]=\"false\"\n    class=\"preview-container\"\n  >\n    <tui-preview-title *ngIf=\"previewProperties.title !== ''\">{{\n      previewProperties.title\n    }}</tui-preview-title>\n\n    <ng-container *ngIf=\"!previewProperties.unavailable\">\n      <div\n        *ngIf=\"previewProperties?.html?.before !== ''\"\n        class=\"preview-html preview-html-before\"\n        [style]=\"previewProperties?.html?.beforeStyles ?? '' | styleSanitizer\"\n        [innerHtml]=\"previewProperties.html.before | kwikuiSafeHtml\"\n      ></div>\n\n      <!-- Content within the iframe -->\n      <div\n        class=\"preview-iframe-content\"\n        [style]=\"\n          previewProperties?.iframe?.containerStyles ?? '' | styleSanitizer\n        \"\n        *ngIf=\"previewProperties.iframe.src !== ''\"\n      >\n        <!-- Your HTML content here -->\n        <iframe\n          [src]=\"previewProperties.iframe.src | kwikuiSafeUrl\"\n          frameborder=\"0\"\n          allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n          allowfullscreen\n          [title]=\"previewProperties.iframe.title\"\n          class=\"preview-iframe\"\n          scrolling=\"auto\"\n        ></iframe>\n      </div>\n\n      <div\n        *ngIf=\"previewProperties?.html?.after !== ''\"\n        class=\"preview-html preview-html-after\"\n        [style]=\"previewProperties?.html?.afterStyles ?? '' | styleSanitizer\"\n        [innerHtml]=\"previewProperties.html.after | kwikuiSafeHtml\"\n      ></div>\n    </ng-container>\n\n    <ng-container *ngIf=\"previewProperties.unavailable\">\n      <div class=\"preview-unavailable\">\n        <tui-svg\n          src=\"tuiIconFileLarge\"\n          class=\"t-icon\"\n        ></tui-svg>\n        <div>Preview unavailable</div>\n      </div>\n    </ng-container>\n\n    <button\n      tuiIconButton\n      tuiPreviewAction\n      icon=\"tuiIconCloseLarge\"\n      title=\"Close\"\n      type=\"button\"\n      (click)=\"preview.complete()\"\n    ></button>\n  </tui-preview>\n</ng-template>\n\n<ng-template\n  #dialog\n  let-dialog\n>\n  <div class=\"preview-container\">\n    <ng-container *ngIf=\"!previewProperties.unavailable\">\n      <div\n        *ngIf=\"previewProperties?.html?.before !== ''\"\n        class=\"preview-html preview-html-before\"\n        [style]=\"previewProperties?.html?.beforeStyles ?? '' | styleSanitizer\"\n        [innerHtml]=\"previewProperties.html.before | kwikuiSafeHtml\"\n      ></div>\n\n      <!-- Content within the iframe -->\n      <div\n        class=\"preview-iframe-content\"\n        [style]=\"\n          previewProperties?.iframe?.containerStyles ?? '' | styleSanitizer\n        \"\n        *ngIf=\"previewProperties.iframe.src !== ''\"\n      >\n        <!-- Your HTML content here -->\n        <iframe\n          [src]=\"previewProperties.iframe.src | kwikuiSafeUrl\"\n          frameborder=\"0\"\n          allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n          allowfullscreen\n          [title]=\"previewProperties.iframe.title\"\n          class=\"preview-iframe\"\n          scrolling=\"auto\"\n        ></iframe>\n      </div>\n\n      <div\n        *ngIf=\"previewProperties?.html?.after !== ''\"\n        class=\"preview-html preview-html-after\"\n        [style]=\"previewProperties?.html?.afterStyles ?? '' | styleSanitizer\"\n        [innerHtml]=\"previewProperties.html.after | kwikuiSafeHtml\"\n      ></div>\n    </ng-container>\n\n    <ng-container *ngIf=\"previewProperties.unavailable\">\n      <div class=\"preview-unavailable\">\n        <tui-svg\n          src=\"tuiIconFileLarge\"\n          class=\"t-icon\"\n        ></tui-svg>\n        <div>Preview unavailable</div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<div\n  id=\"kwikid-camera-container\"\n  *ngIf=\"isShowCamera\"\n>\n  <div\n    id=\"kwikid-camera-wrapper\"\n    [class.fullscreen]=\"isShowCameraFullscreen\"\n  >\n    <kwikid-camera\n      [type]=\"cameraType\"\n      [data]=\"cameraData\"\n      [image]=\"cameraImage\"\n      [video]=\"cameraVideo\"\n      [config]=\"cameraConfig\"\n      (getImage)=\"handleGetCameraMedia($event, 'CAPTURE')\"\n      (getVideo)=\"handleGetCameraMedia($event, 'RECORD')\"\n      (onClickBack)=\"handleOnClickCameraBack($event)\"\n      (onClickClose)=\"handleOnClickCameraClose($event)\"\n      (onClickSave)=\"handleOnClickSaveCameraMedia($event, cameraType)\"\n    >\n      <ng-container\n        *ngIf=\"cameraType === 'CAPTURE'\"\n        slot=\"capture-header\"\n      >\n        <div class=\"capture-header-container\">\n          <div class=\"capture-header-left\"> </div>\n          <div class=\"capture-header-center\">\n            <kwikui-button\n              *ngIf=\"cameraConfig?.header?.title !== ''\"\n              appearance=\"whiteblock\"\n              [label]=\"cameraConfig?.header?.title\"\n              shape=\"rounded\"\n              size=\"s\"\n            ></kwikui-button>\n          </div>\n          <div class=\"capture-header-right\">\n            <kwikui-button\n              *ngIf=\"cameraConfig?.header?.isExpand\"\n              id=\"kwikid-camera-header-enlarge-button\"\n              appearance=\"whiteblock\"\n              [icon]=\"\n                isShowCameraFullscreen ? 'tuiIconMinimize2' : 'tuiIconMaximize2'\n              \"\n              shape=\"rounded\"\n              size=\"s\"\n              (click)=\"isShowCameraFullscreen = !isShowCameraFullscreen\"\n            ></kwikui-button>\n            <kwikui-button\n              *ngIf=\"cameraConfig?.header?.isClose\"\n              id=\"kwikid-camera-header-close-button\"\n              appearance=\"whiteblock\"\n              icon=\"tuiIconCloseLarge\"\n              shape=\"rounded\"\n              size=\"s\"\n              (click)=\"handleOnClickCameraClose($event)\"\n            ></kwikui-button>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container\n        *ngIf=\"cameraType === 'RECORD'\"\n        slot=\"record-header\"\n      >\n        <div class=\"record-header-container\">\n          <div class=\"record-header-row row-1\">\n            <div class=\"record-header-left\">\n              <kwikui-button\n                *ngIf=\"\n                  cameraConfig?.header?.isBack && cameraRecordingState == 'NONE'\n                \"\n                appearance=\"whiteblock\"\n                icon=\"tuiIconArrowLeft\"\n                shape=\"rounded\"\n                size=\"s\"\n                (click)=\"handleOnClickCameraClose($event)\"\n              ></kwikui-button>\n            </div>\n            <div class=\"record-header-center\">\n              <kwikui-button\n                *ngIf=\"cameraConfig?.header?.title !== ''\"\n                appearance=\"whiteblock\"\n                [label]=\"cameraConfig?.header?.title\"\n                shape=\"rounded\"\n                size=\"s\"\n              ></kwikui-button>\n            </div>\n            <div class=\"record-header-right\">\n              <kwikui-button\n                *ngIf=\"cameraConfig?.header?.isExpand\"\n                id=\"kwikid-camera-header-enlarge-button\"\n                appearance=\"whiteblock\"\n                [icon]=\"\n                  isShowCameraFullscreen\n                    ? 'tuiIconMinimize2'\n                    : 'tuiIconMaximize2'\n                \"\n                shape=\"rounded\"\n                size=\"s\"\n                (click)=\"isShowCameraFullscreen = !isShowCameraFullscreen\"\n              ></kwikui-button>\n            </div>\n          </div>\n          <div class=\"record-header-row row-2\">\n            <div\n              id=\"blinking-dot-container\"\n              [class.recording]=\"cameraRecordingState == 'RECORDING'\"\n              [class.paused]=\"cameraRecordingState == 'PAUSED'\"\n              [class.recorded]=\"\n                cameraRecordingState == 'NONE' ||\n                cameraRecordingState === 'RECORDED'\n              \"\n            >\n              <div\n                *ngIf=\"cameraRecordingState == 'RECORDING'\"\n                class=\"dot recording blink\"\n              >\n              </div>\n              <div\n                *ngIf=\"cameraRecordingState === 'PAUSED'\"\n                class=\"dot paused\"\n              >\n              </div>\n              <div\n                *ngIf=\"\n                  cameraRecordingState == 'NONE' ||\n                  cameraRecordingState === 'RECORDED'\n                \"\n                class=\"dot recorded\"\n              >\n              </div>\n              <div>\n                &nbsp;{{ cameraRecordingTime | formatTimer }}\n                <ng-container\n                  *ngIf=\"cameraConfig?.others?.maxRecordingTimeInSeconds\"\n                >\n                  /\n                  {{\n                    cameraConfig?.others?.maxRecordingTimeInSeconds\n                      | formatTimer\n                  }}\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </kwikid-camera>\n  </div>\n</div>\n", styles: [".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;scroll-behavior:smooth}.kwikid-form.show>*:not(:last-child){margin-bottom:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.kwikid-form-buttons>*:not(:last-child){margin-right:1rem}.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;padding:1rem 1rem 0}#uf-form-fields-header-container>*:not(:last-child){margin-bottom:.5rem}#uf-form-fields-header-container #uf-header-logo{width:-moz-fit-content;width:fit-content;height:50px}#uf-form-fields-header-container #uf-form-fields-header-main{display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;width:100%}#uf-form-fields-header-container #uf-form-fields-header-main>*:not(:last-child){margin-right:.25rem}#uf-form-fields-header-container #uf-form-fields-header-main #uf-form-fields-header-right{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start}#uf-form-fields-header-container #uf-form-fields-header-main #uf-form-fields-header-right>*{margin-bottom:.5rem}#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:1rem}.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}.title>*:not(:last-child){margin-right:.5rem}.title:not(:first-child){margin-top:.5rem}.title.hidden{display:none}.large-wrapper{width:100%;height:60px}.large-wrapper:first-child{margin-bottom:auto}.large-wrapper:last-child{margin-top:auto}.kwikid-form-container-loading{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;padding:1rem}.kwikid-form-container-loading>* :not(:last-child){margin-bottom:1rem}#field-error-notification,#permission-error-notification{background-color:var(--tui-error-fill);color:#fff!important}#field-error-notification .t-top,#permission-error-notification .t-top{color:#fff!important}#field-error-notification .t-close,#permission-error-notification .t-close{color:#fff!important}.preview-container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;align-content:center;height:calc(100vh - 3rem)}@media only screen and (min-width: 768px){.preview-container{height:calc(100vh - 10rem);width:calc(100vw - 10rem)}}.preview-container>*:not(:last-child){margin-bottom:1rem}.preview-container .preview-html{flex-grow:1}.preview-container .preview-iframe-content{height:100%;flex-grow:1}.preview-container .preview-iframe-content .preview-iframe{width:100%;height:100%}.preview-container .preview-unavailable{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#fff;font-size:1.2rem;top:50%;left:50%;width:100%;height:100vh}.preview-container .preview-unavailable>*:not(:last-child){margin-bottom:1rem}#kwikid-camera-container{width:100%;height:100%;position:fixed;top:50%;left:50%;background-color:#0000008f;transform:translate(-50%,-50%);z-index:100}#kwikid-camera-container #kwikid-camera-wrapper{width:min(80%);height:max(85%);box-shadow:#0000008f 0 22px 70px 4px;overflow:hidden;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:1rem;background-color:#000;transition:5s linear ease}#kwikid-camera-container #kwikid-camera-wrapper .capture-header-container{display:flex;width:100%;max-width:100%;padding:0}#kwikid-camera-container #kwikid-camera-wrapper .capture-header-container .capture-header-left{flex:1;text-align:left}#kwikid-camera-container #kwikid-camera-wrapper .capture-header-container .capture-header-center{flex:1;width:100%;min-width:max-content;text-align:center;margin:auto}#kwikid-camera-container #kwikid-camera-wrapper .capture-header-container .capture-header-right{flex:1;text-align:right;display:flex;justify-content:flex-end;grid-gap:1rem;gap:1rem}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container{display:flex;width:100%;max-width:100%;padding:0;color:#fff;flex-direction:column;justify-content:flex-start;align-items:stretch}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-1{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:1rem}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-1 .record-header-left{flex:1;display:flex;justify-content:flex-start;grid-gap:1rem;gap:1rem;text-align:left}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-1 .record-header-center{flex:1;width:100%;min-width:max-content;text-align:center;margin:auto}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-1 .record-header-right{flex:1;text-align:right;display:flex;justify-content:flex-end;grid-gap:1rem;gap:1rem}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2{display:flex;flex-direction:row;justify-content:center;align-items:center}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;grid-gap:.25rem;gap:.25rem;padding:.35rem .6rem;width:-moz-fit-content;width:fit-content;border-radius:2rem;background-color:#f5f5f5}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container.recording{color:red;font-weight:bold}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container.paused{color:#525252;font-weight:bold}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container.recorded{color:#000;font-weight:bold}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container .dot{display:inline-block;width:.75rem;height:.75rem;border-radius:100%}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container .dot.recording{background-color:red;box-shadow:0 0 5px -1px red}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container .dot.paused{background-color:#525252;box-shadow:0 0 5px -1px #000}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container .dot.recorded{background-color:#000;box-shadow:0 0 5px -1px #000}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container .dot.blink{animation:blinker 1s cubic-bezier(.5,0,1,1) infinite alternate}@keyframes blinker{0%{opacity:1}to{opacity:0}}#kwikid-camera-container #kwikid-camera-wrapper.fullscreen{width:100%;height:100%;border-radius:0;transition:5s linear ease}@media only screen and (max-width: 600px){#kwikid-camera-container #kwikid-camera-wrapper{width:100%;height:100%;border-radius:0;transition:5s linear ease}#kwikid-camera-container #kwikid-camera-wrapper #kwikid-camera-header-enlarge-button{display:none}}\n", "::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: i3__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i3__namespace.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["id", "messages"] }, { type: i3__namespace.KwikUIInputComponent, selector: "kwikui-input", inputs: ["case", "disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "placeholder", "postfix", "prefix", "properties", "size", "type", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputCurrencyComponent, selector: "kwikui-input-currency", inputs: ["currencyType", "disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "placeholder", "postfix", "prefix", "properties", "size", "validators", "value"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputEmailComponent, selector: "kwikui-input-email", inputs: ["case", "disabled", "domains", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputPasswordComponent, selector: "kwikui-input-password", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUITextareaComponent, selector: "kwikui-textarea", inputs: ["disabled", "focus", "formControl", "formControlName", "id", "invalid", "label", "placeholder", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUICheckboxComponent, selector: "kwikui-checkbox", inputs: ["contentAlign", "disabled", "focus", "formControl", "formControlName", "id", "invalid", "label", "placeholder", "properties", "size", "validators", "variant"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["decimal", "disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "max", "min", "placeholder", "postfix", "precision", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "max", "maxCalculatedFromToday", "min", "minCalculatedFromToday", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputTimeComponent, selector: "kwikui-input-time", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "items", "invalid", "label", "mode", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["countryCode", "disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "phoneMaskAfterCountryCode", "placeholder", "postfix", "prefix", "properties", "removeCountryCodeFromValue", "size", "validators"], outputs: ["getKeyValue"] }, { type: i5__namespace.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i3__namespace.KwikUIInputRadioComponent, selector: "kwikui-input-radio", inputs: ["disabled", "focus", "formControl", "formControlName", "id", "invalid", "items", "label", "orientation", "placeholder", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputSelectComponent, selector: "kwikui-input-select", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "options", "placeholder", "properties", "searchable", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputSliderComponent, selector: "kwikui-input-slider", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "max", "min", "placeholder", "postfix", "prefix", "properties", "quantum", "size", "steps", "type", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["apiTimer", "apiStatus", "class", "disabled", "id", "label", "shape", "showLoader", "size", "styles"], outputs: ["onClick", "onApiTimerStop"] }, { type: i3__namespace.KwikUIButtonLiveLocationComponent, selector: "kwikui-button-live-location", inputs: ["liveLocationStatus", "class", "disabled", "id", "label", "shape", "showLoader", "size", "styles", "isShowLatLongCaptureTimestamp"], outputs: ["onClick", "onLocationPermission"] }, { type: i3__namespace.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["disabled", "focus", "formControl", "formControlName", "id", "invalid", "label", "mask", "mode", "otpLength", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["disabled", "focus", "formControl", "formControlName", "id", "invalid", "label", "mask", "placeholder", "properties", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIImageComponent, selector: "kwikui-image", inputs: ["altText", "class", "html", "id", "imageSrc", "imageType", "loadingType", "styles"], outputs: ["onClick"] }, { type: i3__namespace.KwikUIInputFilesComponent, selector: "kwikui-input-files", inputs: ["accept", "class", "disabled", "files", "formControl", "formControlName", "icon", "id", "label", "link", "maxFileSize", "multiple", "setFileTypesToForm", "showAddedFiles", "size", "styles", "validators", "variant", "showViewButton"], outputs: ["getKeyValue", "getRemovedFile", "getViewButtonClick"] }, { type: i4__namespace.KwikUIInputCameraComponent, selector: "kwikui-input-camera", inputs: ["buttonText", "disabled", "focus", "formControl", "formControlName", "icon", "id", "invalid", "mediaFiles", "properties", "showMediaFiles", "size", "type", "validators"], outputs: ["onClick", "getRemovedFile"] }, { type: i3__namespace.KwikUIStarRatingComponent, selector: "kwikui-star-rating", inputs: ["color", "disabled", "focus", "formControl", "formControlName", "icon", "iconMarked", "id", "invalid", "label", "max", "min", "placeholder", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUILoaderComponent, selector: "kwikui-loader" }, { type: i6__namespace.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "lines", "timestamp"], outputs: ["close"] }, { type: i5__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i7__namespace.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { type: i7__namespace.TuiPreviewTitleComponent, selector: "tui-preview-title" }, { type: i5__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i4__namespace.KwikIDCameraComponent, selector: "kwikid-camera", inputs: ["type", "config", "data", "image", "video"], outputs: ["getImage", "onClickSave", "getVideo"] }], directives: [{ type: i3__namespace$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6__namespace.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i6__namespace.TuiPushDirective, selector: "tui-push" }, { type: i7__namespace.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }], pipes: { "styleSanitizer": StyleSanitizerPipe, "kwikuiSafeHtml": i3__namespace.KwikUISafeHtmlPipe, "kwikuiSafeUrl": i3__namespace.KwikUISafeUrlPipe, "formatTimer": TimerPipe } });
+  /** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { allFormsData: "allFormsData", extraData: "extraData", apiCallResponse: "apiCallResponse", buttonClickResponse: "buttonClickResponse", formConfig: "formConfig", formData: "formData", isMobileView: "isMobileView", popupFormCallback: "popupFormCallback", userConfig: "userConfig", stepConfig: "stepConfig" }, outputs: { getLogs: "getLogs", getUnsavedDataState: "getUnsavedDataState", onActionShowPopupForm: "onActionShowPopupForm", onClickApiCall: "onClickApiCall", onClickViewFile: "onClickViewFile", onClickFormFieldButton: "onClickFormFieldButton", onClickGoBack: "onClickGoBack", onClickSaveForm: "onClickSaveForm", onClickViewForms: "onClickViewForms" }, providers: [KwikIDFormViewService, KwikIDFormViewApiService], viewQueries: [{ propertyName: "formFieldContainerRef", first: true, predicate: ["formFieldContainerRef"], descendants: true }, { propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }, { propertyName: "preview", first: true, predicate: ["preview"], descendants: true }, { propertyName: "formFieldsRef", predicate: ["formFieldsRef"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"kwikid-form-container\"\n  *ngIf=\"!loading\"\n>\n  <div\n    id=\"uf-form-fields-header-container\"\n    *ngIf=\"\n      !formConfig.properties?.header?.title?.hidden ||\n      !formConfig.properties?.header?.logo?.hidden ||\n      !formConfig.properties?.header?.steps?.hidden ||\n      !formConfig.properties?.header?.backButton?.hidden\n    \"\n  >\n    <img\n      id=\"uf-header-logo\"\n      *ngIf=\"!formConfig.properties?.header?.logo?.hidden && isMobileView\"\n      [src]=\"formConfig.properties?.header?.logo?.src\"\n      [alt]=\"formConfig.properties?.header?.logo?.alt\"\n      [style]=\"\n        formConfig.properties?.header?.logo?.styles ?? '' | styleSanitizer\n      \"\n    />\n    <div id=\"uf-form-fields-header-main\">\n      <div id=\"uf-form-fields-header-left\">\n        <kwikui-button\n          *ngIf=\"\n            !formConfig.properties?.header.backButton.hidden && isMobileView\n          \"\n          [disabled]=\"backButton.disabled\"\n          [showLoader]=\"backButton.showLoader\"\n          appearance=\"mono\"\n          icon=\"tuiIconArrowLeft\"\n          shape=\"rounded\"\n          (onClick)=\"\n            handleOnClickGoBack(\n              $event,\n              formConfig.properties?.header.backButton.mode\n            )\n          \"\n        ></kwikui-button>\n      </div>\n      <div id=\"uf-form-fields-header-right\">\n        <div\n          id=\"uf-form-fields-title\"\n          *ngIf=\"!formConfig.properties?.header.title.hidden\"\n          >{{ formConfig.properties?.header.title.label }}</div\n        >\n        <div\n          id=\"uf-form-fields-steps\"\n          *ngIf=\"!formConfig.properties?.header.steps.hidden\"\n        >\n          Step {{ formConfig.sequenceNo }} of {{ formConfig.formsListLength }}\n        </div>\n      </div>\n    </div>\n    <hr\n      *ngIf=\"\n        !formConfig.properties?.header.title.hidden ||\n        !formConfig.properties?.header.steps.hidden ||\n        !formConfig.properties?.header.backButton.hidden\n      \"\n    />\n  </div>\n  <form\n    #formFieldContainerRef\n    class=\"kwikid-form show\"\n    [style]=\"formConfig.properties?.main?.styles ?? '' | styleSanitizer\"\n    [formGroup]=\"formGroup\"\n  >\n    <ng-container\n      *ngFor=\"\n        let field of formFields;\n        let i = index;\n        trackBy: getUniqueIdentifier\n      \"\n    >\n      <ng-container [ngSwitch]=\"field.type\">\n        <!-- HTML Content -->\n        <ng-container *ngSwitchCase=\"'html'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <div [innerHtml]=\"field.html | kwikuiSafeHtml\"></div>\n          </div>\n        </ng-container>\n        <!-- Form Title -->\n        <ng-container *ngSwitchCase=\"'title'\">\n          <div\n            #formFieldsRef\n            class=\"title\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            [class.hidden]=\"field?.hidden\"\n            id=\"field_{{ field.key }}\"\n          >\n            <div>\n              {{ field.label }}\n            </div>\n            <kwikui-button\n              *ngIf=\"field?.reset\"\n              appearance=\"whiteblock\"\n              size=\"s\"\n              [label]=\"field?.properties?.resetButtonLabel ?? 'Reset'\"\n              (onClick)=\"handleOnClickResetFormFields($event, field)\"\n            ></kwikui-button>\n          </div>\n        </ng-container>\n        <!-- Button -->\n        <ng-container *ngSwitchCase=\"'button'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-button\n              [appearance]=\"field?.properties?.appearance ?? 'primary'\"\n              [class]=\"field?.properties?.class\"\n              [disabled]=\"field?.disabled\"\n              [icon]=\"field?.properties?.icon\"\n              [iconRight]=\"field?.properties?.iconRight\"\n              [id]=\"field?.key\"\n              [label]=\"field?.label\"\n              [shape]=\"field?.properties?.shape\"\n              [showLoader]=\"field?.properties?.loading ?? false\"\n              [size]=\"field?.properties?.size\"\n              [styles]=\"field?.properties?.styles\"\n              [type]=\"'button'\"\n              (onClick)=\"handleOnClickFormFieldButton(field)\"\n            ></kwikui-button>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Text -->\n        <ng-container *ngSwitchCase=\"'text'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input\n              [case]=\"field?.properties?.case\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [type]=\"'text'\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Currency -->\n        <ng-container *ngSwitchCase=\"'currency'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-currency\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [currencyType]=\"field?.properties?.currencyType\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              [value]=\"formGroup.controls[field.key].value\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-currency>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Email -->\n        <ng-container *ngSwitchCase=\"'email'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-email\n              [case]=\"field?.properties?.case\"\n              [disabled]=\"field?.disabled\"\n              [domains]=\"field?.properties?.domains\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-email>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Password -->\n        <ng-container *ngSwitchCase=\"'password'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-password\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [hintContent]=\"field?.properties?.hintContent\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-password>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Textarea -->\n        <ng-container *ngSwitchCase=\"'textarea'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-textarea\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-textarea>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Checkbox -->\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-checkbox\n              [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.properties?.placeholder\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [size]=\"field?.properties?.size ?? 'l'\"\n              [validators]=\"field?.validators\"\n              [variant]=\"field?.properties?.variant ?? 'block'\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-checkbox>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Number -->\n        <ng-container *ngSwitchCase=\"'number'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-number\n              [decimal]=\"field?.properties?.decimal\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [max]=\"field?.properties?.max\"\n              [min]=\"field?.properties?.min\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix ?? ''\"\n              [precision]=\"field?.properties?.precision\"\n              [prefix]=\"field?.properties?.prefix ?? ''\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-number>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Date -->\n        <ng-container *ngSwitchCase=\"'date'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-date\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [max]=\"field?.properties?.max\"\n              [maxCalculatedFromToday]=\"\n                field?.properties?.maxCalculatedFromToday\n              \"\n              [min]=\"field?.properties?.min\"\n              [minCalculatedFromToday]=\"\n                field?.properties?.minCalculatedFromToday\n              \"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-date>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Time -->\n        <ng-container *ngSwitchCase=\"'time'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-time\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [items]=\"field?.properties?.items\"\n              [label]=\"field?.label\"\n              [mode]=\"field?.properties?.mode\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-time>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Phone -->\n        <ng-container *ngSwitchCase=\"'phone'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-phone\n              [countryCode]=\"field?.properties?.countryCode\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [phoneMaskAfterCountryCode]=\"\n                field?.properties?.phoneMaskAfterCountryCode\n              \"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [removeCountryCodeFromValue]=\"\n                field?.properties?.removeCountryCodeFromValue\n              \"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-phone>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Radio -->\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <label\n              [tuiLabel]=\"labelTemplate\"\n              style=\"min-height: auto; padding: 0px 0.5rem\"\n            >\n              <kwikui-input-radio\n                [disabled]=\"field?.disabled\"\n                [focus]=\"field?.focus\"\n                [formControl]=\"formGroup.controls[field.key]\"\n                [formControlName]=\"field.key\"\n                [id]=\"field.key\"\n                [invalid]=\"field?.invalid\"\n                [items]=\"field?.options\"\n                [label]=\"field?.label\"\n                [orientation]=\"field?.properties?.orientation\"\n                [placeholder]=\"field?.properties?.placeholder\"\n                [properties]=\"field?.properties\"\n                [size]=\"field?.properties?.size\"\n                [validators]=\"field?.validators\"\n                (getKeyValue)=\"handleGetKeyValue($event)\"\n              ></kwikui-input-radio>\n            </label>\n            <ng-template #labelTemplate>\n              <p\n                class=\"tui-space_bottom-2\"\n                [hidden]=\"field?.hidden\"\n                id=\"field_{{ field.key }}\"\n              >\n                <b>\n                  {{ field.label }}\n                  <span *ngIf=\"field.validators?.required\">*</span>\n                </b>\n              </p>\n            </ng-template>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Dropdown -->\n        <ng-container *ngSwitchCase=\"'select'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-select\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [options]=\"field.options\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [searchable]=\"field?.properties?.searchable\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-select>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Input Slider -->\n        <ng-container *ngSwitchCase=\"'slider'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-slider\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [max]=\"field?.properties?.max\"\n              [min]=\"field?.properties?.min\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [postfix]=\"field?.properties?.postfix\"\n              [prefix]=\"field?.properties?.prefix\"\n              [properties]=\"field?.properties\"\n              [quantum]=\"field?.properties?.quantum\"\n              [size]=\"field?.properties?.size\"\n              [steps]=\"field?.properties?.steps\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-slider>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- API Call -->\n        <ng-container *ngSwitchCase=\"'api'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-button-api-call\n              [apiStatus]=\"field?.api?.status?.value\"\n              [apiTimer]=\"field?.api?.timer\"\n              [class]=\"field?.class\"\n              [disabled]=\"field?.disabled\"\n              [id]=\"field.key\"\n              [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\n              [showLoader]=\"field?.disabled === 'loading'\"\n              [size]=\"field?.properties?.size\"\n              [styles]=\"\n                field?.properties?.styles\n                  ? field?.properties?.styles\n                  : 'width: fit-content'\n              \"\n              (onClick)=\"handleOnClickApiCall($event)\"\n              (onApiTimerStop)=\"handleOnApiTimerStop($event)\"\n            ></kwikui-button-api-call>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Live Location -->\n        <ng-container *ngSwitchCase=\"'live-location'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-button-live-location\n              [class]=\"field?.class\"\n              [disabled]=\"field?.disabled\"\n              [id]=\"field.key\"\n              [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\n              [liveLocationStatus]=\"field?.api?.status?.value\"\n              [shape]=\"field?.properties?.shape\"\n              [isShowLatLongCaptureTimestamp]=\"\n                field?.properties?.isShowLatLongCaptureTimestamp\n              \"\n              [showLoader]=\"field?.disabled\"\n              [size]=\"field?.properties?.size\"\n              styles=\"width: fit-content\"\n              (onClick)=\"handleOnClickLiveLocation($event)\"\n              (onLocationPermission)=\"handleOnLocationPermission($event)\"\n            ></kwikui-button-live-location>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Mobile OTP -->\n        <ng-container *ngSwitchCase=\"'otp'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-otp\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [mask]=\"field?.properties?.mask\"\n              [mode]=\"field?.properties?.mode\"\n              [otpLength]=\"field?.properties?.otpLength\"\n              [placeholder]=\"field?.properties?.placeholder\"\n              [properties]=\"field?.properties\"\n              [size]=\"field?.properties?.size\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-otp>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Aadhaar Number -->\n        <ng-container *ngSwitchCase=\"'aadhaar-number'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-input-aadhaar\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [label]=\"field?.label\"\n              [mask]=\"field?.properties?.mask\"\n              [placeholder]=\"field?.placeholder\"\n              [properties]=\"field?.properties\"\n              [validators]=\"field?.validators\"\n              (getKeyValue)=\"handleGetKeyValue($event)\"\n            ></kwikui-input-aadhaar>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Preview Image -->\n        <ng-container *ngSwitchCase=\"'image'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <kwikui-image\n              [altText]=\"field?.properties?.altText\"\n              [class]=\"field?.properties?.class\"\n              [html]=\"field?.properties?.html\"\n              [id]=\"field.key\"\n              [imageSrc]=\"formGroup.controls[field.key].value ?? ''\"\n              [imageType]=\"field?.properties?.imageType\"\n              [loadingType]=\"field?.properties?.loadingType\"\n              [styles]=\"field?.properties?.styles\"\n            ></kwikui-image>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- File Upload -->\n        <ng-container *ngSwitchCase=\"'file'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <label\n              [tuiLabel]=\"labelTemplate\"\n              style=\"min-height: auto\"\n            >\n              <kwikui-input-files\n                [accept]=\"field?.properties?.accept\"\n                [class]=\"field?.properties?.class\"\n                [disabled]=\"field?.disabled\"\n                [files]=\"files[field.key]\"\n                [formControl]=\"formGroup.controls[field.key]\"\n                [formControlName]=\"field.key\"\n                [id]=\"field?.key\"\n                [label]=\"field?.properties?.label\"\n                [link]=\"field?.properties?.link\"\n                [maxFileSize]=\"field?.properties?.maxFileSize\"\n                [multiple]=\"field?.properties?.multiple\"\n                [setFileTypesToForm]=\"['NORMAL']\"\n                [styles]=\"field?.properties?.styles\"\n                [validators]=\"field?.validators\"\n                [showViewButton]=\"field?.properties?.showViewButton\"\n                (getKeyValue)=\"handleGetKeyValueFile($event)\"\n                (getRemovedFile)=\"handleRemovedFile($event)\"\n                (getViewButtonClick)=\"handleViewButtonClick($event, field)\"\n              ></kwikui-input-files>\n            </label>\n            <ng-template #labelTemplate>\n              <p\n                style=\"padding: 0px 0.25rem; margin-bottom: 0.25rem\"\n                [hidden]=\"field?.hidden\"\n                id=\"field_{{ field.key }}\"\n              >\n                <b>\n                  {{ field.label }}\n                  <span *ngIf=\"field.validators?.required\">*</span>\n                </b>\n              </p>\n            </ng-template>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Camera Capture -->\n        <ng-container *ngSwitchCase=\"'capture'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <label\n              *ngIf=\"\n                field?.label !== '' &&\n                field?.label !== undefined &&\n                field?.label !== null\n              \"\n              style=\"min-height: auto\"\n            >\n              <p\n                *ngIf=\"field?.label !== ''\"\n                style=\"padding: 0px 0.25rem; margin-bottom: 0.5rem\"\n                [hidden]=\"field?.hidden\"\n                id=\"field_{{ field.key }}\"\n              >\n                <b>\n                  {{ field.label }}\n                  <span *ngIf=\"field.validators?.required\">*</span>\n                </b>\n              </p>\n            </label>\n            <kwikui-input-camera\n              [buttonText]=\"field?.properties?.buttonText\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [icon]=\"field?.properties?.icon\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [mediaFiles]=\"\n                mediaFiles[field.key] | filterImageUrlOrBase64FromObject\n              \"\n              [properties]=\"field?.properties\"\n              [showMediaFiles]=\"field?.properties?.showMediaFiles\"\n              [type]=\"'capture'\"\n              [validators]=\"field?.validators\"\n              (onClick)=\"handleOnClickInputCamera($event, field)\"\n              (getRemovedFile)=\"handleOnClickGetRemovedMediaFile($event)\"\n            ></kwikui-input-camera>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Camera Record -->\n        <ng-container *ngSwitchCase=\"'record'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <label\n              *ngIf=\"\n                field?.label !== '' &&\n                field?.label !== undefined &&\n                field?.label !== null\n              \"\n              style=\"min-height: auto\"\n            >\n              <p\n                *ngIf=\"field?.label !== ''\"\n                style=\"padding: 0px 0.25rem; margin-bottom: 0.5rem\"\n                [hidden]=\"field?.hidden\"\n                id=\"field_{{ field.key }}\"\n              >\n                <b>\n                  {{ field.label }}\n                  <span *ngIf=\"field.validators?.required\">*</span>\n                </b>\n              </p>\n            </label>\n            <kwikui-input-camera\n              [buttonText]=\"field?.properties?.buttonText\"\n              [disabled]=\"field?.disabled\"\n              [focus]=\"field?.focus\"\n              [formControl]=\"formGroup.controls[field.key]\"\n              [formControlName]=\"field.key\"\n              [icon]=\"field?.properties?.icon\"\n              [id]=\"field.key\"\n              [invalid]=\"field?.invalid\"\n              [mediaFiles]=\"\n                mediaFiles[field.key] | filterVideoUrlOrBase64FromObject\n              \"\n              [properties]=\"field?.properties\"\n              [showMediaFiles]=\"field?.properties?.showMediaFiles\"\n              [type]=\"'record'\"\n              [validators]=\"field?.validators\"\n              (onClick)=\"handleOnClickInputCamera($event, field)\"\n              (getRemovedFile)=\"handleOnClickGetRemovedMediaFile($event)\"\n            ></kwikui-input-camera>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n        <!-- Star Rating -->\n        <ng-container *ngSwitchCase=\"'star-rating'\">\n          <div\n            #formFieldsRef\n            [hidden]=\"field?.hidden\"\n            [style]=\"field?.properties?.containerStyles ?? '' | styleSanitizer\"\n            id=\"field_{{ field.key }}\"\n          >\n            <label\n              [tuiLabel]=\"labelTemplate\"\n              style=\"min-height: auto; padding: 0px 0.5rem\"\n            >\n              <kwikui-star-rating\n                [color]=\"field?.properties?.color\"\n                [disabled]=\"field?.disabled\"\n                [focus]=\"field?.focus\"\n                [formControl]=\"formGroup.controls[field.key]\"\n                [formControlName]=\"field.key\"\n                [icon]=\"field?.properties?.icon\"\n                [iconMarked]=\"field?.properties?.iconMarked\"\n                [id]=\"field.key\"\n                [invalid]=\"field?.invalid\"\n                [label]=\"field?.label\"\n                [max]=\"field?.properties?.max\"\n                [min]=\"field?.properties?.min\"\n                [placeholder]=\"field?.properties?.placeholder\"\n                [properties]=\"field?.properties\"\n                [size]=\"field?.properties?.size\"\n                [validators]=\"field?.validators\"\n                (getKeyValue)=\"handleGetKeyValue($event)\"\n              ></kwikui-star-rating>\n            </label>\n            <ng-template #labelTemplate>\n              <p>\n                <b\n                  >{{ field?.properties?.placeholder }}\n                  <span *ngIf=\"field.validators?.required\">*</span></b\n                >\n              </p>\n            </ng-template>\n            <kwikui-messages\n              [messages]=\"field.messages\"\n              [id]=\"field.key\"\n            ></kwikui-messages>\n          </div>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </form>\n  <div\n    class=\"kwikid-form-buttons\"\n    *ngIf=\"\n      !formConfig.properties.footer.viewFormsButton.hidden ||\n      !formConfig.properties.footer.saveButton.hidden\n    \"\n  >\n    <kwikui-button\n      *ngIf=\"\n        !formConfig.properties.footer.viewFormsButton.hidden && isMobileView\n      \"\n      [appearance]=\"'secondary'\"\n      [disabled]=\"viewFormsButton.disabled\"\n      [label]=\"formConfig.properties.footer.viewFormsButton.label\"\n      [showLoader]=\"viewFormsButton.showLoader\"\n      [styles]=\"'width: 100%'\"\n      (onClick)=\"handleOnClickViewForms($event)\"\n    ></kwikui-button>\n    <kwikui-button\n      *ngIf=\"!formConfig.properties.footer.saveButton.hidden\"\n      [disabled]=\"saveFormButton.disabled\"\n      [label]=\"formConfig.properties.footer.saveButton.label\"\n      [showLoader]=\"saveFormButton.showLoader\"\n      [styles]=\"'width: 100%'\"\n      (onClick)=\"handleOnClickSaveForm($event)\"\n    ></kwikui-button>\n  </div>\n</div>\n<div\n  class=\"kwikid-form-container-loading\"\n  *ngIf=\"loading\"\n>\n  <div\n    *ngFor=\"let item of [].constructor(7); let i = index\"\n    class=\"large-wrapper tui-skeleton tui-skeleton_rounded\"\n  >\n  </div>\n</div>\n\n<kwikui-loader></kwikui-loader>\n\n<tui-push\n  id=\"field-error-notification\"\n  *tuiPush=\"showErrorNotification\"\n  heading=\"Missing/Incorrect Fields!\"\n  type=\"Error\"\n  (close)=\"toggleErrorNotification(false)\"\n>\n  <tui-svg\n    src=\"tuiIconXCircle\"\n    style=\"color: #fff !important\"\n  >\n  </tui-svg>\n</tui-push>\n\n<tui-push\n  id=\"permission-error-notification\"\n  *tuiPush=\"showPermissionErrorNotification\"\n  heading=\"Please provide required permissions!\"\n  type=\"Error\"\n  (close)=\"togglePermissionErrorNotification(false)\"\n>\n  <tui-svg\n    src=\"tuiIconXCircle\"\n    style=\"color: #fff !important\"\n  >\n  </tui-svg>\n</tui-push>\n\n<ng-template\n  #preview\n  let-preview\n>\n  <tui-preview\n    [rotatable]=\"false\"\n    [zoomable]=\"false\"\n    class=\"preview-container\"\n  >\n    <tui-preview-title *ngIf=\"previewProperties.title !== ''\">{{\n      previewProperties.title\n    }}</tui-preview-title>\n\n    <ng-container *ngIf=\"!previewProperties.unavailable\">\n      <div\n        *ngIf=\"previewProperties?.html?.before !== ''\"\n        class=\"preview-html preview-html-before\"\n        [style]=\"previewProperties?.html?.beforeStyles ?? '' | styleSanitizer\"\n        [innerHtml]=\"previewProperties.html.before | kwikuiSafeHtml\"\n      ></div>\n\n      <!-- Content within the iframe -->\n      <div\n        class=\"preview-iframe-content\"\n        [style]=\"\n          previewProperties?.iframe?.containerStyles ?? '' | styleSanitizer\n        \"\n        *ngIf=\"previewProperties.iframe.src !== ''\"\n      >\n        <!-- Your HTML content here -->\n        <iframe\n          [src]=\"previewProperties.iframe.src | kwikuiSafeUrl\"\n          frameborder=\"0\"\n          allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n          allowfullscreen\n          [title]=\"previewProperties.iframe.title\"\n          class=\"preview-iframe\"\n          scrolling=\"auto\"\n        ></iframe>\n      </div>\n\n      <div\n        *ngIf=\"previewProperties?.html?.after !== ''\"\n        class=\"preview-html preview-html-after\"\n        [style]=\"previewProperties?.html?.afterStyles ?? '' | styleSanitizer\"\n        [innerHtml]=\"previewProperties.html.after | kwikuiSafeHtml\"\n      ></div>\n    </ng-container>\n\n    <ng-container *ngIf=\"previewProperties.unavailable\">\n      <div class=\"preview-unavailable\">\n        <tui-svg\n          src=\"tuiIconFileLarge\"\n          class=\"t-icon\"\n        ></tui-svg>\n        <div>Preview unavailable</div>\n      </div>\n    </ng-container>\n\n    <button\n      tuiIconButton\n      tuiPreviewAction\n      icon=\"tuiIconCloseLarge\"\n      title=\"Close\"\n      type=\"button\"\n      (click)=\"preview.complete()\"\n    ></button>\n  </tui-preview>\n</ng-template>\n\n<ng-template\n  #dialog\n  let-dialog\n>\n  <div class=\"preview-container\">\n    <ng-container *ngIf=\"!previewProperties.unavailable\">\n      <div\n        *ngIf=\"previewProperties?.html?.before !== ''\"\n        class=\"preview-html preview-html-before\"\n        [style]=\"previewProperties?.html?.beforeStyles ?? '' | styleSanitizer\"\n        [innerHtml]=\"previewProperties.html.before | kwikuiSafeHtml\"\n      ></div>\n\n      <!-- Content within the iframe -->\n      <div\n        class=\"preview-iframe-content\"\n        [style]=\"\n          previewProperties?.iframe?.containerStyles ?? '' | styleSanitizer\n        \"\n        *ngIf=\"previewProperties.iframe.src !== ''\"\n      >\n        <!-- Your HTML content here -->\n        <iframe\n          [src]=\"previewProperties.iframe.src | kwikuiSafeUrl\"\n          frameborder=\"0\"\n          allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n          allowfullscreen\n          [title]=\"previewProperties.iframe.title\"\n          class=\"preview-iframe\"\n          scrolling=\"auto\"\n        ></iframe>\n      </div>\n\n      <div\n        *ngIf=\"previewProperties?.html?.after !== ''\"\n        class=\"preview-html preview-html-after\"\n        [style]=\"previewProperties?.html?.afterStyles ?? '' | styleSanitizer\"\n        [innerHtml]=\"previewProperties.html.after | kwikuiSafeHtml\"\n      ></div>\n    </ng-container>\n\n    <ng-container *ngIf=\"previewProperties.unavailable\">\n      <div class=\"preview-unavailable\">\n        <tui-svg\n          src=\"tuiIconFileLarge\"\n          class=\"t-icon\"\n        ></tui-svg>\n        <div>Preview unavailable</div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<div\n  id=\"kwikid-camera-container\"\n  *ngIf=\"isShowCamera\"\n>\n  <div\n    id=\"kwikid-camera-wrapper\"\n    [class.fullscreen]=\"isShowCameraFullscreen\"\n  >\n    <kwikid-camera\n      [type]=\"activeCameraType\"\n      [data]=\"activeCameraData\"\n      [image]=\"activeCameraImage\"\n      [video]=\"activeCameraVideo\"\n      [config]=\"activeCameraConfig?.cameraConfig\"\n      (getImage)=\"handleGetCameraMedia($event, 'CAPTURE')\"\n      (getVideo)=\"handleGetCameraMedia($event, 'RECORD')\"\n      (onClickBack)=\"handleOnClickCameraBack($event)\"\n      (onClickClose)=\"handleOnClickCameraClose($event)\"\n      (onClickSave)=\"handleOnClickSaveCameraMedia($event, activeCameraType)\"\n    >\n      <ng-container\n        *ngIf=\"activeCameraType === 'CAPTURE'\"\n        slot=\"capture-header\"\n      >\n        <div class=\"capture-header-container\">\n          <div class=\"capture-header-left\"> </div>\n          <div class=\"capture-header-center\">\n            <kwikui-button\n              *ngIf=\"activeCameraConfig?.cameraConfig?.header?.title !== ''\"\n              appearance=\"whiteblock\"\n              [label]=\"activeCameraConfig?.cameraConfig?.header?.title\"\n              shape=\"rounded\"\n              size=\"s\"\n            ></kwikui-button>\n          </div>\n          <div class=\"capture-header-right\">\n            <kwikui-button\n              *ngIf=\"activeCameraConfig?.cameraConfig?.header?.isExpand\"\n              id=\"kwikid-camera-header-enlarge-button\"\n              appearance=\"whiteblock\"\n              [icon]=\"\n                isShowCameraFullscreen ? 'tuiIconMinimize2' : 'tuiIconMaximize2'\n              \"\n              shape=\"rounded\"\n              size=\"s\"\n              (click)=\"isShowCameraFullscreen = !isShowCameraFullscreen\"\n            ></kwikui-button>\n            <kwikui-button\n              *ngIf=\"activeCameraConfig?.cameraConfig?.header?.isClose\"\n              id=\"kwikid-camera-header-close-button\"\n              appearance=\"whiteblock\"\n              icon=\"tuiIconCloseLarge\"\n              shape=\"rounded\"\n              size=\"s\"\n              (click)=\"handleOnClickCameraClose($event)\"\n            ></kwikui-button>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container\n        *ngIf=\"activeCameraType === 'RECORD'\"\n        slot=\"record-header\"\n      >\n        <div class=\"record-header-container\">\n          <div class=\"record-header-row row-1\">\n            <div class=\"record-header-left\">\n              <kwikui-button\n                *ngIf=\"\n                  activeCameraConfig?.cameraConfig?.header?.isBack &&\n                  activeCameraRecordingState == 'NONE'\n                \"\n                appearance=\"whiteblock\"\n                icon=\"tuiIconArrowLeft\"\n                shape=\"rounded\"\n                size=\"s\"\n                (click)=\"handleOnClickCameraClose($event)\"\n              ></kwikui-button>\n            </div>\n            <div class=\"record-header-center\">\n              <kwikui-button\n                *ngIf=\"activeCameraConfig?.cameraConfig?.header?.title !== ''\"\n                appearance=\"whiteblock\"\n                [label]=\"activeCameraConfig?.cameraConfig?.header?.title\"\n                shape=\"rounded\"\n                size=\"s\"\n              ></kwikui-button>\n            </div>\n            <div class=\"record-header-right\">\n              <kwikui-button\n                *ngIf=\"activeCameraConfig?.cameraConfig?.header?.isExpand\"\n                id=\"kwikid-camera-header-enlarge-button\"\n                appearance=\"whiteblock\"\n                [icon]=\"\n                  isShowCameraFullscreen\n                    ? 'tuiIconMinimize2'\n                    : 'tuiIconMaximize2'\n                \"\n                shape=\"rounded\"\n                size=\"s\"\n                (click)=\"isShowCameraFullscreen = !isShowCameraFullscreen\"\n              ></kwikui-button>\n            </div>\n          </div>\n          <div class=\"record-header-row row-2\">\n            <div\n              id=\"blinking-dot-container\"\n              [class.recording]=\"activeCameraRecordingState == 'RECORDING'\"\n              [class.paused]=\"activeCameraRecordingState == 'PAUSED'\"\n              [class.recorded]=\"\n                activeCameraRecordingState == 'NONE' ||\n                activeCameraRecordingState === 'RECORDED'\n              \"\n            >\n              <div\n                *ngIf=\"activeCameraRecordingState == 'RECORDING'\"\n                class=\"dot recording blink\"\n              >\n              </div>\n              <div\n                *ngIf=\"activeCameraRecordingState === 'PAUSED'\"\n                class=\"dot paused\"\n              >\n              </div>\n              <div\n                *ngIf=\"\n                  activeCameraRecordingState == 'NONE' ||\n                  activeCameraRecordingState === 'RECORDED'\n                \"\n                class=\"dot recorded\"\n              >\n              </div>\n              <div>\n                &nbsp;{{ activeCameraRecordingTime | formatTimer }}\n                <ng-container\n                  *ngIf=\"\n                    activeCameraConfig?.cameraConfig?.others\n                      ?.maxRecordingTimeInSeconds\n                  \"\n                >\n                  /\n                  {{\n                    activeCameraConfig?.cameraConfig?.others\n                      ?.maxRecordingTimeInSeconds | formatTimer\n                  }}\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </kwikid-camera>\n  </div>\n</div>\n", styles: [".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;scroll-behavior:smooth}.kwikid-form.show>*:not(:last-child){margin-bottom:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.kwikid-form-buttons>*:not(:last-child){margin-right:1rem}.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;padding:1rem 1rem 0}#uf-form-fields-header-container>*:not(:last-child){margin-bottom:.5rem}#uf-form-fields-header-container #uf-header-logo{width:-moz-fit-content;width:fit-content;height:50px}#uf-form-fields-header-container #uf-form-fields-header-main{display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;width:100%}#uf-form-fields-header-container #uf-form-fields-header-main>*:not(:last-child){margin-right:.25rem}#uf-form-fields-header-container #uf-form-fields-header-main #uf-form-fields-header-right{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start}#uf-form-fields-header-container #uf-form-fields-header-main #uf-form-fields-header-right>*{margin-bottom:.5rem}#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:1rem}.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}.title>*:not(:last-child){margin-right:.5rem}.title:not(:first-child){margin-top:.5rem}.title.hidden{display:none}.large-wrapper{width:100%;height:60px}.large-wrapper:first-child{margin-bottom:auto}.large-wrapper:last-child{margin-top:auto}.kwikid-form-container-loading{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;padding:1rem}.kwikid-form-container-loading>* :not(:last-child){margin-bottom:1rem}#field-error-notification,#permission-error-notification{background-color:var(--tui-error-fill);color:#fff!important}#field-error-notification .t-top,#permission-error-notification .t-top{color:#fff!important}#field-error-notification .t-close,#permission-error-notification .t-close{color:#fff!important}.preview-container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;align-content:center;height:calc(100vh - 3rem)}@media only screen and (min-width: 768px){.preview-container{height:calc(100vh - 10rem);width:calc(100vw - 10rem)}}.preview-container>*:not(:last-child){margin-bottom:1rem}.preview-container .preview-html{flex-grow:1}.preview-container .preview-iframe-content{height:100%;flex-grow:1}.preview-container .preview-iframe-content .preview-iframe{width:100%;height:100%}.preview-container .preview-unavailable{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#fff;font-size:1.2rem;top:50%;left:50%;width:100%;height:100vh}.preview-container .preview-unavailable>*:not(:last-child){margin-bottom:1rem}#kwikid-camera-container{width:100%;height:100%;position:fixed;top:50%;left:50%;background-color:#0000008f;transform:translate(-50%,-50%);z-index:100}#kwikid-camera-container #kwikid-camera-wrapper{width:min(80%);height:max(85%);box-shadow:#0000008f 0 22px 70px 4px;overflow:hidden;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:1rem;background-color:#000;transition:5s linear ease}#kwikid-camera-container #kwikid-camera-wrapper .capture-header-container{display:flex;width:100%;max-width:100%;padding:0}#kwikid-camera-container #kwikid-camera-wrapper .capture-header-container .capture-header-left{flex:1;text-align:left}#kwikid-camera-container #kwikid-camera-wrapper .capture-header-container .capture-header-center{flex:1;width:100%;min-width:max-content;text-align:center;margin:auto}#kwikid-camera-container #kwikid-camera-wrapper .capture-header-container .capture-header-right{flex:1;text-align:right;display:flex;justify-content:flex-end;grid-gap:1rem;gap:1rem}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container{display:flex;width:100%;max-width:100%;padding:0;color:#fff;flex-direction:column;justify-content:flex-start;align-items:stretch}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-1{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:1rem}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-1 .record-header-left{flex:1;display:flex;justify-content:flex-start;grid-gap:1rem;gap:1rem;text-align:left}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-1 .record-header-center{flex:1;width:100%;min-width:max-content;text-align:center;margin:auto}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-1 .record-header-right{flex:1;text-align:right;display:flex;justify-content:flex-end;grid-gap:1rem;gap:1rem}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2{display:flex;flex-direction:row;justify-content:center;align-items:center}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;grid-gap:.25rem;gap:.25rem;padding:.35rem .6rem;width:-moz-fit-content;width:fit-content;border-radius:2rem;background-color:#f5f5f5}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container.recording{color:red;font-weight:bold}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container.paused{color:#525252;font-weight:bold}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container.recorded{color:#000;font-weight:bold}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container .dot{display:inline-block;width:.75rem;height:.75rem;border-radius:100%}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container .dot.recording{background-color:red;box-shadow:0 0 5px -1px red}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container .dot.paused{background-color:#525252;box-shadow:0 0 5px -1px #000}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container .dot.recorded{background-color:#000;box-shadow:0 0 5px -1px #000}#kwikid-camera-container #kwikid-camera-wrapper .record-header-container .record-header-row.row-2 #blinking-dot-container .dot.blink{animation:blinker 1s cubic-bezier(.5,0,1,1) infinite alternate}@keyframes blinker{0%{opacity:1}to{opacity:0}}#kwikid-camera-container #kwikid-camera-wrapper.fullscreen{width:100%;height:100%;border-radius:0;transition:5s linear ease}@media only screen and (max-width: 600px){#kwikid-camera-container #kwikid-camera-wrapper{width:100%;height:100%;border-radius:0;transition:5s linear ease}#kwikid-camera-container #kwikid-camera-wrapper #kwikid-camera-header-enlarge-button{display:none}}\n", "::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: i3__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i3__namespace.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["id", "messages"] }, { type: i3__namespace.KwikUIInputComponent, selector: "kwikui-input", inputs: ["case", "disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "placeholder", "postfix", "prefix", "properties", "size", "type", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputCurrencyComponent, selector: "kwikui-input-currency", inputs: ["currencyType", "disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "placeholder", "postfix", "prefix", "properties", "size", "validators", "value"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputEmailComponent, selector: "kwikui-input-email", inputs: ["case", "disabled", "domains", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputPasswordComponent, selector: "kwikui-input-password", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUITextareaComponent, selector: "kwikui-textarea", inputs: ["disabled", "focus", "formControl", "formControlName", "id", "invalid", "label", "placeholder", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUICheckboxComponent, selector: "kwikui-checkbox", inputs: ["contentAlign", "disabled", "focus", "formControl", "formControlName", "id", "invalid", "label", "placeholder", "properties", "size", "validators", "variant"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["decimal", "disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "max", "min", "placeholder", "postfix", "precision", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "max", "maxCalculatedFromToday", "min", "minCalculatedFromToday", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputTimeComponent, selector: "kwikui-input-time", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "items", "invalid", "label", "mode", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["countryCode", "disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "phoneMaskAfterCountryCode", "placeholder", "postfix", "prefix", "properties", "removeCountryCodeFromValue", "size", "validators"], outputs: ["getKeyValue"] }, { type: i5__namespace.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i3__namespace.KwikUIInputRadioComponent, selector: "kwikui-input-radio", inputs: ["disabled", "focus", "formControl", "formControlName", "id", "invalid", "items", "label", "orientation", "placeholder", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputSelectComponent, selector: "kwikui-input-select", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "options", "placeholder", "properties", "searchable", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputSliderComponent, selector: "kwikui-input-slider", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "max", "min", "placeholder", "postfix", "prefix", "properties", "quantum", "size", "steps", "type", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["apiTimer", "apiStatus", "class", "disabled", "id", "label", "shape", "showLoader", "size", "styles"], outputs: ["onClick", "onApiTimerStop"] }, { type: i3__namespace.KwikUIButtonLiveLocationComponent, selector: "kwikui-button-live-location", inputs: ["liveLocationStatus", "class", "disabled", "id", "label", "shape", "showLoader", "size", "styles", "isShowLatLongCaptureTimestamp"], outputs: ["onClick", "onLocationPermission"] }, { type: i3__namespace.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["disabled", "focus", "formControl", "formControlName", "id", "invalid", "label", "mask", "mode", "otpLength", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["disabled", "focus", "formControl", "formControlName", "id", "invalid", "label", "mask", "placeholder", "properties", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUIImageComponent, selector: "kwikui-image", inputs: ["altText", "class", "html", "id", "imageSrc", "imageType", "loadingType", "styles"], outputs: ["onClick"] }, { type: i3__namespace.KwikUIInputFilesComponent, selector: "kwikui-input-files", inputs: ["accept", "class", "disabled", "files", "formControl", "formControlName", "icon", "id", "label", "link", "maxFileSize", "multiple", "setFileTypesToForm", "showAddedFiles", "size", "styles", "validators", "variant", "showViewButton"], outputs: ["getKeyValue", "getRemovedFile", "getViewButtonClick"] }, { type: i4__namespace.KwikUIInputCameraComponent, selector: "kwikui-input-camera", inputs: ["buttonText", "disabled", "focus", "formControl", "formControlName", "icon", "id", "invalid", "mediaFiles", "properties", "showMediaFiles", "size", "type", "validators"], outputs: ["onClick", "getRemovedFile"] }, { type: i3__namespace.KwikUIStarRatingComponent, selector: "kwikui-star-rating", inputs: ["color", "disabled", "focus", "formControl", "formControlName", "icon", "iconMarked", "id", "invalid", "label", "max", "min", "placeholder", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i3__namespace.KwikUILoaderComponent, selector: "kwikui-loader" }, { type: i6__namespace.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "lines", "timestamp"], outputs: ["close"] }, { type: i5__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i7__namespace.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { type: i7__namespace.TuiPreviewTitleComponent, selector: "tui-preview-title" }, { type: i5__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i4__namespace.KwikIDCameraComponent, selector: "kwikid-camera", inputs: ["type", "config", "data", "image", "video"], outputs: ["getImage", "onClickSave", "getVideo"] }], directives: [{ type: i3__namespace$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6__namespace.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i6__namespace.TuiPushDirective, selector: "tui-push" }, { type: i7__namespace.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }], pipes: { "styleSanitizer": StyleSanitizerPipe, "kwikuiSafeHtml": i3__namespace.KwikUISafeHtmlPipe, "filterImageUrlOrBase64FromObject": FilterImageUrlOrBase64FromObjectPipe, "filterVideoUrlOrBase64FromObject": FilterVideoUrlOrBase64FromObjectPipe, "kwikuiSafeUrl": i3__namespace.KwikUISafeUrlPipe, "formatTimer": TimerPipe } });
   __decorate([
       kwikidToolkit.logMethod
   ], KwikIDFormViewComponent.prototype, "resetCamera", null);
@@ -8866,9 +9075,6 @@
   __decorate([
       kwikidToolkit.logMethod
   ], KwikIDFormViewComponent.prototype, "handleGetKeyValue", null);
-  __decorate([
-      kwikidToolkit.logMethod
-  ], KwikIDFormViewComponent.prototype, "handleOnClickResetFormFields2", null);
   __decorate([
       kwikidToolkit.logMethod
   ], KwikIDFormViewComponent.prototype, "handleOnClickResetFormFields", null);
@@ -9124,8 +9330,9 @@
                   type: i0.Output
               }], onClickViewForms: [{
                   type: i0.Output
-              }], resetCamera: [], ngOnInit: [], ngOnChanges: [], ngOnDestroy: [], triggerLogs: [], initFormConfig: [], setFormFieldsFromFormConfig: [], setFormFieldGroupsFromFormConfig: [], setFormDataFromAllFormsData: [], handleConnectedElementFieldGroupActions: [], handleConnectedElementFieldGroup: [], handleConnectedElementFieldActions: [], handleConnectedElementFields: [], handleConnectedElements: [], handleRemovedFile: [], handleViewButtonClick: [], handleGetKeyValueFile: [], handleOnClickGetRemovedMediaFile: [], handleOnClickInputCamera: [], setCameraMedia: [], handleGetCameraMedia: [], handleOnClickSaveCameraMedia: [], handleOnClickCameraBack: [], handleOnClickCameraClose: [], updateFiles: [], uploadFile: [], handleOnClickFormFieldButton: [], handleOnLocationPermission: [], handleOnClickLiveLocation: [], handleGetKeyValue: [], handleOnClickResetFormFields2: [], handleOnClickResetFormFields: [], handleFieldApiCall: [], handleApiCall: [], executeApiCall: [], isValidRequestHeadersAndBody: [], handleOnClickApiCall: [], handleOnClickGoBack: [], handleOnClickViewForms: [], handleOnClickSaveForm: [], handleOnApiTimerStop: [], handleOnScrollToField: [], toggleErrorNotification: [], togglePermissionErrorNotification: [], fieldHide: [], fieldGroupHide: [], fieldShow: [], fieldGroupShow: [], fieldDisable: [], fieldGroupDisable: [], fieldEnable: [], fieldGroupEnable: [], fieldReset: [], fieldGroupReset: [], fieldHideApiLoader: [], fieldShowApiLoader: [], setHtml: [], fieldErrorShow: [], fieldErrorHide: [], fieldMessageShow: [], fieldMessageHide: [], setValue: [], setFieldDefaultValue: [], setApiStatus: [], setApiHeaderValue: [], setApiHeaderValidity: [], setApiBodyValue: [], setApiBodyValidity: [], setFieldValidity: [], setDropdownOptions: [], apiCall: [], fieldApiCall: [], fieldMultipleApiCalls: [], fieldMultipleApiCallsEnd: [], taskApiCall: [], taskMultipleApiCalls: [], taskMultipleApiCallsEnd: [], dialogShow: [], dialogHide: [], redirectToUrl: [], patchFieldControlValue: [], setFieldControlValue: [], patchFormGroup: [], isFieldValid: [], isFieldEnabled: [], getFormGroupRawValues: [], showPreview: [], showErrorPreview: [], showPopupForm: [], alertShow: [], takeActionOnFieldGroup: [], takeAction: [] } });
+              }], resetCamera: [], ngOnInit: [], ngOnChanges: [], ngOnDestroy: [], triggerLogs: [], initFormConfig: [], setFormFieldsFromFormConfig: [], setFormFieldGroupsFromFormConfig: [], setFormDataFromAllFormsData: [], handleConnectedElementFieldGroupActions: [], handleConnectedElementFieldGroup: [], handleConnectedElementFieldActions: [], handleConnectedElementFields: [], handleConnectedElements: [], handleRemovedFile: [], handleViewButtonClick: [], handleGetKeyValueFile: [], handleOnClickGetRemovedMediaFile: [], handleOnClickInputCamera: [], setCameraMedia: [], handleGetCameraMedia: [], handleOnClickSaveCameraMedia: [], handleOnClickCameraBack: [], handleOnClickCameraClose: [], updateFiles: [], uploadFile: [], handleOnClickFormFieldButton: [], handleOnLocationPermission: [], handleOnClickLiveLocation: [], handleGetKeyValue: [], handleOnClickResetFormFields: [], handleFieldApiCall: [], handleApiCall: [], executeApiCall: [], isValidRequestHeadersAndBody: [], handleOnClickApiCall: [], handleOnClickGoBack: [], handleOnClickViewForms: [], handleOnClickSaveForm: [], handleOnApiTimerStop: [], handleOnScrollToField: [], toggleErrorNotification: [], togglePermissionErrorNotification: [], fieldHide: [], fieldGroupHide: [], fieldShow: [], fieldGroupShow: [], fieldDisable: [], fieldGroupDisable: [], fieldEnable: [], fieldGroupEnable: [], fieldReset: [], fieldGroupReset: [], fieldHideApiLoader: [], fieldShowApiLoader: [], setHtml: [], fieldErrorShow: [], fieldErrorHide: [], fieldMessageShow: [], fieldMessageHide: [], setValue: [], setFieldDefaultValue: [], setApiStatus: [], setApiHeaderValue: [], setApiHeaderValidity: [], setApiBodyValue: [], setApiBodyValidity: [], setFieldValidity: [], setDropdownOptions: [], apiCall: [], fieldApiCall: [], fieldMultipleApiCalls: [], fieldMultipleApiCallsEnd: [], taskApiCall: [], taskMultipleApiCalls: [], taskMultipleApiCallsEnd: [], dialogShow: [], dialogHide: [], redirectToUrl: [], patchFieldControlValue: [], setFieldControlValue: [], patchFormGroup: [], isFieldValid: [], isFieldEnabled: [], getFormGroupRawValues: [], showPreview: [], showErrorPreview: [], showPopupForm: [], alertShow: [], takeActionOnFieldGroup: [], takeAction: [] } });
 
+  /* eslint-disable no-unused-vars */
   var EFormType;
   (function (EFormType) {
       EFormType["FORM"] = "FORM";
@@ -9178,8 +9385,8 @@
           this.isAllFormsCompleted = true;
           this.loading = false;
       }
-      KwikIDFormsListComponent.prototype.setSelectedForm = function (selected_form) {
-          this.selectedForm = selected_form;
+      KwikIDFormsListComponent.prototype.setSelectedForm = function (selectedForm) {
+          this.selectedForm = selectedForm;
       };
       KwikIDFormsListComponent.prototype.ngOnInit = function () {
           var _a, _b;
@@ -9242,14 +9449,12 @@
           if (kwikidToolkit.isNull(stepConfig) || kwikidToolkit.isUndefined(stepConfig)) {
               stepConfig = kwikidToolkit.setValueToObjectPath({}, "props", stepConfigProperties);
           }
+          else if (kwikidToolkit.checkObjectKeyExists(stepConfig, "props")) {
+              stepConfigProperties = kwikidToolkit.mergeObjects(stepConfigProperties, stepConfig.props);
+              stepConfig = kwikidToolkit.setValueToObjectPath(stepConfig, "props", stepConfigProperties);
+          }
           else {
-              if (kwikidToolkit.checkObjectKeyExists(stepConfig, "props")) {
-                  stepConfigProperties = kwikidToolkit.mergeObjects(stepConfigProperties, stepConfig.props);
-                  stepConfig = kwikidToolkit.setValueToObjectPath(stepConfig, "props", stepConfigProperties);
-              }
-              else {
-                  stepConfig = kwikidToolkit.setValueToObjectPath(stepConfig, "props", stepConfigProperties);
-              }
+              stepConfig = kwikidToolkit.setValueToObjectPath(stepConfig, "props", stepConfigProperties);
           }
           stepConfig.props.formListProperties.footer.submitFormButton.label =
               updateLanguage(stepConfig.props.formListProperties.footer.submitFormButton.label, getLanguage());
@@ -9258,43 +9463,34 @@
       KwikIDFormsListComponent.prototype.filterHiddenForms = function (formsList) {
           return formsList.filter(function (form) {
               if (kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
-                  if (!form.hidden) {
-                      return form;
-                  }
+                  return !form.hidden;
               }
+              return false;
           });
       };
       KwikIDFormsListComponent.prototype.setFormTitles = function (formsList) {
-          return formsList.filter(function (form) {
+          return formsList
+              .map(function (form) {
               if (form.type === EFormType.HTML) {
-                  return form;
+                  return form; // No modification, just return
               }
-              else {
-                  if (kwikidToolkit.checkObjectPathExists(form, "props.title")) {
-                      form.props.title = updateLanguage(form.props.title, getLanguage());
-                      return form;
-                  }
+              if (kwikidToolkit.checkObjectPathExists(form, "props.title")) {
+                  form.props.title = updateLanguage(form.props.title, getLanguage());
               }
-          });
+              return form; // Return the form regardless of modification
+          })
+              .filter(function (form) { return form.type === EFormType.HTML ||
+              kwikidToolkit.checkObjectPathExists(form, "props.title"); });
       };
       KwikIDFormsListComponent.prototype.findFormsListLength = function (formsList) {
-          var _formsList = formsList.filter(function (form) {
+          return formsList.filter(function (form) {
               if (kwikidToolkit.checkObjectKeyExists(form, "type")) {
-                  if (form.type !== EFormType.HTML) {
-                      if (kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
-                          if (!form.hidden) {
-                              return form;
-                          }
-                      }
-                  }
-              }
-              else if (kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
-                  if (!form.hidden) {
-                      return form;
-                  }
+                  return (form.type !== EFormType.HTML &&
+                      kwikidToolkit.checkObjectKeyExists(form, "hidden") &&
+                      !form.hidden);
               }
-          });
-          return _formsList.length;
+              return kwikidToolkit.checkObjectKeyExists(form, "hidden") && !form.hidden;
+          }).length;
       };
       KwikIDFormsListComponent.prototype.checkIsAllFormsCompleted = function (formsList) {
           var e_1, _g;
@@ -9364,6 +9560,9 @@
   __decorate([
       kwikidToolkit.logMethod
   ], KwikIDFormsListComponent.prototype, "filterHiddenForms", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], KwikIDFormsListComponent.prototype, "setFormTitles", null);
   __decorate([
       kwikidToolkit.logMethod
   ], KwikIDFormsListComponent.prototype, "findFormsListLength", null);
@@ -9383,7 +9582,7 @@
                       templateUrl: "./forms-list.component.html",
                       styleUrls: ["./forms-list.component.scss", "../shared.scss"]
                   }]
-          }], ctorParameters: function () { return []; }, propDecorators: { showFormFields: [{
+          }], propDecorators: { showFormFields: [{
                   type: i0.Input
               }], userConfig: [{
                   type: i0.Input
@@ -9407,7 +9606,7 @@
                   type: i0.Output
               }], onClickSubmitForms: [{
                   type: i0.Output
-              }], ngOnChanges: [], triggerLogs: [], formatStepConfig: [], filterHiddenForms: [], findFormsListLength: [], checkIsAllFormsCompleted: [], handleOnClickSetActiveForm: [], handleOnSubmitForms: [] } });
+              }], ngOnChanges: [], triggerLogs: [], formatStepConfig: [], filterHiddenForms: [], setFormTitles: [], findFormsListLength: [], checkIsAllFormsCompleted: [], handleOnClickSetActiveForm: [], handleOnSubmitForms: [] } });
 
   var ERendererActionKey;
   (function (ERendererActionKey) {
@@ -9420,9 +9619,7 @@
 
   var getFormConfigByKey = function (forms, key) {
       var form = forms.find(function (form) {
-          if (form.key === key) {
-              return form;
-          }
+          return form.key === key;
       });
       return form;
   };
@@ -9538,7 +9735,7 @@
       };
       KwikIDFormsRendererComponent.prototype.ngOnChanges = function (changes) {
           var verifyChange = function (prop) {
-              return changes.hasOwnProperty(prop) && !changes[prop].firstChange;
+              return kwikidToolkit.checkObjectKeyExists(changes, prop) && !changes[prop].firstChange;
           };
           if (verifyChange("userConfig")) {
               this.userConfig = changes.userConfig.currentValue;
@@ -9641,19 +9838,19 @@
               if (kwikidToolkit.checkObjectKeyExists(form, "formContent")) {
                   if (kwikidToolkit.checkObjectKeyExists(form.formContent, "url")) {
                       form = kwikidToolkit.setValueToObjectPath(form, "props.url", form.formContent.url);
-                      delete form["formContent"]["url"];
+                      delete form.formContent.url;
                   }
                   if (kwikidToolkit.checkObjectKeyExists(form.formContent, "path")) {
                       form = kwikidToolkit.setValueToObjectPath(form, "props.path", form.formContent.path);
-                      delete form["formContent"]["path"];
+                      delete form.formContent.path;
                   }
               }
               if (kwikidToolkit.isEmptyValue(form.formContent)) {
-                  delete form["formContent"];
+                  delete form.formContent;
               }
               if (kwikidToolkit.checkObjectKeyExists(form, "title")) {
                   form = kwikidToolkit.setValueToObjectPath(form, "props.title", form.title);
-                  delete form["title"];
+                  delete form.title;
               }
               if (!kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
                   form.hidden = false;
@@ -9679,18 +9876,16 @@
                           htmlContent: form.htmlContent
                       };
                   }
-                  delete form["htmlContent"];
+                  delete form.htmlContent;
               }
-              else {
-                  if (!kwikidToolkit.checkObjectKeyExists(form, "props")) {
-                      form.props = {
-                          htmlContent: ""
-                      };
-                  }
+              else if (!kwikidToolkit.checkObjectKeyExists(form, "props")) {
+                  form.props = {
+                      htmlContent: ""
+                  };
               }
               if (kwikidToolkit.checkObjectKeyExists(form, "title")) {
                   form = kwikidToolkit.setValueToObjectPath(form, "props.title", form.title);
-                  delete form["title"];
+                  delete form.title;
               }
               if (!kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
                   form.hidden = false;
@@ -9727,10 +9922,11 @@
                   var form = formsList_1_1.value;
                   if (kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
                       if (!form.hidden && form.type !== EFormType.HTML) {
-                          form.sequenceNo = sequenceNo++;
+                          form.sequenceNo = sequenceNo;
+                          sequenceNo += 1;
                       }
                       else {
-                          delete form["sequenceNo"];
+                          delete form.sequenceNo;
                       }
                   }
               }
@@ -9746,7 +9942,7 @@
       };
       KwikIDFormsRendererComponent.prototype.findCompletedFormsList = function (allFormsData) {
           var formsListCompleted = [];
-          Object.keys(allFormsData).map(function (formKey) {
+          Object.keys(allFormsData).forEach(function (formKey) {
               formsListCompleted.push(formKey);
           });
           return formsListCompleted;
@@ -9875,47 +10071,44 @@
           return allFormsCompleted;
       };
       KwikIDFormsRendererComponent.prototype.findActiveFormConfig = function (formsList) {
-          var activeFormConfig = formsList.find(function (form) {
-              if (kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
-                  if (!form.hidden && form.type !== EFormType.HTML) {
-                      return form.status === "editable" && !form.disabled;
-                  }
-              }
+          return formsList.find(function (form) {
+              return (kwikidToolkit.checkObjectKeyExists(form, "hidden") &&
+                  !form.hidden &&
+                  form.type !== EFormType.HTML &&
+                  form.status === "editable" &&
+                  !form.disabled);
           });
-          return activeFormConfig;
       };
       KwikIDFormsRendererComponent.prototype.updateFormsList = function () {
           return __awaiter(this, void 0, void 0, function () {
-              var _o, _p, form, triggers, rules, actions, rulesMapping, actions_1, actions_1_1, action, conditionEvaluation, actions_2, e_6_1, e_7_1, currentUserFormAllFormsData;
-              var e_7, _q, e_6, _r;
-              return __generator(this, function (_s) {
-                  switch (_s.label) {
+              var _o, _p, form, _q, triggers, rules, actions, rulesMapping, actions_1, actions_1_1, action, conditionEvaluation, actions_2, e_6_1, e_7_1, currentUserFormAllFormsData;
+              var e_7, _r, e_6, _s;
+              return __generator(this, function (_t) {
+                  switch (_t.label) {
                       case 0:
                           this.formsList = this.convertFormListConfig(this.formsList);
-                          _s.label = 1;
+                          _t.label = 1;
                       case 1:
-                          _s.trys.push([1, 14, 15, 16]);
+                          _t.trys.push([1, 14, 15, 16]);
                           _o = __values(this.formsList), _p = _o.next();
-                          _s.label = 2;
+                          _t.label = 2;
                       case 2:
                           if (!!_p.done) return [3 /*break*/, 13];
                           form = _p.value;
                           if (!(kwikidToolkit.checkObjectKeyExists(form, "default") &&
                               kwikidToolkit.isNotEmptyValue(form.default))) return [3 /*break*/, 11];
-                          triggers = form.default.triggers;
-                          rules = form.default.rules;
-                          actions = form.default.actions;
+                          _q = form.default, triggers = _q.triggers, rules = _q.rules, actions = _q.actions;
                           rulesMapping = new kwikidToolkit.Rule(rules, {
                               USER_CONFIG: this.userConfig,
                               FORMS_LIST: this.formsList,
                               ALL_FORMS_DATA: this.allFormsData,
                               EXTRA_DATA: this.extraData
                           }).mapping();
-                          _s.label = 3;
+                          _t.label = 3;
                       case 3:
-                          _s.trys.push([3, 8, 9, 10]);
+                          _t.trys.push([3, 8, 9, 10]);
                           actions_1 = (e_6 = void 0, __values(actions)), actions_1_1 = actions_1.next();
-                          _s.label = 4;
+                          _t.label = 4;
                       case 4:
                           if (!!actions_1_1.done) return [3 /*break*/, 7];
                           action = actions_1_1.value;
@@ -9928,19 +10121,19 @@
                           }, this.takeAction.bind(this));
                           return [4 /*yield*/, actions_2.execute()];
                       case 5:
-                          _s.sent();
-                          _s.label = 6;
+                          _t.sent();
+                          _t.label = 6;
                       case 6:
                           actions_1_1 = actions_1.next();
                           return [3 /*break*/, 4];
                       case 7: return [3 /*break*/, 10];
                       case 8:
-                          e_6_1 = _s.sent();
+                          e_6_1 = _t.sent();
                           e_6 = { error: e_6_1 };
                           return [3 /*break*/, 10];
                       case 9:
                           try {
-                              if (actions_1_1 && !actions_1_1.done && (_r = actions_1.return)) _r.call(actions_1);
+                              if (actions_1_1 && !actions_1_1.done && (_s = actions_1.return)) _s.call(actions_1);
                           }
                           finally { if (e_6) throw e_6.error; }
                           return [7 /*endfinally*/];
@@ -9949,18 +10142,18 @@
                           if (!kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
                               form.hidden = false;
                           }
-                          _s.label = 12;
+                          _t.label = 12;
                       case 12:
                           _p = _o.next();
                           return [3 /*break*/, 2];
                       case 13: return [3 /*break*/, 16];
                       case 14:
-                          e_7_1 = _s.sent();
+                          e_7_1 = _t.sent();
                           e_7 = { error: e_7_1 };
                           return [3 /*break*/, 16];
                       case 15:
                           try {
-                              if (_p && !_p.done && (_q = _o.return)) _q.call(_o);
+                              if (_p && !_p.done && (_r = _o.return)) _r.call(_o);
                           }
                           finally { if (e_7) throw e_7.error; }
                           return [7 /*endfinally*/];
@@ -10047,23 +10240,15 @@
           });
       };
       KwikIDFormsRendererComponent.prototype.findFormsListLength = function (formsList) {
-          var _formsList = formsList.filter(function (form) {
+          var updatedFormsList = formsList.filter(function (form) {
               if (kwikidToolkit.checkObjectKeyExists(form, "type")) {
-                  if (form.type !== EFormType.HTML) {
-                      if (kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
-                          if (!form.hidden) {
-                              return form;
-                          }
-                      }
-                  }
-              }
-              else if (kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
-                  if (!form.hidden) {
-                      return form;
-                  }
+                  return (form.type !== EFormType.HTML &&
+                      kwikidToolkit.checkObjectKeyExists(form, "hidden") &&
+                      !form.hidden);
               }
+              return kwikidToolkit.checkObjectKeyExists(form, "hidden") && !form.hidden;
           });
-          return _formsList.length;
+          return updatedFormsList.length;
       };
       /**
        * Library Event Listeners
@@ -10083,12 +10268,9 @@
                           this.toggleLoader(true);
                           this.isUnsavedData = false;
                           activeFormConfig = this.formsList.find(function (form) {
-                              if (form.key === selectedForm) {
-                                  return form;
-                              }
+                              return form.key === selectedForm;
                           });
                           activeFormConfig = new Converter().updateFormConfigProperties(activeFormConfig);
-                          formConfig = undefined;
                           if (!kwikidToolkit.checkObjectKeyExists(activeFormConfig, "props")) return [3 /*break*/, 6];
                           if (!kwikidToolkit.checkObjectKeyExists(activeFormConfig.props, "url")) return [3 /*break*/, 2];
                           return [4 /*yield*/, this.fetchFormConfig(activeFormConfig.props.url)];
@@ -10219,8 +10401,8 @@
                           .subscribe({
                           next: function (data) {
                               _this.popupFormCallback = {
-                                  popupFormData: data["data"],
-                                  popupFormConfig: data["formConfig"],
+                                  popupFormData: data.data,
+                                  popupFormConfig: data.formConfig,
                                   activeFormConfig: _this.activeFormConfig
                               };
                               _this.activePopupFormData = {};
@@ -10249,8 +10431,8 @@
                           .subscribe({
                           next: function (data) {
                               _this.popupFormCallback = {
-                                  popupFormData: data["data"],
-                                  popupFormConfig: data["formConfig"],
+                                  popupFormData: data.data,
+                                  popupFormConfig: data.formConfig,
                                   activeFormConfig: _this.activeFormConfig
                               };
                               _this.activePopupFormData = {};
@@ -10290,9 +10472,9 @@
                   this.toggleLoader(true);
                   this.getFormData.emit((_o = {},
                       _o[this.activeFormConfig.key] = {
-                          formConfig: e["formConfig"],
-                          data: e["data"],
-                          extendedData: e["extendedData"]
+                          formConfig: e.formConfig,
+                          data: e.data,
+                          extendedData: e.extendedData
                       },
                       _o));
                   break;
@@ -10335,34 +10517,26 @@
                       this.showFormSections = true;
                       this.showForm = false;
                       this.showFormFields = false;
-                      return;
+                  }
+                  else if (this.checkIfFormsStatusCompleted(this.formsList, this.formsListCompleted)) {
+                      this.showFormSections = true;
+                      this.showForm = false;
+                      this.showFormFields = false;
                   }
                   else {
-                      if (this.checkIfFormsStatusCompleted(this.formsList, this.formsListCompleted)) {
-                          this.showFormSections = true;
-                          this.showForm = false;
-                          this.showFormFields = false;
-                          return;
-                      }
-                      else {
-                          var previousFormConfigDirect = this.formsList.find(function (form) {
-                              if (form.sequenceNo === _this.activeFormConfig.sequenceNo - 1 &&
-                                  form.status !== EFormsListStatus.LOCKED) {
-                                  return form;
-                              }
-                          });
-                          if (previousFormConfigDirect) {
-                              this.handleOnClickSetActiveForm(previousFormConfigDirect.key, undefined);
-                          }
+                      var previousFormConfigDirect = this.formsList.find(function (form) {
+                          return (form.sequenceNo === _this.activeFormConfig.sequenceNo - 1 &&
+                              form.status !== EFormsListStatus.LOCKED);
+                      });
+                      if (previousFormConfigDirect) {
+                          this.handleOnClickSetActiveForm(previousFormConfigDirect.key, undefined);
                       }
                   }
                   break;
-              case EFormViewGoBackMode.TABBED:
+              case EFormViewGoBackMode.TABBED: {
                   var previousFormConfig = this.formsList.find(function (form) {
-                      if (form.sequenceNo < _this.activeFormConfig.sequenceNo &&
-                          form.status === EFormsListStatus.EDITABLE) {
-                          return form;
-                      }
+                      return (form.sequenceNo < _this.activeFormConfig.sequenceNo &&
+                          form.status === EFormsListStatus.EDITABLE);
                   });
                   if (previousFormConfig) {
                       this.handleOnClickSetActiveForm(previousFormConfig.key, undefined);
@@ -10373,6 +10547,7 @@
                       this.showFormFields = false;
                   }
                   break;
+              }
               default:
                   break;
           }
@@ -10736,7 +10911,11 @@
       return KwikIDFormViewModule;
   }());
   /** @nocollapse */ KwikIDFormViewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormViewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  /** @nocollapse */ KwikIDFormViewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormViewModule, declarations: [KwikIDFormViewComponent, StyleSanitizerPipe, TimerPipe], imports: [i3$2.CommonModule,
+  /** @nocollapse */ KwikIDFormViewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormViewModule, declarations: [KwikIDFormViewComponent,
+          StyleSanitizerPipe,
+          TimerPipe,
+          FilterImageUrlOrBase64FromObjectPipe,
+          FilterVideoUrlOrBase64FromObjectPipe], imports: [i3$2.CommonModule,
           i3.FormsModule,
           i3.ReactiveFormsModule,
           i5.TuiLabelModule,
@@ -10771,7 +10950,13 @@
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormViewModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      declarations: [KwikIDFormViewComponent, StyleSanitizerPipe, TimerPipe],
+                      declarations: [
+                          KwikIDFormViewComponent,
+                          StyleSanitizerPipe,
+                          TimerPipe,
+                          FilterImageUrlOrBase64FromObjectPipe,
+                          FilterVideoUrlOrBase64FromObjectPipe
+                      ],
                       imports: [
                           i3$2.CommonModule,
                           i3.FormsModule,