@bolttech/form-engine-core 1.0.7 → 1.0.9

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as rxjs from 'rxjs';
-import { Subject, Subscription } from 'rxjs';
+import { Subject, Subscription, BehaviorSubject } from 'rxjs';
 import { TCurrencyLocalCode, TCurrencyCode } from '@gaignoux/currency';
 import { OutgoingHttpHeaders } from 'http2';
 
@@ -7,7 +7,12 @@ type AllowOnly<T, K extends keyof T> = Pick<T, K> & {
     [P in keyof Omit<T, K>]?: never;
 };
 type OneOf<T, K = keyof T> = K extends keyof T ? AllowOnly<T, K> : never;
-type TValidationHandler = Record<string, (value: unknown, validations: TValidationMethods) => boolean>;
+type TValidationPayload = [
+    unknown,
+    TValidationMethods,
+    TFormValues<unknown>?
+];
+type TValidationHandler = Record<string, (...args: TValidationPayload) => boolean>;
 
 type TComponentPropsMappingSubset = keyof (Pick<TEventPropsEnum, 'onBlur' | 'onChange' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'onClick'> & Pick<TEventDataPropsEnum, 'onSubmit'>);
 /**
@@ -325,7 +330,7 @@ type TLengthValidation = {
  * const callbackValidation: TCallbackValidation = (value) => typeof value === 'string';
  * ```
  */
-type TCallbackValidation = (value: unknown) => boolean;
+type TCallbackValidation = (value: unknown, formValues: Pick<TFormValues<unknown>, 'values' | 'metadata'>) => boolean;
 /**
  * @type TBetweenValidation
  * Represents validation rules that check if a value is between a range.
@@ -1422,6 +1427,7 @@ declare class FormField {
         key: string;
         status: boolean;
     }>;
+    formValuesStateSubject$: BehaviorSubject<TFormValues<unknown>>;
     validateVisibility: (payload: {
         event: TEvents;
         key: string;
@@ -1456,7 +1462,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({ formIndex, schemaComponent, config, children, validateVisibility, resetValue, resetProperty, templateSubject$, fieldEventSubject$, dataSubject$, fieldValidNotification$, mountSubject$, mapper, getFormValues, submitEvent, visibility, persistValue, }: {
+    constructor({ formIndex, schemaComponent, config, children, validateVisibility, resetValue, resetProperty, templateSubject$, fieldEventSubject$, dataSubject$, fieldValidNotification$, mountSubject$, mapper, formValuesStateSubject$, submitEvent, visibility, persistValue, }: {
         formIndex: string;
         schemaComponent: IComponentSchema;
         config?: TSchemaFormConfig;
@@ -1483,8 +1489,8 @@ declare class FormField {
             key: string;
             status: boolean;
         }>;
+        formValuesStateSubject$: BehaviorSubject<TFormValues<unknown>>;
         mapper: TMapper<unknown>;
-        getFormValues: () => TFormValues<unknown>;
         visibility?: boolean;
         persistValue?: boolean;
     });
@@ -1721,6 +1727,7 @@ declare class FormCore {
     dataSubject$: Subject<TFormDataPayload>;
     formValidSubject$: Subject<TFormValidationPayload>;
     fieldValidNotification$: Subject<TFieldValidationPayload>;
+    formValuesStateSubject$: BehaviorSubject<TFormValues<unknown>>;
     subscribedTemplates: TSubscribedTemplates[];
     action?: string;
     method?: string;
@@ -1742,6 +1749,7 @@ declare class FormCore {
     _valid: boolean;
     stopEventsOnSubmit: boolean;
     submitted: boolean;
+    getFormValues: () => TFormValues<unknown>;
     /**
      * Creates an instance of FormCore.
      *
@@ -1998,7 +2006,7 @@ declare class FormCore {
      *
      * @returns {TFormValues} The current form values.
      */
-    getFormValues<T>(): TFormValues<T>;
+    getFormState<T>(): TFormValues<T>;
     /**
      * function to be called to events sent from the adapter
      *
@@ -2324,4 +2332,4 @@ type TFormGroupOnValidEventPayload = {
 type TFormGroupOnSubmitEventPayload<T> = Record<string, TFormValues<T> | undefined>;
 
 export { FormCore, FormField, FormGroup, TMutationEnum };
-export type { AllowOnly, IComponentSchema, IComponentSchemaAsFormField, IFormField, IFormSchema, IState, OneOf, TAllowedResetPropsMutationsEnum, TApiConfig, TApiEvent, TApiResponse, TApiResponsePayload, TAvailableValidations, TBetweenDatesValidation, TBetweenValidation, TCallbackValidation, TComponentPropsMapping, TConditionsValidation, TConditionsValidationSet, TCreditCardMatch, TCurrencyMask, TDateFormatsValidation, TDateInterval, TDateOperatorsValidation, TDateValidation, TDocumentValidation, TErrorMessages, TEvent, TEventDataProps, TEventDataPropsEnum, TEventEnum, TEventMessages, TEventMessagesValidationMethods, TEventProps, TEventPropsEnum, TEvents, TFieldEvent, TFieldValidationPayload, TFormCore, TFormDataPayload, TFormDataValues, TFormEntry, TFormGroup, TFormGroupOnDataEventPayload, TFormGroupOnSubmitEventPayload, TFormGroupOnValidEventPayload, TFormSubmitPayload, TFormValidationPayload, TFormValues, TFormatters, TGenericValidationRule, TLengthValidation, TMapper, TMaskGeneric, TMasks, TMultipleValidation, TMutationEvents, TProps, TResetPathMethods, TResetValueMethods, TSchemaFormConfig, TSchemaValidation, TSplitterFormatterValue, TSubscribedTemplates, TTemplateAvaliableScopes, TTemplateAvaliableScopesEnum, TTemplateEvent, TValidationHandler, TValidationMethods, TValidations, TValueChangeEvent, TVisibility };
+export type { AllowOnly, IComponentSchema, IComponentSchemaAsFormField, IFormField, IFormSchema, IState, OneOf, TAllowedResetPropsMutationsEnum, TApiConfig, TApiEvent, TApiResponse, TApiResponsePayload, TAvailableValidations, TBetweenDatesValidation, TBetweenValidation, TCallbackValidation, TComponentPropsMapping, TConditionsValidation, TConditionsValidationSet, TCreditCardMatch, TCurrencyMask, TDateFormatsValidation, TDateInterval, TDateOperatorsValidation, TDateValidation, TDocumentValidation, TErrorMessages, TEvent, TEventDataProps, TEventDataPropsEnum, TEventEnum, TEventMessages, TEventMessagesValidationMethods, TEventProps, TEventPropsEnum, TEvents, TFieldEvent, TFieldValidationPayload, TFormCore, TFormDataPayload, TFormDataValues, TFormEntry, TFormGroup, TFormGroupOnDataEventPayload, TFormGroupOnSubmitEventPayload, TFormGroupOnValidEventPayload, TFormSubmitPayload, TFormValidationPayload, TFormValues, TFormatters, TGenericValidationRule, TLengthValidation, TMapper, TMaskGeneric, TMasks, TMultipleValidation, TMutationEvents, TProps, TResetPathMethods, TResetValueMethods, TSchemaFormConfig, TSchemaValidation, TSplitterFormatterValue, TSubscribedTemplates, TTemplateAvaliableScopes, TTemplateAvaliableScopesEnum, TTemplateEvent, TValidationHandler, TValidationMethods, TValidationPayload, TValidations, TValueChangeEvent, TVisibility };

package/index.esm.js

@@ -1,4 +1,4 @@
-import { Subject, Subscription, groupBy, mergeMap, debounceTime, filter, combineLatest, startWith, map, distinctUntilKeyChanged } from 'rxjs';
+import { Subject, Subscription, groupBy, mergeMap, debounceTime, filter, combineLatest, startWith, BehaviorSubject, map, distinctUntilKeyChanged } from 'rxjs';
 import creditCardType from 'credit-card-type';
 import isNumber$1 from 'lodash/isNumber';
 import { getCurrencySymbol } from '@gaignoux/currency';
@@ -1594,6 +1594,7 @@ const repeated = (value, validations) => {
  *
  * @param value - The value to be validated.
  * @param validations - An object containing validation methods, including a custom callback function.
+ * @param formValues - An object containing the form state, NOTE: validations might be dirty here
  * @returns `true` if the custom callback validation function returns `true`, otherwise `false`.
  *
  * @example
@@ -1612,9 +1613,20 @@ const repeated = (value, validations) => {
  * };
  * ```
  */
-const callback = (value, validations) => {
+const callback = (value, validations, {
+  values = [],
+  metadata = []
+} = {
+  values: [],
+  metadata: [],
+  erroredFields: [],
+  isValid: true
+}) => {
   if (!validations.callback || !((validations === null || validations === void 0 ? void 0 : validations.callback) instanceof Function)) return false;
-  return validations.callback(value);
+  return validations.callback(value, {
+    values,
+    metadata
+  });
 };
 
 /**
@@ -2475,9 +2487,9 @@ class SafeSubject extends Subject {
  * const isValid = handleValidation(value, validations, methods, key);
  * console.log(isValid); // Output: true
  */
-function handleValidation(value, validations, methods, key) {
+function handleValidation(value, validations, methods, key, formValues) {
   if (isFunction(methods[key])) {
-    return methods[key](value, validations);
+    return methods[key](value, validations, formValues);
   }
   return namedRule(value, validations[key], methods);
 }
@@ -2518,7 +2530,7 @@ class FormField {
     fieldValidNotification$,
     mountSubject$,
     mapper,
-    getFormValues,
+    formValuesStateSubject$,
     submitEvent,
     visibility,
     persistValue
@@ -2550,13 +2562,14 @@ class FormField {
     this.validateVisibility = validateVisibility;
     this.resetValue = resetValue;
     this.resetProperty = resetProperty;
-    this.getFormValues = getFormValues;
     this.submitEvent = submitEvent;
     this.templateSubject$ = templateSubject$;
     this.fieldEventSubject$ = fieldEventSubject$;
     this.dataSubject$ = dataSubject$;
     this.fieldValidNotification$ = fieldValidNotification$;
     this.mountSubject$ = mountSubject$;
+    this.formValuesStateSubject$ = formValuesStateSubject$;
+    this.getFormValues = () => this.formValuesStateSubject$.value;
     this._props = FormField.filterProps(cloneDeep(schemaComponent.props || {}));
     this._adapterProps = JSON.stringify(schemaComponent.props || {});
     this._metadata = '';
@@ -2633,7 +2646,7 @@ class FormField {
    */
   set adapterProps(props) {
     const currentProps = JSON.stringify(props || {});
-    // it's a very basic comparison to determine if props changed, 
+    // it's a very basic comparison to determine if props changed,
     // will need review if we need complex comparisons
     if (currentProps !== this.adapterProps) {
       this.props = FormField.filterProps(props);
@@ -2895,7 +2908,7 @@ class FormField {
     if (typeof mountedStatus === 'undefined' || mountedStatus === this.mounted) return;
     this._mounted = mountedStatus;
     this.initializeObservers();
-    this.mountSubject$.next({
+    if (!this.mountSubject$.closed) this.mountSubject$.next({
       key: this.name,
       status: this.mounted
     });
@@ -2912,14 +2925,20 @@ class FormField {
     valueSubscription,
     propsSubscription
   }) {
+    /*
+      NOTE: using emitEvents here will make ON_FIELD_MOUNT emit twice
+      mount logic is managed on form.ts mountActions on first render
+     */
     this.mounted = true;
     this.subscribeValue(valueSubscription);
     this.subscribeState(propsSubscription);
     this.valueSubject$.next(this.stateValue);
     this.propsSubject$.next(this.props);
     this.visibilitySubject$.next(this.visibility);
-    this.setFieldValidity({
-      event: 'ON_FIELD_MOUNT'
+    this.fieldEventSubject$.next({
+      event: 'ON_FIELD_MOUNT',
+      fieldName: this.name,
+      fieldInstance: this
     });
   }
   /**
@@ -2997,12 +3016,12 @@ class FormField {
     const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.methods;
     if (schemaValidations) {
       Object.keys(schemaValidations).forEach(validationKey => {
-        var _a;
-        const error = handleValidation(this.value, schemaValidations, validations, validationKey);
+        var _a, _b;
+        const error = handleValidation(this.value, schemaValidations, validations, validationKey, (_a = this.formValuesStateSubject$) === null || _a === void 0 ? void 0 : _a.value);
         // setting valid flag
         valid = !error && valid;
         // setting error messages
-        if (error && ((_a = this.validations) === null || _a === void 0 ? void 0 : _a.messages)) {
+        if (error && ((_b = this.validations) === null || _b === void 0 ? void 0 : _b.messages)) {
           if (validationKey in this.validations.messages) {
             const messages = this.validations.messages;
             errors[validationKey] = messages[validationKey];
@@ -3060,7 +3079,8 @@ class FormField {
     const preConditions = config.preConditions;
     if (preConditions) {
       Object.keys(preConditions).forEach(validationKey => {
-        const error = handleValidation(this.value, preConditions, validations, validationKey);
+        var _a;
+        const error = handleValidation(this.value, preConditions, validations, validationKey, (_a = this.formValuesStateSubject$) === null || _a === void 0 ? void 0 : _a.value);
         valid = valid && !error;
       });
     }
@@ -3082,7 +3102,7 @@ class FormField {
       var _b, _c, _d, _e, _f, _g, _h, _j, _k;
       let requestMadeOnce = false;
       const configRequest = config => __awaiter(this, void 0, void 0, function* () {
-        var _a;
+        var _a, _b;
         try {
           const {
             status,
@@ -3091,7 +3111,7 @@ class FormField {
           const callbackTransform = (_a = config.transform) === null || _a === void 0 ? void 0 : _a.callback;
           const apiResponseData = callbackTransform ? callbackTransform({
             payload: JSON.parse(String(response)),
-            formValues: this.getFormValues()
+            formValues: (_b = this.formValuesStateSubject$) === null || _b === void 0 ? void 0 : _b.value
           }) : JSON.parse(String(response));
           const responseReturn = config.resultPath ? get(apiResponseData, config.resultPath) : apiResponseData;
           // this.apiResponseData = { response };
@@ -3277,11 +3297,31 @@ class FormCore {
     this.submitSubject$ = entry.submitSubject$ ? entry.submitSubject$ : new Subject();
     this.dataSubject$ = entry.dataSubject$ ? entry.dataSubject$ : new Subject();
     this.formValidSubject$ = entry.formValidSubject$ ? entry.formValidSubject$ : new Subject();
+    this.formValuesStateSubject$ = new BehaviorSubject({
+      erroredFields: [],
+      isValid: true,
+      metadata: [],
+      values: []
+    });
+    this.getFormValues = () => this.formValuesStateSubject$.value;
     this.subscribedTemplates = [];
     this.templateSubscription$ = this.templateSubject$.subscribe(this.refreshTemplates.bind(this));
     this.fieldValidNotification$.subscribe(() => {
       this.validateForm();
     });
+    /*
+      @TODO check if this emissions can be merged
+      every value update needs to occur after and before validations on field emitValue change
+      so both callback validation and onData values are synced and fields and validations are correct
+      
+      check field.ts emitValue and emitEvents
+    */
+    this.fieldEventSubject$.subscribe(() => {
+      this.formValuesStateSubject$.next(this.getFormState());
+    });
+    this.dataSubject$.subscribe(() => {
+      this.formValuesStateSubject$.next(this.getFormState());
+    });
     this.mountSubject$.subscribe(this.mountActions.bind(this));
     this.initialValues = entry.initialValues || ((_j = entry.schema) === null || _j === void 0 ? void 0 : _j.initialValues);
     this.iVars = entry.iVars || ((_k = entry.schema) === null || _k === void 0 ? void 0 : _k.iVars) || {};
@@ -3803,7 +3843,7 @@ class FormCore {
     structVisibility.forEach(structElement => {
       if (!structElement.events.includes(event)) return;
       Object.keys(structElement.validations).forEach(validationKey => {
-        const error = handleValidation(field.value, structElement.validations, validations, validationKey);
+        const error = handleValidation(field.value, structElement.validations, validations, validationKey, this.formValuesStateSubject$.value);
         if (Array.isArray(structElement.fields)) {
           structElement.fields.forEach(fieldKey => {
             this.setFieldVisibility({
@@ -3882,7 +3922,7 @@ class FormCore {
         return handleFieldRestoration();
       }
       Object.keys(structElement.validations).forEach(validationKey => {
-        const error = handleValidation(field.value, structElement.validations, validations, validationKey);
+        const error = handleValidation(field.value, structElement.validations, validations, validationKey, this.formValuesStateSubject$.value);
         if (!error) {
           handleFieldRestoration();
         }
@@ -3948,7 +3988,7 @@ class FormCore {
         });
       }
       Object.keys(structElement.validations).forEach(validationKey => {
-        const error = handleValidation(field.value, structElement.validations, validations, validationKey);
+        const error = handleValidation(field.value, structElement.validations, validations, validationKey, this.formValuesStateSubject$.value);
         if (!error) {
           this.setResetPathValue({
             key: structElement.field,
@@ -3991,7 +4031,7 @@ class FormCore {
       validateVisibility: this.validateVisibility.bind(this),
       resetValue: this.resetValue.bind(this),
       resetProperty: this.resetProperty.bind(this),
-      getFormValues: this.getFormValues.bind(this),
+      formValuesStateSubject$: this.formValuesStateSubject$,
       templateSubject$: this.templateSubject$,
       fieldEventSubject$: this.fieldEventSubject$,
       dataSubject$: this.dataSubject$,
@@ -4102,14 +4142,14 @@ class FormCore {
    * Prints the current values of all form fields.
    */
   printValues() {
-    console.table(this.getFormValues().values);
+    console.table(this.formValuesStateSubject$.value.values);
   }
   /**
    * Gets the current values of all form fields.
    *
    * @returns {TFormValues} The current form values.
    */
-  getFormValues() {
+  getFormState() {
     const values = {};
     const metadata = {};
     const erroredFields = [];
@@ -4150,7 +4190,7 @@ class FormCore {
    * @returns Subscription
    */
   subscribeOnMount(callback) {
-    const sub = this.mountSubject$.pipe(map(() => this.getFormValues())).subscribe({
+    const sub = this.mountSubject$.pipe(map(() => this.formValuesStateSubject$.value)).subscribe({
       next: callback
     });
     return sub;
@@ -4166,7 +4206,7 @@ class FormCore {
       fieldIndex
     }) => ({
       field: fieldIndex,
-      data: this.getFormValues()
+      data: this.formValuesStateSubject$.value
     }))).subscribe({
       next: callback
     });
@@ -4216,7 +4256,7 @@ class FormCore {
       });
     });
     if (!this.valid) return;
-    const values = this.getFormValues();
+    const values = this.formValuesStateSubject$.value;
     this.submitSubject$.next({
       formIndex: this.index,
       values
@@ -4227,9 +4267,15 @@ class FormCore {
    * recycles all the Suscriptions, to be called from the adapter when the form leaves the page
    */
   destroy() {
+    this.templateSubject$.unsubscribe();
     this.templateSubscription$.unsubscribe();
+    this.submitSubject$.unsubscribe();
+    this.mountSubject$.unsubscribe();
     this.fieldEventSubject$.unsubscribe();
+    this.dataSubject$.unsubscribe();
+    this.formValidSubject$.unsubscribe();
     this.fieldValidNotification$.unsubscribe();
+    this.formValuesStateSubject$.unsubscribe();
     this.fields.forEach(field => field.destroyField());
   }
 }
@@ -4410,7 +4456,7 @@ class FormGroup {
     indexes.forEach(index => {
       var _a, _b;
       (_a = this.forms.get(index)) === null || _a === void 0 ? void 0 : _a.submit();
-      const res = (_b = this.forms.get(index)) === null || _b === void 0 ? void 0 : _b.getFormValues();
+      const res = (_b = this.forms.get(index)) === null || _b === void 0 ? void 0 : _b.formValuesStateSubject$.value;
       const formMetadata = typeof (res === null || res === void 0 ? void 0 : res.metadata) === 'object' && res.metadata !== null ? res.metadata : {};
       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) || {});
@@ -4444,7 +4490,7 @@ class FormGroup {
         acc[curr] = {
           formId: formIndex,
           formField: fieldIndex,
-          values: formInstance.getFormValues()
+          values: formInstance.formValuesStateSubject$.value
         };
       }
       return acc;
@@ -4485,7 +4531,7 @@ class FormGroup {
     }) => ids.includes(formIndex)), map(() => ids.reduce((acc, curr) => {
       const formInstance = this.forms.get(curr);
       if (formInstance) {
-        acc[curr] = formInstance.getFormValues();
+        acc[curr] = formInstance.formValuesStateSubject$.value;
       }
       return acc;
     }, {}))).subscribe(callback);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/form-engine-core",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "dependencies": {
     "@gaignoux/currency": "^1.1.0",
     "credit-card-type": "^10.0.0",