@bolttech/form-engine-core 1.0.6 → 1.0.8

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: TFormValues<unknown>) => 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';
@@ -1612,9 +1612,9 @@ const repeated = (value, validations) => {
  * };
  * ```
  */
-const callback = (value, validations) => {
+const callback = (value, validations, formValues) => {
   if (!validations.callback || !((validations === null || validations === void 0 ? void 0 : validations.callback) instanceof Function)) return false;
-  return validations.callback(value);
+  return validations.callback(value, formValues);
 };
 
 /**
@@ -2064,14 +2064,17 @@ const getIntervalsDate = (date, intervals) => {
  */
 const dateRearrangeMapper = {
   DDMMYYYY: value => {
+    if (!value) return '';
     const dateParts = value.split(value.includes('/') ? '/' : '-');
     return `${dateParts[1]}/${dateParts[0]}/${dateParts[2]}`;
   },
   YYYYMMDD: value => {
+    if (!value) return '';
     const dateParts = value.split(value.includes('/') ? '/' : '-');
     return `${dateParts[1]}/${dateParts[2]}/${dateParts[0]}`;
   },
   YYYYDDMM: value => {
+    if (!value) return '';
     const dateParts = value.split(value.includes('/') ? '/' : '-');
     return `${dateParts[2]}/${dateParts[1]}/${dateParts[0]}`;
   },
@@ -2472,9 +2475,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);
 }
@@ -2515,7 +2518,7 @@ class FormField {
     fieldValidNotification$,
     mountSubject$,
     mapper,
-    getFormValues,
+    formValuesStateSubject$,
     submitEvent,
     visibility,
     persistValue
@@ -2547,13 +2550,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 = '';
@@ -2630,7 +2634,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);
@@ -2892,7 +2896,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
     });
@@ -2915,7 +2919,7 @@ class FormField {
     this.valueSubject$.next(this.stateValue);
     this.propsSubject$.next(this.props);
     this.visibilitySubject$.next(this.visibility);
-    this.setFieldValidity({
+    this.emitEvents({
       event: 'ON_FIELD_MOUNT'
     });
   }
@@ -2994,12 +2998,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];
@@ -3057,7 +3061,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;
       });
     }
@@ -3079,7 +3084,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,
@@ -3088,7 +3093,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 };
@@ -3274,11 +3279,21 @@ 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();
     });
+    this.fieldEventSubject$.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) || {};
@@ -3800,7 +3815,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({
@@ -3879,7 +3894,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();
         }
@@ -3945,7 +3960,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,
@@ -3988,7 +4003,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$,
@@ -4099,14 +4114,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 = [];
@@ -4147,7 +4162,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;
@@ -4163,7 +4178,7 @@ class FormCore {
       fieldIndex
     }) => ({
       field: fieldIndex,
-      data: this.getFormValues()
+      data: this.formValuesStateSubject$.value
     }))).subscribe({
       next: callback
     });
@@ -4213,7 +4228,7 @@ class FormCore {
       });
     });
     if (!this.valid) return;
-    const values = this.getFormValues();
+    const values = this.formValuesStateSubject$.value;
     this.submitSubject$.next({
       formIndex: this.index,
       values
@@ -4224,9 +4239,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());
   }
 }
@@ -4407,7 +4428,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) || {});
@@ -4441,7 +4462,7 @@ class FormGroup {
         acc[curr] = {
           formId: formIndex,
           formField: fieldIndex,
-          values: formInstance.getFormValues()
+          values: formInstance.formValuesStateSubject$.value
         };
       }
       return acc;
@@ -4482,7 +4503,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.6",
+  "version": "1.0.8",
   "dependencies": {
     "@gaignoux/currency": "^1.1.0",
     "credit-card-type": "^10.0.0",