@bolttech/form-engine-core 0.0.1-beta.1 → 0.0.1-beta.11

package/index.esm.js

@@ -1,4 +1,4 @@
-import { Subscription, Subject, combineLatest, startWith, groupBy, mergeMap, debounceTime, map } from 'rxjs';
+import { Subscription, Subject, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map } from 'rxjs';
 import creditCardType from 'credit-card-type';
 import { isNumber as isNumber$1, isNil, isEqual, get, set } from 'lodash';
 import { getCurrencySymbol } from '@gaignoux/currency';
@@ -681,16 +681,9 @@ const currency = (value, masks) => {
   if (integerPart === '') {
     integerPart = '0';
   }
-  console.log('Before', {
-    convertedValue
-  });
   if (align === 'right' && String(value).endsWith(' ')) {
     convertedValue = convertedValue.slice(0, -1);
   }
-  console.log('After', {
-    value,
-    convertedValue
-  });
   let newRawValue = integerPart;
   let decimalPart = convertedValue.slice(convertedValue.length - precision);
   if (precision > 0) {
@@ -2256,6 +2249,9 @@ const validations = {
   validDate
 };
 
+const DEFAULT_API_DEBOUNCE_TIME = 1000;
+const DEFAULT_STATE_REFRESH_TIME = 100;
+
 /**
  * Represents a form field with observables for managing form state, validations, and API requests.
  */
@@ -2265,6 +2261,7 @@ class FormField {
    *
    * @param {object} options - Configuration options for the form field.
    * @param {IComponentSchema} options.schemaComponent - The schema definition for the form field.
+   * @param {TSchemaFormConfig} options.config - The schema default configuration for debounced actions.
    * @param {string} [options.path] - The path within the form field (used internally during recursion).
    * @param {string[]} options.children - An array of children fields names.
    * @param {Function} options.validateVisibility - A function to validate the visibility of the field.
@@ -2274,19 +2271,26 @@ class FormField {
    */
   constructor({
     schemaComponent,
+    config,
     path,
     children,
     validateVisibility,
     resetValue,
     initialValue,
     templateSubject$,
-    apiResponseSubject$,
+    fieldEventSubject$,
     dataSubject$,
     mapper
   }) {
     var _a, _b, _c, _d, _e, _f, _g;
     this.fieldStateSubscription$ = new Subscription();
+    this.originalSchema = schemaComponent;
+    this.config = {
+      defaultAPIdebounceTimeMS: Number(config === null || config === void 0 ? void 0 : config.defaultAPIdebounceTimeMS) ? Number(config === null || config === void 0 ? void 0 : config.defaultAPIdebounceTimeMS) : DEFAULT_API_DEBOUNCE_TIME,
+      defaultStateRefreshTimeMS: Number(config === null || config === void 0 ? void 0 : config.defaultStateRefreshTimeMS) ? Number(config === null || config === void 0 ? void 0 : config.defaultStateRefreshTimeMS) : DEFAULT_STATE_REFRESH_TIME
+    };
     this.name = schemaComponent.name;
+    this.nameToSubmit = schemaComponent.nameToSubmit;
     this.component = schemaComponent.component;
     this.path = path;
     this.children = children;
@@ -2299,17 +2303,20 @@ class FormField {
     this.masks = schemaComponent.masks;
     if (mapper.valueChangeEvent) this.valueChangeEvent = mapper.valueChangeEvent;
     if ((_a = mapper.events) === null || _a === void 0 ? void 0 : _a.setValue) this.valuePropName = mapper.events.setValue;
-    if ((_b = mapper.events) === null || _b === void 0 ? void 0 : _b.setErrorMessage) this.errorMessagePropName = mapper.events.setErrorMessage;
     this.mapper = mapper;
     this.validateVisibility = validateVisibility;
     this.resetValue = resetValue;
     this.templateSubject$ = templateSubject$;
-    this.apiResponseSubject$ = apiResponseSubject$;
+    this.fieldEventSubject$ = fieldEventSubject$;
     this.dataSubject$ = dataSubject$;
     this._props = schemaComponent.props || {};
     this._value = '';
-    this._stateValue = '';
+    this._stateValue = ((_b = this.mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) ? {
+      [this.mapper.events.setValue]: ''
+    } : {};
     this._metadata = '';
+    this.errorsString = '';
+    this.errorsList = [];
     this.initialValue = initialValue;
     this._visibility = true;
     this._api = {
@@ -2324,7 +2331,7 @@ class FormField {
         return acc;
       }, {})
     };
-    this._errorsString = '';
+    this._errors = {};
     this._valid = false;
     this.initializeObservers();
   }
@@ -2332,6 +2339,7 @@ class FormField {
    * method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
    */
   initializeObservers() {
+    var _a;
     if (!this.valueSubject$ || this.valueSubject$.closed) {
       this.valueSubject$ = new Subject();
     }
@@ -2354,33 +2362,21 @@ class FormField {
       this.apiEventQueueSubject$ = new Subject();
     }
     this.fieldState$ = combineLatest({
-      errors: this.errorSubject$.pipe(startWith([])),
       visibility: this.visibilitySubject$.pipe(startWith(this._visibility)),
-      apiResponse: this.apiSubject$.pipe(startWith(this._api)),
-      props: this.propsSubject$.pipe(startWith(this._props))
+      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(this.debounceDistinct(({
+    !this.apiEventQueueSubject$.observed && this.apiEventQueueSubject$.pipe(groupBy(({
       event
-    }) => event, 1000)).subscribe(payload => {
+    }) => event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultAPIdebounceTimeMS))), filter(() => this.apiSubject$ && !this.apiSubject$.closed)).subscribe(payload => {
       this.apiRequest(payload);
     });
     if (!isNil(this.initialValue)) {
       this.value = this.initialValue;
     }
   }
-  /**
-   * Observable function to emit api events debounced and distinct for each event type,
-   * avoiding previous events being cancelled by new events if they occur inside the debounce time interval
-   *
-   * @param {(event: { event: TEvents }) => TEvents} keyExtractor function that will pass the event key to the groupBy operator
-   * @param {number} debounceTimeMs time to wait for each individual event emmited
-   * @returns
-   */
-  debounceDistinct(keyExtractor, debounceTimeMs) {
-    return source$ => source$.pipe(groupBy(keyExtractor), mergeMap(group$ => group$.pipe(debounceTime(debounceTimeMs), map(() => ({
-      event: group$.key
-    })))));
-  }
   /**
    * Retrieves the properties associated with the form field.
    *
@@ -2406,7 +2402,7 @@ class FormField {
   /**
    * Retrieves the current state value of the form field.
    *
-   * @returns {unknown} - The current state value of the form field.
+   * @returns {Record<string,unknown>} - The current state value of the form field.
    */
   get stateValue() {
     return this._stateValue;
@@ -2414,14 +2410,6 @@ class FormField {
   get metadata() {
     return this._metadata;
   }
-  /**
-   * Retrieves the concatenated string of errors associated with the form field.
-   *
-   * @returns {string} - The concatenated string of errors.
-   */
-  get errorsString() {
-    return this._errorsString;
-  }
   /**
    * Retrieves the current value of the form field.
    *
@@ -2436,6 +2424,7 @@ class FormField {
    * @param {unknown} value - The new value to be set.
    */
   set value(value) {
+    var _a, _b, _c;
     /*
       too much unstable, if the valueChangeEvent parses the template event
       value, might occur unexpected results
@@ -2455,22 +2444,19 @@ class FormField {
     if (typeof val === 'undefined' || val === null) return;
     if (typeof val === 'object' && '_value' in val && '_metadata' in val) {
       this._value = this.formatValue(val['_value']);
-      this._stateValue = this.maskValue(this.formatValue(val['_value']));
+      this._stateValue = ((_a = this.mapper.events) === null || _a === void 0 ? void 0 : _a.setValue) ? {
+        [this.mapper.events.setValue]: this.maskValue(this.formatValue(val['_value']))
+      } : {};
       this._metadata = val._metadata;
     } else {
       this._value = this.formatValue(val);
-      this._stateValue = this.maskValue(this.formatValue(val));
+      this._stateValue = ((_b = this.mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) ? {
+        [(_c = this.mapper.events) === null || _c === void 0 ? void 0 : _c.setValue]: this.maskValue(this.formatValue(val))
+      } : {};
+      this.maskValue(this.formatValue(val));
       this._metadata = val;
     }
-    /*
-      update prop value attribute to sync with templating
-      currently doesn't need prop Subject emission since it's synced with value
-      to avoid excessive prop subject emissions on each keystroke
-    */
-    if (this.valuePropName) this._props = Object.assign(Object.assign({}, this.props), {
-      [this.valuePropName]: this.value
-    });
-    this.valueSubject$.next(this._stateValue);
+    this.stateValue && this.valueSubject$.next(this.stateValue);
     this.templateSubject$.next({
       key: this.name,
       event: 'ON_VALUE'
@@ -2520,10 +2506,17 @@ class FormField {
    * @param {TErrorMessages} errors - The new error messages to be set.
    */
   set errors(errors) {
+    var _a;
     if (typeof errors === 'undefined' || isEqual(errors, this.errors)) return;
     this._errors = errors;
-    this._errorsString = Object.values(this.errors).join(', ');
-    this.errorSubject$.next(Object.values(this.errors));
+    this.errorsList = Object.values(this.errors);
+    this.errorsString = this.errorsList.join(', ');
+    /**
+     * if any error receieves a list of errors, set a prop for it, currently only supporting a single string
+     */
+    ((_a = this.mapper.events) === null || _a === void 0 ? void 0 : _a.setErrorMessage) && this.errorSubject$.next({
+      [this.mapper.events.setErrorMessage]: this.errorsString
+    });
     this.templateSubject$.next({
       key: this.name,
       event: 'ON_PROPS'
@@ -2559,11 +2552,8 @@ class FormField {
    * Mounts the form field by initializing necessary subjects and combining their streams.
    *
    * @param {object} mountOpts - Adapter mount options.
-   * @param {string} prop.valuePropName - Adapter value property name.
-   * @param {(event: unknown) => unknown} prop.valueChangeEvent - Adapter change event handler function
    * @param {(value: unknown) => unknown} prop.valueSubscription - Adapter value change function
    * @param {(payload: Partial<IState>) => unknown} prop.propsSubscription - Adapter prop change function
-   * @param {string} prop.errorMessagePropName - error message property name to set errors onto component
    * @returns {void}
    */
   mountField({
@@ -2614,6 +2604,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.
@@ -2639,14 +2634,19 @@ class FormField {
     const errors = Object.assign({}, this.errors);
     const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.config;
     schemaValidations && Object.keys(schemaValidations).forEach(validationKey => {
-      var _a, _b;
+      var _a;
       const error = validations[validationKey](this.value, schemaValidations);
       // setting valid flag
       valid = !error && valid;
       // setting error messages
       if (((_a = this.validations) === null || _a === void 0 ? void 0 : _a.events.includes(event)) || event === 'ON_FORM_SUBMIT') {
-        if (error && ((_b = this.errorMessages) === null || _b === void 0 ? void 0 : _b[validationKey])) {
-          errors[validationKey] = this.errorMessages[validationKey];
+        if (error && this.errorMessages) {
+          if (validationKey in this.errorMessages) {
+            const messages = this.errorMessages;
+            errors[validationKey] = messages[validationKey];
+          } else if ('default' in this.errorMessages) {
+            errors[validationKey] = this.errorMessages.default;
+          }
         } else {
           delete errors[validationKey];
         }
@@ -2654,10 +2654,19 @@ class FormField {
     });
     this._valid = valid;
     this.errors = errors;
-    // remove later
-    if (this.errorMessagePropName) this.props = Object.assign(Object.assign({}, this.props), {
-      [this.errorMessagePropName]: this.errorsString
+  }
+  /**
+   * WIP expensive function to get updated field validity on each event
+   */
+  updateValidityFlag() {
+    var _a;
+    let valid = true;
+    const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.config;
+    schemaValidations && Object.keys(schemaValidations).forEach(validationKey => {
+      const error = validations[validationKey](this.value, schemaValidations);
+      valid = !error && valid;
     });
+    this._valid = valid;
   }
   /**
    * Formats the field value using the specified formatters, if available.
@@ -2802,7 +2811,7 @@ class FormField {
    * @returns {void}
    */
   subscribeState(callback) {
-    this.fieldStateSubscription$ = this.fieldState$.pipe(debounceTime(100)).subscribe({
+    this.fieldStateSubscription$ = this.fieldState$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS)).subscribe({
       next: callback
     });
   }
@@ -2837,7 +2846,8 @@ 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    this.mappers = 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);
@@ -2845,11 +2855,17 @@ class FormCore {
     this.method = entry.method || ((_c = entry.schema) === null || _c === void 0 ? void 0 : _c.method);
     this._iVars = entry.iVars || ((_d = entry.schema) === null || _d === void 0 ? void 0 : _d.iVars) || {};
     this.onSubmit = entry.onSubmit;
-    this.mappers = entry.mappers;
+    this.config = {
+      defaultAPIdebounceTimeMS: Number((_e = entry.config) === null || _e === void 0 ? void 0 : _e.defaultAPIdebounceTimeMS) ? Number((_f = entry.config) === null || _f === void 0 ? void 0 : _f.defaultAPIdebounceTimeMS) : DEFAULT_API_DEBOUNCE_TIME,
+      defaultStateRefreshTimeMS: Number((_g = entry.config) === null || _g === void 0 ? void 0 : _g.defaultStateRefreshTimeMS) ? Number((_h = entry.config) === null || _h === void 0 ? void 0 : _h.defaultStateRefreshTimeMS) : DEFAULT_STATE_REFRESH_TIME
+    };
+    (_j = entry.mappers) === null || _j === void 0 ? void 0 : _j.map(mapper => {
+      this.mappers.set(mapper.componentName, mapper);
+    });
     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 = [];
@@ -2860,7 +2876,6 @@ class FormCore {
       key: IVARPROPNAME,
       event: 'ON_IVARS'
     });
-    this.apiResponseSubject$.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
@@ -2912,20 +2927,18 @@ class FormCore {
    * Subscribes to templates for dynamic updates.
    */
   subscribeTemplates() {
-    /*
-      @TODO fix removal of templates of removed fields, they are kept
-      tried: this.subscribedTemplates = [] and only stores the last one..
-    */
+    this.subscribedTemplates = [];
     this.fields.forEach(({
-      component,
-      props,
-      name,
-      validations,
-      visibilityConditions,
-      resetValues,
-      errorMessages,
-      apiSchema,
-      metadata
+      originalSchema: {
+        component,
+        props,
+        name,
+        validations,
+        visibilityConditions,
+        resetValues,
+        errorMessages,
+        api
+      }
     }, key) => {
       const template = {
         component,
@@ -2935,19 +2948,17 @@ class FormCore {
         visibilityConditions,
         resetValues,
         errorMessages,
-        apiSchema,
-        metadata
+        apiSchema: api
       };
       traverseObject(template, key).forEach(element => this.subscribedTemplates.push(element));
     });
-    // console.log(subscribedProps);
   }
   /**
    *
    * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
    */
   subscribeData(callback) {
-    this.dataCallbackSubscription$ = this.dataSubject$.pipe(debounceTime(100), map(({
+    this.dataCallbackSubscription$ = this.dataSubject$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS), map(({
       key
     }) => ({
       field: key,
@@ -2974,8 +2985,12 @@ class FormCore {
       const value = get(this.iVars, [property, ...path]);
       return value;
     }
-    if (!this.fields.has(key)) return console.warn(`failed to get value from ${key}`);
-    return path.length > 0 ? get(this.fields.get(key)[property], path) : this.fields.get(key)[property];
+    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 path.length > 0 ? get(field[property], path) : field[property];
   }
   /**
    * Sets the value of a property in a field.
@@ -3008,7 +3023,6 @@ class FormCore {
         now using key !== originKey, check if any recursion error occurs
       **/
       if (property === 'props' && path[0] === field.valuePropName && key !== originKey) {
-        // field.value = value;
         field.emitValue({
           event: 'ON_FIELD_CHANGE',
           value
@@ -3048,7 +3062,6 @@ class FormCore {
     const operatorRegex = /\s*(\|\||&&|!)\s*/g;
     const splittedString = extractedValues.map(el => el.split(operatorRegex));
     const result = splittedString.map(splittedStringVal => {
-      // console.log(splittedStringVal)
       return splittedStringVal.filter(Boolean).reduce((acc, curr) => {
         if (curr.match(/^\|\||&&|!$/)) {
           return `${acc}${curr}`;
@@ -3081,6 +3094,11 @@ class FormCore {
           case 'object':
             if (currValue === null) {
               value = null;
+              break;
+            }
+            if (currValue instanceof Date) {
+              value = `new Date(\`${currValue}\`)`;
+              break;
             }
             value = JSON.stringify(currValue);
             break;
@@ -3092,7 +3110,6 @@ class FormCore {
     });
     return result.map(el => {
       try {
-        // console.log(el);
         return new Function(`return ${el}`)();
       } catch (e) {
         console.log(e);
@@ -3109,7 +3126,7 @@ class FormCore {
    */
   replaceExpression(expression, values) {
     const regex = /\${(.*?)}/g;
-    return expression.replace(regex, () => values.shift() || '');
+    return expression.replace(regex, () => String(values.shift()) || '');
   }
   /**
    * Checks if an expression string contains string concatenation within a marked expression.
@@ -3165,34 +3182,6 @@ class FormCore {
       }
     });
   }
-  /**
-   * Refreshes api observed fields.
-   *
-   * @param {object} options - Options for refreshing api.
-   * @param {string} options.key - The key of the field triggering the update.
-   */
-  refreshApi({
-    key
-  }) {
-    /*
-      global api notifications needs to have field dependency array
-      in order to be reliable, disabled for now
-    */
-    return key;
-    // const emmittedFields: string[] = [];
-    // this.subscribedTemplates.forEach((template) => {
-    //   if (
-    //     template.originFieldKeys.includes(key) &&
-    //     template.originPropertyKeys.includes('api') &&
-    //     !emmittedFields.includes(template.destinationKey)
-    //   ) {
-    //     emmittedFields.push(template.destinationKey);
-    //     this.fields
-    //       .get(template.destinationKey)
-    //       ?.emitEvents({ event: 'ON_API_RESPONSE' });
-    //   }
-    // });
-  }
   /**
    * Validates visibility conditions for a given event and updates field visibility accordingly.
    *
@@ -3258,6 +3247,54 @@ class FormCore {
       });
     });
   }
+  /**
+   * Adds a field onto the form instance regardless there is a schema or not
+   *
+   * @param fieldSchema
+   */
+  addField({
+    fieldSchema,
+    mapperElement
+  }) {
+    var _a, _b, _c;
+    if (this.fields.has(fieldSchema.name)) {
+      throw new Error(`field name ${fieldSchema.name} already defined`);
+    }
+    const mapper = mapperElement || ((_a = this.mappers) === null || _a === void 0 ? void 0 : _a.get(fieldSchema.component));
+    if (!mapper) throw new Error(`mapper not found for ${fieldSchema.component}, add it to the mappers configuration`);
+    this.fields.set(fieldSchema.name, new FormField({
+      schemaComponent: fieldSchema,
+      mapper,
+      children: fieldSchema.children ? fieldSchema.children.map(el => el.name) : [],
+      validateVisibility: this.validateVisibility.bind(this),
+      resetValue: this.resetValue.bind(this),
+      initialValue: (_b = this.initialValues) === null || _b === void 0 ? void 0 : _b[fieldSchema.name],
+      templateSubject$: this.templateSubject$,
+      fieldEventSubject$: this.fieldEventSubject$,
+      dataSubject$: this.dataSubject$,
+      config: this.config
+    }));
+    this.subscribeTemplates();
+    this.refreshTemplates({
+      event: 'ON_FIELDS',
+      key: fieldSchema.name
+    });
+    (_c = this.fields.get(fieldSchema.name)) === null || _c === void 0 ? void 0 : _c.emitEvents({
+      event: 'ON_FIELD_MOUNT'
+    });
+  }
+  removeField({
+    key
+  }) {
+    var _a;
+    (_a = this.fields.get(key)) === null || _a === void 0 ? void 0 : _a.destroyField();
+    this.fields.delete(key);
+    this.subscribeTemplates();
+    this.templateSubject$.next({
+      key,
+      event: 'ON_FIELDS'
+    });
+  }
   /**
    * Serializes the schema structure to create form fields.
    *
@@ -3267,10 +3304,15 @@ class FormCore {
   serializeStructure(struct, path) {
     if (!struct) return;
     struct.forEach(structElement => {
-      var _a, _b;
+      var _a, _b, _c;
       const currField = this.fields.get(structElement.name);
       if (!currField) {
-        const mapper = this.mappers.find(mapEl => mapEl.componentName === structElement.component);
+        let mapper;
+        if (structElement === null || structElement === void 0 ? void 0 : structElement.mapper) {
+          mapper = structElement === null || structElement === void 0 ? void 0 : structElement.mapper;
+        } else {
+          mapper = (_a = this.mappers) === null || _a === void 0 ? void 0 : _a.get(structElement.component);
+        }
         if (!mapper) throw new Error(`mapper not found for ${structElement.component}, add it to the mappers configuration`);
         this.fields.set(structElement.name, new FormField({
           schemaComponent: structElement,
@@ -3279,18 +3321,20 @@ class FormCore {
           children: structElement.children ? structElement.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[structElement.name],
+          initialValue: (_b = this.initialValues) === null || _b === void 0 ? void 0 : _b[structElement.name],
           templateSubject$: this.templateSubject$,
-          apiResponseSubject$: this.apiResponseSubject$,
-          dataSubject$: this.dataSubject$
+          fieldEventSubject$: this.fieldEventSubject$,
+          dataSubject$: this.dataSubject$,
+          config: this.config
         }));
       } 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) || [];
+        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) || [];
         currField.path = path;
+        currField.originalSchema = structElement;
         currField.templateSubject$ = this.templateSubject$;
       }
       if (structElement.children) {
-        return this.serializeStructure(structElement.children, `${path ? `${path}.` : ``}${structElement.name}`);
+        this.serializeStructure(structElement.children, `${path ? `${path}.` : ``}${structElement.name}`);
       }
     });
   }
@@ -3347,10 +3391,9 @@ class FormCore {
     const values = {};
     this.fields.forEach((val, key) => {
       if (val.value) {
-        values[key] = val.value;
+        set(values, val.nameToSubmit || key, val.value);
       }
     });
-    console.log(values);
   }
   /**
    * Gets the current values of all form fields.
@@ -3362,7 +3405,7 @@ class FormCore {
     const erroredFields = [];
     this.fields.forEach((val, key) => {
       if (val.value) {
-        values[key] = val.value;
+        set(values, val.nameToSubmit || key, val.value);
       }
       if (!val.valid) {
         erroredFields.push(key);
@@ -3374,6 +3417,14 @@ class FormCore {
       isValid: this.isValid
     };
   }
+  subscribeFieldEvent({
+    callback
+  }) {
+    const sub = this.fieldEventSubject$.pipe(groupBy(payload => payload.event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS)))).subscribe({
+      next: callback
+    });
+    return sub;
+  }
   /**
    * Submits the form by triggering form field events and invoking the onSubmit callback.
    */
@@ -3391,8 +3442,9 @@ class FormCore {
   destroy() {
     this.submitSubject$.unsubscribe();
     this.templateSubject$.unsubscribe();
-    this.apiResponseSubject$.unsubscribe();
+    this.fieldEventSubject$.unsubscribe();
     this.dataSubject$.unsubscribe();
+    this.fields.forEach(field => field.destroyField());
   }
 }
 /**
@@ -3406,15 +3458,22 @@ class FormCore {
  */
 FormCore.checkIndexes = (struct, indexes = []) => {
   if (!struct) return indexes;
-  for (let i = 0; i < struct.length; i++) {
-    const structElement = struct[i];
-    if (structElement.name === IVARPROPNAME) {
-      throw new Error(`reserved ${IVARPROPNAME} name for field names`);
-    }
-    indexes.push(structElement.name);
-    if (structElement.children) {
-      return FormCore.checkIndexes(structElement.children, indexes);
+  const helper = (struct, indexes) => {
+    for (let i = 0; i < struct.length; i++) {
+      const structElement = struct[i];
+      if (structElement.name === IVARPROPNAME) {
+        throw new Error(`reserved ${IVARPROPNAME} name for field names`);
+      }
+      indexes.push(structElement.name);
+      if (structElement.children) {
+        helper(structElement.children, indexes);
+      }
     }
+  };
+  helper(struct, indexes);
+  const duppedIndexes = indexes.filter((item, index) => indexes.indexOf(item) !== index);
+  if (duppedIndexes.length > 0) {
+    throw new Error(`duplicated indexes found on schema: ${JSON.stringify(duppedIndexes)}`);
   }
   return indexes;
 };
@@ -3429,6 +3488,25 @@ class FormGroup {
   constructor() {
     this.forms = new Map();
   }
+  /**
+   * Creates an empty form with given index
+   *
+   * @param {string} options.index
+   * @param {TMapper<unknown>} options.mappers
+   */
+  createFormWithIndex({
+    index,
+    mappers
+  }) {
+    const formInstance = new FormCore({
+      index,
+      mappers
+    });
+    this.addForm({
+      key: index,
+      formInstance
+    });
+  }
   /**
    * Adds a form instance to the form group.
    *
@@ -3471,6 +3549,20 @@ class FormGroup {
     (_a = this.forms.get(key)) === null || _a === void 0 ? void 0 : _a.destroy();
     this.forms.delete(key);
   }
+  /**
+   * removes a field given a form and field index
+   *
+   * @param {string} options.formIndex
+   * @param {string} options.fieldIndex
+   */
+  removeField({
+    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);
+  }
   /**
    * Checks if the specified key already exists in the form group.
    *