@bolttech/form-engine-core 0.0.1-beta.4 → 0.0.1-beta.6

package/index.esm.js

@@ -2282,7 +2282,7 @@ class FormField {
     resetValue,
     initialValue,
     templateSubject$,
-    apiResponseSubject$,
+    fieldEventSubject$,
     dataSubject$,
     mapper
   }) {
@@ -2310,7 +2310,7 @@ class FormField {
     this.validateVisibility = validateVisibility;
     this.resetValue = resetValue;
     this.templateSubject$ = templateSubject$;
-    this.apiResponseSubject$ = apiResponseSubject$;
+    this.fieldEventSubject$ = fieldEventSubject$;
     this.dataSubject$ = dataSubject$;
     this._props = schemaComponent.props || {};
     this._value = '';
@@ -2622,6 +2622,11 @@ class FormField {
     this.apiEventQueueSubject$.next({
       event
     });
+    this.fieldEventSubject$.next({
+      event,
+      fieldName: this.name,
+      fieldInstance: this
+    });
   }
   /**
    * Sets the validity state of the field based on the provided validation rules and triggers error message updates.
@@ -2871,7 +2876,7 @@ class FormCore {
     this.schema && FormCore.checkIndexes(this.schema.components);
     this.templateSubject$ = new Subject();
     this.submitSubject$ = new Subject();
-    this.apiResponseSubject$ = new Subject();
+    this.fieldEventSubject$ = new Subject();
     this.dataSubject$ = new Subject();
     this.dataCallbackSubscription$ = new Subscription();
     this.subscribedTemplates = [];
@@ -2882,7 +2887,7 @@ class FormCore {
       key: IVARPROPNAME,
       event: 'ON_IVARS'
     });
-    this.apiResponseSubject$.subscribe(this.refreshApi.bind(this));
+    // this.fieldEventsSubject$.subscribe(this.refreshApi.bind(this));
     entry.onData && this.subscribeData(entry.onData);
     /*
       mount events needs to occur on form level, only when all the fields are instantiated
@@ -3286,22 +3291,22 @@ class FormCore {
    *
    * @param fieldSchema
    */
-  addField(fieldSchema) {
+  addField(fieldSchema, mapper) {
     var _a;
     if (this.fields.has(fieldSchema.name)) {
       throw new Error(`field name ${fieldSchema.name} already defined`);
     }
-    const mapper = this.mappers.find(mapEl => mapEl.componentName === fieldSchema.component);
-    if (!mapper) throw new Error(`mapper not found for ${fieldSchema.component}, add it to the mappers configuration`);
+    const mapperConfig = mapper || this.mappers.find(mapEl => mapEl.componentName === fieldSchema.component);
+    if (!mapperConfig) throw new Error(`mapper not found for ${fieldSchema.component}, add it to the mappers configuration`);
     this.fields.set(fieldSchema.name, new FormField({
       schemaComponent: fieldSchema,
-      mapper,
+      mapper: mapperConfig,
       children: fieldSchema.children ? fieldSchema.children.map(el => el.name) : [],
       validateVisibility: this.validateVisibility.bind(this),
       resetValue: this.resetValue.bind(this),
       initialValue: (_a = this.initialValues) === null || _a === void 0 ? void 0 : _a[fieldSchema.name],
       templateSubject$: this.templateSubject$,
-      apiResponseSubject$: this.apiResponseSubject$,
+      fieldEventSubject$: this.fieldEventSubject$,
       dataSubject$: this.dataSubject$,
       config: this.config
     }));
@@ -3334,7 +3339,7 @@ class FormCore {
           resetValue: this.resetValue.bind(this),
           initialValue: (_a = this.initialValues) === null || _a === void 0 ? void 0 : _a[structElement.name],
           templateSubject$: this.templateSubject$,
-          apiResponseSubject$: this.apiResponseSubject$,
+          fieldEventSubject$: this.fieldEventSubject$,
           dataSubject$: this.dataSubject$,
           config: this.config
         }));
@@ -3428,6 +3433,15 @@ class FormCore {
       isValid: this.isValid
     };
   }
+  subscribeFieldEvent({
+    event,
+    callback
+  }) {
+    const sub = this.fieldEventSubject$.pipe(filter(payload => payload.event === event)).subscribe({
+      next: callback
+    });
+    return sub;
+  }
   /**
    * Submits the form by triggering form field events and invoking the onSubmit callback.
    */
@@ -3445,7 +3459,7 @@ class FormCore {
   destroy() {
     this.submitSubject$.unsubscribe();
     this.templateSubject$.unsubscribe();
-    this.apiResponseSubject$.unsubscribe();
+    this.fieldEventSubject$.unsubscribe();
     this.dataSubject$.unsubscribe();
     this.fields.forEach(field => field.destroyField());
   }

package/package.json

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

package/src/managers/field.d.ts

@@ -2,7 +2,7 @@ import { Observable, Subject, Subscription } from 'rxjs';
 import { TApiConfig, TApiEvent, TApiResponse, TErrorMessages, TEvent, TFormatters, TMasks, TResetValueMethods, TSchemaFormConfig, TValidationMethods, TVisibility } from '../types/schema';
 import { IComponentSchema } from '../interfaces/schema';
 import { IState } from '../interfaces/state';
-import { TEvents, TMutationEvents, TValueChangeEvent } from '../types/event';
+import { TEvents, TFieldEvent, TMutationEvents, TValueChangeEvent } from '../types/event';
 import { TMapper } from '../types/mapper';
 /**
  * Represents a form field with observables for managing form state, validations, and API requests.
@@ -38,9 +38,7 @@ declare class FormField {
     valueSubject$: Subject<unknown>;
     visibilitySubject$: Subject<boolean>;
     apiSubject$: Subject<TApiResponse>;
-    apiResponseSubject$: Subject<{
-        key: string;
-    }>;
+    fieldEventSubject$: Subject<TFieldEvent>;
     apiEventQueueSubject$: Subject<{
         event: TEvents;
     }>;
@@ -76,7 +74,7 @@ declare class FormField {
      * @param {unknown} [options.initialValue] - The initial value of the form field.
      * @param {Subject<{ key: string }>} options.templateSubject$ - A subject for template updates.
      */
-    constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, initialValue, templateSubject$, apiResponseSubject$, dataSubject$, mapper, }: {
+    constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, initialValue, templateSubject$, fieldEventSubject$, dataSubject$, mapper, }: {
         schemaComponent: IComponentSchema;
         config?: TSchemaFormConfig;
         path?: string;
@@ -94,9 +92,7 @@ declare class FormField {
             key: string;
             event: TMutationEvents;
         }>;
-        apiResponseSubject$: Subject<{
-            key: string;
-        }>;
+        fieldEventSubject$: Subject<TFieldEvent>;
         dataSubject$: Subject<{
             key: string;
             event: TEvents;

package/src/managers/form.d.ts

@@ -3,7 +3,7 @@ import { Subject, Subscription } from 'rxjs';
 import { IComponentSchema, IFormSchema } from '../interfaces/schema';
 import { TSchemaFormConfig } from '../types/schema';
 import { TSubscribedTemplates } from '../types/template';
-import { TEvents, TMutationEvents } from '../types/event';
+import { TEvents, TFieldEvent, TMutationEvents } from '../types/event';
 import { TFormEntry, TFormValues } from '../types/form';
 import { TMapper } from '../types/mapper';
 /**
@@ -19,9 +19,7 @@ declare class FormCore {
         event: TMutationEvents;
     }>;
     submitSubject$: Subject<TFormValues>;
-    apiResponseSubject$: Subject<{
-        key: string;
-    }>;
+    fieldEventSubject$: Subject<TFieldEvent>;
     dataSubject$: Subject<{
         key: string;
         event: TEvents;
@@ -188,7 +186,7 @@ declare class FormCore {
      *
      * @param fieldSchema
      */
-    addField(fieldSchema: IComponentSchema): void;
+    addField(fieldSchema: IComponentSchema, mapper?: TMapper<unknown>): void;
     /**
      * Serializes the schema structure to create form fields.
      *
@@ -222,6 +220,10 @@ declare class FormCore {
      * @returns {TFormValues} The current form values.
      */
     getFormValues(): TFormValues;
+    subscribeFieldEvent({ event, callback, }: {
+        event: TEvents;
+        callback: (payload: TFieldEvent) => void;
+    }): Subscription;
     /**
      * Submits the form by triggering form field events and invoking the onSubmit callback.
      */

package/src/managers/formGroup.d.ts

@@ -1,6 +1,6 @@
 import { TFormValues } from '../types/form';
 import { TMapper } from '../types/mapper';
-import { FormCore, TFormCore } from './form';
+import { TFormCore } from './form';
 /**
  * Represents a group that manages multiple forms.
  */
@@ -40,7 +40,7 @@ declare class FormGroup {
      */
     getForm({ key }: {
         key: string;
-    }): FormCore | undefined;
+    }): TFormCore | undefined;
     /**
      * Removes a form instance from the form group.
      *

package/src/types/event.d.ts

@@ -1,3 +1,4 @@
+import { IFormField } from '../managers';
 /**
  * @type TEvents
  * Represents the different types of events that can occur on form fields.
@@ -40,4 +41,9 @@ declare enum TMutationEnum {
 type TValueChangeEvent = (value: unknown, opts?: {
     props: Record<string, unknown>;
 }) => void;
-export { TEvents, TMutationEvents, TMutationEnum, TValueChangeEvent };
+type TFieldEvent = {
+    event: TEvents;
+    fieldName: string;
+    fieldInstance?: IFormField;
+};
+export { TEvents, TMutationEvents, TMutationEnum, TValueChangeEvent, TFieldEvent };