@bolttech/form-engine-core 1.0.0-beta.13 → 1.0.0-beta.15

package/index.esm.js

@@ -1,4 +1,4 @@
-import { Subject, Subscription, groupBy, mergeMap, debounceTime, filter, combineLatest, startWith, 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 { getCurrencySymbol } from '@gaignoux/currency';
@@ -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) {
@@ -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,
@@ -2505,6 +2507,7 @@ class FormField {
     var _a, _b, _c, _d, _e, _f, _g;
     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,
@@ -2880,11 +2883,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
     });
   }
@@ -3124,6 +3128,16 @@ class FormField {
     this.errorSubject$.unsubscribe();
     this.apiEventQueueSubject$.unsubscribe();
     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
+    });
   }
   /**
    * Subscribes to changes in the field state and executes the provided callback function.
@@ -3193,14 +3207,15 @@ 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.fieldValidNotification$ = new Subject();
-    this.formValidNotification$ = 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(() => {
@@ -3234,7 +3249,6 @@ class FormCore {
     key,
     status
   }) {
-    var _a;
     if (status) {
       const field = this.fields.get(key);
       if (!field) {
@@ -3242,7 +3256,7 @@ class FormCore {
         @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.log(`field ${key} was mounted but since it's parent has some visibility condition the field was already removed`);
+        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();
@@ -3254,15 +3268,12 @@ class FormCore {
         scope: 'iVars',
         event: 'ON_IVARS'
       });
-      if (!this.queuedInitialValues.has(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);
     }
   }
@@ -3327,7 +3338,7 @@ class FormCore {
       event: 'ON_FORM',
       scope: 'form'
     });
-    this.formValidNotification$.next({
+    this.formValidSubject$.next({
       formIndex: this.index,
       valid: this.valid
     });
@@ -3672,11 +3683,17 @@ 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 {
         fieldInstance.value = '';
         fieldInstance.valid = true;
@@ -3869,13 +3886,20 @@ class FormCore {
     fieldSchema,
     mapperElement
   }) {
-    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) : [],
@@ -3931,6 +3955,7 @@ class FormCore {
         }
         if (!mapper) throw new Error(`mapper not found for ${structElement.component}, add it to the mappers configuration`);
         this.fields.set(structElement.name, new FormField({
+          formIndex: this.index,
           schemaComponent: structElement,
           mapper,
           path,
@@ -4075,10 +4100,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
@@ -4091,7 +4118,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;
@@ -4102,7 +4133,9 @@ class FormCore {
    * @param {(payload: TFormValidationPayload) => void} callback callback function to call onValid
    */
   subscribeFormValidation(callback) {
-    const sub = this.formValidNotification$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS), map(() => ({
+    const sub = this.formValidSubject$.pipe(filter(({
+      formIndex
+    }) => this.index === formIndex), debounceTime(this.config.defaultStateRefreshTimeMS), map(() => ({
       formIndex: this.index,
       valid: this.valid
     })), distinctUntilKeyChanged('valid')).subscribe({
@@ -4121,17 +4154,17 @@ class FormCore {
     });
     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());
   }
@@ -4175,6 +4208,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 = {
@@ -4182,6 +4218,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
@@ -4193,14 +4232,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
+      }
     });
   }
   /**
@@ -4212,11 +4250,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;
     }
@@ -4319,52 +4362,42 @@ 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(() => ids.reduce((acc, curr) => {
+      const formInstance = this.forms.get(curr);
+      if (formInstance) {
+        acc[curr] = {
+          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.formIndex}`), 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))), map(() => ({
+      groupValid: ids.every(id => {
         var _a;
-        return ((_a = this.forms.get(formId)) === null || _a === void 0 ? void 0 : _a.valid) === 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 (_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;
   }
@@ -4372,17 +4405,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;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/form-engine-core",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.15",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",

package/src/managers/field.d.ts

@@ -2,7 +2,7 @@ import { Subject, Subscription } from 'rxjs';
 import { TApiConfig, TApiEvent, TApiResponse, TErrorMessages, TFormatters, TMasks, TResetPathMethods, TResetValueMethods, TSchemaFormConfig, TValidations, TVisibility } from '../types/schema';
 import { IComponentSchema, IComponentSchemaAsFormField } from '../interfaces/schema';
 import { IState } from '../interfaces/state';
-import { TEvents, TFieldEvent, TFieldValidationPayload, TValueChangeEvent } from '../types/event';
+import { TEvents, TFieldEvent, TFieldValidationPayload, TFormDataPayload, TValueChangeEvent } from '../types/event';
 import { TMapper } from '../types/mapper';
 import { SafeSubject } from '../helpers/SafeSubject';
 import { TTemplateEvent } from '../types/template';
@@ -11,6 +11,7 @@ import { TFormValues } from '../types/form';
  * Represents a form field with observables for managing form state, validations, and API requests.
  */
 declare class FormField {
+    formIndex: string;
     name: string;
     nameToSubmit?: string;
     component: string;
@@ -50,10 +51,7 @@ declare class FormField {
     }>;
     fieldStateSubscription$: Subscription;
     templateSubject$: Subject<TTemplateEvent>;
-    dataSubject$: Subject<{
-        key: string;
-        event: TEvents;
-    }>;
+    dataSubject$: Subject<TFormDataPayload>;
     fieldValidNotification$: Subject<TFieldValidationPayload>;
     mountSubject$: Subject<{
         key: string;
@@ -92,7 +90,8 @@ declare class FormField {
      * @param {TMapper<unknown>} options.mapper, - component generic mapper containing render parameters for adapters
      * @param {() => TFormValues<unknown>} options.getFormValues, - form instance function that builds onData parameter payload from fields
      */
-    constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, resetProperty, templateSubject$, fieldEventSubject$, dataSubject$, fieldValidNotification$, mountSubject$, mapper, getFormValues, submitEvent, visibility, }: {
+    constructor({ formIndex, schemaComponent, config, path, children, validateVisibility, resetValue, resetProperty, templateSubject$, fieldEventSubject$, dataSubject$, fieldValidNotification$, mountSubject$, mapper, getFormValues, submitEvent, visibility, }: {
+        formIndex: string;
         schemaComponent: IComponentSchema;
         config?: TSchemaFormConfig;
         path?: string;
@@ -112,10 +111,7 @@ declare class FormField {
         submitEvent: () => void;
         templateSubject$: Subject<TTemplateEvent>;
         fieldEventSubject$: Subject<TFieldEvent>;
-        dataSubject$: Subject<{
-            key: string;
-            event: TEvents;
-        }>;
+        dataSubject$: Subject<TFormDataPayload>;
         fieldValidNotification$: Subject<TFieldValidationPayload>;
         mountSubject$: Subject<{
             key: string;

package/src/managers/form.d.ts

@@ -3,7 +3,7 @@ import { Subject, Subscription } from 'rxjs';
 import { IComponentSchema, IComponentSchemaAsFormField, IFormSchema } from '../interfaces/schema';
 import { TSchemaFormConfig } from '../types/schema';
 import { TSubscribedTemplates, TTemplateEvent } from '../types/template';
-import { TEvents, TFieldEvent, TFieldValidationPayload, TFormValidationPayload, TMutationEvents } from '../types/event';
+import { TEvents, TFieldEvent, TFieldValidationPayload, TFormDataPayload, TFormSubmitPayload, TFormValidationPayload, TMutationEvents } from '../types/event';
 import { TFormEntry, TFormValues } from '../types/form';
 import { TMapper } from '../types/mapper';
 import { TEMPLATE_AVALIABLE_SCOPES } from '../constants/constants';
@@ -17,17 +17,14 @@ declare class FormCore {
     private _iVars;
     templateSubject$: Subject<TTemplateEvent>;
     templateSubscription$: Subscription;
-    submitSubject$: Subject<TFormValues<any>>;
+    submitSubject$: Subject<TFormSubmitPayload<unknown>>;
     mountSubject$: Subject<{
         key: string;
         status: boolean;
     }>;
     fieldEventSubject$: Subject<TFieldEvent>;
-    dataSubject$: Subject<{
-        key: string;
-        event: TEvents;
-    }>;
-    formValidNotification$: Subject<TFormValidationPayload>;
+    dataSubject$: Subject<TFormDataPayload>;
+    formValidSubject$: Subject<TFormValidationPayload>;
     fieldValidNotification$: Subject<TFieldValidationPayload>;
     subscribedTemplates: TSubscribedTemplates[];
     action?: string;
@@ -334,10 +331,7 @@ declare class FormCore {
      *
      * @param {(payload: TFormValidationPayload) => void} callback callback function to call onValid
      */
-    subscribeFormValidation(callback: (payload: {
-        formIndex: string;
-        valid: boolean;
-    }) => void): Subscription;
+    subscribeFormValidation(callback: (payload: TFormValidationPayload) => void): Subscription;
     /**
      * Submits the form by triggering form field events and invoking the onSubmit callback.
      */

package/src/managers/formGroup.d.ts

@@ -1,14 +1,18 @@
-import { TFormValues } from '../types/form';
+import { Subject } from 'rxjs';
+import { TFormEntry, TFormValues } from '../types/form';
 import { TMapper } from '../types/mapper';
 import { TFormCore } from './form';
 import { TSchemaFormConfig } from '../types/schema';
-import { TFormGroupOnDataEventPayload, TFormGroupOnSubmitEventPayload, TFormGroupOnValidEventPayload } from '../types/event';
+import { TFormDataPayload, TFormGroupOnDataEventPayload, TFormGroupOnSubmitEventPayload, TFormGroupOnValidEventPayload, TFormSubmitPayload, TFormValidationPayload } from '../types/event';
 /**
  * Represents a group that manages multiple forms.
  */
 declare class FormGroup {
     forms: Map<string, TFormCore>;
     config: Required<TSchemaFormConfig>;
+    dataSubject$: Subject<TFormDataPayload>;
+    formValidSubject$: Subject<TFormValidationPayload>;
+    submitSubject$: Subject<TFormSubmitPayload<unknown>>;
     /**
      * Creates an instance of FormGroup.
      */
@@ -32,9 +36,9 @@ declare class FormGroup {
      * @param {string} options.key - The key associated with the form instance.
      * @param {TFormCore} options.formInstance - The instance of the form to add.
      */
-    addForm({ key, formInstance }: {
+    addForm({ key, params }: {
         key: string;
-        formInstance: TFormCore;
+        params: TFormEntry;
     }): void;
     /**
      * Retrieves a form instance from the form group.

package/src/types/event.d.ts

@@ -9,7 +9,7 @@ import { TFormValues } from './form';
  * const event: TEvents = 'ON_FIELD_CHANGE';
  * ```
  */
-type TEvents = 'ON_FIELD_MOUNT' | 'ON_FIELD_CHANGE' | 'ON_FIELD_BLUR' | 'ON_FIELD_FOCUS' | 'ON_FIELD_CLICK' | 'ON_FIELD_KEYUP' | 'ON_FIELD_KEYDOWN' | 'ON_FIELD_CLEARED' | 'ON_FORM_SUBMIT' | 'ON_FIELD_VALIDATION' | 'ON_FORM_MOUNT' | 'ON_API_FIELD_REQUEST' | 'ON_API_FIELD_RESPONSE';
+type TEvents = 'ON_FIELD_MOUNT' | 'ON_FIELD_UNMOUNT' | 'ON_FIELD_CHANGE' | 'ON_FIELD_BLUR' | 'ON_FIELD_FOCUS' | 'ON_FIELD_CLICK' | 'ON_FIELD_KEYUP' | 'ON_FIELD_KEYDOWN' | 'ON_FIELD_CLEARED' | 'ON_FORM_SUBMIT' | 'ON_FIELD_VALIDATION' | 'ON_FORM_MOUNT' | 'ON_API_FIELD_REQUEST' | 'ON_API_FIELD_RESPONSE';
 /**
  * @type TMutationEvents
  * Represents the different types of events that can occur internally that triggers templating.
@@ -51,6 +51,23 @@ type TFieldEvent = {
     fieldName: string;
     fieldInstance?: IFormField;
 };
+/**
+ * @type TFormDataPayload
+ * Event emitted to formGroup instance to capture onData form events
+ */
+type TFormDataPayload = {
+    formIndex: string;
+    fieldIndex: string;
+    event: TEvents;
+};
+/**
+ * @type TFormSubmitPayload
+ * Event emitted to formGroup instance to capture onSubmit form events
+ */
+type TFormSubmitPayload<T> = {
+    formIndex: string;
+    values: TFormValues<T>;
+};
 /**
  * @type TFormValidationPayload
  * Form onValid event emmited payload on callback function parameter
@@ -71,8 +88,6 @@ type TFieldValidationPayload = {
  * Form Group onData event emitted payload on callback function parameter
  */
 type TFormGroupOnDataEventPayload<T> = Record<string, {
-    formId: string;
-    formField: string;
     values?: TFormValues<T>;
 }>;
 /**
@@ -88,4 +103,4 @@ type TFormGroupOnValidEventPayload = {
  * Form Group onSubmit event emitted payload on callback function parameter
  */
 type TFormGroupOnSubmitEventPayload<T> = Record<string, TFormValues<T> | undefined>;
-export { TEvents, TMutationEvents, TMutationEnum, TValueChangeEvent, TFieldEvent, TFormGroupOnDataEventPayload, TFormGroupOnValidEventPayload, TFormGroupOnSubmitEventPayload, TFormValidationPayload, TFieldValidationPayload, };
+export { TEvents, TMutationEvents, TMutationEnum, TValueChangeEvent, TFieldEvent, TFormDataPayload, TFormSubmitPayload, TFormGroupOnDataEventPayload, TFormGroupOnValidEventPayload, TFormGroupOnSubmitEventPayload, TFormValidationPayload, TFieldValidationPayload, };

package/src/types/form.d.ts

@@ -1,5 +1,7 @@
+import { Subject } from 'rxjs';
 import { IFormSchema } from '../interfaces/schema';
 import { TMapper } from './mapper';
+import { TFormDataPayload, TFormSubmitPayload, TFormValidationPayload } from './event';
 /**
  * @type TFormValues<T>
  * Represents the values and state of a form. It has a generic type that allows the importer to determine which type values key will return.
@@ -30,6 +32,9 @@ type TFormValues<T> = {
  * @property {IFormSchema} [schema] - The schema defining the structure and behavior of the form.
  * @property {Record<string, unknown>} [initialValues] - The initial values for the form fields.
  * @property {(data: TFormValues) => void} [onSubmit] - Callback function to handle form submission.
+ * @property {Subject<TFormDataPayload>} [dataSubject$] - data subject passed from formGroup instance
+ * @property {Subject<TFormValidationPayload>} [formValidSubject$] - formValid subject passed from formGroup instance
+ * @property {Subject<TFormSubmitPayload<unknown>>} [submitSubject$] - submit subject passed from formGroup instance
  *
  * @example
  * ```typescript
@@ -43,5 +48,8 @@ type TFormValues<T> = {
 type TFormEntry = Omit<IFormSchema, 'components'> & {
     schema?: IFormSchema;
     mappers?: TMapper<unknown>[];
+    dataSubject$?: Subject<TFormDataPayload>;
+    formValidSubject$?: Subject<TFormValidationPayload>;
+    submitSubject$?: Subject<TFormSubmitPayload<unknown>>;
 };
 export { TFormValues, TFormEntry };