@bolttech/form-engine-core 1.0.0-beta.5 → 1.0.0-beta.7

package/index.esm.js

@@ -1,6 +1,6 @@
 import { Subject, Subscription, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map, distinctUntilKeyChanged, distinctUntilChanged, skip } from 'rxjs';
 import creditCardType from 'credit-card-type';
-import { isNumber as isNumber$1, isFunction, cloneDeep, isEqual, get, isNil, set } from 'lodash';
+import { isNumber as isNumber$1, isFunction, cloneDeep, merge, isEqual, get, isNil, set } from 'lodash';
 import { getCurrencySymbol } from '@gaignoux/currency';
 
 var TMutationEnum;
@@ -2496,9 +2496,11 @@ class FormField {
     fieldEventSubject$,
     dataSubject$,
     formValidNotification$,
+    mountSubject$,
     mapper,
     getFormValues,
-    submitEvent
+    submitEvent,
+    visibility
   }) {
     var _a, _b, _c, _d, _e, _f, _g;
     this.valueSubscription$ = new Subscription();
@@ -2534,11 +2536,12 @@ class FormField {
     this.fieldEventSubject$ = fieldEventSubject$;
     this.dataSubject$ = dataSubject$;
     this.formValidNotification$ = formValidNotification$;
-    this._props = cloneDeep(schemaComponent.props || {});
+    this.mountSubject$ = mountSubject$;
+    this._props = FormField.filterProps(cloneDeep(schemaComponent.props || {}));
     this._metadata = '';
     this.errorsString = '';
     this.errorsList = [];
-    this._visibility = true;
+    this._visibility = typeof visibility === 'boolean' ? visibility : true;
     this._api = {
       default: {
         response: ((_e = (_d = (_c = this.apiSchema) === null || _c === void 0 ? void 0 : _c.defaultConfig) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.fallbackValue) || '',
@@ -2554,7 +2557,7 @@ class FormField {
       }, {})
     };
     this._errors = {};
-    this._mounted = true;
+    this._mounted = false;
     this._valid = false;
     this.initializeObservers();
   }
@@ -2564,25 +2567,25 @@ class FormField {
   initializeObservers() {
     var _a;
     if (!this.valueSubject$ || this.valueSubject$.closed) {
-      this.valueSubject$ = new SafeSubject(() => this._mounted);
+      this.valueSubject$ = new SafeSubject(() => this.mounted);
     }
     if (!this.errorSubject$ || this.errorSubject$.closed) {
-      this.errorSubject$ = new SafeSubject(() => this._mounted);
+      this.errorSubject$ = new SafeSubject(() => this.mounted);
     }
     if (!this.visibilitySubject$ || this.visibilitySubject$.closed) {
-      this.visibilitySubject$ = new SafeSubject(() => this._mounted);
+      this.visibilitySubject$ = new SafeSubject(() => this.mounted);
     }
     if (!this.apiSubject$ || this.apiSubject$.closed) {
-      this.apiSubject$ = new SafeSubject(() => this._mounted);
+      this.apiSubject$ = new SafeSubject(() => this.mounted);
     }
     if (!this.propsSubject$ || this.propsSubject$.closed) {
-      this.propsSubject$ = new SafeSubject(() => this._mounted);
+      this.propsSubject$ = new SafeSubject(() => this.mounted);
     }
     if (!this.fieldStateSubscription$ || this.fieldStateSubscription$.closed) {
       this.fieldStateSubscription$ = new Subscription();
     }
     if (!this.apiEventQueueSubject$ || this.apiEventQueueSubject$.closed) {
-      this.apiEventQueueSubject$ = new SafeSubject(() => this._mounted);
+      this.apiEventQueueSubject$ = new SafeSubject(() => this.mounted);
     }
     this.fieldState$ = combineLatest({
       visibility: this.visibilitySubject$.pipe(startWith(this._visibility)),
@@ -2611,8 +2614,9 @@ class FormField {
    * @param {Record<string, unknown>} props - The new properties to be set.
    */
   set props(props) {
-    if (typeof props === 'undefined' || isEqual(props, this.props)) return;
-    this._props = props;
+    const diffProps = merge(cloneDeep(this.props), props);
+    if (typeof diffProps === 'undefined' || isEqual(diffProps, this.props)) return;
+    this._props = diffProps;
     this.propsSubject$.next(this.props);
     this.templateSubject$.next({
       scope: 'fields',
@@ -2620,6 +2624,22 @@ class FormField {
       event: 'ON_PROPS'
     });
   }
+  static filterProps(props) {
+    if (Array.isArray(props)) {
+      return props.filter(el => typeof el === 'string' && el.includes('${') ? false : true).map(el => FormField.filterProps(el));
+    }
+    if (typeof props === 'object' && props !== null) {
+      return Object.keys(props).reduce((acc, curr) => {
+        const propValue = props[curr];
+        if (typeof propValue === 'string' && propValue.includes('${')) {
+          return acc;
+        }
+        acc[curr] = FormField.filterProps(props[curr]);
+        return acc;
+      }, {});
+    }
+    return props;
+  }
   /**
    * Retrieves the current state value of the form field.
    *
@@ -2784,6 +2804,17 @@ class FormField {
       event: 'ON_API_FIELD_RESPONSE'
     });
   }
+  get mounted() {
+    return this._mounted;
+  }
+  set mounted(mountedStatus) {
+    if (typeof mountedStatus === 'undefined' || mountedStatus === this.mounted) return;
+    this._mounted = mountedStatus;
+    this.mountSubject$.next({
+      key: this.name,
+      status: this.mounted
+    });
+  }
   /**
    * Mounts the form field by initializing necessary subjects and combining their streams.
    *
@@ -2796,10 +2827,15 @@ class FormField {
     valueSubscription,
     propsSubscription
   }) {
-    this.initializeObservers();
     this.subscribeValue(valueSubscription);
     this.subscribeState(propsSubscription);
-    this._mounted = true;
+    this.mounted = true;
+    this.valueSubject$.next(this.stateValue);
+    this.propsSubject$.next(this.props);
+    this.visibilitySubject$.next(this.visibility);
+    this.setFieldValidity({
+      event: 'ON_FIELD_MOUNT'
+    });
   }
   /**
    * Sets the value of the form field and emits associated events.
@@ -2809,7 +2845,7 @@ class FormField {
    * @returns {void}
    */
   emitValue(prop) {
-    if (!this.visibility) return;
+    if (!this.visibility || !this.mounted) return;
     this.value = prop.value;
     this.emitEvents({
       event: prop.event
@@ -2831,13 +2867,13 @@ class FormField {
     if (event === 'ON_FORM_SUBMIT') {
       return this.submitEvent();
     }
-    this.setFieldValidity({
-      event
-    });
     this.validateVisibility({
       event,
       key: this.name
     });
+    this.setFieldValidity({
+      event
+    });
     this.resetValue({
       event,
       key: this.name
@@ -3037,7 +3073,7 @@ class FormField {
    * @returns {void}
    */
   destroyField() {
-    this._mounted = false;
+    this.mounted = false;
     this.valueSubscription$.unsubscribe();
     this.visibilitySubject$.unsubscribe();
     this.fieldStateSubscription$.unsubscribe();
@@ -3089,7 +3125,7 @@ class FormCore {
    * @param {((payload: {field: string;data: TFormValues;}) => void) | undefined} [entry.onData] - A callback function to handle data emission.
    */
   constructor(entry) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     this.templateSubscription$ = new Subscription();
     this.mappers = new Map();
     this.queuedFieldVisibilityEvents = new Map();
@@ -3117,40 +3153,71 @@ class FormCore {
     this.mountSubject$ = new Subject();
     this.formValidNotification$ = new Subject();
     this.subscribedTemplates = [];
-    this.schema && this.serializeStructure(this.schema.components);
-    this.schema && this.subscribeTemplates();
+    // this.schema && this.serializeStructure(this.schema.components);
+    // this.schema && this.subscribeTemplates();
     this.templateSubscription$ = this.templateSubject$.subscribe(this.refreshTemplates.bind(this));
-    this.templateSubject$.next({
-      scope: 'iVars',
-      event: 'ON_IVARS'
-    });
+    this.mountSubject$.subscribe(this.mountActions.bind(this));
+    // this.templateSubject$.next({
+    //   scope: 'iVars',
+    //   event: 'ON_IVARS',
+    // });
     /*
     only emits event ON_FIELD_MOUNT if does not have initialValue, if has initialValue, initialValues class property setter will
     emit the value along with ON_FIELD_MOUNT event
     */
-    const initialValues = entry.initialValues || ((_k = entry.schema) === null || _k === void 0 ? void 0 : _k.initialValues);
-    this.fields.forEach((field, key) => {
-      var _a;
-      if (!initialValues || initialValues && !Object.keys(initialValues).includes(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 === null || field === void 0 ? void 0 : field.emitValue({
-          value: typeof propValue === 'string' && !propValue.includes('${') ? propValue : '',
-          event: 'ON_FIELD_MOUNT'
-        }));
-      }
+    // const initialValues = entry.initialValues || entry.schema?.initialValues;
+    // this.fields.forEach((field, key) => {
+    //   if (
+    //     !initialValues ||
+    //     (initialValues && !Object.keys(initialValues).includes(key))
+    //   ) {
+    //     const propValue = field?.props?.[field?.valuePropName || ''];
+    //     !field?.value &&
+    //       field?.emitValue({
+    //         value:
+    //           typeof propValue === 'string' && !propValue.includes('${')
+    //             ? propValue
+    //             : '',
+    //         event: 'ON_FIELD_MOUNT',
+    //       });
+    //   }
+    //   this.refreshTemplates({ scope: 'fields', key, event: 'ON_FIELDS' });
+    // });
+    // this.setInitialValues(initialValues);
+  }
+  mountActions({
+    status,
+    key
+  }) {
+    var _a;
+    if (status) {
+      this.subscribeTemplates();
       this.refreshTemplates({
         scope: 'fields',
-        key,
         event: 'ON_FIELDS'
       });
-    });
-    this.setInitialValues(initialValues);
+      this.templateSubject$.next({
+        scope: 'iVars',
+        event: 'ON_IVARS'
+      });
+      if (!this.queuedInitialValues.has(key)) {
+        const field = this.fields.get(key);
+        const propValue = (_a = field === null || field === void 0 ? void 0 : field.props) === null || _a === void 0 ? void 0 : _a[(field === null || field === void 0 ? void 0 : field.valuePropName) || ''];
+        !(field === null || field === void 0 ? void 0 : field.value) ? field.emitValue({
+          value: typeof propValue === 'string' && !propValue.includes('${') ? propValue : '',
+          event: 'ON_FIELD_MOUNT'
+        }) : field.emitEvents({
+          event: 'ON_FIELD_MOUNT'
+        });
+      }
+      this.checkFieldEventQueues(key);
+    }
   }
-  setInitialValues(payload) {
+  set initialValues(payload) {
     if (payload) {
       Object.keys(payload).forEach(key => {
         const field = this.fields.get(key);
-        if (!field || !(field === null || field === void 0 ? void 0 : field.visibility)) {
+        if (!field || !(field === null || field === void 0 ? void 0 : field.visibility) || !(field === null || field === void 0 ? void 0 : field.mounted)) {
           this.queuedInitialValues.set(key, payload === null || payload === void 0 ? void 0 : payload[key]);
         } else {
           field.emitValue({
@@ -3187,6 +3254,7 @@ class FormCore {
    * @returns {boolean} True if the form is valid; otherwise, false.
    */
   get isValid() {
+    if (this.fields.size === 0) return false;
     for (const [, field] of this.fields) {
       if (!field.valid) return false;
     }
@@ -3293,10 +3361,8 @@ class FormCore {
       }
       const fieldProp = field[property];
       let propState;
-      if (Array.isArray(fieldProp)) {
-        propState = [...fieldProp];
-      } else if (typeof fieldProp === 'object' && !isNil(fieldProp)) {
-        propState = Object.assign({}, fieldProp);
+      if (Array.isArray(fieldProp) || typeof fieldProp === 'object' && !isNil(fieldProp)) {
+        propState = cloneDeep(fieldProp);
       } else {
         this.config.defaultLogVerbose && console.warn(`invalid template property, skipping evaluation of ${field.name} with ${fieldProp}`);
         return;
@@ -3466,6 +3532,8 @@ class FormCore {
    * @param {string} field field to check
    */
   checkFieldEventQueues(field) {
+    var _a;
+    if (!((_a = this.fields.get(field)) === null || _a === void 0 ? void 0 : _a.mounted)) return;
     if (this.queuedFieldVisibilityEvents.has(field)) {
       this.setFieldVisibility(Object.assign({
         field: field
@@ -3473,10 +3541,11 @@ class FormCore {
       this.queuedFieldVisibilityEvents.delete(field);
     }
     if (this.queuedInitialValues.has(field)) {
-      this.setInitialValues({
-        [field]: this.queuedInitialValues.get(field)
-      });
+      const value = this.queuedInitialValues.get(field);
       this.queuedInitialValues.delete(field);
+      this.initialValues = {
+        [field]: value
+      };
     }
     if (this.queuedFieldResetValuesEvents.has(field)) {
       this.setResetFieldValue(Object.assign({
@@ -3506,14 +3575,16 @@ class FormCore {
     showOnlyIfTrue
   }) {
     const fieldInstance = this.fields.get(field);
-    if (!fieldInstance) {
+    if (!fieldInstance || !fieldInstance.mounted) {
       this.queuedFieldVisibilityEvents.set(field, {
         hasError,
         showOnlyIfTrue
       });
     } else {
+      const currentVisibility = fieldInstance.visibility;
       const visibility = showOnlyIfTrue ? hasError : !hasError;
       fieldInstance.visibility = visibility;
+      if (currentVisibility === visibility) return;
       /**
        * I was sure I would not require to gambiarra, but..
        * in order to ignore an hidden value on a form submit
@@ -3585,12 +3656,12 @@ class FormCore {
     key,
     value
   }) {
-    if (!this.fields.has(key)) {
+    const field = this.fields.get(key);
+    if (!field || !(field === null || field === void 0 ? void 0 : field.mounted)) {
       this.queuedFieldResetValuesEvents.set(key, {
         value
       });
     } else {
-      const field = this.fields.get(key);
       field.emitValue({
         value: value,
         event: 'ON_FIELD_CLEARED'
@@ -3656,7 +3727,8 @@ class FormCore {
     path,
     value
   }) {
-    if (!this.fields.has(key)) {
+    const field = this.fields.get(key);
+    if (!field || field.mounted) {
       this.queuedFieldResetPropertyEvents.set(key, {
         property,
         path,
@@ -3720,7 +3792,7 @@ class FormCore {
     fieldSchema,
     mapperElement
   }) {
-    var _a, _b;
+    var _a;
     if (this.fields.has(fieldSchema.name)) {
       throw new Error(`field name ${fieldSchema.name} already defined`);
     }
@@ -3738,23 +3810,29 @@ class FormCore {
       fieldEventSubject$: this.fieldEventSubject$,
       dataSubject$: this.dataSubject$,
       formValidNotification$: this.formValidNotification$,
+      mountSubject$: this.mountSubject$,
       config: this.config,
-      submitEvent: this.submit.bind(this)
+      submitEvent: this.submit.bind(this),
+      visibility: fieldSchema.visibility
     }));
-    this.subscribeTemplates();
-    this.refreshTemplates({
-      scope: 'fields',
-      event: 'ON_FIELDS'
-    });
-    if (!this.queuedInitialValues.has(fieldSchema.name)) {
-      const field = this.fields.get(fieldSchema.name);
-      const propValue = (_b = field === null || field === void 0 ? void 0 : field.props) === null || _b === void 0 ? void 0 : _b[(field === null || field === void 0 ? void 0 : field.valuePropName) || ''];
-      !(field === null || field === void 0 ? void 0 : field.value) && (field === null || field === void 0 ? void 0 : field.emitValue({
-        value: typeof propValue === 'string' && !propValue.includes('${') ? propValue : '',
-        event: 'ON_FIELD_MOUNT'
-      }));
-    }
-    this.checkFieldEventQueues(fieldSchema.name);
+    // this.subscribeTemplates();
+    // this.refreshTemplates({
+    //   scope: 'fields',
+    //   event: 'ON_FIELDS',
+    // });
+    // // if (!this.queuedInitialValues.has(fieldSchema.name)) {
+    // //   const field = this.fields.get(fieldSchema.name);
+    // //   const propValue = field?.props?.[field?.valuePropName || ''];
+    // //   !field?.value &&
+    // //     field?.emitValue({
+    // //       value:
+    // //         typeof propValue === 'string' && !propValue.includes('${')
+    // //           ? propValue
+    // //           : '',
+    // //       event: 'ON_FIELD_MOUNT',
+    // //     });
+    // // }
+    // this.checkFieldEventQueues(fieldSchema.name);
   }
   removeField({
     key
@@ -3769,64 +3847,6 @@ class FormCore {
       event: 'ON_FIELDS'
     });
   }
-  static serializeStructure({
-    struct,
-    path,
-    fields = new Map(),
-    mappers
-  }) {
-    if (!struct) return fields;
-    struct.forEach(structElement => {
-      var _a;
-      const currField = fields.get(structElement.name);
-      if (!currField) {
-        let mapper;
-        if (structElement === null || structElement === void 0 ? void 0 : structElement.mapper) {
-          mapper = structElement === null || structElement === void 0 ? void 0 : structElement.mapper;
-        } else {
-          mapper = mappers === null || mappers === void 0 ? void 0 : mappers.find(el => el.componentName === structElement.component);
-        }
-        if (!mapper) throw new Error(`mapper not found for ${structElement.component}, add it to the mappers configuration`);
-        fields.set(structElement.name, new FormField({
-          schemaComponent: structElement,
-          mapper,
-          path,
-          children: structElement.children ? structElement.children.map(el => el.name) : [],
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
-          validateVisibility: () => {},
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
-          resetValue: () => {},
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
-          resetProperty: () => {},
-          templateSubject$: new Subject(),
-          fieldEventSubject$: new Subject(),
-          dataSubject$: new Subject(),
-          formValidNotification$: new Subject(),
-          getFormValues: () => ({
-            erroredFields: [],
-            isValid: false,
-            values: []
-          }),
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
-          submitEvent: () => {}
-        }));
-      } else {
-        currField.children = ((_a = structElement === null || structElement === void 0 ? void 0 : structElement.children) === null || _a === void 0 ? void 0 : _a.map(el => el.name)) || (currField === null || currField === void 0 ? void 0 : currField.children) || [];
-        currField.path = path;
-        currField.originalSchema = structElement;
-        currField.templateSubject$ = new Subject();
-      }
-      if (structElement.children) {
-        this.serializeStructure({
-          fields,
-          path: `${path ? `${path}.` : ``}${structElement.name}`,
-          mappers: mappers,
-          struct: structElement.children
-        });
-      }
-    });
-    return fields;
-  }
   /**
    * Serializes the schema structure to create form fields.
    *
@@ -3858,9 +3878,11 @@ class FormCore {
           fieldEventSubject$: this.fieldEventSubject$,
           dataSubject$: this.dataSubject$,
           formValidNotification$: this.formValidNotification$,
+          mountSubject$: this.mountSubject$,
           config: this.config,
           getFormValues: this.getFormValues.bind(this),
-          submitEvent: this.submit.bind(this)
+          submitEvent: this.submit.bind(this),
+          visibility: structElement.visibility
         }));
       } else {
         currField.children = ((_b = structElement === null || structElement === void 0 ? void 0 : structElement.children) === null || _b === void 0 ? void 0 : _b.map(el => el.name)) || (currField === null || currField === void 0 ? void 0 : currField.children) || [];
@@ -3940,10 +3962,12 @@ class FormCore {
    */
   getFormValues() {
     const values = {};
+    const metadata = {};
     const erroredFields = [];
     this.fields.forEach((val, key) => {
       if (val.value) {
         set(values, val.nameToSubmit || key, val.value);
+        metadata[key] = val.metadata;
       }
       if (!val.valid) {
         erroredFields.push(key);
@@ -3951,6 +3975,7 @@ class FormCore {
     });
     return {
       values,
+      metadata,
       erroredFields,
       isValid: this.isValid
     };
@@ -4005,18 +4030,6 @@ class FormCore {
     });
     return sub;
   }
-  /**
-   * Submits the form by triggering form field events and invoking the onSubmit callback.
-   */
-  mounted() {
-    this.fields.forEach(field => {
-      field.emitEvents({
-        event: 'ON_FORM_MOUNT'
-      });
-    });
-    const values = this.getFormValues();
-    this.mountSubject$.next(values);
-  }
   /**
    * Submits the form by triggering form field events and invoking the onSubmit callback.
    */
@@ -4031,6 +4044,7 @@ class FormCore {
     this.submitSubject$.next(values);
   }
   destroy() {
+    console.log('removing form');
     this.submitSubject$.unsubscribe();
     this.templateSubscription$.unsubscribe();
     this.fieldEventSubject$.unsubscribe();
@@ -4161,9 +4175,15 @@ class FormGroup {
     formIndex,
     fieldIndex
   }) {
-    var _a, _b, _c;
-    (_b = (_a = this.forms.get(formIndex)) === null || _a === void 0 ? void 0 : _a.fields.get(fieldIndex)) === null || _b === void 0 ? void 0 : _b.destroyField();
-    (_c = this.forms.get(formIndex)) === null || _c === void 0 ? void 0 : _c.fields.delete(fieldIndex);
+    var _a;
+    const form = this.forms.get(formIndex);
+    (_a = form === null || form === void 0 ? void 0 : form.fields.get(fieldIndex)) === null || _a === void 0 ? void 0 : _a.destroyField();
+    form === null || form === void 0 ? void 0 : form.fields.delete(fieldIndex);
+    if ((form === null || form === void 0 ? void 0 : form.fields.size) === 0) {
+      this.removeForm({
+        key: formIndex
+      });
+    }
   }
   /**
    * Checks if the specified key already exists in the form group.
@@ -4194,6 +4214,7 @@ class FormGroup {
   submitMultipleFormsByIndex(indexes, callback) {
     let isValid = true;
     let values = {};
+    let metadata = {};
     let erroredFields = [];
     indexes.forEach(index => {
       var _a, _b;
@@ -4201,12 +4222,14 @@ class FormGroup {
       const res = (_b = this.forms.get(index)) === null || _b === void 0 ? void 0 : _b.getFormValues();
       isValid = isValid && ((res === null || res === void 0 ? void 0 : res.isValid) || false);
       values = Object.assign(Object.assign({}, values), (res === null || res === void 0 ? void 0 : res.values) || {});
+      metadata = Object.assign(Object.assign({}, metadata), (res === null || res === void 0 ? void 0 : res.metadata) || {});
       erroredFields = [...erroredFields, ...((res === null || res === void 0 ? void 0 : res.erroredFields) || [])];
     });
     isValid && callback && callback({
       erroredFields,
       isValid,
-      values
+      values,
+      metadata
     });
   }
   onDataSubscription({

package/package.json

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

package/src/interfaces/schema.d.ts

@@ -62,6 +62,7 @@ interface IComponentSchema {
     formatters?: TFormatters;
     masks?: TMasks;
     children?: IComponentSchema[];
+    visibility?: boolean;
 }
 interface IComponentSchemaAsFormField<T> extends IComponentSchema {
     mapper?: TMapper<T>;

package/src/managers/field.d.ts

@@ -57,6 +57,10 @@ declare class FormField {
         event: TEvents;
     }>;
     formValidNotification$: Subject<Pick<TFormValidationPayload, 'fieldTrigger'>>;
+    mountSubject$: Subject<{
+        key: string;
+        status: boolean;
+    }>;
     validateVisibility: (payload: {
         event: TEvents;
         key: string;
@@ -90,7 +94,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$, mapper, getFormValues, submitEvent, }: {
+    constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, resetProperty, templateSubject$, fieldEventSubject$, dataSubject$, formValidNotification$, mountSubject$, mapper, getFormValues, submitEvent, visibility, }: {
         schemaComponent: IComponentSchema;
         config?: TSchemaFormConfig;
         path?: string;
@@ -115,8 +119,13 @@ declare class FormField {
             event: TEvents;
         }>;
         formValidNotification$: Subject<Pick<TFormValidationPayload, 'fieldTrigger'>>;
+        mountSubject$: Subject<{
+            key: string;
+            status: boolean;
+        }>;
         mapper: TMapper<unknown>;
         getFormValues: () => TFormValues<unknown>;
+        visibility?: boolean;
     });
     /**
      * method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
@@ -134,6 +143,7 @@ declare class FormField {
      * @param {Record<string, unknown>} props - The new properties to be set.
      */
     set props(props: Record<string, unknown>);
+    static filterProps(props: unknown): unknown;
     /**
      * Retrieves the current state value of the form field.
      *
@@ -199,6 +209,8 @@ declare class FormField {
      * @param {TApiResponse} response - The new API response data to be set.
      */
     set api(response: TApiResponse);
+    get mounted(): boolean;
+    set mounted(mountedStatus: boolean);
     /**
      * Mounts the form field by initializing necessary subjects and combining their streams.
      *

package/src/managers/form.d.ts

@@ -17,7 +17,10 @@ declare class FormCore {
     templateSubject$: Subject<TTemplateEvent>;
     templateSubscription$: Subscription;
     submitSubject$: Subject<TFormValues<any>>;
-    mountSubject$: Subject<TFormValues<any>>;
+    mountSubject$: Subject<{
+        key: string;
+        status: boolean;
+    }>;
     fieldEventSubject$: Subject<TFieldEvent>;
     dataSubject$: Subject<{
         key: string;
@@ -54,7 +57,11 @@ declare class FormCore {
      * @param {((payload: {field: string;data: TFormValues;}) => void) | undefined} [entry.onData] - A callback function to handle data emission.
      */
     constructor(entry: TFormEntry & Omit<IFormSchema, 'components'>);
-    setInitialValues(payload: Record<string, unknown> | undefined): void;
+    mountActions({ status, key }: {
+        key: string;
+        status: boolean;
+    }): void;
+    set initialValues(payload: Record<string, unknown> | undefined);
     /**
      * Retrieves the internal variables (iVars) of the form.
      *
@@ -233,12 +240,6 @@ declare class FormCore {
     removeField({ key }: {
         key: string;
     }): void;
-    static serializeStructure({ struct, path, fields, mappers, }: {
-        struct?: IComponentSchemaAsFormField<unknown>[];
-        path?: string;
-        fields?: Map<string, IFormField>;
-        mappers: TMapper<unknown>[];
-    }): Map<string, IFormField>;
     /**
      * Serializes the schema structure to create form fields.
      *
@@ -290,10 +291,6 @@ declare class FormCore {
      * @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.
-     */
-    mounted<T>(): void;
     /**
      * Submits the form by triggering form field events and invoking the onSubmit callback.
      */

package/src/types/form.d.ts

@@ -19,6 +19,7 @@ import { TMapper } from './mapper';
  */
 type TFormValues<T> = {
     values: T;
+    metadata: unknown;
     erroredFields: string[];
     isValid: boolean;
 };