@elliemae/loan-field-renderers 26.2.2

package/dist/cjs/renderer/field-renderers/LargeTextRenderer.js

@@ -0,0 +1,209 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LargeTextRenderer_exports = {};
+__export(LargeTextRenderer_exports, {
+  LargeTextRenderer: () => LargeTextRenderer
+});
+module.exports = __toCommonJS(LargeTextRenderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
+var import_renderer = require("../base/renderer");
+var import_AddonRenderer = require("./AddonRenderer");
+var import_styles = require("../styles");
+class LargeTextRenderer extends import_renderer.Renderer {
+  AddOnRenderer;
+  constructor() {
+    super();
+    this.AddOnRenderer = new import_AddonRenderer.AddonRenderer().render();
+    this.BRWrapper = this.renderBR();
+  }
+  render() {
+    const getMaxCharProps = (maxCharactersDisplay, maxCharCounter, fieldValue) => {
+      if (!maxCharactersDisplay || maxCharCounter <= 0) {
+        return {};
+      }
+      return {
+        maxCharCounter,
+        currentChar: fieldValue ? fieldValue.length : 0
+      };
+    };
+    const LargeTextComponent = (props) => {
+      const {
+        id,
+        fieldId,
+        isDisable,
+        validationRules = [],
+        onChange,
+        onBlur,
+        autoFieldSet = true,
+        label,
+        rightAddon,
+        rows = "3",
+        maxCharactersDisplay = false,
+        maxCharCounter = 0,
+        maxCharExceededMessage = "Max characters reached.",
+        extra
+      } = props;
+      const { BRWrapper, AddOnRenderer } = this;
+      const {
+        fieldMetadata: {
+          isLockField = false,
+          maxLength = 0,
+          fieldFormat = ""
+        } = {},
+        fieldValue,
+        setFieldValue,
+        isLockedState,
+        isSearchedField,
+        isFieldDisabled,
+        validationResult,
+        setIsSearchedField,
+        ariaDescProps
+      } = this.initVM(props);
+      this.fieldFormat = fieldFormat;
+      const getValidationRules = (0, import_react.useCallback)(() => {
+        const rulesToCheck = [...validationRules];
+        if (maxCharactersDisplay && maxCharCounter > 0) {
+          rulesToCheck.push({
+            type: "maxchar",
+            message: maxCharExceededMessage,
+            options: { charsLimit: maxCharCounter }
+          });
+        }
+        return rulesToCheck;
+      }, [
+        validationRules,
+        maxCharactersDisplay,
+        maxCharCounter,
+        maxCharExceededMessage
+      ]);
+      const onBlurEvent = (0, import_react.useCallback)(
+        () => {
+          if (!isDisable && !isFieldDisabled) {
+            const formattedValue = this.getFormattedValue(fieldValue);
+            setFieldValue(formattedValue);
+            const rulesToCheck = getValidationRules();
+            const tempValResult = this.Hooks.runValidationsOnValue(
+              formattedValue,
+              rulesToCheck
+            );
+            this.VM.setValidationResult(tempValResult);
+            if (!tempValResult.isValid && tempValResult.message !== maxCharExceededMessage) {
+              return;
+            }
+            const parsedValue = 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,
+          fieldValue,
+          isDisable,
+          isFieldDisabled,
+          onBlur,
+          getValidationRules
+        ]
+      );
+      const onChangeEvent = (0, import_react.useCallback)(
+        (value) => {
+          setIsSearchedField(false);
+          if (!isDisable && !isFieldDisabled) {
+            setFieldValue(value);
+            if (onChange) {
+              onChange(fieldId, value);
+            }
+          }
+        },
+        [
+          fieldId,
+          isDisable,
+          isFieldDisabled,
+          onChange,
+          setFieldValue,
+          setIsSearchedField
+        ]
+      );
+      const validationProps = this.buildValidationProps(validationResult);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: id || fieldId,
+          label,
+          value: fieldValue,
+          onBlur: onBlurEvent,
+          ...getMaxCharProps(maxCharactersDisplay, maxCharCounter, fieldValue),
+          ...props.brCompProps || {},
+          ...validationProps,
+          withHighlight: isSearchedField,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            AddOnRenderer,
+            {
+              rendererType: "addon",
+              fieldId,
+              isLocked: isLockedState,
+              isPadLock: isLockField,
+              isDisable: props.isDisable,
+              onPadLockToggle: () => this.toggleLockStatus(fieldId, isLockedState || false),
+              rightAddon,
+              children: [
+                !label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.EmptyLabel, { htmlFor: id || fieldId }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ds_controlled_form.DSControlledLargeTextInput,
+                  {
+                    id: id || fieldId,
+                    "data-testid": fieldId,
+                    value: fieldValue || "",
+                    applyAriaDisabled: isFieldDisabled || isDisable,
+                    onChange: onChangeEvent,
+                    rows,
+                    ...maxLength && maxLength > 0 && { maxLength },
+                    ...ariaDescProps,
+                    ...extra
+                  }
+                )
+              ]
+            }
+          )
+        }
+      );
+    };
+    return import_react.default.memo(LargeTextComponent);
+  }
+}

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

@@ -0,0 +1,216 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NumberRenderer_exports = {};
+__export(NumberRenderer_exports, {
+  NumberRenderer: () => NumberRenderer
+});
+module.exports = __toCommonJS(NumberRenderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_form_helpers_mask_hooks = require("@elliemae/ds-form-helpers-mask-hooks");
+var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
+var import_renderer = require("../base/renderer");
+var import_AddonRenderer = require("./AddonRenderer");
+var import_styles = require("../styles");
+class NumberRenderer extends import_renderer.Renderer {
+  AddOnRenderer;
+  constructor() {
+    super();
+    this.AddOnRenderer = new import_AddonRenderer.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 (0, import_ds_form_helpers_mask_hooks.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__ */ (0, import_jsx_runtime.jsxs)(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: fieldId,
+          label: props.label,
+          value: this.getParsedValue(fieldValue) ?? "",
+          ...validationProps,
+          ...props.brCompProps || {},
+          withHighlight: isSearchedField,
+          children: [
+            !label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.EmptyLabel, { htmlFor: fieldId }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              AddOnRenderer,
+              {
+                rendererType: "addon",
+                fieldId,
+                isLocked: isLockedState,
+                isPadLock: isLockField,
+                isDisable: props.isDisable,
+                rightAddon: props.rightAddon,
+                onPadLockToggle: () => this.toggleLockStatus(fieldId, isLockedState || false),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ds_controlled_form.DSInputText,
+                  {
+                    id: fieldId,
+                    "data-testid": fieldId,
+                    ...maxLengthProps,
+                    value: fieldValue ?? "",
+                    applyAriaDisabled: isFieldDisabled || isDisable,
+                    ...amountInputProps,
+                    ...ariaDescProps,
+                    ...extra,
+                    ...this.sanitize(rest)
+                  }
+                )
+              }
+            )
+          ]
+        }
+      );
+    };
+    return import_react.default.memo(NumberComponent);
+  }
+}

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

@@ -0,0 +1,128 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var RadioGroupRenderer_exports = {};
+__export(RadioGroupRenderer_exports, {
+  RadioGroupRenderer: () => RadioGroupRenderer
+});
+module.exports = __toCommonJS(RadioGroupRenderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
+var import_ds_form_layout_blocks = require("@elliemae/ds-form-layout-blocks");
+var import_renderer = require("../base/renderer");
+class RadioGroupRenderer extends import_renderer.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 = (0, import_react.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 = (0, import_react.useCallback)(
+        (val) => {
+          this.onSelect({
+            fieldId,
+            value: val,
+            selectCB: props.onSelect,
+            autoFieldSet
+          });
+        },
+        [fieldId, props.onSelect, autoFieldSet]
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: fieldId,
+          value: fieldValue || "",
+          ...props.brCompProps || {},
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_form_layout_blocks.DSFormLayoutRadioGroup,
+            {
+              direction,
+              label: ariaGroupLabel,
+              ml: "0",
+              children: (metaOptions.length > 0 ? metaOptions : options).map(
+                (option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ds_controlled_form.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;
+  }
+}

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

@@ -0,0 +1,121 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var RadioRenderer_exports = {};
+__export(RadioRenderer_exports, {
+  RadioRenderer: () => RadioRenderer
+});
+module.exports = __toCommonJS(RadioRenderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
+var import_renderer = require("../base/renderer");
+class RadioRenderer extends import_renderer.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 = (0, import_react.useCallback)(
+        (val) => {
+          this.onSelect({
+            fieldId,
+            value: val,
+            selectCB: props.onSelect,
+            autoFieldSet
+          });
+        },
+        [fieldId, props.onSelect, autoFieldSet]
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: fieldId,
+          value: fieldValue || "",
+          ...props.brCompProps || {},
+          withHighlight: isSearchedField,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_controlled_form.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 import_react.default.memo(RadioComponent);
+  }
+}