@bolttech/form-engine-core 1.0.0-beta.10 → 1.0.0-beta.12

package/index.esm.js

@@ -1,4 +1,4 @@
-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, distinctUntilChanged, skip } 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';
@@ -50,7 +50,7 @@ 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_AVALIABLE_SCOPES = ['fields', 'iVars', 'form'];
 const ALLOWED_RESET_PROPS_MUTATIONS = ['api', 'apiSchema', 'props', 'validations', 'visibilityConditions', 'resetValues'];
 const DEFAULT_LOG_VERBOSE = false;
 
@@ -2495,7 +2495,7 @@ class FormField {
     templateSubject$,
     fieldEventSubject$,
     dataSubject$,
-    formValidNotification$,
+    fieldValidNotification$,
     mountSubject$,
     mapper,
     getFormValues,
@@ -2535,7 +2535,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 = '';
@@ -2554,11 +2554,14 @@ class FormField {
           status: null
         };
         return acc;
-      }, {})
+      }, {}),
+      apiState: {
+        loading: false
+      }
     };
     this._errors = {};
     this._mounted = false;
-    this._valid = true;
+    this.valid = true;
     this.initializeObservers();
   }
   /**
@@ -2567,7 +2570,6 @@ class FormField {
    * emissions to unsubscribed fields
    */
   initializeObservers() {
-    var _a;
     if (!this.valueSubject$ || this.valueSubject$.closed) {
       this.valueSubject$ = new SafeSubject(() => this.mounted);
     }
@@ -2577,9 +2579,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 +2588,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);
     });
   }
@@ -2739,12 +2731,11 @@ 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.fieldValidNotification$.next({
+      fieldTrigger: this.name
+    });
   }
   /**
    * Retrieves the validity status of the form field.
@@ -2799,13 +2790,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 +2803,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.
    */
@@ -3009,6 +3012,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 {
@@ -3034,20 +3038,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
@@ -3065,10 +3072,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: {
@@ -3084,7 +3093,11 @@ class FormField {
           });
         }
       }
-      this.api = responses;
+      if (requestMadeOnce) {
+        responses.apiState.lastEvent = event;
+        responses.apiState.loading = false;
+        this.api = responses;
+      }
     });
   }
   /**
@@ -3099,9 +3112,8 @@ class FormField {
     this.fieldStateSubscription$.unsubscribe();
     this.propsSubject$.unsubscribe();
     this.errorSubject$.unsubscribe();
-    this.apiSubject$.unsubscribe();
     this.apiEventQueueSubject$.unsubscribe();
-    !this.formValidNotification$.closed && this.formValidNotification$.next({
+    !this.fieldValidNotification$.closed && this.fieldValidNotification$.next({
       fieldTrigger: this.name
     });
   }
@@ -3112,7 +3124,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
     });
   }
@@ -3152,6 +3171,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);
@@ -3170,9 +3191,13 @@ class FormCore {
     this.fieldEventSubject$ = new Subject();
     this.dataSubject$ = new Subject();
     this.mountSubject$ = new Subject();
+    this.fieldValidNotification$ = new Subject();
     this.formValidNotification$ = 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) || {};
@@ -3274,16 +3299,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.formValidNotification$.next({
+      formIndex: this.index,
+      valid: this.valid
+    });
   }
   /**
    * Subscribes to templates for dynamic updates.
@@ -3336,6 +3375,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);
@@ -3834,7 +3878,7 @@ 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),
@@ -3889,7 +3933,7 @@ class FormCore {
           templateSubject$: this.templateSubject$,
           fieldEventSubject$: this.fieldEventSubject$,
           dataSubject$: this.dataSubject$,
-          formValidNotification$: this.formValidNotification$,
+          fieldValidNotification$: this.fieldValidNotification$,
           mountSubject$: this.mountSubject$,
           config: this.config,
           getFormValues: this.getFormValues.bind(this),
@@ -3989,7 +4033,7 @@ class FormCore {
       values,
       metadata,
       erroredFields,
-      isValid: this.isValid
+      isValid: this.valid
     };
   }
   /**
@@ -4050,11 +4094,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(({
-      fieldTrigger
-    }) => ({
-      fieldTrigger,
-      valid: this.isValid
+    const sub = this.formValidNotification$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS), map(() => ({
+      formIndex: this.index,
+      valid: this.valid
     })), distinctUntilKeyChanged('valid')).subscribe({
       next: callback
     });
@@ -4069,7 +4111,7 @@ class FormCore {
         event: 'ON_FIELD_VALIDATION'
       });
     });
-    if (!this.isValid) return;
+    if (!this.valid) return;
     const values = this.getFormValues();
     this.submitSubject$.next(values);
   }
@@ -4081,7 +4123,7 @@ class FormCore {
     this.templateSubscription$.unsubscribe();
     this.fieldEventSubject$.unsubscribe();
     this.dataSubject$.unsubscribe();
-    this.formValidNotification$.unsubscribe();
+    this.fieldValidNotification$.unsubscribe();
     this.fields.forEach(field => field.destroyField());
   }
 }
@@ -4298,11 +4340,11 @@ class FormGroup {
   }) {
     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({
+      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(() => {
         var _a;
-        return ((_a = this.forms.get(formId)) === null || _a === void 0 ? void 0 : _a.isValid) === false ? false : true;
+        return ((_a = this.forms.get(formId)) === null || _a === void 0 ? void 0 : _a.valid) === false ? false : true;
       }), distinctUntilChanged());
       if (sub) {
         acc[formId] = sub;

package/package.json

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

package/src/constants/constants.d.ts

@@ -4,7 +4,7 @@ declare const TEMPLATE_REGEX_STRING_CONCATENATION_DETECTOR: RegExp;
 declare const TEMPLATE_REGEX_DELIMITATOR: RegExp;
 declare const TEMPLATE_REGEX_OPERATOR_SPLITTER: RegExp;
 declare const TEMPLATE_REGEX_OPERATOR_MATCHER: RegExp;
-declare const TEMPLATE_AVALIABLE_SCOPES: readonly ["fields", "iVars"];
+declare const TEMPLATE_AVALIABLE_SCOPES: readonly ["fields", "iVars", "form"];
 declare const ALLOWED_RESET_PROPS_MUTATIONS: ("api" | "apiSchema" | "props" | "validations" | "visibilityConditions" | "resetValues")[];
 declare const DEFAULT_LOG_VERBOSE = false;
 export { DEFAULT_API_DEBOUNCE_TIME, DEFAULT_STATE_REFRESH_TIME, DEFAULT_LOG_VERBOSE, TEMPLATE_REGEX_STRING_CONCATENATION_DETECTOR, TEMPLATE_REGEX_DELIMITATOR, TEMPLATE_REGEX_OPERATOR_SPLITTER, TEMPLATE_REGEX_OPERATOR_MATCHER, TEMPLATE_AVALIABLE_SCOPES, ALLOWED_RESET_PROPS_MUTATIONS, };

package/src/managers/field.d.ts

@@ -1,8 +1,8 @@
-import { Observable, Subject, Subscription } from 'rxjs';
+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, TFormValidationPayload, TValueChangeEvent } from '../types/event';
+import { TEvents, TFieldEvent, TFieldValidationPayload, TValueChangeEvent } from '../types/event';
 import { TMapper } from '../types/mapper';
 import { SafeSubject } from '../helpers/SafeSubject';
 import { TTemplateEvent } from '../types/template';
@@ -44,19 +44,17 @@ declare class FormField {
     valueSubject$: SafeSubject<Record<string, unknown>>;
     valueSubscription$: Subscription;
     visibilitySubject$: SafeSubject<boolean>;
-    apiSubject$: SafeSubject<TApiResponse>;
     fieldEventSubject$: Subject<TFieldEvent>;
     apiEventQueueSubject$: SafeSubject<{
         event: TEvents;
     }>;
-    fieldState$: Observable<IState>;
     fieldStateSubscription$: Subscription;
     templateSubject$: Subject<TTemplateEvent>;
     dataSubject$: Subject<{
         key: string;
         event: TEvents;
     }>;
-    formValidNotification$: Subject<Pick<TFormValidationPayload, 'fieldTrigger'>>;
+    fieldValidNotification$: Subject<TFieldValidationPayload>;
     mountSubject$: Subject<{
         key: string;
         status: boolean;
@@ -94,7 +92,7 @@ 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$, formValidNotification$, mountSubject$, mapper, getFormValues, submitEvent, visibility, }: {
+    constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, resetProperty, templateSubject$, fieldEventSubject$, dataSubject$, fieldValidNotification$, mountSubject$, mapper, getFormValues, submitEvent, visibility, }: {
         schemaComponent: IComponentSchema;
         config?: TSchemaFormConfig;
         path?: string;
@@ -118,7 +116,7 @@ declare class FormField {
             key: string;
             event: TEvents;
         }>;
-        formValidNotification$: Subject<Pick<TFormValidationPayload, 'fieldTrigger'>>;
+        fieldValidNotification$: Subject<TFieldValidationPayload>;
         mountSubject$: Subject<{
             key: string;
             status: boolean;
@@ -218,7 +216,10 @@ declare class FormField {
      */
     set api(response: TApiResponse);
     /**
-     * Retrieves the mounted status of the field.
+     * notifies templates and event binded field configurations that a request starts it's processing
+     */
+    notifyApiRequest(): void;
+    /** Retrieves the mounted status of the field.
      *
      * @returns {boolean} - the mounted status of the field.
      */

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, TFormValidationPayload, TMutationEvents } from '../types/event';
+import { TEvents, TFieldEvent, TFieldValidationPayload, TFormValidationPayload, TMutationEvents } from '../types/event';
 import { TFormEntry, TFormValues } from '../types/form';
 import { TMapper } from '../types/mapper';
 import { TEMPLATE_AVALIABLE_SCOPES } from '../constants/constants';
@@ -11,6 +11,7 @@ import { TEMPLATE_AVALIABLE_SCOPES } from '../constants/constants';
  * Represents the core logic for managing a form, including field management, validation, and submission.
  */
 declare class FormCore {
+    index: string;
     schema?: IFormSchema;
     fields: Map<string, IFormField>;
     private _iVars;
@@ -26,7 +27,8 @@ declare class FormCore {
         key: string;
         event: TEvents;
     }>;
-    formValidNotification$: Subject<Pick<TFormValidationPayload, 'fieldTrigger'>>;
+    formValidNotification$: Subject<TFormValidationPayload>;
+    fieldValidNotification$: Subject<TFieldValidationPayload>;
     subscribedTemplates: TSubscribedTemplates[];
     action?: string;
     method?: string;
@@ -45,6 +47,7 @@ declare class FormCore {
         value: unknown;
     }>;
     queuedInitialValues: Map<string, unknown>;
+    _valid: boolean;
     /**
      * Creates an instance of FormCore.
      *
@@ -92,11 +95,12 @@ declare class FormCore {
      */
     set iVars(payload: Record<string, unknown>);
     /**
-     * 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(): boolean;
+    validateForm(): boolean;
+    get valid(): boolean;
+    set valid(valid: boolean);
     /**
      * Subscribes to templates for dynamic updates.
      */
@@ -330,7 +334,10 @@ declare class FormCore {
      *
      * @param {(payload: TFormValidationPayload) => void} callback callback function to call onValid
      */
-    subscribeFormValidation(callback: (payload: TFormValidationPayload) => void): Subscription;
+    subscribeFormValidation(callback: (payload: {
+        formIndex: string;
+        valid: boolean;
+    }) => void): Subscription;
     /**
      * Submits the form by triggering form field events and invoking the onSubmit callback.
      */

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_RESPONSE';
+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 TMutationEvents
  * Represents the different types of events that can occur internally that triggers templating.
@@ -19,7 +19,7 @@ type TEvents = 'ON_FIELD_MOUNT' | 'ON_FIELD_CHANGE' | 'ON_FIELD_BLUR' | 'ON_FIEL
  * const event: TMutationEvents = 'ON_VALUE';
  * ```
  */
-type TMutationEvents = 'ON_VALUE' | 'ON_PROPS' | 'ON_VISIBILITY' | 'ON_API' | 'ON_IVARS' | 'ON_FIELDS' | 'ON_RESET';
+type TMutationEvents = 'ON_VALUE' | 'ON_PROPS' | 'ON_VISIBILITY' | 'ON_API_REQUEST' | 'ON_API_RESPONSE' | 'ON_IVARS' | 'ON_FIELDS' | 'ON_RESET' | 'ON_FORM';
 declare enum TMutationEnum {
     ON_VALUE = "value",
     ON_PROPS = "props",
@@ -56,9 +56,16 @@ type TFieldEvent = {
  * Form onValid event emmited payload on callback function parameter
  */
 type TFormValidationPayload = {
-    fieldTrigger: string;
+    formIndex: string;
     valid: boolean;
 };
+/**
+ * @type TFieldValidationPayload
+ * field event emmited payload on field validation
+ */
+type TFieldValidationPayload = {
+    fieldTrigger: string;
+};
 /**
  * @type TFormGroupOnDataEventPayload
  * Form Group onData event emitted payload on callback function parameter
@@ -81,4 +88,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, };
+export { TEvents, TMutationEvents, TMutationEnum, TValueChangeEvent, TFieldEvent, TFormGroupOnDataEventPayload, TFormGroupOnValidEventPayload, TFormGroupOnSubmitEventPayload, TFormValidationPayload, TFieldValidationPayload, };

package/src/types/schema.d.ts

@@ -667,7 +667,7 @@ type TResetValueMethods = Omit<TVisibility, 'showOnlyIfTrue' | 'validations'> &
     validations?: TSchemaValidation;
 };
 type TResetPathMethods = {
-    property: typeof ALLOWED_RESET_PROPS_MUTATIONS[number];
+    property: (typeof ALLOWED_RESET_PROPS_MUTATIONS)[number];
     path: string;
     field: string;
     resettledValue: unknown;
@@ -816,6 +816,10 @@ type TApiResponsePayload = {
 type TApiResponse = {
     default: TApiResponsePayload;
     named?: Record<string, TApiResponsePayload>;
+    apiState: {
+        loading: boolean;
+        lastEvent?: TEvents;
+    };
 };
 /**
  * Represents the schema config structure