@bolttech/form-engine-core 0.0.2-beta.5 → 0.0.2-beta.6

package/index.esm.js

@@ -1,4 +1,4 @@
-import { Subject, Subscription, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map } from 'rxjs';
+import { Subject, Subscription, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map, distinctUntilKeyChanged } from 'rxjs';
 import creditCardType from 'credit-card-type';
 import { isNumber as isNumber$1, isFunction, cloneDeep, isEqual, get, isNil, set } from 'lodash';
 import { getCurrencySymbol } from '@gaignoux/currency';
@@ -76,11 +76,10 @@ function makeRequest(method, url, headers, body) {
       });
     }
     xhr.onload = function () {
-      if (xhr.status >= 200 && xhr.status < 300) {
-        resolve(xhr.responseText);
-      } else {
-        reject(xhr.statusText);
-      }
+      resolve({
+        status: xhr.status,
+        response: xhr.responseText
+      });
     };
     xhr.onerror = function () {
       reject(xhr.statusText);
@@ -2470,6 +2469,11 @@ class FormField {
    * @param {Function} options.resetValue - A function to reset the field value.
    * @param {unknown} [options.initialValue] - The initial value of the form field.
    * @param {Subject<{ key: string }>} options.templateSubject$ - A subject for template updates.
+   * @param {Subject<TFieldEvent>} options.fieldEventSubject$, - Subject for basic event mapped field emissions, except onData to form instance
+   * @param {Subject<{ key: string; event: TEvents }>} options.dataSubject$, - Subject to emit onData events to form instance
+   * @param {Subject<{ key: string }>} options.formValidNotification$, - Subject to emit field valid change to form instance
+   * @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,
@@ -2482,7 +2486,9 @@ class FormField {
     templateSubject$,
     fieldEventSubject$,
     dataSubject$,
-    mapper
+    formValidNotification$,
+    mapper,
+    getFormValues
   }) {
     var _a, _b, _c, _d, _e, _f, _g;
     this.valueSubscription$ = new Subscription();
@@ -2509,30 +2515,34 @@ class FormField {
     this.mapper = mapper;
     this.validateVisibility = validateVisibility;
     this.resetValue = resetValue;
+    this.getFormValues = getFormValues;
     this.templateSubject$ = templateSubject$;
     this.fieldEventSubject$ = fieldEventSubject$;
     this.dataSubject$ = dataSubject$;
+    this.formValidNotification$ = formValidNotification$;
     this._props = schemaComponent.props || {};
     this._metadata = '';
     this.errorsString = '';
     this.errorsList = [];
-    this.initialValue = initialValue;
+    this.initialValue = initialValue || (this.valuePropName && !String(this.props[this.valuePropName]).includes('${') ? this.props[this.valuePropName] : null);
     this._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: ((_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) || '',
+        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) => {
         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) || ''
+          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;
       }, {})
     };
     this._errors = {};
-    this._valid = false;
     this._mounted = true;
+    this._valid = false;
     this.initializeObservers();
     this.value = this.initialValue || '';
   }
@@ -2689,7 +2699,7 @@ class FormField {
      */
     if (!this.visibility) {
       this.value = '';
-      this._valid = true;
+      this.valid = true;
     } else {
       this.setFieldValidity({
         event: 'ON_FIELD_MOUNT'
@@ -2702,6 +2712,17 @@ class FormField {
       event: 'ON_VISIBILITY'
     });
   }
+  /**
+   * 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
+      });
+    }
+  }
   /**
    * Retrieves the validity status of the form field.
    *
@@ -2843,7 +2864,7 @@ class FormField {
     var _a, _b, _c, _d;
     if (!this.validations || !this.visibility) {
       this.errors = {};
-      this._valid = true;
+      this.valid = true;
       return;
     }
     let valid = true;
@@ -2865,7 +2886,7 @@ class FormField {
         delete errors[validationKey];
       }
     });
-    this._valid = valid;
+    this.valid = valid;
     if ((_c = (_b = this.validations) === null || _b === void 0 ? void 0 : _b.eventMessages) === null || _c === void 0 ? void 0 : _c[event]) {
       const eventMessages = {};
       (_d = this.validations.eventMessages[event]) === null || _d === void 0 ? void 0 : _d.forEach(method => {
@@ -2930,14 +2951,28 @@ class FormField {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     return __awaiter(this, void 0, void 0, function* () {
       const configRequest = config => __awaiter(this, void 0, void 0, function* () {
+        var _k;
         try {
-          const responseData = yield makeRequest(config.method, config.url, config.headers, config.body);
-          const apiResponseData = JSON.parse(String(responseData));
-          const response = config.resultPath ? get(apiResponseData, config.resultPath) : apiResponseData;
+          const {
+            status,
+            response
+          } = yield makeRequest(config.method, config.url, config.headers, config.body);
+          const callbackTransform = (_k = config.transform) === null || _k === void 0 ? void 0 : _k.callback;
+          const apiResponseData = callbackTransform ? callbackTransform({
+            payload: JSON.parse(String(response)),
+            formValues: this.getFormValues()
+          }) : JSON.parse(String(response));
+          const responseReturn = config.resultPath ? get(apiResponseData, config.resultPath) : apiResponseData;
           // this.apiResponseData = { response };
-          return response;
+          return {
+            response: responseReturn,
+            status
+          };
         } catch (e) {
-          return !isNil(config === null || config === void 0 ? void 0 : config.fallbackValue) ? config.fallbackValue : 'error';
+          return {
+            response: !isNil(config === null || config === void 0 ? void 0 : config.fallbackValue) ? config.fallbackValue : 'error',
+            status: 500
+          };
         }
       });
       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 => {
@@ -2950,9 +2985,13 @@ class FormField {
       };
       const config = (_e = this.apiSchema.defaultConfig) === null || _e === void 0 ? void 0 : _e.config;
       if (config && ((_g = (_f = this.apiSchema) === null || _f === void 0 ? void 0 : _f.defaultConfig) === null || _g === void 0 ? void 0 : _g.events.includes(event)) && this.checkApiRequestValidations(config)) {
-        const response = yield configRequest(config);
+        const {
+          response,
+          status
+        } = yield configRequest(config);
         responses.default = {
-          response
+          response,
+          status
         };
       }
       if (((_h = this.apiSchema) === null || _h === void 0 ? void 0 : _h.configs) && Object.keys((_j = this.apiSchema) === null || _j === void 0 ? void 0 : _j.configs).some(key => {
@@ -2964,14 +3003,18 @@ class FormField {
             @TODO handle promises with error
           */
           const result = yield Promise.all(Object.keys(this.apiSchema.configs).map(configKey => __awaiter(this, void 0, void 0, function* () {
-            var _k, _l, _m, _o;
-            const config = (_l = (_k = this.apiSchema) === null || _k === void 0 ? void 0 : _k.configs) === null || _l === void 0 ? void 0 : _l[configKey].config;
-            if (config && ((_o = (_m = this.apiSchema) === null || _m === void 0 ? void 0 : _m.configs) === null || _o === void 0 ? void 0 : _o[configKey].events.includes(event)) && this.checkApiRequestValidations(config)) {
-              const response = yield configRequest(config);
+            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)) {
+              const {
+                response,
+                status
+              } = yield configRequest(config);
               return {
                 name: configKey,
                 result: {
-                  response
+                  response,
+                  status
                 }
               };
             }
@@ -3043,6 +3086,8 @@ class FormCore {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     this.templateSubscription$ = new Subscription();
     this.mappers = new Map();
+    this.queuedFieldVisibilityEvents = new Map();
+    this.queuedFieldResetValuesEvents = new Map();
     this.schema = entry.schema;
     this.fields = new Map();
     this.initialValues = entry.initialValues || ((_a = entry.schema) === null || _a === void 0 ? void 0 : _a.initialValues);
@@ -3062,6 +3107,7 @@ class FormCore {
     this.fieldEventSubject$ = new Subject();
     this.dataSubject$ = new Subject();
     this.mountSubject$ = new Subject();
+    this.formValidNotification$ = new Subject();
     this.subscribedTemplates = [];
     this.schema && this.serializeStructure(this.schema.components);
     this.schema && this.subscribeTemplates();
@@ -3171,7 +3217,7 @@ class FormCore {
           const field = this.fields.get(key);
           if (!field) return console.warn(`failed to get value from ${key}`);
           if (property === 'props' && path[0] === field.valuePropName) {
-            return field.stateValue;
+            return field.value;
           }
           return path.length > 0 ? get(field[property], path) : field[property];
         }
@@ -3383,6 +3429,25 @@ class FormCore {
       }
     });
   }
+  /**
+   * executes events that were stored due to field unavaliability
+   *
+   * @param {string} field field to check
+   */
+  checkFieldEventQueues(field) {
+    if (this.queuedFieldVisibilityEvents.has(field)) {
+      this.setFieldVisibility(Object.assign({
+        field: field
+      }, this.queuedFieldVisibilityEvents.get(field)));
+      this.queuedFieldVisibilityEvents.delete(field);
+    }
+    if (this.queuedFieldResetValuesEvents.has(field)) {
+      this.setResetFieldValue(Object.assign({
+        key: field
+      }, this.queuedFieldResetValuesEvents.get(field)));
+      this.queuedFieldResetValuesEvents.delete(field);
+    }
+  }
   /**
    * @internal
    * Update field visibility accordingly.
@@ -3391,14 +3456,16 @@ class FormCore {
    * @param {boolean} hasError - Condition to be used as visibility.
    * @param {boolean|undefined} showOnlyIfTrue - Flag to be considered when update field visibility. If it's true, then considered error, if it's false, always considered the opposite.
    */
-  setFieldVisibility(field, hasError, showOnlyIfTrue) {
+  setFieldVisibility({
+    field,
+    hasError,
+    showOnlyIfTrue
+  }) {
     if (!this.fields.has(field)) {
-      /*
-       * check with João the need for a global mount event for the form
-       * to avoid not displaying this message in some cases (AsFormField)
-       * suggestion: create subscriber to targetField.ON_FIELD_MOUNT
-       */
-      console.warn(`failed to update visibility onto field ${field}`);
+      this.queuedFieldVisibilityEvents.set(field, {
+        hasError,
+        showOnlyIfTrue
+      });
     } else {
       this.fields.get(field).visibility = showOnlyIfTrue ? hasError : !hasError;
     }
@@ -3425,10 +3492,18 @@ class FormCore {
         const error = handleValidation(field.value, structElement.validations, validations, validationKey);
         if (Array.isArray(structElement.fields)) {
           structElement.fields.forEach(fieldKey => {
-            this.setFieldVisibility(fieldKey, error, !!(field.value && structElement.showOnlyIfTrue));
+            this.setFieldVisibility({
+              field: fieldKey,
+              hasError: error,
+              showOnlyIfTrue: !!(field.value && structElement.showOnlyIfTrue)
+            });
           });
         } else if (structElement.fields) {
-          this.setFieldVisibility(structElement.fields, error, !!(field.value && structElement.showOnlyIfTrue));
+          this.setFieldVisibility({
+            field: structElement.fields,
+            hasError: error,
+            showOnlyIfTrue: !!(field.value && structElement.showOnlyIfTrue)
+          });
         }
       });
     });
@@ -3440,9 +3515,14 @@ class FormCore {
    * @param {string} key - Field name to be updated.
    * @param {unknown} value - Value to be inserted into field.
    */
-  setResetFieldValue(key, value) {
+  setResetFieldValue({
+    key,
+    value
+  }) {
     if (!this.fields.has(key)) {
-      console.warn(`failed to reset value onto field ${key}`);
+      this.queuedFieldResetValuesEvents.set(key, {
+        value
+      });
     } else {
       const field = this.fields.get(key);
       field.emitValue({
@@ -3474,10 +3554,16 @@ class FormCore {
         if (Array.isArray(structElement.fields)) {
           structElement.fields.forEach((fieldKey, index) => {
             const resettledValue = Array.isArray(structElement.resettledValue) ? structElement.resettledValue[index] : structElement.resettledValue;
-            this.setResetFieldValue(fieldKey, resettledValue);
+            this.setResetFieldValue({
+              key: fieldKey,
+              value: resettledValue
+            });
           });
         } else if (structElement.fields) {
-          this.setResetFieldValue(structElement.fields, structElement.resettledValue);
+          this.setResetFieldValue({
+            key: structElement.fields,
+            value: structElement.resettledValue
+          });
         }
       };
       if (!structElement.validations) {
@@ -3513,10 +3599,12 @@ class FormCore {
       children: fieldSchema.children ? fieldSchema.children.map(el => el.name) : [],
       validateVisibility: this.validateVisibility.bind(this),
       resetValue: this.resetValue.bind(this),
+      getFormValues: this.getFormValues.bind(this),
       initialValue: (_b = this.initialValues) === null || _b === void 0 ? void 0 : _b[fieldSchema.name],
       templateSubject$: this.templateSubject$,
       fieldEventSubject$: this.fieldEventSubject$,
       dataSubject$: this.dataSubject$,
+      formValidNotification$: this.formValidNotification$,
       config: this.config
     }));
     this.subscribeTemplates();
@@ -3525,6 +3613,7 @@ class FormCore {
       event: 'ON_FIELDS',
       key: fieldSchema.name
     });
+    this.checkFieldEventQueues(fieldSchema.name);
     (_c = this.fields.get(fieldSchema.name)) === null || _c === void 0 ? void 0 : _c.emitEvents({
       event: 'ON_FIELD_MOUNT'
     });
@@ -3572,7 +3661,9 @@ class FormCore {
           templateSubject$: this.templateSubject$,
           fieldEventSubject$: this.fieldEventSubject$,
           dataSubject$: this.dataSubject$,
-          config: this.config
+          formValidNotification$: this.formValidNotification$,
+          config: this.config,
+          getFormValues: this.getFormValues.bind(this)
         }));
       } else {
         currField.children = ((_c = structElement === null || structElement === void 0 ? void 0 : structElement.children) === null || _c === void 0 ? void 0 : _c.map(el => el.name)) || (currField === null || currField === void 0 ? void 0 : currField.children) || [];
@@ -3608,6 +3699,7 @@ class FormCore {
         (_a = this.fields.get(key)) === null || _a === void 0 ? void 0 : _a.emitEvents({
           event: 'ON_FIELD_MOUNT'
         });
+        this.checkFieldEventQueues(key);
       }
     });
     this.subscribedTemplates.forEach(el => {
@@ -3682,7 +3774,7 @@ class FormCore {
   }
   /**
    *
-   * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
+   * @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(({
@@ -3701,6 +3793,21 @@ class FormCore {
     });
     return sub;
   }
+  /**
+   *
+   * @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({
+      next: callback
+    });
+    return sub;
+  }
   /**
    * Submits the form by triggering form field events and invoking the onSubmit callback.
    */
@@ -3731,6 +3838,7 @@ class FormCore {
     this.templateSubscription$.unsubscribe();
     this.fieldEventSubject$.unsubscribe();
     this.dataSubject$.unsubscribe();
+    this.formValidNotification$.unsubscribe();
     this.fields.forEach(field => field.destroyField());
   }
 }
@@ -3769,8 +3877,16 @@ class FormGroup {
   /**
    * Creates an instance of FormGroup.
    */
-  constructor() {
+  constructor(entry) {
+    var _a, _b, _c, _d;
+    this.destroy = () => {
+      this.forms.forEach(form => form.destroy());
+    };
     this.forms = new Map();
+    this.config = {
+      defaultAPIdebounceTimeMS: Number((_a = entry === null || entry === void 0 ? void 0 : entry.config) === null || _a === void 0 ? void 0 : _a.defaultAPIdebounceTimeMS) ? Number((_b = entry === null || entry === void 0 ? void 0 : entry.config) === null || _b === void 0 ? void 0 : _b.defaultAPIdebounceTimeMS) : DEFAULT_API_DEBOUNCE_TIME,
+      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
+    };
   }
   /**
    * Creates an empty form with given index
@@ -3784,7 +3900,8 @@ class FormGroup {
   }) {
     const formInstance = new FormCore({
       index,
-      mappers
+      mappers,
+      config: this.config
     });
     this.addForm({
       key: index,
@@ -3805,6 +3922,9 @@ class FormGroup {
     this.checkIndexes({
       key
     });
+    if (!formInstance.config) {
+      formInstance.config = this.config;
+    }
     this.forms.set(key, formInstance);
   }
   /**
@@ -3896,8 +4016,7 @@ class FormGroup {
   }) {
     const subs = ids.reduce((acc, formId) => {
       var _a, _b;
-      // @TODO add config on debounceTime on this events
-      const sub = (_a = this.forms.get(formId)) === null || _a === void 0 ? void 0 : _a.dataSubject$.pipe(groupBy(payload => `${formId}.${payload.event}`), mergeMap(group$ => group$.pipe(debounceTime(100))), map(({
+      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;
@@ -3919,6 +4038,31 @@ class FormGroup {
     const sub = combineLatest(subs).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(() => {
+        var _a;
+        return ((_a = this.forms.get(formId)) === null || _a === void 0 ? void 0 : _a.isValid) === false ? false : true;
+      }));
+      if (sub) {
+        acc[formId] = sub;
+      } else {
+        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
+    }))).subscribe(callback);
+    return sub;
+  }
 }
 
 export { FormCore, FormField, FormGroup, TMutationEnum };

package/package.json

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

package/src/helpers/helpers.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="node" />
 import { TEMPLATE_AVALIABLE_SCOPES } from '../constants/constants';
+import { TApiResponsePayload } from '../types/schema';
 import { TSubscribedTemplates } from '../types/template';
 import { OutgoingHttpHeaders } from 'http2';
 /**
@@ -16,7 +17,7 @@ import { OutgoingHttpHeaders } from 'http2';
  * const response = await makeRequest('GET', 'https://api.example.com/data');
  * ```
  */
-declare function makeRequest(method: string, url: string, headers?: OutgoingHttpHeaders, body?: Record<string, unknown>): Promise<string>;
+declare function makeRequest(method: string, url: string, headers?: OutgoingHttpHeaders, body?: Record<string, unknown>): Promise<TApiResponsePayload>;
 /**
  * Extracts keys enclosed in `${}` from a given expression.
  *

package/src/managers/field.d.ts

@@ -2,10 +2,11 @@ import { Observable, Subject, Subscription } from 'rxjs';
 import { TApiConfig, TApiEvent, TApiResponse, TErrorMessages, TFormatters, TMasks, TResetValueMethods, TSchemaFormConfig, TValidations, TVisibility } from '../types/schema';
 import { IComponentSchema, IComponentSchemaAsFormField } from '../interfaces/schema';
 import { IState } from '../interfaces/state';
-import { TEvents, TFieldEvent, TValueChangeEvent } from '../types/event';
+import { TEvents, TFieldEvent, TFormValidationPayload, TValueChangeEvent } from '../types/event';
 import { TMapper } from '../types/mapper';
 import { SafeSubject } from '../helpers/SafeSubject';
 import { TTemplateEvent } from '../types/template';
+import { TFormValues } from '../types/form';
 /**
  * Represents a form field with observables for managing form state, validations, and API requests.
  */
@@ -55,6 +56,7 @@ declare class FormField {
         key: string;
         event: TEvents;
     }>;
+    formValidNotification$: Subject<Pick<TFormValidationPayload, 'fieldTrigger'>>;
     validateVisibility: (payload: {
         event: TEvents;
         key: string;
@@ -63,6 +65,7 @@ declare class FormField {
         event: TEvents;
         key: string;
     }) => void;
+    getFormValues: () => TFormValues<unknown>;
     valueChangeEvent: TValueChangeEvent;
     /**
      * Creates an instance of FormField.
@@ -76,8 +79,13 @@ declare class FormField {
      * @param {Function} options.resetValue - A function to reset the field value.
      * @param {unknown} [options.initialValue] - The initial value of the form field.
      * @param {Subject<{ key: string }>} options.templateSubject$ - A subject for template updates.
+     * @param {Subject<TFieldEvent>} options.fieldEventSubject$, - Subject for basic event mapped field emissions, except onData to form instance
+     * @param {Subject<{ key: string; event: TEvents }>} options.dataSubject$, - Subject to emit onData events to form instance
+     * @param {Subject<{ key: string }>} options.formValidNotification$, - Subject to emit field valid change to form instance
+     * @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, initialValue, templateSubject$, fieldEventSubject$, dataSubject$, mapper, }: {
+    constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, initialValue, templateSubject$, fieldEventSubject$, dataSubject$, formValidNotification$, mapper, getFormValues, }: {
         schemaComponent: IComponentSchema;
         config?: TSchemaFormConfig;
         path?: string;
@@ -97,7 +105,9 @@ declare class FormField {
             key: string;
             event: TEvents;
         }>;
+        formValidNotification$: Subject<Pick<TFormValidationPayload, 'fieldTrigger'>>;
         mapper: TMapper<unknown>;
+        getFormValues: () => TFormValues<unknown>;
     });
     /**
      * method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
@@ -146,6 +156,10 @@ declare class FormField {
      * @param {boolean} visible - The new visibility status to be set.
      */
     set visibility(visible: boolean);
+    /**
+     * sets valid field state and notifies form instance via formValidNotification$
+     */
+    set valid(valid: boolean);
     /**
      * Retrieves the validity status of the form 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, TMutationEvents } from '../types/event';
+import { TEvents, TFieldEvent, TFormValidationPayload, TMutationEvents } from '../types/event';
 import { TFormEntry, TFormValues } from '../types/form';
 import { TMapper } from '../types/mapper';
 import { TEMPLATE_AVALIABLE_SCOPES } from '../constants/constants';
@@ -24,11 +24,19 @@ declare class FormCore {
         key: string;
         event: TEvents;
     }>;
+    formValidNotification$: Subject<Pick<TFormValidationPayload, 'fieldTrigger'>>;
     subscribedTemplates: TSubscribedTemplates[];
     action?: string;
     method?: string;
     config: Required<TSchemaFormConfig>;
     mappers: Map<string, TMapper<unknown>>;
+    queuedFieldVisibilityEvents: Map<string, {
+        hasError: boolean;
+        showOnlyIfTrue?: boolean;
+    }>;
+    queuedFieldResetValuesEvents: Map<string, {
+        value: unknown;
+    }>;
     /**
      * Creates an instance of FormCore.
      *
@@ -127,6 +135,12 @@ declare class FormCore {
      * @param {TMutationEvents} options.event - Internal event descriptor to handle templating.
      */
     refreshTemplates({ key, event }: TTemplateEvent): void;
+    /**
+     * executes events that were stored due to field unavaliability
+     *
+     * @param {string} field field to check
+     */
+    checkFieldEventQueues(field: string): void;
     /**
      * Validates and collects the names of form fields in the provided schema structure.
      *
@@ -228,13 +242,18 @@ declare class FormCore {
     subscribeOnMount<T>(callback: (payload: TFormValues<T>) => void): Subscription;
     /**
      *
-     * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
+     * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call onData
      */
     subscribeData<T>(callback: (payload: {
         field: string;
         data: TFormValues<T>;
     }) => void): Subscription;
     subscribeOnSubmit<T>(callback: (payload: TFormValues<T>) => void): Subscription;
+    /**
+     *
+     * @param {(payload: TFormValidationPayload) => void} callback callback function to call onValid
+     */
+    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,15 +1,20 @@
 import { TFormValues } from '../types/form';
 import { TMapper } from '../types/mapper';
 import { TFormCore } from './form';
+import { TSchemaFormConfig } from '../types/schema';
+import { TFormGroupOnDataEventPayload, TFormGroupOnValidEventPayload } from '../types/event';
 /**
  * Represents a group that manages multiple forms.
  */
 declare class FormGroup {
     forms: Map<string, TFormCore>;
+    config: Required<TSchemaFormConfig>;
     /**
      * Creates an instance of FormGroup.
      */
-    constructor();
+    constructor(entry?: {
+        config?: TSchemaFormConfig;
+    });
     /**
      * Creates an empty form with given index
      *
@@ -82,12 +87,13 @@ declare class FormGroup {
     submitMultipleFormsByIndex<T>(indexes: string[], callback?: (payload: TFormValues<T>) => void): void;
     onDataSubscription<T>({ ids, callback, }: {
         ids: string[];
-        callback: (payload: Record<string, {
-            formId: string;
-            formField: string;
-            values?: TFormValues<T>;
-        }>) => void;
+        callback: (payload: TFormGroupOnDataEventPayload<T>) => void;
     }): import("rxjs").Subscription;
+    onValidSubscription({ ids, callback, }: {
+        ids: string[];
+        callback: (payload: TFormGroupOnValidEventPayload) => void;
+    }): import("rxjs").Subscription;
+    destroy: () => void;
 }
 type TFormGroup = FormGroup;
 export { TFormGroup, FormGroup };