@bolttech/form-engine-core 0.0.1-beta.8 → 0.0.2-beta.1

package/index.esm.js

@@ -1,6 +1,6 @@
-import { Subscription, Subject, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map } from 'rxjs';
+import { Subject, Subscription, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map } from 'rxjs';
 import creditCardType from 'credit-card-type';
-import { isNumber as isNumber$1, isNil, isEqual, get, set } from 'lodash';
+import { isNumber as isNumber$1, isFunction, cloneDeep, isEqual, get, isNil, set } from 'lodash';
 import { getCurrencySymbol } from '@gaignoux/currency';
 
 var TMutationEnum;
@@ -44,6 +44,14 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+const DEFAULT_API_DEBOUNCE_TIME = 1000;
+const DEFAULT_STATE_REFRESH_TIME = 100;
+const TEMPLATE_REGEX_STRING_CONCATENATION_DETECTOR = /^\$\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*\}$/;
+const TEMPLATE_REGEX_DELIMITATOR = /\$\{((?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*)\}/g;
+const TEMPLATE_REGEX_OPERATOR_SPLITTER = /\s*(\|\||&&|!)\s*/g;
+const TEMPLATE_REGEX_OPERATOR_MATCHER = /^\|\||&&|!$/;
+const TEMPLATE_AVALIABLE_SCOPES = ['fields', 'iVars'];
+
 /**
  * Makes an HTTP request using XMLHttpRequest.
  *
@@ -96,15 +104,18 @@ function makeRequest(method, url, headers, body) {
  * ```
  */
 function extractFieldKeys(expression) {
-  const regex = /\${(.*?)}/g;
+  const regex = TEMPLATE_REGEX_DELIMITATOR;
   const extractedValues = [];
   let match;
   while ((match = regex.exec(expression)) !== null) {
     extractedValues.push(match[1]);
   }
+  const operatorRegex = TEMPLATE_REGEX_OPERATOR_SPLITTER;
+  const splittedString = extractedValues.map(el => el.split(operatorRegex).filter(item => !operatorRegex.test(item))).flat().filter(el => el.split('.').length > 1);
   return {
-    originFieldKeys: Array.from(new Set(extractedValues.map(el => el.split('.')[0]))),
-    originPropertyKeys: Array.from(new Set(extractedValues.map(el => el.split('.')[1])))
+    originScopeKeys: Array.from(new Set(splittedString.map(el => el.split('.')[0]))),
+    originFieldKeys: Array.from(new Set(splittedString.map(el => el.split('.')[1]))),
+    originPropertyKeys: Array.from(new Set(splittedString.map(el => el.split('.')[2])))
   };
 }
 /**
@@ -132,43 +143,35 @@ function extractFieldKeys(expression) {
  * // expressions will contain an array of objects with origin expressions, field keys, and destination paths.
  * ```
  */
-function traverseObject(obj, path) {
+function traverseObject(element, path) {
   const result = [];
-  for (const key in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      const value = obj[key];
-      if (Array.isArray(value)) {
-        value.forEach((item, index) => {
-          if (typeof item === 'object') {
-            result.push(...traverseObject(item, `${path ? `${path}.` : ``}${key}.${index}`));
-          } else if (typeof item === 'string') {
-            if (String(item).includes('$')) {
-              // const extractedPath = item.replace(/\$|{|}/g, '').split('.');
-              const extractedOriginPath = `${path ? `${path}.` : ``}${key}`.split('.');
-              result.push(Object.assign(Object.assign({
-                originExpression: item
-              }, extractFieldKeys(item)), {
-                destinationKey: extractedOriginPath[0],
-                destinationProperty: extractedOriginPath[1],
-                destinationPath: extractedOriginPath.slice(2)
-              }));
-            }
-          }
-        });
-      } else if (typeof value === 'object') {
+  if (Array.isArray(element)) {
+    element.forEach((item, index) => {
+      result.push(...traverseObject(item, `${path ? `${path}.` : ``}${index}`));
+    });
+  } else if (typeof element === 'object') {
+    for (const key in element) {
+      if (Object.prototype.hasOwnProperty.call(element, key)) {
+        const value = element[key];
         result.push(...traverseObject(value, `${path ? `${path}.` : ``}${key}`));
-      } else if (typeof value === 'string') {
-        if (value.includes('$')) {
-          // const extractedPath = value.replace(/\$|{|}/g, '').split('.');
-          const destinationPath = `${path ? `${path}.` : ``}${key}`.split('.');
-          result.push(Object.assign(Object.assign({
-            originExpression: value
-          }, extractFieldKeys(value)), {
-            destinationKey: destinationPath[0],
-            destinationProperty: destinationPath[1],
-            destinationPath: destinationPath.slice(2)
-          }));
-        }
+      }
+    }
+  } else if (typeof element === 'string') {
+    if (element.includes('${')) {
+      // const extractedPath = value.replace(/\$|{|}/g, '').split('.');
+      const destinationPath = (path ? path : '').split('.');
+      // if(destinationPath[0])
+      const originfieldKeys = extractFieldKeys(element);
+      if (!originfieldKeys.originScopeKeys.every(scopeKey => TEMPLATE_AVALIABLE_SCOPES.includes(scopeKey))) {
+        console.warn(`scope malformed on this expression: ${element}, ignoring..`);
+      } else {
+        result.push(Object.assign(Object.assign({
+          originExpression: element
+        }, extractFieldKeys(element)), {
+          destinationKey: destinationPath[0],
+          destinationProperty: destinationPath[1],
+          destinationPath: destinationPath.slice(2)
+        }));
       }
     }
   }
@@ -681,16 +684,9 @@ const currency = (value, masks) => {
   if (integerPart === '') {
     integerPart = '0';
   }
-  console.log('Before', {
-    convertedValue
-  });
   if (align === 'right' && String(value).endsWith(' ')) {
     convertedValue = convertedValue.slice(0, -1);
   }
-  console.log('After', {
-    value,
-    convertedValue
-  });
   let newRawValue = integerPart;
   let decimalPart = convertedValue.slice(convertedValue.length - precision);
   if (precision > 0) {
@@ -729,10 +725,11 @@ const custom = (value, masks) => {
   if (!masks.custom || !value) return value;
   let mask = '';
   let index = 0;
+  const convertedValue = value.replace(/[^\w\s]/gi, '');
   for (let i = 0; i < masks.custom.length; i++) {
     if (masks.custom[i] === '#') {
-      if (index < value.length) {
-        mask += value[index];
+      if (index < convertedValue.length) {
+        mask += convertedValue[index];
         index++;
       } else {
         break;
@@ -1234,6 +1231,44 @@ const between = (value, validations) => {
   const num = Number(value);
   return !Number.isNaN(num) && !(+num >= validations.between.start && +num <= validations.between.end);
 };
+/**
+ * Checks if a given value is less than a specified threshold.
+ *
+ * @param value - The value to be checked. This value will be converted to a number.
+ * @param validations - An object containing validation methods, specifically the `lessThan` property which holds the threshold value.
+ * @returns Returns `false` if the `lessThan` threshold is not provided or if the value is not a valid number. Otherwise, returns `true` if the value is greater than or equal to the `lessThan` threshold.
+ *
+ * @example
+ * ```typescript
+ * const validations = { lessThan: 10 };
+ * console.log(lessThan(5, validations)); // true
+ * console.log(lessThan(15, validations)); // false
+ * ```
+ */
+const lessThan = (value, validations) => {
+  const number = Number(value);
+  if (!validations.lessThan || Number.isNaN(number)) return false;
+  return number >= validations.lessThan;
+};
+/**
+ * Checks if a given value is greater than a specified threshold.
+ *
+ * @param value - The value to be checked. This value will be converted to a number.
+ * @param validations - An object containing validation methods, specifically the `greaterThan` property which holds the threshold value.
+ * @returns Returns `false` if the `greaterThan` threshold is not provided or if the value is not a valid number. Otherwise, returns `true` if the value is less than or equal to the `greaterThan` threshold.
+ *
+ * @example
+ * ```typescript
+ * const validations = { greaterThan: 10 };
+ * console.log(greaterThan(15, validations)); // true
+ * console.log(greaterThan(5, validations)); // false
+ * ```
+ */
+const greaterThan = (value, validations) => {
+  const number = Number(value);
+  if (!validations.greaterThan || Number.isNaN(number)) return false;
+  return number <= validations.greaterThan;
+};
 /**
  * Validates if a value contains sequential numbers.
  *
@@ -1928,41 +1963,44 @@ const conditions = (value, validations) => {
 };
 
 /**
- * Validates if a date value falls between two specified dates.
+ * @internal
+ * Validates if a date string matches a specific date format.
+ * The function accepts strings with '/' or '-' separators and removes them before validating the format.
  *
- * @param {string} value - The date value to be validated in string format.
- * @param {TValidationMethods} validations - The validation methods object containing the betweenDates validation rules.
- * @returns {boolean} - Returns `true` if the date value fails the betweenDates validation, otherwise `false`.
+ * @param {string} value - The date string to be validated. It can contain '/' or '-' separators.
+ * @param {string} format - The expected date format. It can be one of the following:
+ *                          'DDMMYYYY', 'YYYYMMDD', 'YYYYDDMM', 'MMDDYYYY',
+ *                          'DMYYYY', 'YYYYMD', 'YYYYDM', 'MDYYYY'.
+ * @returns {boolean} - Returns `false` if the date string matches the specified format, otherwise `true`.
  *
  * @example
- * ```typescript
- * const validations = {
- *   betweenDates: [
- *     { origin: { value: '2023-01-01', format: 'yyyy-MM-dd' }, operator: '>=' },
- *     { origin: { value: '2023-12-31', format: 'yyyy-MM-dd' }, operator: '<=' }
- *   ]
- * };
+ * // Returns false
+ * invalidStringDate("25/07/1997", "DDMMYYYY");
  *
- * const result1 = betweenDates('2023-06-01', validations);
- * console.log(result1); // false (date is within the range)
+ * @example
+ * // Returns false
+ * invalidStringDate("1997-07-25", "YYYYMMDD");
  *
- * const result2 = betweenDates('2024-01-01', validations);
- * console.log(result2); // true (date is outside the range)
- * ```
+ * @example
+ * // Returns true, as the format does not match
+ * invalidStringDate("1997/25/07", "MMDDYYYY");
  */
-const betweenDates = (value, validations) => {
-  var _a;
-  let fail = false;
-  if (((_a = validations.betweenDates) === null || _a === void 0 ? void 0 : _a.length) != 2) return false;
-  for (const validation of validations.betweenDates) {
-    if (date(value, {
-      date: validation
-    })) {
-      fail = true;
-      break;
-    }
+const invalidStringDate = (value, format) => {
+  if (!value.includes('/') && !value.includes('-') || !format) {
+    return true;
   }
-  return fail;
+  const valueParts = value.replace(/[-/]/g, '');
+  const dateMapper = {
+    DDMMYYYY: /^(\d{2})(\d{2})(\d{4})$/,
+    YYYYMMDD: /^(\d{4})(\d{2})(\d{2})$/,
+    YYYYDDMM: /^(\d{4})(\d{2})(\d{2})$/,
+    MMDDYYYY: /^(\d{2})(\d{2})(\d{4})$/,
+    DMYYYY: /^(\d{1,2})(\d{1,2})(\d{4})$/,
+    YYYYMD: /^(\d{4})(\d{1,2})(\d{1,2})$/,
+    YYYYDM: /^(\d{4})(\d{1,2})(\d{1,2})$/,
+    MDYYYY: /^(\d{1,2})(\d{1,2})(\d{4})$/
+  };
+  return !dateMapper[format].test(valueParts);
 };
 /**
  * @internal
@@ -2015,6 +2053,44 @@ const dateRearrangeMapper = {
   MMDDYYYY: value => value,
   timestamp: value => new Date(value).toString()
 };
+/**
+ * @function betweenDates
+ * Validates if a date value falls between two specified dates.
+ *
+ * @param {string} value - The date value to be validated in string format.
+ * @param {TValidationMethods} validations - The validation methods object containing the betweenDates validation rules.
+ * @returns {boolean} - Returns `true` if the date value fails the betweenDates validation, otherwise `false`.
+ *
+ * @example
+ * ```typescript
+ * const validations = {
+ *   betweenDates: [
+ *     { origin: { value: '2023-01-01', format: 'yyyy-MM-dd' }, operator: '>=' },
+ *     { origin: { value: '2023-12-31', format: 'yyyy-MM-dd' }, operator: '<=' }
+ *   ]
+ * };
+ *
+ * const result1 = betweenDates('2023-06-01', validations);
+ * console.log(result1); // false (date is within the range)
+ *
+ * const result2 = betweenDates('2024-01-01', validations);
+ * console.log(result2); // true (date is outside the range)
+ * ```
+ */
+const betweenDates = (value, validations) => {
+  var _a;
+  let fail = false;
+  if (((_a = validations.betweenDates) === null || _a === void 0 ? void 0 : _a.length) != 2) return false;
+  for (const validation of validations.betweenDates) {
+    if (date(value, {
+      date: validation
+    })) {
+      fail = true;
+      break;
+    }
+  }
+  return fail;
+};
 /**
  * @function date
  * Validates a date value based on various date conditions and intervals.
@@ -2048,12 +2124,13 @@ const dateRearrangeMapper = {
  * ```
  */
 const date = (value, validations) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
   if (!((_b = (_a = validations.date) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value) && !((_d = (_c = validations.date) === null || _c === void 0 ? void 0 : _c.origin) === null || _d === void 0 ? void 0 : _d.intervals)) {
     return false;
   }
   const originValue = validations.date.origin.value || value;
-  let originDate = new Date(dateRearrangeMapper[(_e = validations.date) === null || _e === void 0 ? void 0 : _e.origin.format](originValue).toString());
+  const mappedValue = dateRearrangeMapper[(_e = validations.date) === null || _e === void 0 ? void 0 : _e.origin.format](originValue).toString();
+  let originDate = new Date(mappedValue);
   let targetDate = new Date();
   let target = new Date();
   if ((_g = (_f = validations.date) === null || _f === void 0 ? void 0 : _f.target) === null || _g === void 0 ? void 0 : _g.format) {
@@ -2072,6 +2149,9 @@ const date = (value, validations) => {
   if (validations.date.onlyValidDate && (!(targetDate instanceof Date && isFinite(targetDate)) || !(targetDate instanceof Date && isFinite(originDate)) || originValue.length < 8)) {
     return true;
   }
+  if (invalidStringDate(mappedValue, (_l = validations.date) === null || _l === void 0 ? void 0 : _l.origin.format)) {
+    return false;
+  }
   const originTimestamp = originDate.getTime();
   const targetTimestamp = targetDate.getTime();
   const operationsMapper = {
@@ -2082,7 +2162,7 @@ const date = (value, validations) => {
     '===': originTimestamp === targetTimestamp,
     '!==': originTimestamp !== targetTimestamp
   };
-  return operationsMapper[(_l = validations.date) === null || _l === void 0 ? void 0 : _l.operator];
+  return operationsMapper[(_m = validations.date) === null || _m === void 0 ? void 0 : _m.operator];
 };
 /**
  * @function validDate
@@ -2111,11 +2191,74 @@ const validDate = (value, validations) => {
   const month = parseInt(dateParts[0], 10) - 1; // Month is zero-based
   const day = parseInt(dateParts[1], 10);
   const date = new Date(year, month, day);
+  /*
+   * Motivation: due to the scenario in which a date field may be 'typeable',
+   * we need to ensure that dates less than a thousand and such years are valid.
+   * E.g.: user types 13-07-199 (without this condition, it becomes a valid date, as 199 is a valid year)
+   *
+   * Ps: 150 is a valid value for now, as we still cannot live more than that, from the
+   * the moment we start to live longer, we can rethink this.
+   */
+  const today = new Date();
+  today.setFullYear(today.getFullYear() - 150);
+  if (date.getFullYear() < today.getFullYear()) {
+    return true;
+  }
   // Check if the date is valid
   const isValidDate = date.getFullYear() === year && date.getMonth() === month && date.getDate() === day;
   return !isValidDate;
 };
 
+/**
+ * @internal
+ * Runs a set of validation handlers against a given value.
+ *
+ * @param {unknown} value - The value to be validated.
+ * @param {TValidationMethods} handlers - An object containing validation methods to be applied.
+ * @param {TValidationHandler} validations - An object containing every validation methods to be executed.
+ * @returns {boolean[]} - An array of boolean results for each validation method.
+ *
+ * @example
+ * const handlers = {
+ *   max: { max: 10 },
+ *   required: true,
+ *   email: true
+ * };
+ * const results = run('test@example.com', handlers);
+ * console.log(results); // [false, false, true] (value fails 'max', passes 'required', passes 'email')
+ */
+function run$1(value, handlers, validations) {
+  const runner = [];
+  Object.keys(handlers).forEach(rule => {
+    runner.push(validations[rule](value, {
+      [rule]: handlers[rule]
+    }));
+  });
+  return runner;
+}
+/**
+ * Validates a given value based on specified validation methods inside a custom named validation.
+ *
+ * @param {unknown} value - The value to be validated.
+ * @param {TValidationMethods} methods - The validation methods to be applied.
+ * @param {TValidationHandler} validations - An object containing every validation methods to be executed.
+ * @returns {boolean} - Returns true if any of the validation methods pass, otherwise false.
+ *
+ * @example
+ * const value = 'example@example.com';
+ * const methods = {
+ *   required: true,
+ *   email: true
+ * };
+ *
+ * const isValid = validateValue(value, methods);
+ * console.log(isValid); // Output: true
+ */
+var namedRule = ((value, methods, validations) => {
+  if (!methods) return false;
+  return run$1(value, methods, validations).some(validation => validation);
+});
+
 /**
  * @internal
  * An object mapping validation keys to their respective validation functions.
@@ -2129,6 +2272,8 @@ const validDate = (value, validations) => {
 const validations$1 = {
   max,
   min,
+  lessThan,
+  greaterThan,
   length,
   regex,
   url,
@@ -2150,7 +2295,6 @@ const validations$1 = {
   notEmpty,
   bool,
   exists,
-  greaterThan: () => true,
   isNumber,
   conditions,
   validDate,
@@ -2174,20 +2318,26 @@ const validations$1 = {
  * const results = run('test@example.com', handlers);
  * console.log(results); // [false, false, true] (value fails 'max', passes 'required', passes 'email')
  */
-const run = (value, handlers) => {
+function run(value, handlers) {
   const runner = [];
   Object.keys(handlers).forEach(rule => {
-    runner.push(validations$1[rule](value, {
-      [rule]: handlers[rule]
-    }));
+    let handler;
+    if (isFunction(validations$1[rule])) {
+      handler = validations$1[rule](value, {
+        [rule]: handlers[rule]
+      });
+    } else {
+      handler = namedRule(value, handlers[rule], validations$1);
+    }
+    runner.push(handler);
   });
   return runner;
-};
+}
 /**
  * Validates that a value meets multiple validation rules.
  *
  * @param {number | string | boolean} value - The value to be validated.
- * @param {TValidationMethods} validations - The validation methods object containing the multipleValidations rule set.
+ * @param {TValidationMethods} methods - The validation methods object containing the multipleValidations rule set.
  * @returns {boolean} - Returns `true` if the value meets the specified multiple validation rules, otherwise `false`.
  *
  * @example
@@ -2212,20 +2362,22 @@ const run = (value, handlers) => {
  * console.log(result2); // false
  * ```
  */
-const multipleValidations = (value, validations) => {
-  if (!validations.multipleValidations) return false;
-  const runner = run(value, validations.multipleValidations.validations);
+const multipleValidations = (value, methods) => {
+  if (!methods.multipleValidations) return false;
+  const runner = run(value, methods.multipleValidations.validations);
   const rulesMapper = {
     AND: () => runner.every(validation => validation),
     OR: () => runner.some(validation => validation),
     NOT: () => !runner.every(validation => validation)
   };
-  return rulesMapper[validations.multipleValidations.rule]();
+  return rulesMapper[methods.multipleValidations.rule]();
 };
 
 const validations = {
   max,
   min,
+  lessThan,
+  greaterThan,
   length,
   regex,
   url,
@@ -2247,7 +2399,6 @@ const validations = {
   notEmpty,
   bool,
   exists,
-  greaterThan: () => true,
   isNumber,
   conditions,
   multipleValidations,
@@ -2256,8 +2407,52 @@ const validations = {
   validDate
 };
 
-const DEFAULT_API_DEBOUNCE_TIME = 1000;
-const DEFAULT_STATE_REFRESH_TIME = 100;
+/**
+ * Custom RXJS Subject to gracefully handle errors on unsubscribed Subjects
+ * that were unmounted due to adapter external handling such as visibility
+ */
+class SafeSubject extends Subject {
+  constructor(isMounted) {
+    super();
+    this.isMounted = isMounted;
+  }
+  next(value) {
+    if (this.isMounted()) {
+      super.next(value);
+    }
+  }
+}
+
+/**
+ * @internal
+ * Handles the validation of a given value based on specified validation methods and rules.
+ *
+ * @param {string | number | boolean | unknown} value - The value to be validated.
+ * @param {TSchemaValidation} validations - The schema validations to be applied.
+ * @param {TValidationHandler} methods - The validation handler methods.
+ * @param {keyof TValidationMethods} key - The specific key of the validation method to be used.
+ * @returns {boolean} - Returns true if the value passes the validation, otherwise false.
+ *
+ * @example
+ * const value = 'example@example.com';
+ * const validations = {
+ *   required: true,
+ *   customName: { email: true }
+ * };
+ * const methods = {
+ *   email: (value) => /\S+@\S+\.\S+/.test(value)
+ * };
+ * const key = 'required';
+ *
+ * const isValid = handleValidation(value, validations, methods, key);
+ * console.log(isValid); // Output: true
+ */
+function handleValidation(value, validations, methods, key) {
+  if (isFunction(methods[key])) {
+    return methods[key](value, validations);
+  }
+  return namedRule(value, validations[key], methods);
+}
 
 /**
  * Represents a form field with observables for managing form state, validations, and API requests.
@@ -2290,25 +2485,27 @@ class FormField {
     mapper
   }) {
     var _a, _b, _c, _d, _e, _f, _g;
+    this.valueSubscription$ = new Subscription();
     this.fieldStateSubscription$ = new Subscription();
-    this.originalSchema = schemaComponent;
+    this.originalSchema = cloneDeep(schemaComponent);
     this.config = {
       defaultAPIdebounceTimeMS: Number(config === null || config === void 0 ? void 0 : config.defaultAPIdebounceTimeMS) ? Number(config === null || config === void 0 ? void 0 : config.defaultAPIdebounceTimeMS) : DEFAULT_API_DEBOUNCE_TIME,
       defaultStateRefreshTimeMS: Number(config === null || config === void 0 ? void 0 : config.defaultStateRefreshTimeMS) ? Number(config === null || config === void 0 ? void 0 : config.defaultStateRefreshTimeMS) : DEFAULT_STATE_REFRESH_TIME
     };
     this.name = schemaComponent.name;
+    this.nameToSubmit = schemaComponent.nameToSubmit;
     this.component = schemaComponent.component;
     this.path = path;
     this.children = children;
     this.validations = schemaComponent.validations;
-    this.errorMessages = schemaComponent.errorMessages;
+    this.errorMessages = (_a = schemaComponent.validations) === null || _a === void 0 ? void 0 : _a.messages;
     this.visibilityConditions = schemaComponent.visibilityConditions;
     this.resetValues = schemaComponent.resetValues;
     this.apiSchema = schemaComponent.api;
     this.formatters = schemaComponent.formatters;
     this.masks = schemaComponent.masks;
     if (mapper.valueChangeEvent) this.valueChangeEvent = mapper.valueChangeEvent;
-    if ((_a = mapper.events) === null || _a === void 0 ? void 0 : _a.setValue) this.valuePropName = mapper.events.setValue;
+    if ((_b = mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) this.valuePropName = mapper.events.setValue;
     this.mapper = mapper;
     this.validateVisibility = validateVisibility;
     this.resetValue = resetValue;
@@ -2316,10 +2513,6 @@ class FormField {
     this.fieldEventSubject$ = fieldEventSubject$;
     this.dataSubject$ = dataSubject$;
     this._props = schemaComponent.props || {};
-    this._value = '';
-    this._stateValue = ((_b = this.mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) ? {
-      [this.mapper.events.setValue]: ''
-    } : {};
     this._metadata = '';
     this.errorsString = '';
     this.errorsList = [];
@@ -2339,7 +2532,9 @@ class FormField {
     };
     this._errors = {};
     this._valid = false;
+    this._mounted = true;
     this.initializeObservers();
+    this.value = this.initialValue || '';
   }
   /**
    * method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
@@ -2347,25 +2542,25 @@ class FormField {
   initializeObservers() {
     var _a;
     if (!this.valueSubject$ || this.valueSubject$.closed) {
-      this.valueSubject$ = new Subject();
+      this.valueSubject$ = new SafeSubject(() => this._mounted);
     }
     if (!this.errorSubject$ || this.errorSubject$.closed) {
-      this.errorSubject$ = new Subject();
+      this.errorSubject$ = new SafeSubject(() => this._mounted);
     }
     if (!this.visibilitySubject$ || this.visibilitySubject$.closed) {
-      this.visibilitySubject$ = new Subject();
+      this.visibilitySubject$ = new SafeSubject(() => this._mounted);
     }
     if (!this.apiSubject$ || this.apiSubject$.closed) {
-      this.apiSubject$ = new Subject();
+      this.apiSubject$ = new SafeSubject(() => this._mounted);
     }
     if (!this.propsSubject$ || this.propsSubject$.closed) {
-      this.propsSubject$ = new Subject();
+      this.propsSubject$ = new SafeSubject(() => this._mounted);
     }
     if (!this.fieldStateSubscription$ || this.fieldStateSubscription$.closed) {
       this.fieldStateSubscription$ = new Subscription();
     }
     if (!this.apiEventQueueSubject$ || this.apiEventQueueSubject$.closed) {
-      this.apiEventQueueSubject$ = new Subject();
+      this.apiEventQueueSubject$ = new SafeSubject(() => this._mounted);
     }
     this.fieldState$ = combineLatest({
       visibility: this.visibilitySubject$.pipe(startWith(this._visibility)),
@@ -2379,9 +2574,6 @@ class FormField {
     }) => event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultAPIdebounceTimeMS))), filter(() => this.apiSubject$ && !this.apiSubject$.closed)).subscribe(payload => {
       this.apiRequest(payload);
     });
-    if (!isNil(this.initialValue)) {
-      this.value = this.initialValue;
-    }
   }
   /**
    * Retrieves the properties associated with the form field.
@@ -2401,6 +2593,7 @@ class FormField {
     this._props = props;
     this.propsSubject$.next(this.props);
     this.templateSubject$.next({
+      scope: 'fields',
       key: this.name,
       event: 'ON_PROPS'
     });
@@ -2464,6 +2657,7 @@ class FormField {
     }
     this.stateValue && this.valueSubject$.next(this.stateValue);
     this.templateSubject$.next({
+      scope: 'fields',
       key: this.name,
       event: 'ON_VALUE'
     });
@@ -2484,8 +2678,26 @@ class FormField {
   set visibility(visible) {
     if (typeof visible === 'undefined' || visible === this.visibility) return;
     this._visibility = visible;
+    /**
+     * I was sure I would not require to gambiarra, but..
+     * in order to ignore an hidden value on a form submit
+     * or revalidate it when it comes back to visibility
+     * I needed to...
+     * I don't recommend setting private properties like this
+     * this will force the field to be valid when it's hidden
+     * and trigger the validation when it's visible
+     */
+    if (!this.visibility) {
+      this.value = '';
+      this._valid = true;
+    } else {
+      this.setFieldValidity({
+        event: 'ON_FIELD_MOUNT'
+      });
+    }
     this.visibilitySubject$.next(this.visibility);
     this.templateSubject$.next({
+      scope: 'fields',
       key: this.name,
       event: 'ON_VISIBILITY'
     });
@@ -2518,12 +2730,13 @@ class FormField {
     this.errorsList = Object.values(this.errors);
     this.errorsString = this.errorsList.join(', ');
     /**
-     * if any error receieves a list of errors, set a prop for it, currently only supporting a single string
+     * if any error receives a list of errors, set a prop for it, currently only supporting a single string
      */
     ((_a = this.mapper.events) === null || _a === void 0 ? void 0 : _a.setErrorMessage) && this.errorSubject$.next({
       [this.mapper.events.setErrorMessage]: this.errorsString
     });
     this.templateSubject$.next({
+      scope: 'fields',
       key: this.name,
       event: 'ON_PROPS'
     });
@@ -2546,6 +2759,7 @@ class FormField {
     this._api = response;
     this.apiSubject$.next(this.api);
     this.templateSubject$.next({
+      scope: 'fields',
       key: this.name,
       event: 'ON_API'
     });
@@ -2569,6 +2783,7 @@ class FormField {
     this.initializeObservers();
     this.subscribeValue(valueSubscription);
     this.subscribeState(propsSubscription);
+    this._mounted = true;
   }
   /**
    * Sets the value of the form field and emits associated events.
@@ -2625,49 +2840,43 @@ class FormField {
   setFieldValidity({
     event
   }) {
-    var _a;
-    if (!this.validations) {
+    var _a, _b, _c, _d;
+    if (!this.validations || !this.visibility) {
+      this.errors = {};
       this._valid = true;
       return;
     }
-    /*
-      @TODO evaluate if _valid flag needs to be updated on all events, this condition saves resources,
-      currently form submition needs to be controlled with form instance submit property function that
-      will evaluate if all fields are valid regardless the events that triggers error messages
-    */
-    if (!this.validations.events.includes(event) && event !== 'ON_FORM_SUBMIT') return;
     let valid = true;
-    const errors = Object.assign({}, this.errors);
-    const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.config;
+    const errors = {};
+    const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.methods;
     schemaValidations && Object.keys(schemaValidations).forEach(validationKey => {
-      var _a, _b;
-      const error = validations[validationKey](this.value, schemaValidations);
+      const error = handleValidation(this.value, schemaValidations, validations, validationKey);
       // setting valid flag
       valid = !error && valid;
       // setting error messages
-      if (((_a = this.validations) === null || _a === void 0 ? void 0 : _a.events.includes(event)) || event === 'ON_FORM_SUBMIT') {
-        if (error && ((_b = this.errorMessages) === null || _b === void 0 ? void 0 : _b[validationKey])) {
-          errors[validationKey] = this.errorMessages[validationKey];
-        } else {
-          delete errors[validationKey];
+      if (error && this.errorMessages) {
+        if (validationKey in this.errorMessages) {
+          const messages = this.errorMessages;
+          errors[validationKey] = messages[validationKey];
+        } else if ('default' in this.errorMessages) {
+          errors[validationKey] = this.errorMessages.default;
         }
+      } else {
+        delete errors[validationKey];
       }
     });
     this._valid = valid;
-    this.errors = errors;
-  }
-  /**
-   * WIP expensive function to get updated field validity on each event
-   */
-  updateValidityFlag() {
-    var _a;
-    let valid = true;
-    const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.config;
-    schemaValidations && Object.keys(schemaValidations).forEach(validationKey => {
-      const error = validations[validationKey](this.value, schemaValidations);
-      valid = !error && valid;
-    });
-    this._valid = valid;
+    if ((_c = (_b = this.validations) === null || _b === void 0 ? void 0 : _b.eventMessages) === null || _c === void 0 ? void 0 : _c[event]) {
+      const eventMessages = {};
+      (_d = this.validations.eventMessages[event]) === null || _d === void 0 ? void 0 : _d.forEach(method => {
+        if (method in errors) {
+          eventMessages[method] = errors[method];
+        }
+      });
+      this.errors = eventMessages;
+    } else if (event === 'ON_FORM_SUBMIT') {
+      this.errors = errors;
+    }
   }
   /**
    * Formats the field value using the specified formatters, if available.
@@ -2701,7 +2910,7 @@ class FormField {
     let valid = true;
     const preConditions = config.preConditions;
     preConditions && Object.keys(preConditions).forEach(validationKey => {
-      const error = validations[validationKey](this.value, preConditions);
+      const error = handleValidation(this.value, preConditions, validations, validationKey);
       valid = valid && !error;
     });
     if (config.blockRequestWhenInvalid) {
@@ -2720,6 +2929,17 @@ class FormField {
   }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     return __awaiter(this, void 0, void 0, function* () {
+      const configRequest = config => __awaiter(this, void 0, void 0, function* () {
+        try {
+          const responseData = yield makeRequest(config.method, config.url, config.headers, config.body);
+          const apiResponseData = JSON.parse(String(responseData));
+          const response = config.resultPath ? get(apiResponseData, config.resultPath) : apiResponseData;
+          // this.apiResponseData = { response };
+          return response;
+        } catch (e) {
+          return !isNil(config === null || config === void 0 ? void 0 : config.fallbackValue) ? config.fallbackValue : 'error';
+        }
+      });
       if (!((_b = (_a = this.apiSchema) === null || _a === void 0 ? void 0 : _a.defaultConfig) === null || _b === void 0 ? void 0 : _b.events.includes(event)) && !(((_c = this.apiSchema) === null || _c === void 0 ? void 0 : _c.configs) && Object.keys((_d = this.apiSchema) === null || _d === void 0 ? void 0 : _d.configs).some(key => {
         var _a, _b;
         return (_b = (_a = this.apiSchema) === null || _a === void 0 ? void 0 : _a.configs) === null || _b === void 0 ? void 0 : _b[key].events.includes(event);
@@ -2730,19 +2950,10 @@ class FormField {
       };
       const config = (_e = this.apiSchema.defaultConfig) === null || _e === void 0 ? void 0 : _e.config;
       if (config && ((_g = (_f = this.apiSchema) === null || _f === void 0 ? void 0 : _f.defaultConfig) === null || _g === void 0 ? void 0 : _g.events.includes(event)) && this.checkApiRequestValidations(config)) {
-        try {
-          const responseData = yield makeRequest(config.method, config.url, config.headers, config.body);
-          const apiResponseData = JSON.parse(String(responseData));
-          const response = config.resultPath ? get(apiResponseData, config.resultPath) : apiResponseData;
-          // this.apiResponseData = { response };
-          responses.default = {
-            response
-          };
-        } catch (e) {
-          responses.default = {
-            response: !isNil(config === null || config === void 0 ? void 0 : config.fallbackValue) ? config.fallbackValue : 'error'
-          };
-        }
+        const response = yield configRequest(config);
+        responses.default = {
+          response
+        };
       }
       if (((_h = this.apiSchema) === null || _h === void 0 ? void 0 : _h.configs) && Object.keys((_j = this.apiSchema) === null || _j === void 0 ? void 0 : _j.configs).some(key => {
         var _a, _b;
@@ -2753,38 +2964,21 @@ class FormField {
             @TODO handle promises with error
           */
           const result = yield Promise.all(Object.keys(this.apiSchema.configs).map(configKey => __awaiter(this, void 0, void 0, function* () {
-            return new Promise(res => {
-              var _a, _b, _c, _d;
-              const config = (_b = (_a = this.apiSchema) === null || _a === void 0 ? void 0 : _a.configs) === null || _b === void 0 ? void 0 : _b[configKey].config;
-              if (config && ((_d = (_c = this.apiSchema) === null || _c === void 0 ? void 0 : _c.configs) === null || _d === void 0 ? void 0 : _d[configKey].events.includes(event)) && this.checkApiRequestValidations(config)) {
-                try {
-                  makeRequest(config.method, config.url, config.headers, config.body).then(responseData => {
-                    const apiResponseData = JSON.parse(String(responseData));
-                    const response = get(apiResponseData, config.resultPath || '');
-                    res({
-                      name: configKey,
-                      result: {
-                        response
-                      }
-                    });
-                    // responses.named![configKey] = { response };
-                  });
-                } catch (e) {
-                  res({
-                    name: configKey,
-                    result: {
-                      response: !isNil(config.fallbackValue) ? config.fallbackValue : 'error'
-                    }
-                  });
+            var _k, _l, _m, _o;
+            const config = (_l = (_k = this.apiSchema) === null || _k === void 0 ? void 0 : _k.configs) === null || _l === void 0 ? void 0 : _l[configKey].config;
+            if (config && ((_o = (_m = this.apiSchema) === null || _m === void 0 ? void 0 : _m.configs) === null || _o === void 0 ? void 0 : _o[configKey].events.includes(event)) && this.checkApiRequestValidations(config)) {
+              const response = yield configRequest(config);
+              return {
+                name: configKey,
+                result: {
+                  response
                 }
-              }
-            });
+              };
+            }
+            return null;
           })));
-          result.forEach(({
-            name,
-            result
-          }) => {
-            if (responses.named) responses.named[name] = result;
+          result.forEach(payload => {
+            if (payload && responses.named) responses.named[payload.name] = payload.result;
           });
         }
       }
@@ -2797,7 +2991,8 @@ class FormField {
    * @returns {void}
    */
   destroyField() {
-    this.valueSubject$.unsubscribe();
+    this._mounted = false;
+    this.valueSubscription$.unsubscribe();
     this.visibilitySubject$.unsubscribe();
     this.fieldStateSubscription$.unsubscribe();
     this.propsSubject$.unsubscribe();
@@ -2823,13 +3018,12 @@ class FormField {
    * @returns {void}
    */
   subscribeValue(callback) {
-    this.valueSubject$.subscribe({
+    this.valueSubscription$ = this.valueSubject$.subscribe({
       next: callback
     });
   }
 }
 
-const IVARPROPNAME = 'iVars';
 /**
  * Represents the core logic for managing a form, including field management, validation, and submission.
  */
@@ -2843,38 +3037,39 @@ class FormCore {
    * @param {string} [entry.action] - The action attribute of the form.
    * @param {string} [entry.method] - The method attribute of the form.
    * @param {IFormSchema.iVars} [entry.iVars] - The internal variables of the form.
-   * @param {(data: TFormValues) => void} [entry.onSubmit] - A callback function to handle form submission.
    * @param {((payload: {field: string;data: TFormValues;}) => void) | undefined} [entry.onData] - A callback function to handle data emission.
    */
   constructor(entry) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    this.templateSubscription$ = new Subscription();
+    this.mappers = new Map();
     this.schema = entry.schema;
     this.fields = new Map();
     this.initialValues = entry.initialValues || ((_a = entry.schema) === null || _a === void 0 ? void 0 : _a.initialValues);
     this.action = entry.action || ((_b = entry.schema) === null || _b === void 0 ? void 0 : _b.action);
     this.method = entry.method || ((_c = entry.schema) === null || _c === void 0 ? void 0 : _c.method);
     this._iVars = entry.iVars || ((_d = entry.schema) === null || _d === void 0 ? void 0 : _d.iVars) || {};
-    this.onSubmit = entry.onSubmit;
     this.config = {
       defaultAPIdebounceTimeMS: Number((_e = entry.config) === null || _e === void 0 ? void 0 : _e.defaultAPIdebounceTimeMS) ? Number((_f = entry.config) === null || _f === void 0 ? void 0 : _f.defaultAPIdebounceTimeMS) : DEFAULT_API_DEBOUNCE_TIME,
       defaultStateRefreshTimeMS: Number((_g = entry.config) === null || _g === void 0 ? void 0 : _g.defaultStateRefreshTimeMS) ? Number((_h = entry.config) === null || _h === void 0 ? void 0 : _h.defaultStateRefreshTimeMS) : DEFAULT_STATE_REFRESH_TIME
     };
-    this.mappers = entry.mappers;
+    (_j = entry.mappers) === null || _j === void 0 ? void 0 : _j.map(mapper => {
+      this.mappers.set(mapper.componentName, mapper);
+    });
     this.schema && FormCore.checkIndexes(this.schema.components);
     this.templateSubject$ = new Subject();
     this.submitSubject$ = new Subject();
     this.fieldEventSubject$ = new Subject();
     this.dataSubject$ = new Subject();
-    this.dataCallbackSubscription$ = new Subscription();
+    this.mountSubject$ = new Subject();
     this.subscribedTemplates = [];
     this.schema && this.serializeStructure(this.schema.components);
     this.schema && this.subscribeTemplates();
-    this.templateSubject$.subscribe(this.refreshTemplates.bind(this));
+    this.templateSubscription$ = this.templateSubject$.subscribe(this.refreshTemplates.bind(this));
     this.templateSubject$.next({
-      key: IVARPROPNAME,
+      scope: 'iVars',
       event: 'ON_IVARS'
     });
-    entry.onData && this.subscribeData(entry.onData);
     /*
       mount events needs to occur on form level, only when all the fields are instantiated
       is it possible to apply all the side effects that occur globally, same effect occur
@@ -2885,6 +3080,7 @@ class FormCore {
         event: 'ON_FIELD_MOUNT'
       });
       this.refreshTemplates({
+        scope: 'fields',
         key,
         event: 'ON_FIELDS'
       });
@@ -2906,7 +3102,7 @@ class FormCore {
   set iVars(payload) {
     this._iVars = payload;
     this.templateSubject$.next({
-      key: IVARPROPNAME,
+      scope: 'iVars',
       event: 'ON_IVARS'
     });
   }
@@ -2934,7 +3130,6 @@ class FormCore {
         validations,
         visibilityConditions,
         resetValues,
-        errorMessages,
         api
       }
     }, key) => {
@@ -2945,26 +3140,11 @@ class FormCore {
         validations,
         visibilityConditions,
         resetValues,
-        errorMessages,
         apiSchema: api
       };
       traverseObject(template, key).forEach(element => this.subscribedTemplates.push(element));
     });
   }
-  /**
-   *
-   * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
-   */
-  subscribeData(callback) {
-    this.dataCallbackSubscription$ = this.dataSubject$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS), map(({
-      key
-    }) => ({
-      field: key,
-      data: this.getFormValues()
-    }))).subscribe({
-      next: callback
-    });
-  }
   /**
    * Gets the value of a property from a field.
    *
@@ -2975,20 +3155,27 @@ class FormCore {
    * @returns {unknown | undefined} The value of the property, or undefined if the field doesn't exist.
    */
   getValue({
+    scope,
     key,
     property,
     path
   }) {
-    if (key === IVARPROPNAME) {
-      const value = get(this.iVars, [property, ...path]);
-      return value;
-    }
-    const field = this.fields.get(key);
-    if (!field) return console.warn(`failed to get value from ${key}`);
-    if (property === 'props' && path[0] === field.valuePropName) {
-      return field.stateValue;
+    switch (scope) {
+      case 'iVars':
+        {
+          const value = get(this.iVars, [key, ...(property ? [property] : []), ...path]);
+          return value;
+        }
+      case 'fields':
+        {
+          const field = this.fields.get(key);
+          if (!field) return console.warn(`failed to get value from ${key}`);
+          if (property === 'props' && path[0] === field.valuePropName) {
+            return field.stateValue;
+          }
+          return path.length > 0 ? get(field[property], path) : field[property];
+        }
     }
-    return path.length > 0 ? get(field[property], path) : field[property];
   }
   /**
    * Sets the value of a property in a field.
@@ -3051,27 +3238,26 @@ class FormCore {
    * @returns {string[]} An array of extracted parameters.
    */
   extractParams(expression) {
-    const regex = /\${(.*?)}/g;
     const extractedValues = [];
     let match;
-    while (!isNil(match = regex.exec(expression))) {
+    while (!isNil(match = TEMPLATE_REGEX_DELIMITATOR.exec(expression))) {
       extractedValues.push(match[1]);
     }
-    const operatorRegex = /\s*(\|\||&&|!)\s*/g;
-    const splittedString = extractedValues.map(el => el.split(operatorRegex));
+    const splittedString = extractedValues.map(el => el.split(TEMPLATE_REGEX_OPERATOR_SPLITTER));
     const result = splittedString.map(splittedStringVal => {
       return splittedStringVal.filter(Boolean).reduce((acc, curr) => {
-        if (curr.match(/^\|\||&&|!$/)) {
+        if (curr.match(TEMPLATE_REGEX_OPERATOR_MATCHER)) {
           return `${acc}${curr}`;
         }
         let value;
         // check if element is in dot notation to get from field instances
         const element = curr.split('.');
         const currElementContent = element.length > 1 ? this.getValue({
-          key: element[0],
-          property: element[1],
-          path: element.slice(2)
-        }) : element;
+          scope: element[0],
+          key: element[1],
+          property: element[2],
+          path: element.slice(3)
+        }) : curr;
         let currValue;
         // if any parsable content was passed to the conditions, parse them
         // required to be able to apply conditions
@@ -3092,6 +3278,11 @@ class FormCore {
           case 'object':
             if (currValue === null) {
               value = null;
+              break;
+            }
+            if (currValue instanceof Date) {
+              value = `new Date(\`${currValue}\`)`;
+              break;
             }
             value = JSON.stringify(currValue);
             break;
@@ -3118,8 +3309,8 @@ class FormCore {
    * @returns {string} The expression string with the replacements made.
    */
   replaceExpression(expression, values) {
-    const regex = /\${(.*?)}/g;
-    return expression.replace(regex, () => values.shift() || '');
+    const regex = TEMPLATE_REGEX_DELIMITATOR;
+    return expression.replace(regex, () => String(values.shift()) || '');
   }
   /**
    * Checks if an expression string contains string concatenation within a marked expression.
@@ -3128,8 +3319,7 @@ class FormCore {
    * @returns {boolean} True if the expression contains string concatenation, otherwise false.
    */
   hasStringConcatenation(expression) {
-    const regex = /^\${[^${}]*}$/;
-    return !regex.test(expression);
+    return !TEMPLATE_REGEX_STRING_CONCATENATION_DETECTOR.test(expression);
   }
   /**
    * Refreshes templates with updated values.
@@ -3149,7 +3339,7 @@ class FormCore {
       originExpression,
       originFieldKeys
     }) => {
-      if (originFieldKeys.includes(key)) {
+      if (!key || originFieldKeys.includes(key)) {
         const originExpressions = this.extractParams(originExpression);
         let originValue;
         if (this.hasStringConcatenation(originExpression)) {
@@ -3158,6 +3348,7 @@ class FormCore {
           originValue = originExpressions === null || originExpressions === void 0 ? void 0 : originExpressions[0];
         }
         const destinationValue = this.getValue({
+          scope: 'fields',
           key: destinationKey,
           property: destinationProperty,
           path: destinationPath
@@ -3175,6 +3366,26 @@ class FormCore {
       }
     });
   }
+  /**
+   * @internal
+   * Update field visibility accordingly.
+   *
+   * @param {string} field - Field name to be updated.
+   * @param {boolean} hasError - Condition to be used as visibility.
+   * @param {boolean|undefined} showOnlyIfTrue - Flag to be considered when update field visibility. If it's true, then considered error, if it's false, always considered the opposite.
+   */
+  setFieldVisibility(field, hasError, showOnlyIfTrue) {
+    if (!this.fields.has(field)) {
+      /*
+       * check with João the need for a global mount event for the form
+       * to avoid not displaying this message in some cases (AsFormField)
+       * suggestion: create subscriber to targetField.ON_FIELD_MOUNT
+       */
+      console.warn(`failed to update visibility onto field ${field}`);
+    } else {
+      this.fields.get(field).visibility = showOnlyIfTrue ? hasError : !hasError;
+    }
+  }
   /**
    * Validates visibility conditions for a given event and updates field visibility accordingly.
    *
@@ -3188,21 +3399,44 @@ class FormCore {
   }) {
     const field = this.fields.get(key);
     const structVisibility = field === null || field === void 0 ? void 0 : field.visibilityConditions;
-    if (!structVisibility || !(structVisibility === null || structVisibility === void 0 ? void 0 : structVisibility.some(config => config.events.includes(event)))) return;
+    if (!structVisibility || !(structVisibility === null || structVisibility === void 0 ? void 0 : structVisibility.some(config => config.events.includes(event)))) {
+      return;
+    }
     structVisibility.forEach(structElement => {
       if (!structElement.events.includes(event)) return;
       Object.keys(structElement.validations).forEach(validationKey => {
-        const error = validations[validationKey](field.value, structElement.validations);
+        const error = handleValidation(field.value, structElement.validations, validations, validationKey);
         if (Array.isArray(structElement.fields)) {
           structElement.fields.forEach(fieldKey => {
-            if (!this.fields.has(fieldKey)) console.warn(`failed to update visibility onto field ${fieldKey}`);else this.fields.get(fieldKey).visibility = error;
+            this.setFieldVisibility(fieldKey, error, !!(field.value && structElement.showOnlyIfTrue));
           });
         } else if (structElement.fields) {
-          if (!this.fields.has(structElement.fields)) console.warn(`failed to update visibility onto field ${structElement.fields}`);else this.fields.get(structElement.fields).visibility = error;
+          this.setFieldVisibility(structElement.fields, error, !!(field.value && structElement.showOnlyIfTrue));
         }
       });
     });
   }
+  /**
+   * @internal
+   * Update field value and emit change and cleared event.
+   *
+   * @param {string} key - Field name to be updated.
+   * @param {unknown} value - Value to be inserted into field.
+   */
+  setResetFieldValue(key, value) {
+    if (!this.fields.has(key)) {
+      console.warn(`failed to reset value onto field ${key}`);
+    } else {
+      const field = this.fields.get(key);
+      field.emitValue({
+        value: value,
+        event: 'ON_FIELD_CHANGE'
+      });
+      field.emitEvents({
+        event: 'ON_FIELD_CLEARED'
+      });
+    }
+  }
   /**
    * Resets field values based on reset conditions defined in the schema.
    *
@@ -3219,23 +3453,23 @@ class FormCore {
     if (!structResetValue || !(structResetValue === null || structResetValue === void 0 ? void 0 : structResetValue.some(config => config.events.includes(event)))) return;
     structResetValue.forEach(structElement => {
       if (!structElement.events.includes(event)) return;
+      const handleFieldRestoration = () => {
+        if (Array.isArray(structElement.fields)) {
+          structElement.fields.forEach((fieldKey, index) => {
+            const resettledValue = Array.isArray(structElement.resettledValue) ? structElement.resettledValue[index] : structElement.resettledValue;
+            this.setResetFieldValue(fieldKey, resettledValue);
+          });
+        } else if (structElement.fields) {
+          this.setResetFieldValue(structElement.fields, structElement.resettledValue);
+        }
+      };
+      if (!structElement.validations) {
+        return handleFieldRestoration();
+      }
       Object.keys(structElement.validations).forEach(validationKey => {
-        const error = validations[validationKey](field.value, structElement.validations);
+        const error = handleValidation(field.value, structElement.validations, validations, validationKey);
         if (!error) {
-          if (Array.isArray(structElement.fields)) {
-            structElement.fields.forEach((fieldKey, index) => {
-              const resettledValue = Array.isArray(structElement.resettledValue) ? structElement.resettledValue[index] : structElement.resettledValue;
-              if (!this.fields.has(fieldKey)) console.warn(`failed to reset value onto field ${fieldKey}`);else this.fields.get(fieldKey).emitValue({
-                value: resettledValue,
-                event: 'ON_FIELD_CHANGE'
-              });
-            });
-          } else if (structElement.fields) {
-            if (!this.fields.has(structElement.fields)) console.warn(`failed to reset value onto field ${structElement.fields}`);else this.fields.get(structElement.fields).emitValue({
-              value: structElement.resettledValue,
-              event: 'ON_FIELD_CHANGE'
-            });
-          }
+          handleFieldRestoration();
         }
       });
     });
@@ -3244,6 +3478,7 @@ class FormCore {
    * Adds a field onto the form instance regardless there is a schema or not
    *
    * @param fieldSchema
+   * @param mapperElement
    */
   addField({
     fieldSchema,
@@ -3253,7 +3488,7 @@ class FormCore {
     if (this.fields.has(fieldSchema.name)) {
       throw new Error(`field name ${fieldSchema.name} already defined`);
     }
-    const mapper = mapperElement || ((_a = this.mappers) === null || _a === void 0 ? void 0 : _a.find(mapEl => mapEl.componentName === fieldSchema.component));
+    const mapper = mapperElement || ((_a = this.mappers) === null || _a === void 0 ? void 0 : _a.get(fieldSchema.component));
     if (!mapper) throw new Error(`mapper not found for ${fieldSchema.component}, add it to the mappers configuration`);
     this.fields.set(fieldSchema.name, new FormField({
       schemaComponent: fieldSchema,
@@ -3269,6 +3504,7 @@ class FormCore {
     }));
     this.subscribeTemplates();
     this.refreshTemplates({
+      scope: 'fields',
       event: 'ON_FIELDS',
       key: fieldSchema.name
     });
@@ -3284,6 +3520,7 @@ class FormCore {
     this.fields.delete(key);
     this.subscribeTemplates();
     this.templateSubject$.next({
+      scope: 'fields',
       key,
       event: 'ON_FIELDS'
     });
@@ -3300,7 +3537,12 @@ class FormCore {
       var _a, _b, _c;
       const currField = this.fields.get(structElement.name);
       if (!currField) {
-        const mapper = (_a = this.mappers) === null || _a === void 0 ? void 0 : _a.find(mapEl => mapEl.componentName === structElement.component);
+        let mapper;
+        if (structElement === null || structElement === void 0 ? void 0 : structElement.mapper) {
+          mapper = structElement === null || structElement === void 0 ? void 0 : structElement.mapper;
+        } else {
+          mapper = (_a = this.mappers) === null || _a === void 0 ? void 0 : _a.get(structElement.component);
+        }
         if (!mapper) throw new Error(`mapper not found for ${structElement.component}, add it to the mappers configuration`);
         this.fields.set(structElement.name, new FormField({
           schemaComponent: structElement,
@@ -3318,10 +3560,11 @@ class FormCore {
       } else {
         currField.children = ((_c = structElement === null || structElement === void 0 ? void 0 : structElement.children) === null || _c === void 0 ? void 0 : _c.map(el => el.name)) || (currField === null || currField === void 0 ? void 0 : currField.children) || [];
         currField.path = path;
+        currField.originalSchema = structElement;
         currField.templateSubject$ = this.templateSubject$;
       }
       if (structElement.children) {
-        return this.serializeStructure(structElement.children, `${path ? `${path}.` : ``}${structElement.name}`);
+        this.serializeStructure(structElement.children, `${path ? `${path}.` : ``}${structElement.name}`);
       }
     });
   }
@@ -3353,6 +3596,7 @@ class FormCore {
     this.subscribedTemplates.forEach(el => {
       el.originFieldKeys.forEach(field => {
         this.templateSubject$.next({
+          scope: 'fields',
           key: field,
           event: 'ON_FIELDS'
         });
@@ -3378,10 +3622,10 @@ class FormCore {
     const values = {};
     this.fields.forEach((val, key) => {
       if (val.value) {
-        values[key] = val.value;
+        set(values, val.nameToSubmit || key, val.value);
       }
     });
-    console.log(values);
+    console.table(values);
   }
   /**
    * Gets the current values of all form fields.
@@ -3393,7 +3637,7 @@ class FormCore {
     const erroredFields = [];
     this.fields.forEach((val, key) => {
       if (val.value) {
-        values[key] = val.value;
+        set(values, val.nameToSubmit || key, val.value);
       }
       if (!val.valid) {
         erroredFields.push(key);
@@ -3413,6 +3657,45 @@ class FormCore {
     });
     return sub;
   }
+  subscribeOnMount(callback) {
+    const sub = this.mountSubject$.pipe(map(() => this.getFormValues())).subscribe({
+      next: callback
+    });
+    return sub;
+  }
+  /**
+   *
+   * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
+   */
+  subscribeData(callback) {
+    const sub = this.dataSubject$.pipe(groupBy(payload => payload.event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS))), map(({
+      key
+    }) => ({
+      field: key,
+      data: this.getFormValues()
+    }))).subscribe({
+      next: callback
+    });
+    return sub;
+  }
+  subscribeOnSubmit(callback) {
+    const sub = this.submitSubject$.pipe(map(() => this.getFormValues())).subscribe({
+      next: callback
+    });
+    return sub;
+  }
+  /**
+   * Submits the form by triggering form field events and invoking the onSubmit callback.
+   */
+  mounted() {
+    this.fields.forEach(field => {
+      field.emitEvents({
+        event: 'ON_FORM_MOUNT'
+      });
+    });
+    const values = this.getFormValues();
+    this.mountSubject$.next(values);
+  }
   /**
    * Submits the form by triggering form field events and invoking the onSubmit callback.
    */
@@ -3425,11 +3708,10 @@ class FormCore {
     if (!this.isValid) return;
     const values = this.getFormValues();
     this.submitSubject$.next(values);
-    this.onSubmit && this.onSubmit(values);
   }
   destroy() {
     this.submitSubject$.unsubscribe();
-    this.templateSubject$.unsubscribe();
+    this.templateSubscription$.unsubscribe();
     this.fieldEventSubject$.unsubscribe();
     this.dataSubject$.unsubscribe();
     this.fields.forEach(field => field.destroyField());
@@ -3446,15 +3728,19 @@ class FormCore {
  */
 FormCore.checkIndexes = (struct, indexes = []) => {
   if (!struct) return indexes;
-  for (let i = 0; i < struct.length; i++) {
-    const structElement = struct[i];
-    if (structElement.name === IVARPROPNAME) {
-      throw new Error(`reserved ${IVARPROPNAME} name for field names`);
-    }
-    indexes.push(structElement.name);
-    if (structElement.children) {
-      return FormCore.checkIndexes(structElement.children, indexes);
+  const helper = (struct, indexes) => {
+    for (let i = 0; i < struct.length; i++) {
+      const structElement = struct[i];
+      indexes.push(structElement.name);
+      if (structElement.children) {
+        helper(structElement.children, indexes);
+      }
     }
+  };
+  helper(struct, indexes);
+  const duppedIndexes = indexes.filter((item, index) => indexes.indexOf(item) !== index);
+  if (duppedIndexes.length > 0) {
+    throw new Error(`duplicated indexes found on schema: ${JSON.stringify(duppedIndexes)}`);
   }
   return indexes;
 };
@@ -3562,29 +3848,56 @@ class FormGroup {
    * Prints the form group instance to the console.
    */
   printFormGroupInstance() {
-    console.log(this.forms);
+    console.table(this.forms);
   }
   /**
    * Prototype submit function to multiple forms
    * @param {string[]} indexes form indexes to be submitted
    * @returns
    */
-  submitMultipleFormsByIndex(indexes) {
+  submitMultipleFormsByIndex(indexes, callback) {
     let isValid = true;
     let values = {};
     let erroredFields = [];
     indexes.forEach(index => {
-      var _a;
-      const res = (_a = this.forms.get(index)) === null || _a === void 0 ? void 0 : _a.getFormValues();
+      var _a, _b;
+      (_a = this.forms.get(index)) === null || _a === void 0 ? void 0 : _a.submit();
+      const res = (_b = this.forms.get(index)) === null || _b === void 0 ? void 0 : _b.getFormValues();
       isValid = isValid && ((res === null || res === void 0 ? void 0 : res.isValid) || false);
       values = Object.assign(Object.assign({}, values), (res === null || res === void 0 ? void 0 : res.values) || {});
       erroredFields = [...erroredFields, ...((res === null || res === void 0 ? void 0 : res.erroredFields) || [])];
     });
-    return {
+    isValid && callback && callback({
       erroredFields,
       isValid,
       values
-    };
+    });
+  }
+  onDataSubscription({
+    ids,
+    callback
+  }) {
+    const subs = ids.reduce((acc, formId) => {
+      var _a;
+      // @TODO add config on debounceTime on this events
+      const sub = (_a = this.forms.get(formId)) === null || _a === void 0 ? void 0 : _a.dataSubject$.pipe(groupBy(payload => `${formId}.${payload.event}`), mergeMap(group$ => group$.pipe(debounceTime(100))), map(({
+        key
+      }) => {
+        var _a;
+        return {
+          formField: key,
+          values: (_a = this.forms.get(formId)) === null || _a === void 0 ? void 0 : _a.getFormValues()
+        };
+      }));
+      if (sub) {
+        acc[formId] = sub;
+      } else {
+        console.warn(`failed to register form id ${formId}`);
+      }
+      return acc;
+    }, {});
+    const sub = combineLatest(subs).subscribe(callback);
+    return sub;
   }
 }