@elliemae/loan-field-renderers 26.2.2

package/dist/esm/renderer/field-renderers/NumberRenderer.js

@@ -0,0 +1,188 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import {
+  useNumberMask
+} from "@elliemae/ds-form-helpers-mask-hooks";
+import { DSInputText } from "@elliemae/ds-controlled-form";
+import { Renderer } from "../base/renderer";
+import { AddonRenderer } from "./AddonRenderer";
+import { EmptyLabel } from "../styles";
+class NumberRenderer extends Renderer {
+  AddOnRenderer;
+  constructor() {
+    super();
+    this.AddOnRenderer = new AddonRenderer().render();
+  }
+  useNumberMaskResult = (numberProps, fieldFormat) => {
+    const decimalPlaces = parseInt(fieldFormat.match(/\d+$/)?.[0] || "0", 10) || 0;
+    const defaultNumberOptions = {
+      decimalPlaces,
+      allowNegative: true,
+      includeThousandsSeparator: true
+    };
+    let numberMaskOptions;
+    if (numberProps.rendererType === "number") {
+      if (numberProps.numberMaskOptions) {
+        numberMaskOptions = {
+          ...defaultNumberOptions,
+          ...numberProps.numberMaskOptions
+        };
+      } else {
+        numberMaskOptions = defaultNumberOptions;
+      }
+    } else {
+      numberMaskOptions = defaultNumberOptions;
+    }
+    return useNumberMask({
+      valueSetter: (value) => {
+        this.VM.setFieldValue?.(value);
+      },
+      onChange: (e) => {
+        this.VM.setIsSearchedField(false);
+        if (numberProps.onChange) {
+          const { fieldId } = numberProps;
+          numberProps.onChange(fieldId, e.target.value);
+        }
+      },
+      onBlur: (e) => {
+        this.handleOnBlur({
+          e,
+          numberProps
+        });
+      },
+      ...numberMaskOptions
+    });
+  };
+  isEmptyInput(value) {
+    return value === "" || value === void 0 || value === null;
+  }
+  handleOnBlur({
+    e,
+    numberProps
+  }) {
+    const { isDisable, autoFieldSet = true } = numberProps;
+    const { value } = e.target;
+    if (!isDisable && !this.VM.isFieldDisabled) {
+      const empty = this.isEmptyInput(value);
+      const formattedValue = empty ? "" : this.getFormattedValue(value);
+      this.VM.setFieldValue?.(formattedValue);
+      const validateResult = this.Hooks.runValidationsOnValue(
+        formattedValue,
+        numberProps.validationRules || []
+      );
+      this.VM.setValidationResult(validateResult);
+      if (!validateResult.isValid) {
+        return;
+      }
+      const parsedValue = empty ? "" : this.getParsedValue(formattedValue);
+      if (autoFieldSet && !empty) {
+        (async () => {
+          await this.BLL.SSF.setFieldValue(numberProps.fieldId, parsedValue);
+        })();
+      }
+      if (numberProps.onBlur) {
+        numberProps.onBlur(numberProps.fieldId, parsedValue);
+      }
+    }
+  }
+  // Helper to get maxLength prop
+  getMaxLengthProp({
+    maxLength,
+    fieldFormat,
+    numberOptions
+  }) {
+    if (maxLength === 0) {
+      return {};
+    }
+    const { prefix = "", suffix = "" } = numberOptions || {};
+    const decimalPlaces = parseInt(fieldFormat.match(/\d+$/)?.[0] || "0", 10) || 0;
+    const decimalSeparator = decimalPlaces > 0 ? 1 : 0;
+    const prefixLength = prefix?.length || 0;
+    const suffixLength = suffix?.length || 0;
+    const integerPartLength = maxLength - (decimalPlaces > 0 ? decimalPlaces + 1 : 0);
+    const positionsBeforeDecimal = integerPartLength + prefixLength;
+    const totalMaxLength = positionsBeforeDecimal + decimalSeparator + decimalPlaces + suffixLength;
+    return { maxLength: totalMaxLength };
+  }
+  render() {
+    const { BRWrapper, AddOnRenderer } = this;
+    const NumberComponent = (props) => {
+      const {
+        fieldId,
+        onBlur,
+        onChange,
+        validationRules,
+        numberMaskOptions,
+        label,
+        isDisable,
+        extra,
+        ...rest
+      } = props;
+      const {
+        fieldMetadata: {
+          isLockField = false,
+          maxLength = 0,
+          fieldFormat = ""
+        } = {},
+        fieldValue,
+        isLockedState,
+        isSearchedField,
+        isFieldDisabled,
+        validationResult,
+        ariaDescProps
+      } = this.initVM(props);
+      const maxLengthProps = this.getMaxLengthProp({
+        maxLength,
+        fieldFormat,
+        numberOptions: props.numberMaskOptions
+      });
+      const amountInputProps = this.useNumberMaskResult(props, fieldFormat);
+      const validationProps = this.buildValidationProps(validationResult);
+      return /* @__PURE__ */ jsxs(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: fieldId,
+          label: props.label,
+          value: this.getParsedValue(fieldValue) ?? "",
+          ...validationProps,
+          ...props.brCompProps || {},
+          withHighlight: isSearchedField,
+          children: [
+            !label && /* @__PURE__ */ jsx(EmptyLabel, { htmlFor: fieldId }),
+            /* @__PURE__ */ jsx(
+              AddOnRenderer,
+              {
+                rendererType: "addon",
+                fieldId,
+                isLocked: isLockedState,
+                isPadLock: isLockField,
+                isDisable: props.isDisable,
+                rightAddon: props.rightAddon,
+                onPadLockToggle: () => this.toggleLockStatus(fieldId, isLockedState || false),
+                children: /* @__PURE__ */ jsx(
+                  DSInputText,
+                  {
+                    id: fieldId,
+                    "data-testid": fieldId,
+                    ...maxLengthProps,
+                    value: fieldValue ?? "",
+                    applyAriaDisabled: isFieldDisabled || isDisable,
+                    ...amountInputProps,
+                    ...ariaDescProps,
+                    ...extra,
+                    ...this.sanitize(rest)
+                  }
+                )
+              }
+            )
+          ]
+        }
+      );
+    };
+    return React.memo(NumberComponent);
+  }
+}
+export {
+  NumberRenderer
+};

package/dist/esm/renderer/field-renderers/RadioGroupRenderer.js

@@ -0,0 +1,108 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { DSControlledRadio } from "@elliemae/ds-controlled-form";
+import { DSFormLayoutRadioGroup } from "@elliemae/ds-form-layout-blocks";
+import { Renderer } from "../base/renderer";
+class RadioGroupRenderer extends Renderer {
+  constructor() {
+    super();
+    this.BRWrapper = this.renderBR();
+  }
+  onSelect = ({
+    fieldId,
+    value,
+    selectCB,
+    autoFieldSet = true
+  }) => {
+    const formattedValue = this.getFormattedValue(value);
+    this.VM.setFieldValue(formattedValue);
+    this.VM.setValidationResult(
+      this.Hooks.runValidationsOnValue(formattedValue, [])
+    );
+    const parsedValue = this.getParsedValue(formattedValue);
+    if (autoFieldSet) {
+      (async () => {
+        await this.BLL.SSF.setFieldValue(fieldId, parsedValue);
+      })();
+    }
+    if (selectCB) {
+      selectCB(fieldId, formattedValue);
+    }
+  };
+  render() {
+    const { BRWrapper } = this;
+    const RadioGroupComponent = (props) => {
+      const {
+        fieldId,
+        groupName = `group-${fieldId}`,
+        options = [],
+        direction = "vertical",
+        ariaGroupLabel = "",
+        wrapLabel = true,
+        isDisable,
+        autoFieldSet = true
+      } = props;
+      const { fieldValue, isFieldDisabled, fieldMetadata } = this.initVM(props);
+      const metaOptions = useMemo(() => {
+        if (fieldMetadata && fieldMetadata.fieldOptions) {
+          const { fieldOptions = [] } = fieldMetadata;
+          return fieldOptions.map((opt, index) => ({
+            id: `opt-${fieldId}-${index}`,
+            label: opt.label,
+            value: opt.value
+          }));
+        }
+        return [];
+      }, [fieldMetadata?.fieldOptions]);
+      const onSelectEventHandler = useCallback(
+        (val) => {
+          this.onSelect({
+            fieldId,
+            value: val,
+            selectCB: props.onSelect,
+            autoFieldSet
+          });
+        },
+        [fieldId, props.onSelect, autoFieldSet]
+      );
+      return /* @__PURE__ */ jsx(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: fieldId,
+          value: fieldValue || "",
+          ...props.brCompProps || {},
+          children: /* @__PURE__ */ jsx(
+            DSFormLayoutRadioGroup,
+            {
+              direction,
+              label: ariaGroupLabel,
+              ml: "0",
+              children: (metaOptions.length > 0 ? metaOptions : options).map(
+                (option) => /* @__PURE__ */ jsx(
+                  DSControlledRadio,
+                  {
+                    name: groupName,
+                    label: option.label,
+                    id: option.id,
+                    "data-testid": fieldId,
+                    wrapLabel,
+                    applyAriaDisabled: isFieldDisabled || isDisable,
+                    value: option.value,
+                    checked: fieldValue === option.value,
+                    onChange: onSelectEventHandler
+                  },
+                  option.id
+                )
+              )
+            }
+          )
+        }
+      );
+    };
+    return RadioGroupComponent;
+  }
+}
+export {
+  RadioGroupRenderer
+};

package/dist/esm/renderer/field-renderers/RadioRenderer.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { DSControlledRadio } from "@elliemae/ds-controlled-form";
+import { Renderer } from "../base/renderer";
+class RadioRenderer extends Renderer {
+  constructor() {
+    super();
+    this.BRWrapper = this.renderBR();
+  }
+  onSelect = ({
+    fieldId,
+    value,
+    selectCB,
+    autoFieldSet = true
+  }) => {
+    const formattedValue = this.getFormattedValue(value);
+    this.VM.setFieldValue(formattedValue);
+    this.VM.setValidationResult(
+      this.Hooks.runValidationsOnValue(formattedValue, [])
+    );
+    const parsedValue = this.getParsedValue(formattedValue);
+    if (autoFieldSet) {
+      (async () => {
+        await this.BLL.SSF.setFieldValue(fieldId, parsedValue);
+      })();
+    }
+    if (selectCB) {
+      selectCB(fieldId, formattedValue);
+    }
+  };
+  render() {
+    const { BRWrapper } = this;
+    const RadioComponent = (props) => {
+      const {
+        fieldId,
+        id,
+        label,
+        name,
+        value,
+        isDisable,
+        validationRules,
+        onSelect,
+        autoFieldSet,
+        extra,
+        ...rest
+      } = props;
+      const { fieldValue, isFieldDisabled, isSearchedField, ariaDescProps } = this.initVM(props);
+      const onSelectEventHandler = useCallback(
+        (val) => {
+          this.onSelect({
+            fieldId,
+            value: val,
+            selectCB: props.onSelect,
+            autoFieldSet
+          });
+        },
+        [fieldId, props.onSelect, autoFieldSet]
+      );
+      return /* @__PURE__ */ jsx(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: fieldId,
+          value: fieldValue || "",
+          ...props.brCompProps || {},
+          withHighlight: isSearchedField,
+          children: /* @__PURE__ */ jsx(
+            DSControlledRadio,
+            {
+              ...name && { name },
+              label,
+              id,
+              "data-testid": fieldId,
+              applyAriaDisabled: isFieldDisabled || isDisable,
+              checked: fieldValue === value,
+              value: String(value),
+              onChange: onSelectEventHandler,
+              ...ariaDescProps,
+              ...extra,
+              ...this.sanitize(rest)
+            }
+          )
+        }
+      );
+    };
+    return React.memo(RadioComponent);
+  }
+}
+export {
+  RadioRenderer
+};

package/dist/esm/renderer/field-renderers/TextRenderer.js

@@ -0,0 +1,197 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import {
+  DSInputText,
+  usePhoneMask,
+  useSSNMask
+} from "@elliemae/ds-controlled-form";
+import { Renderer } from "../base/renderer";
+import { AddonRenderer } from "./AddonRenderer";
+import { EmptyLabel } from "../styles";
+class TextRenderer extends Renderer {
+  AddOnRenderer;
+  constructor() {
+    super();
+    this.AddOnRenderer = new AddonRenderer().render();
+    this.BRWrapper = this.renderBR();
+  }
+  render() {
+    const TextComponent = (props) => {
+      const {
+        id,
+        fieldId,
+        isDisable,
+        validationRules = [],
+        formatFn,
+        parseFn,
+        onChange,
+        onBlur,
+        autoFieldSet = true,
+        label,
+        rightAddon,
+        rendererType,
+        extra,
+        ...rest
+      } = props;
+      const { BRWrapper, AddOnRenderer } = this;
+      const {
+        fieldMetadata,
+        fieldValue,
+        setFieldValue,
+        isLockedState,
+        isSearchedField,
+        isFieldDisabled,
+        validationResult,
+        setIsSearchedField,
+        ariaDescProps
+      } = this.initVM(props);
+      const {
+        isLockField = false,
+        maxLength = 0,
+        fieldFormat = ""
+      } = fieldMetadata || {};
+      this.fieldFormat = fieldFormat;
+      const { maskType } = rendererType === "text" ? props : {};
+      const displayValue = React.useMemo(() => {
+        const rawValue = fieldValue || "";
+        if (formatFn && typeof formatFn === "function") {
+          return formatFn(rawValue, fieldMetadata);
+        }
+        return this.getFormattedValue(rawValue);
+      }, [fieldValue, fieldMetadata, formatFn]);
+      const phoneMaskProps = usePhoneMask({
+        valueSetter: (data) => {
+          if (!props.isDisable && !isFieldDisabled) {
+            setFieldValue(data);
+          }
+        }
+      });
+      const ssnMaskProps = useSSNMask({
+        valueSetter: (data) => {
+          if (!props.isDisable && !isFieldDisabled) {
+            setFieldValue(data);
+          }
+        }
+      });
+      const onBlurEvent = useCallback(
+        (e) => {
+          const { value } = e.target;
+          if (!isDisable && !isFieldDisabled) {
+            const formattedValue = formatFn && typeof formatFn === "function" ? formatFn(value, fieldMetadata) : this.getFormattedValue(value);
+            setFieldValue(formattedValue);
+            const rulesToCheck = [...validationRules];
+            if (rendererType === "email") {
+              rulesToCheck.push({
+                type: "email",
+                message: "Please enter a valid email address."
+              });
+            }
+            const tempValResult = this.Hooks.runValidationsOnValue(
+              formattedValue,
+              rulesToCheck
+            );
+            this.VM.setValidationResult(tempValResult);
+            if (!tempValResult.isValid) {
+              return;
+            }
+            const parsedValue = parseFn && typeof parseFn === "function" ? parseFn(formattedValue, fieldMetadata) : this.getParsedValue(formattedValue);
+            if (autoFieldSet) {
+              (async () => {
+                await this.BLL.SSF.setFieldValue(fieldId, parsedValue);
+              })();
+            }
+            if (onBlur) {
+              onBlur(fieldId, parsedValue);
+            }
+          }
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+          autoFieldSet,
+          fieldId,
+          fieldMetadata,
+          formatFn,
+          isDisable,
+          isFieldDisabled,
+          onBlur,
+          parseFn,
+          rendererType,
+          setFieldValue,
+          validationRules
+        ]
+      );
+      const onChangeEvent = useCallback(
+        (e) => {
+          setIsSearchedField(false);
+          const { value } = e.target;
+          if (!isDisable && !isFieldDisabled) {
+            setFieldValue(value);
+            if (onChange) {
+              onChange(fieldId, value);
+            }
+          }
+        },
+        [
+          fieldId,
+          isDisable,
+          isFieldDisabled,
+          onChange,
+          setFieldValue,
+          setIsSearchedField
+        ]
+      );
+      const maskProps = {
+        ...maskType === "Phone" && phoneMaskProps ? phoneMaskProps : {},
+        ...maskType === "SSN" && ssnMaskProps ? ssnMaskProps : {}
+      };
+      const validationProps = this.buildValidationProps(validationResult);
+      return /* @__PURE__ */ jsxs(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: id || fieldId,
+          label,
+          value: displayValue,
+          ...validationProps,
+          ...props.brCompProps || {},
+          withHighlight: isSearchedField,
+          children: [
+            !label && /* @__PURE__ */ jsx(EmptyLabel, { htmlFor: id || fieldId }),
+            /* @__PURE__ */ jsx(
+              AddOnRenderer,
+              {
+                rendererType: "addon",
+                fieldId,
+                isLocked: isLockedState,
+                isPadLock: isLockField,
+                isDisable: props.isDisable,
+                onPadLockToggle: () => this.toggleLockStatus(fieldId, isLockedState || false),
+                rightAddon,
+                children: /* @__PURE__ */ jsx(
+                  DSInputText,
+                  {
+                    id: id || fieldId,
+                    "data-testid": fieldId,
+                    value: displayValue,
+                    applyAriaDisabled: isFieldDisabled || isDisable,
+                    ...maxLength && maxLength > 0 && { maxLength },
+                    onChange: onChangeEvent,
+                    onBlur: onBlurEvent,
+                    ...extra,
+                    ...maskProps,
+                    ...ariaDescProps,
+                    ...this.sanitize(rest)
+                  }
+                )
+              }
+            )
+          ]
+        }
+      );
+    };
+    return React.memo(TextComponent);
+  }
+}
+export {
+  TextRenderer
+};

package/dist/esm/renderer/field-renderers/ToggleRenderer.js

@@ -0,0 +1,91 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { DSControlledToggle } from "@elliemae/ds-form-toggle";
+import { DSFormLayoutLabel } from "@elliemae/ds-form-layout-label";
+import { Renderer } from "../base/renderer";
+import { EmptyLabel, theme } from "../styles";
+class ToggleRenderer extends Renderer {
+  constructor() {
+    super();
+    this.BRWrapper = this.renderBR();
+  }
+  render() {
+    const { BRWrapper } = this;
+    const ToggleComponent = (props) => {
+      const { fieldId, onChange, isDisable, label, extra, ...rest } = props;
+      const {
+        fieldValue,
+        isFieldDisabled,
+        setFieldValue,
+        validationResult,
+        isSearchedField,
+        setIsSearchedField
+      } = this.initVM(props);
+      const validationProps = this.buildValidationProps(validationResult);
+      const onChangeEvent = useCallback(() => {
+        setIsSearchedField(false);
+        if (!isDisable && !isFieldDisabled) {
+          const updatedValue = !fieldValue;
+          const formattedValue = this.getFormattedValue(updatedValue);
+          setFieldValue(formattedValue);
+          const parsedValue = this.getParsedValue(formattedValue);
+          (async () => {
+            await this.BLL.SSF.setFieldValue(fieldId, parsedValue);
+            if (onChange) {
+              onChange(fieldId, parsedValue);
+            }
+          })();
+        }
+      }, [
+        isDisable,
+        isFieldDisabled,
+        fieldValue,
+        onChange,
+        setFieldValue,
+        setIsSearchedField,
+        fieldId
+      ]);
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          DSFormLayoutLabel,
+          {
+            fontWeight: theme.fontWeights.semibold,
+            htmlFor: fieldId,
+            "data-public": true,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          BRWrapper,
+          {
+            fieldId,
+            inputID: fieldId,
+            value: !!fieldValue,
+            ...props.brCompProps || {},
+            withHighlight: isSearchedField,
+            ...validationProps,
+            children: [
+              !label && /* @__PURE__ */ jsx(EmptyLabel, { htmlFor: fieldId }),
+              /* @__PURE__ */ jsx(
+                DSControlledToggle,
+                {
+                  containerProps: { "data-testid": fieldId },
+                  id: fieldId,
+                  checked: !!fieldValue,
+                  applyAriaDisabled: isFieldDisabled || isDisable,
+                  onChange: onChangeEvent,
+                  ...extra,
+                  ...this.sanitize(rest)
+                }
+              )
+            ]
+          }
+        )
+      ] });
+    };
+    return React.memo(ToggleComponent);
+  }
+}
+export {
+  ToggleRenderer
+};