@bolttech/form-engine-core 1.0.0-beta.8 → 1.0.1-beta.0

package/index.esm.js

@@ -1,6 +1,6 @@
-import { Subject, Subscription, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map, distinctUntilKeyChanged, distinctUntilChanged, skip } from 'rxjs';
+import { Subject, Subscription, groupBy, mergeMap, debounceTime, filter, combineLatest, startWith, map, distinctUntilKeyChanged } from 'rxjs';
 import creditCardType from 'credit-card-type';
-import { isNumber as isNumber$1, isFunction, cloneDeep, merge, isEqual, get, isNil, set } from 'lodash';
+import { isNumber as isNumber$1, isFunction, cloneDeep, isEqual, get, isNil, set } from 'lodash';
 import { getCurrencySymbol } from '@gaignoux/currency';
 
 var TMutationEnum;
@@ -48,9 +48,9 @@ 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'];
+const TEMPLATE_REGEX_OPERATOR_SPLITTER = /\s*(\|\||&&|!+)\s*/g;
+const TEMPLATE_REGEX_OPERATOR_MATCHER = /^\|\||&&|!+$/;
+const TEMPLATE_AVALIABLE_SCOPES = ['fields', 'iVars', 'form'];
 const ALLOWED_RESET_PROPS_MUTATIONS = ['api', 'apiSchema', 'props', 'validations', 'visibilityConditions', 'resetValues'];
 const DEFAULT_LOG_VERBOSE = false;
 
@@ -72,11 +72,12 @@ function makeRequest(method, url, headers, body, queryParams) {
   return new Promise(function (resolve, reject) {
     const xhr = new XMLHttpRequest();
     if (queryParams) {
-      const newUrl = new URL(url);
+      const [baseUrl, existingParamsString] = url.split('?');
+      const searchParams = new URLSearchParams(existingParamsString);
       Object.keys(queryParams).forEach(param => {
-        newUrl.searchParams.append(param, queryParams[param]);
+        searchParams.append(param, queryParams[param]);
       });
-      url = newUrl.toString();
+      url = `${baseUrl}?${searchParams.toString()}`;
     }
     xhr.open(method, url, true);
     if (headers) {
@@ -577,7 +578,7 @@ const formatters = {
  * console.log(maskedValue); // Output: 'ab***gh###'
  * ```
  */
-var generic = ((value, masks) => {
+var generic = (value, masks) => {
   if (!(masks === null || masks === void 0 ? void 0 : masks.generic)) return value;
   let masked = value;
   masks.generic.forEach(item => {
@@ -596,7 +597,7 @@ var generic = ((value, masks) => {
     masked = masked.slice(0, from - 1) + maskedPortion + masked.slice(to);
   });
   return masked;
-});
+};
 
 /**
  * Replaces all characters in a string with a specified replacement string or character.
@@ -881,7 +882,7 @@ const masks = {
  * console.log(isValid); // Output: true or false based on validation
  * ```
  */
-var length = ((value, validations) => {
+var length = (value, validations) => {
   if (!validations.length || !value) return false;
   let targetValue = value;
   // We want length even if it is a numeric
@@ -897,7 +898,7 @@ var length = ((value, validations) => {
     greaterOrEqual: targetValue.length < validations.length.target
   };
   return condition[validations.length.rule];
-});
+};
 
 /**
  * Validates a Spanish NIF (Número de Identificación Fiscal).
@@ -1135,7 +1136,7 @@ const CIF = value => {
  * console.log(isValid); // Output: true or false based on validation
  * ```
  */
-var document = ((value, validations) => {
+var document = (value, validations) => {
   if (!value || !validations.document) return true;
   const validation = {
     NIF: (value, locale) => NIF(value, locale),
@@ -1144,7 +1145,7 @@ var document = ((value, validations) => {
     IBAN: value => IBAN(value)
   };
   return validation[validations.document.type](value, validations.document.locale);
-});
+};
 
 /**
  * Validates if a value exceeds the maximum allowed value.
@@ -2262,10 +2263,10 @@ function run$1(value, handlers, validations) {
  * const isValid = validateValue(value, methods);
  * console.log(isValid); // Output: true
  */
-var namedRule = ((value, methods, validations) => {
+var namedRule = (value, methods, validations) => {
   if (!methods) return false;
   return run$1(value, methods, validations).some(validation => validation);
-});
+};
 
 /**
  * @internal
@@ -2485,6 +2486,7 @@ class FormField {
    * @param {() => TFormValues<unknown>} options.getFormValues, - form instance function that builds onData parameter payload from fields
    */
   constructor({
+    formIndex,
     schemaComponent,
     config,
     path,
@@ -2495,16 +2497,18 @@ class FormField {
     templateSubject$,
     fieldEventSubject$,
     dataSubject$,
-    formValidNotification$,
+    fieldValidNotification$,
     mountSubject$,
     mapper,
     getFormValues,
     submitEvent,
-    visibility
+    visibility,
+    persistValue
   }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     this.valueSubscription$ = new Subscription();
     this.fieldStateSubscription$ = new Subscription();
+    this.formIndex = formIndex;
     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,
@@ -2517,7 +2521,6 @@ class FormField {
     this.path = path;
     this.children = children;
     this.validations = cloneDeep(schemaComponent.validations);
-    this.errorMessages = cloneDeep((_a = schemaComponent.validations) === null || _a === void 0 ? void 0 : _a.messages);
     this.visibilityConditions = cloneDeep(schemaComponent.visibilityConditions);
     this.resetValues = cloneDeep(schemaComponent.resetValues);
     this.resetPropertyValues = cloneDeep(schemaComponent.resetPropertyValues);
@@ -2525,7 +2528,7 @@ class FormField {
     this.formatters = cloneDeep(schemaComponent.formatters);
     this.masks = cloneDeep(schemaComponent.masks);
     if (mapper.valueChangeEvent) this.valueChangeEvent = mapper.valueChangeEvent;
-    if ((_b = mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) this.valuePropName = mapper.events.setValue;
+    if ((_a = mapper.events) === null || _a === void 0 ? void 0 : _a.setValue) this.valuePropName = mapper.events.setValue;
     this.mapper = mapper;
     this.validateVisibility = validateVisibility;
     this.resetValue = resetValue;
@@ -2535,7 +2538,7 @@ class FormField {
     this.templateSubject$ = templateSubject$;
     this.fieldEventSubject$ = fieldEventSubject$;
     this.dataSubject$ = dataSubject$;
-    this.formValidNotification$ = formValidNotification$;
+    this.fieldValidNotification$ = fieldValidNotification$;
     this.mountSubject$ = mountSubject$;
     this._props = FormField.filterProps(cloneDeep(schemaComponent.props || {}));
     this._metadata = '';
@@ -2544,21 +2547,25 @@ class FormField {
     this._visibility = typeof visibility === 'boolean' ? visibility : true;
     this._api = {
       default: {
-        response: ((_e = (_d = (_c = this.apiSchema) === null || _c === void 0 ? void 0 : _c.defaultConfig) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.fallbackValue) || '',
+        response: ((_d = (_c = (_b = this.apiSchema) === null || _b === void 0 ? void 0 : _b.defaultConfig) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.fallbackValue) || '',
         status: null
       },
-      named: ((_f = this.apiSchema) === null || _f === void 0 ? void 0 : _f.configs) && Object.keys((_g = this.apiSchema) === null || _g === void 0 ? void 0 : _g.configs).reduce((acc, curr) => {
+      named: ((_e = this.apiSchema) === null || _e === void 0 ? void 0 : _e.configs) && Object.keys((_f = this.apiSchema) === null || _f === void 0 ? void 0 : _f.configs).reduce((acc, curr) => {
         var _a, _b;
         acc[curr] = {
           response: ((_b = (_a = this.apiSchema) === null || _a === void 0 ? void 0 : _a.configs) === null || _b === void 0 ? void 0 : _b[curr].config.fallbackValue) || '',
           status: null
         };
         return acc;
-      }, {})
+      }, {}),
+      apiState: {
+        loading: false
+      }
     };
     this._errors = {};
     this._mounted = false;
-    this._valid = false;
+    this.valid = true;
+    this.persistValue = persistValue;
     this.initializeObservers();
   }
   /**
@@ -2567,7 +2574,6 @@ class FormField {
    * emissions to unsubscribed fields
    */
   initializeObservers() {
-    var _a;
     if (!this.valueSubject$ || this.valueSubject$.closed) {
       this.valueSubject$ = new SafeSubject(() => this.mounted);
     }
@@ -2577,9 +2583,6 @@ class FormField {
     if (!this.visibilitySubject$ || this.visibilitySubject$.closed) {
       this.visibilitySubject$ = new SafeSubject(() => this.mounted);
     }
-    if (!this.apiSubject$ || this.apiSubject$.closed) {
-      this.apiSubject$ = new SafeSubject(() => this.mounted);
-    }
     if (!this.propsSubject$ || this.propsSubject$.closed) {
       this.propsSubject$ = new SafeSubject(() => this.mounted);
     }
@@ -2589,16 +2592,9 @@ class FormField {
     if (!this.apiEventQueueSubject$ || this.apiEventQueueSubject$.closed) {
       this.apiEventQueueSubject$ = new SafeSubject(() => this.mounted);
     }
-    this.fieldState$ = combineLatest({
-      visibility: this.visibilitySubject$.pipe(startWith(this._visibility)),
-      props: this.propsSubject$.pipe(startWith(this._props)),
-      errors: this.errorSubject$.pipe(startWith(Object.assign({}, ((_a = this.mapper.events) === null || _a === void 0 ? void 0 : _a.setErrorMessage) && {
-        [this.mapper.events.setErrorMessage]: this.errorsString
-      })))
-    });
     !this.apiEventQueueSubject$.observed && this.apiEventQueueSubject$.pipe(groupBy(({
       event
-    }) => event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultAPIdebounceTimeMS))), filter(() => this.apiSubject$ && !this.apiSubject$.closed)).subscribe(payload => {
+    }) => event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultAPIdebounceTimeMS))), filter(() => this.apiEventQueueSubject$ && !this.apiEventQueueSubject$.closed)).subscribe(payload => {
       this.apiRequest(payload);
     });
   }
@@ -2616,9 +2612,8 @@ class FormField {
    * @param {Record<string, unknown>} props - The new properties to be set.
    */
   set props(props) {
-    const diffProps = merge(cloneDeep(this.props), props);
-    if (typeof diffProps === 'undefined' || isEqual(diffProps, this.props)) return;
-    this._props = diffProps;
+    if (typeof props === 'undefined' || isEqual(props, this.props)) return;
+    this._props = props;
     this.propsSubject$.next(this.props);
     this.templateSubject$.next({
       scope: 'fields',
@@ -2627,16 +2622,17 @@ class FormField {
     });
   }
   /**
-    * Static function to remove templates form the component props that will be shown when
-    * the field mounts and the template routine executes, to be used on the adapter
-    *
-    * @param {unknown} props - the properties from the adapter components.
-  */
+   * Static function to remove templates form the component props that will be shown when
+   * the field mounts and the template routine executes, to be used on the adapter
+   *
+   * @param {unknown} props - the properties from the adapter components.
+   */
   static filterProps(props) {
     if (Array.isArray(props)) {
       return props.filter(el => typeof el === 'string' && el.includes('${') ? false : true).map(el => FormField.filterProps(el));
     }
     if (typeof props === 'object' && props !== null) {
+      if (props instanceof Date) return props;
       return Object.keys(props).reduce((acc, curr) => {
         const propValue = props[curr];
         if (typeof propValue === 'string' && propValue.includes('${')) {
@@ -2739,12 +2735,9 @@ class FormField {
    * sets valid field state and notifies form instance via formValidNotification$
    */
   set valid(valid) {
-    if (this._valid !== valid) {
-      this._valid = valid;
-      this.formValidNotification$.next({
-        fieldTrigger: this.name
-      });
-    }
+    if (typeof valid !== 'boolean' && this.valid === valid) return;
+    this._valid = valid;
+    this.triggerFieldValidNotification();
   }
   /**
    * Retrieves the validity status of the form field.
@@ -2754,6 +2747,18 @@ class FormField {
   get valid() {
     return this._valid;
   }
+  /**
+   * triggers field valid notification to handle the form instance valid notification
+   *
+   * Note: since form unmount can occur before field unmount, this subject might already be closed by form instance
+   * quick workaround is to check if the subject is already closed before emitting
+   * if form instance onValid or template form.valid doesn't work properly, might be due to this workaround
+   */
+  triggerFieldValidNotification() {
+    !this.fieldValidNotification$.closed && this.fieldValidNotification$.next({
+      fieldTrigger: this.name
+    });
+  }
   /**
    * Retrieves the error messages associated with the form field.
    *
@@ -2799,13 +2804,12 @@ class FormField {
    * @param {TApiResponse} response - The new API response data to be set.
    */
   set api(response) {
-    if (typeof response === 'undefined' || isEqual(response, this.api)) return;
+    if (typeof response === 'undefined') return;
     this._api = response;
-    this.apiSubject$.next(this.api);
     this.templateSubject$.next({
       scope: 'fields',
       key: this.name,
-      event: 'ON_API'
+      event: 'ON_API_RESPONSE'
     });
     // this.apiResponseSubject$.next({ key: this.name });
     this.emitEvents({
@@ -2813,7 +2817,20 @@ class FormField {
     });
   }
   /**
-   * Retrieves the mounted status of the field.
+   * notifies templates and event binded field configurations that a request starts it's processing
+   */
+  notifyApiRequest() {
+    this._api.apiState.loading = true;
+    this.templateSubject$.next({
+      scope: 'fields',
+      key: this.name,
+      event: 'ON_API_REQUEST'
+    });
+    this.emitEvents({
+      event: 'ON_API_FIELD_REQUEST'
+    });
+  }
+  /** Retrieves the mounted status of the field.
    *
    * @returns {boolean} - the mounted status of the field.
    */
@@ -2829,6 +2846,7 @@ class FormField {
   set mounted(mountedStatus) {
     if (typeof mountedStatus === 'undefined' || mountedStatus === this.mounted) return;
     this._mounted = mountedStatus;
+    this.initializeObservers();
     this.mountSubject$.next({
       key: this.name,
       status: this.mounted
@@ -2846,9 +2864,9 @@ class FormField {
     valueSubscription,
     propsSubscription
   }) {
+    this.mounted = true;
     this.subscribeValue(valueSubscription);
     this.subscribeState(propsSubscription);
-    this.mounted = true;
     this.valueSubject$.next(this.stateValue);
     this.propsSubject$.next(this.props);
     this.visibilitySubject$.next(this.visibility);
@@ -2866,11 +2884,12 @@ class FormField {
   emitValue(prop) {
     if (!this.visibility || !this.mounted) return;
     this.value = prop.value;
-    this.emitEvents({
-      event: prop.event
-    });
     this.dataSubject$.next({
-      key: this.name,
+      event: prop.event,
+      fieldIndex: this.name,
+      formIndex: this.formIndex
+    });
+    this.emitEvents({
       event: prop.event
     });
   }
@@ -2929,16 +2948,17 @@ class FormField {
     const errors = {};
     const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.methods;
     schemaValidations && Object.keys(schemaValidations).forEach(validationKey => {
+      var _a;
       const error = handleValidation(this.value, schemaValidations, validations, validationKey);
       // setting valid flag
       valid = !error && valid;
       // setting error messages
-      if (error && this.errorMessages) {
-        if (validationKey in this.errorMessages) {
-          const messages = this.errorMessages;
+      if (error && ((_a = this.validations) === null || _a === void 0 ? void 0 : _a.messages)) {
+        if (validationKey in this.validations.messages) {
+          const messages = this.validations.messages;
           errors[validationKey] = messages[validationKey];
-        } else if ('default' in this.errorMessages) {
-          errors[validationKey] = this.errorMessages.default;
+        } else if ('default' in this.validations.messages) {
+          errors[validationKey] = this.validations.messages.default;
         }
       } else {
         delete errors[validationKey];
@@ -3008,6 +3028,7 @@ class FormField {
   }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     return __awaiter(this, void 0, void 0, function* () {
+      let requestMadeOnce = false;
       const configRequest = config => __awaiter(this, void 0, void 0, function* () {
         var _k;
         try {
@@ -3033,20 +3054,23 @@ class FormField {
           };
         }
       });
-      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 => {
+      if (this.api.apiState.lastEvent === 'ON_API_FIELD_RESPONSE' && event === 'ON_API_FIELD_RESPONSE' || !((_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);
       }))) return;
       const responses = {
         default: Object.assign({}, this.api.default),
-        named: Object.assign({}, this.api.named)
+        named: Object.assign({}, this.api.named),
+        apiState: Object.assign({}, this.api.apiState)
       };
       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)) {
+        !requestMadeOnce && this.notifyApiRequest();
         const {
           response,
           status
         } = yield configRequest(config);
+        requestMadeOnce = true;
         responses.default = {
           response,
           status
@@ -3064,10 +3088,12 @@ class FormField {
             var _l, _m, _o, _p;
             const config = (_m = (_l = this.apiSchema) === null || _l === void 0 ? void 0 : _l.configs) === null || _m === void 0 ? void 0 : _m[configKey].config;
             if (config && ((_p = (_o = this.apiSchema) === null || _o === void 0 ? void 0 : _o.configs) === null || _p === void 0 ? void 0 : _p[configKey].events.includes(event)) && this.checkApiRequestValidations(config)) {
+              !requestMadeOnce && this.notifyApiRequest();
               const {
                 response,
                 status
               } = yield configRequest(config);
+              requestMadeOnce = true;
               return {
                 name: configKey,
                 result: {
@@ -3083,7 +3109,11 @@ class FormField {
           });
         }
       }
-      this.api = responses;
+      if (requestMadeOnce) {
+        responses.apiState.lastEvent = event;
+        responses.apiState.loading = false;
+        this.api = responses;
+      }
     });
   }
   /**
@@ -3098,10 +3128,17 @@ class FormField {
     this.fieldStateSubscription$.unsubscribe();
     this.propsSubject$.unsubscribe();
     this.errorSubject$.unsubscribe();
-    this.apiSubject$.unsubscribe();
     this.apiEventQueueSubject$.unsubscribe();
-    !this.formValidNotification$.closed && this.formValidNotification$.next({
-      fieldTrigger: this.name
+    this.triggerFieldValidNotification();
+    this.dataSubject$.next({
+      event: 'ON_FIELD_UNMOUNT',
+      fieldIndex: this.name,
+      formIndex: this.formIndex
+    });
+    !this.fieldEventSubject$.closed && this.fieldEventSubject$.next({
+      event: 'ON_FIELD_UNMOUNT',
+      fieldName: this.name,
+      fieldInstance: this
     });
   }
   /**
@@ -3111,7 +3148,14 @@ class FormField {
    * @returns {void}
    */
   subscribeState(callback) {
-    this.fieldStateSubscription$ = this.fieldState$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS)).subscribe({
+    var _a;
+    this.fieldStateSubscription$ = combineLatest({
+      visibility: this.visibilitySubject$.pipe(startWith(this.visibility)),
+      props: this.propsSubject$.pipe(startWith(this.props)),
+      errors: this.errorSubject$.pipe(startWith(Object.assign({}, ((_a = this.mapper.events) === null || _a === void 0 ? void 0 : _a.setErrorMessage) && {
+        [this.mapper.events.setErrorMessage]: this.errorsString
+      })))
+    }).pipe(debounceTime(this.config.defaultStateRefreshTimeMS)).subscribe({
       next: callback
     });
   }
@@ -3151,6 +3195,8 @@ class FormCore {
     this.queuedFieldResetValuesEvents = new Map();
     this.queuedFieldResetPropertyEvents = new Map();
     this.queuedInitialValues = new Map();
+    this._valid = false;
+    this.index = entry.index;
     this.schema = entry.schema;
     this.fields = new Map();
     this.action = entry.action || ((_a = entry.schema) === null || _a === void 0 ? void 0 : _a.action);
@@ -3163,15 +3209,20 @@ class FormCore {
     (_h = entry.mappers) === null || _h === void 0 ? void 0 : _h.map(mapper => {
       this.mappers.set(mapper.componentName, mapper);
     });
+    if ((!entry.submitSubject$ || !entry.dataSubject$ || !entry.formValidSubject$) && this.config.defaultLogVerbose) console.warn(`some formGroup events are not properly instanciated, any onData, onValid, onSubmit events managed by formGroup won't trigger on form: ${this.index}`);
     this.schema && FormCore.checkIndexes(this.schema.components);
     this.templateSubject$ = new Subject();
-    this.submitSubject$ = new Subject();
     this.fieldEventSubject$ = new Subject();
-    this.dataSubject$ = new Subject();
     this.mountSubject$ = new Subject();
-    this.formValidNotification$ = new Subject();
+    this.fieldValidNotification$ = new Subject();
+    this.submitSubject$ = entry.submitSubject$ ? entry.submitSubject$ : new Subject();
+    this.dataSubject$ = entry.dataSubject$ ? entry.dataSubject$ : new Subject();
+    this.formValidSubject$ = entry.formValidSubject$ ? entry.formValidSubject$ : new Subject();
     this.subscribedTemplates = [];
     this.templateSubscription$ = this.templateSubject$.subscribe(this.refreshTemplates.bind(this));
+    this.fieldValidNotification$.subscribe(() => {
+      this.validateForm();
+    });
     this.mountSubject$.subscribe(this.mountActions.bind(this));
     this.initialValues = entry.initialValues || ((_j = entry.schema) === null || _j === void 0 ? void 0 : _j.initialValues);
     this.iVars = entry.iVars || ((_k = entry.schema) === null || _k === void 0 ? void 0 : _k.iVars) || {};
@@ -3200,8 +3251,16 @@ class FormCore {
     key,
     status
   }) {
-    var _a;
     if (status) {
+      const field = this.fields.get(key);
+      if (!field) {
+        /*
+        @TODO check a better way to handle nested fields unmounted by visiblity conditions from a parent
+        since they are dependent on adapter field recycling runtimes
+        */
+        this.config.defaultLogVerbose && console.warn(`field ${key} was mounted but since it's parent has some visibility condition the field was already removed`);
+        return;
+      }
       this.subscribeTemplates();
       this.refreshTemplates({
         scope: 'fields',
@@ -3211,16 +3270,12 @@ class FormCore {
         scope: 'iVars',
         event: 'ON_IVARS'
       });
-      if (!this.queuedInitialValues.has(key)) {
-        const field = this.fields.get(key);
-        const propValue = (_a = field === null || field === void 0 ? void 0 : field.props) === null || _a === void 0 ? void 0 : _a[(field === null || field === void 0 ? void 0 : field.valuePropName) || ''];
-        !(field === null || field === void 0 ? void 0 : field.value) ? field.emitValue({
-          value: typeof propValue === 'string' && !propValue.includes('${') ? propValue : '',
-          event: 'ON_FIELD_MOUNT'
-        }) : field.emitEvents({
-          event: 'ON_FIELD_MOUNT'
-        });
-      }
+      if (!this.queuedInitialValues.has(key)) field.valuePropName && !field.value ? field.emitValue({
+        event: 'ON_FIELD_MOUNT',
+        value: ''
+      }) : field.emitEvents({
+        event: 'ON_FIELD_MOUNT'
+      });
       this.checkFieldEventQueues(key);
     }
   }
@@ -3265,16 +3320,30 @@ class FormCore {
     });
   }
   /**
-   * Checks if the form is valid by validating all form fields.
+   * Validates all form fields and sets the form valid flag
    *
-   * @returns {boolean} True if the form is valid; otherwise, false.
    */
-  get isValid() {
-    if (this.fields.size === 0) return false;
+  validateForm() {
+    if (this.fields.size === 0) return this.valid = false;
     for (const [, field] of this.fields) {
-      if (!field.valid) return false;
+      if (!field.valid) return this.valid = false;
     }
-    return true;
+    return this.valid = true;
+  }
+  get valid() {
+    return this._valid;
+  }
+  set valid(valid) {
+    if (this._valid === valid) return;
+    this._valid = valid;
+    this.templateSubject$.next({
+      event: 'ON_FORM',
+      scope: 'form'
+    });
+    this.formValidSubject$.next({
+      formIndex: this.index,
+      valid: this.valid
+    });
   }
   /**
    * Subscribes to templates for dynamic updates.
@@ -3327,6 +3396,11 @@ class FormCore {
           const value = get(this.iVars, [key, ...(property ? [property] : []), ...path]);
           return value;
         }
+      case 'form':
+        {
+          const value = get(this, [key, ...(property ? [property] : []), ...path]);
+          return value;
+        }
       case 'fields':
         {
           const field = this.fields.get(key);
@@ -3611,12 +3685,21 @@ class FormCore {
        * and trigger the validation when it's visible
        */
       if (fieldInstance.visibility) {
-        fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.emitValue({
-          value: this.queuedInitialValues.get(field) || '',
-          event: 'ON_FIELD_MOUNT'
-        });
-        this.queuedInitialValues.delete(field);
+        if (this.queuedInitialValues.has(field)) {
+          fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.emitValue({
+            value: this.queuedInitialValues.get(field) || '',
+            event: 'ON_FIELD_MOUNT'
+          });
+          this.queuedInitialValues.delete(field);
+        } else {
+          fieldInstance.emitEvents({
+            event: 'ON_FIELD_MOUNT'
+          });
+        }
       } else {
+        if (fieldInstance.persistValue) {
+          this.queuedInitialValues.set(fieldInstance.name, fieldInstance.value);
+        }
         fieldInstance.value = '';
         fieldInstance.valid = true;
       }
@@ -3744,7 +3827,7 @@ class FormCore {
     value
   }) {
     const field = this.fields.get(key);
-    if (!field || field.mounted) {
+    if (!field) {
       this.queuedFieldResetPropertyEvents.set(key, {
         property,
         path,
@@ -3806,15 +3889,23 @@ class FormCore {
    */
   addField({
     fieldSchema,
-    mapperElement
+    mapperElement,
+    path
   }) {
-    var _a;
+    var _a, _b, _c, _d;
     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.get(fieldSchema.component));
     if (!mapper) throw new Error(`mapper not found for ${fieldSchema.component}, add it to the mappers configuration`);
+    if ((_b = mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) {
+      const initialValue = (_c = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.props) === null || _c === void 0 ? void 0 : _c[(_d = mapper === null || mapper === void 0 ? void 0 : mapper.events) === null || _d === void 0 ? void 0 : _d.setValue];
+      if (!(typeof initialValue === 'undefined') && !this.queuedInitialValues.has(fieldSchema.name) && !(typeof initialValue === 'string' && initialValue.includes('${'))) {
+        this.queuedInitialValues.set(fieldSchema.name, cloneDeep(initialValue));
+      }
+    }
     this.fields.set(fieldSchema.name, new FormField({
+      formIndex: this.index,
       schemaComponent: fieldSchema,
       mapper,
       children: fieldSchema.children ? fieldSchema.children.map(el => el.name) : [],
@@ -3825,11 +3916,13 @@ class FormCore {
       templateSubject$: this.templateSubject$,
       fieldEventSubject$: this.fieldEventSubject$,
       dataSubject$: this.dataSubject$,
-      formValidNotification$: this.formValidNotification$,
+      fieldValidNotification$: this.fieldValidNotification$,
       mountSubject$: this.mountSubject$,
       config: this.config,
       submitEvent: this.submit.bind(this),
-      visibility: fieldSchema.visibility
+      visibility: fieldSchema.visibility,
+      persistValue: fieldSchema.persistValue,
+      path
     }));
   }
   /**
@@ -3859,36 +3952,16 @@ class FormCore {
   serializeStructure(struct, path) {
     if (!struct) return;
     struct.forEach(structElement => {
-      var _a, _b;
+      var _a;
       const currField = this.fields.get(structElement.name);
       if (!currField) {
-        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,
-          mapper,
-          path,
-          children: structElement.children ? structElement.children.map(el => el.name) : [],
-          validateVisibility: this.validateVisibility.bind(this),
-          resetValue: this.resetValue.bind(this),
-          resetProperty: this.resetProperty.bind(this),
-          templateSubject$: this.templateSubject$,
-          fieldEventSubject$: this.fieldEventSubject$,
-          dataSubject$: this.dataSubject$,
-          formValidNotification$: this.formValidNotification$,
-          mountSubject$: this.mountSubject$,
-          config: this.config,
-          getFormValues: this.getFormValues.bind(this),
-          submitEvent: this.submit.bind(this),
-          visibility: structElement.visibility
-        }));
+        this.addField({
+          fieldSchema: structElement,
+          mapperElement: structElement.mapper,
+          path
+        });
       } else {
-        currField.children = ((_b = structElement === null || structElement === void 0 ? void 0 : structElement.children) === null || _b === void 0 ? void 0 : _b.map(el => el.name)) || (currField === null || currField === void 0 ? void 0 : currField.children) || [];
+        currField.children = ((_a = structElement === null || structElement === void 0 ? void 0 : structElement.children) === null || _a === void 0 ? void 0 : _a.map(el => el.name)) || (currField === null || currField === void 0 ? void 0 : currField.children) || [];
         currField.path = path;
         currField.originalSchema = structElement;
         currField.templateSubject$ = this.templateSubject$;
@@ -3950,13 +4023,7 @@ class FormCore {
    * Prints the current values of all form fields.
    */
   printValues() {
-    const values = {};
-    this.fields.forEach((val, key) => {
-      if (val.value) {
-        set(values, val.nameToSubmit || key, val.value);
-      }
-    });
-    console.table(values);
+    console.table(this.getFormValues().values);
   }
   /**
    * Gets the current values of all form fields.
@@ -3968,7 +4035,7 @@ class FormCore {
     const metadata = {};
     const erroredFields = [];
     this.fields.forEach((val, key) => {
-      if (val.value) {
+      if (!(typeof val.value === 'string' && val.value.length === 0) && typeof val.value !== 'undefined' && val.value !== null) {
         set(values, val.nameToSubmit || key, val.value);
         metadata[key] = val.metadata;
       }
@@ -3980,7 +4047,7 @@ class FormCore {
       values,
       metadata,
       erroredFields,
-      isValid: this.isValid
+      isValid: this.valid
     };
   }
   /**
@@ -4014,10 +4081,12 @@ class FormCore {
    * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call onData
    */
   subscribeData(callback) {
-    const sub = this.dataSubject$.pipe(groupBy(payload => payload.event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS))), map(({
-      key
+    const sub = this.dataSubject$.pipe(filter(({
+      formIndex
+    }) => this.index === formIndex), groupBy(payload => payload.event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS))), map(({
+      fieldIndex
     }) => ({
-      field: key,
+      field: fieldIndex,
       data: this.getFormValues()
     }))).subscribe({
       next: callback
@@ -4030,7 +4099,11 @@ class FormCore {
    * @param {(payload: TFormValues<T>) => void} callback callback function to call when the submit action occurs
    */
   subscribeOnSubmit(callback) {
-    const sub = this.submitSubject$.subscribe({
+    const sub = this.submitSubject$.pipe(filter(({
+      formIndex
+    }) => formIndex === this.index), map(({
+      values
+    }) => values)).subscribe({
       next: callback
     });
     return sub;
@@ -4041,12 +4114,15 @@ class FormCore {
    * @param {(payload: TFormValidationPayload) => void} callback callback function to call onValid
    */
   subscribeFormValidation(callback) {
-    const sub = this.formValidNotification$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS), map(({
-      fieldTrigger
-    }) => ({
-      fieldTrigger,
-      valid: this.isValid
-    })), distinctUntilKeyChanged('valid')).subscribe({
+    const sub = this.formValidSubject$.pipe(filter(({
+      formIndex
+    }) => this.index === formIndex), debounceTime(this.config.defaultStateRefreshTimeMS), map(() => ({
+      formIndex: this.index,
+      valid: this.valid
+    })), distinctUntilKeyChanged('valid'), startWith({
+      formIndex: this.index,
+      valid: this.valid
+    })).subscribe({
       next: callback
     });
     return sub;
@@ -4059,21 +4135,21 @@ class FormCore {
       field.emitEvents({
         event: 'ON_FIELD_VALIDATION'
       });
-      console.log(`${field.name} is ${field.valid}`);
     });
-    if (!this.isValid) return;
+    if (!this.valid) return;
     const values = this.getFormValues();
-    this.submitSubject$.next(values);
+    this.submitSubject$.next({
+      formIndex: this.index,
+      values
+    });
   }
   /**
    * recycles all the Suscriptions, to be called from the adapter when the form leaves the page
    */
   destroy() {
-    this.submitSubject$.unsubscribe();
     this.templateSubscription$.unsubscribe();
     this.fieldEventSubject$.unsubscribe();
-    this.dataSubject$.unsubscribe();
-    this.formValidNotification$.unsubscribe();
+    this.fieldValidNotification$.unsubscribe();
     this.fields.forEach(field => field.destroyField());
   }
 }
@@ -4116,6 +4192,9 @@ class FormGroup {
     var _a, _b, _c, _d, _e;
     this.destroy = () => {
       this.forms.forEach(form => form.destroy());
+      this.dataSubject$.unsubscribe();
+      this.formValidSubject$.unsubscribe();
+      this.submitSubject$.unsubscribe();
     };
     this.forms = new Map();
     this.config = {
@@ -4123,6 +4202,9 @@ class FormGroup {
       defaultStateRefreshTimeMS: Number((_c = entry === null || entry === void 0 ? void 0 : entry.config) === null || _c === void 0 ? void 0 : _c.defaultStateRefreshTimeMS) ? Number((_d = entry === null || entry === void 0 ? void 0 : entry.config) === null || _d === void 0 ? void 0 : _d.defaultStateRefreshTimeMS) : DEFAULT_STATE_REFRESH_TIME,
       defaultLogVerbose: ((_e = entry === null || entry === void 0 ? void 0 : entry.config) === null || _e === void 0 ? void 0 : _e.defaultLogVerbose) ? entry.config.defaultLogVerbose : DEFAULT_LOG_VERBOSE
     };
+    this.dataSubject$ = new Subject();
+    this.formValidSubject$ = new Subject();
+    this.submitSubject$ = new Subject();
   }
   /**
    * Creates an empty form with given index
@@ -4134,14 +4216,13 @@ class FormGroup {
     index,
     mappers
   }) {
-    const formInstance = new FormCore({
-      index,
-      mappers,
-      config: this.config
-    });
     this.addForm({
       key: index,
-      formInstance
+      params: {
+        index,
+        mappers,
+        config: this.config
+      }
     });
   }
   /**
@@ -4153,11 +4234,16 @@ class FormGroup {
    */
   addForm({
     key,
-    formInstance
+    params
   }) {
     this.checkIndexes({
-      key
+      key: key
     });
+    const formInstance = new FormCore(Object.assign(Object.assign({}, params), {
+      dataSubject$: this.dataSubject$,
+      formValidSubject$: this.formValidSubject$,
+      submitSubject$: this.submitSubject$
+    }));
     if (!formInstance.config) {
       formInstance.config = this.config;
     }
@@ -4199,10 +4285,10 @@ class FormGroup {
     formIndex,
     fieldIndex
   }) {
-    var _a;
     const form = this.forms.get(formIndex);
-    (_a = form === null || form === void 0 ? void 0 : form.fields.get(fieldIndex)) === null || _a === void 0 ? void 0 : _a.destroyField();
-    form === null || form === void 0 ? void 0 : form.fields.delete(fieldIndex);
+    form === null || form === void 0 ? void 0 : form.removeField({
+      key: fieldIndex
+    });
     if ((form === null || form === void 0 ? void 0 : form.fields.size) === 0) {
       this.removeForm({
         key: formIndex
@@ -4260,52 +4346,49 @@ class FormGroup {
     ids,
     callback
   }) {
-    const subs = ids.reduce((acc, formId) => {
-      var _a, _b;
-      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(this.config.defaultStateRefreshTimeMS))), map(({
-        key
-      }) => {
-        var _a;
-        return {
-          formField: key,
-          values: (_a = this.forms.get(formId)) === null || _a === void 0 ? void 0 : _a.getFormValues()
+    const sub = this.dataSubject$.pipe(filter(({
+      formIndex
+    }) => ids.includes(formIndex)), groupBy(({
+      event,
+      formIndex
+    }) => `${event}.${formIndex}`), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS))), map(({
+      fieldIndex,
+      formIndex
+    }) => ids.reduce((acc, curr) => {
+      const formInstance = this.forms.get(curr);
+      if (formInstance) {
+        acc[curr] = {
+          formId: formIndex,
+          formField: fieldIndex,
+          values: formInstance.getFormValues()
         };
-      }), startWith({
-        formField: null,
-        values: (_b = this.forms.get(formId)) === null || _b === void 0 ? void 0 : _b.getFormValues()
-      }));
-      if (sub) {
-        acc[formId] = sub;
-      } else {
-        this.config.defaultLogVerbose && console.warn(`failed to register form id ${formId}`);
       }
       return acc;
-    }, {});
-    const sub = combineLatest(subs).subscribe(callback);
+    }, {}))).subscribe(callback);
     return sub;
   }
   onValidSubscription({
     ids,
     callback
   }) {
-    const subs = ids.reduce((acc, formId) => {
-      var _a;
-      const sub = (_a = this.forms.get(formId)) === null || _a === void 0 ? void 0 : _a.formValidNotification$.pipe(groupBy(payload => `${formId}.${payload.fieldTrigger}`), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS))), startWith({
-        fieldTrigger: null
-      }), map(() => {
+    const sub = this.formValidSubject$.pipe(filter(({
+      formIndex
+    }) => ids.includes(formIndex)), groupBy(({
+      formIndex
+    }) => formIndex), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS))), startWith({
+      fieldTrigger: null
+    }), map(() => ({
+      groupValid: ids.every(id => {
         var _a;
-        return ((_a = this.forms.get(formId)) === null || _a === void 0 ? void 0 : _a.isValid) === false ? false : true;
-      }), distinctUntilChanged());
-      if (sub) {
-        acc[formId] = sub;
-      } else {
-        this.config.defaultLogVerbose && console.warn(`failed to register validation subscription form id ${formId}`);
-      }
-      return acc;
-    }, {});
-    const sub = combineLatest(subs).pipe(map(forms => ({
-      groupValid: Object.keys(forms).every(formId => forms[formId]),
-      forms
+        return !this.forms.get(id) || ((_a = this.forms.get(id)) === null || _a === void 0 ? void 0 : _a.valid);
+      }),
+      forms: ids.reduce((acc, curr) => {
+        const formInstance = this.forms.get(curr);
+        if (formInstance) {
+          acc[curr] = formInstance.valid;
+        }
+        return acc;
+      }, {})
     }))).subscribe(callback);
     return sub;
   }
@@ -4313,17 +4396,15 @@ class FormGroup {
     ids,
     callback
   }) {
-    const subs = ids.reduce((acc, formId) => {
-      const form = this.forms.get(formId);
-      const sub = form === null || form === void 0 ? void 0 : form.submitSubject$.pipe(map(() => form === null || form === void 0 ? void 0 : form.getFormValues()), startWith(undefined));
-      if (sub) {
-        acc[formId] = sub;
-      } else {
-        this.config.defaultLogVerbose && console.warn(`failed to register form id ${formId}`);
+    const sub = this.submitSubject$.pipe(filter(({
+      formIndex
+    }) => ids.includes(formIndex)), map(() => ids.reduce((acc, curr) => {
+      const formInstance = this.forms.get(curr);
+      if (formInstance) {
+        acc[curr] = formInstance.getFormValues();
       }
       return acc;
-    }, {});
-    const sub = combineLatest(subs).pipe(skip(1)).subscribe(callback);
+    }, {}))).subscribe(callback);
     return sub;
   }
 }