@elliemae/loan-field-renderers 26.2.2

package/dist/esm/renderer/base/hooks/fieldValue.js

@@ -0,0 +1,195 @@
+import { useEffect, useState } from "react";
+import { HookBase } from "./hookBase";
+class FieldValue extends HookBase {
+  async getFieldValue(fieldId) {
+    try {
+      const value = await this.BLL.SSF.getFieldValue(fieldId);
+      return value;
+    } catch (error) {
+      this.BLL.Core.Log("error", `error fetching field value for ${fieldId}`, {
+        fieldId,
+        error
+      });
+      return void 0;
+    }
+  }
+  formatValue(params) {
+    const { fieldValue, fieldFormat, options } = params;
+    if (fieldValue === null || fieldValue === void 0 || fieldValue === "") {
+      return fieldValue;
+    }
+    return this.formatByRendererType(fieldValue, fieldFormat, options);
+  }
+  formatByRendererType(fieldValue, fieldFormat, options) {
+    const { rendererType, maskType, numberMaskOptions } = options;
+    switch (rendererType) {
+      case "text":
+      case "email":
+      case "radiogroup":
+      case "radio":
+        return this.formatTextValue({
+          value: fieldValue,
+          fieldFormat,
+          maskType,
+          rendererType
+        });
+      case "number":
+        return this.formatNumberValue(
+          fieldValue,
+          fieldFormat,
+          numberMaskOptions
+        );
+      case "checkbox":
+        return this.formatBooleanValue(fieldValue);
+      case "date":
+        return this.formatDateValue(fieldValue, options.dateFormat);
+      case "dropdown":
+        return this.formatDropdownValue(fieldValue);
+      case "zipcode":
+        return this.formatZipValue(String(fieldValue));
+      default:
+        return fieldValue;
+    }
+  }
+  formatTextValue({
+    value,
+    fieldFormat,
+    maskType,
+    rendererType
+  }) {
+    if ((rendererType === "radio" || rendererType === "radiogroup") && fieldFormat === "Y") {
+      return this.formatBooleanValue(value);
+    }
+    if (maskType === "SSN" || fieldFormat === "SS") {
+      return this.BLL.Formatter.createFormatter("SS").format(value);
+    }
+    if (maskType === "Phone" || fieldFormat === "P") {
+      return this.BLL.Formatter.createFormatter("P").format(value, {
+        isInternational: false
+      });
+    }
+    return String(value);
+  }
+  formatNumberValue(value, fieldFormat, numberMaskOptions) {
+    return this.BLL.Formatter.createFormatter("D2").format(value, {
+      fieldFormat,
+      numberOptions: {
+        includeThousandsSeparator: true,
+        ...numberMaskOptions
+      }
+    });
+  }
+  formatBooleanValue(value) {
+    return this.BLL.Formatter.createFormatter("Y").format(value);
+  }
+  formatDateValue(value, dateFormat) {
+    return this.BLL.Formatter.createFormatter("DT").format(value, {
+      dateFormat
+    });
+  }
+  formatDropdownValue(value) {
+    const formatter = this.BLL.Formatter.createFormatter("DD");
+    return formatter.format(value);
+  }
+  formatZipValue(value) {
+    const formatter = this.BLL.Formatter.createFormatter("Z");
+    return formatter.format(value);
+  }
+  useFieldValue(params) {
+    const { fieldId, fieldFormat, options } = params;
+    const [fieldValue, setFieldValue] = useState(void 0);
+    useEffect(() => {
+      (async () => {
+        if (fieldFormat) {
+          const value = await this.getFieldValue(fieldId);
+          setFieldValue(
+            this.formatValue({
+              fieldValue: value,
+              fieldFormat,
+              options
+            })
+          );
+        }
+      })();
+    }, [fieldId, fieldFormat]);
+    return {
+      fieldValue,
+      setFieldValue
+    };
+  }
+  // eslint-disable-next-line complexity
+  parseValue(params) {
+    const { fieldValue, fieldFormat, options } = params;
+    if (fieldValue === null || fieldValue === void 0 || fieldValue === "") {
+      return fieldValue;
+    }
+    const { rendererType, maskType, unmaskPattern } = options;
+    switch (rendererType) {
+      case "text":
+      case "email":
+      case "radio":
+      case "radiogroup":
+        return this.parseTextValue({
+          rendererType,
+          value: fieldValue,
+          fieldFormat,
+          maskType,
+          unmaskPattern
+        });
+      case "number":
+        return this.parseNumberValue({
+          value: fieldValue,
+          fieldFormat,
+          unmaskPattern
+        });
+      case "checkbox":
+        return this.parseBooleanValue(fieldValue);
+      case "date":
+        return this.parseDateValue({
+          value: fieldValue,
+          dateFormat: options.dateFormat
+        });
+      case "zipcode":
+        return this.parseZipValue(String(fieldValue));
+      default:
+        return fieldValue;
+    }
+  }
+  parseTextValue(params) {
+    const { rendererType, value, fieldFormat, maskType, unmaskPattern } = params;
+    if ((rendererType === "radio" || rendererType === "radiogroup") && fieldFormat === "Y") {
+      return this.parseBooleanValue(value);
+    }
+    if (maskType === "SSN" || fieldFormat === "SS") {
+      return this.BLL.Formatter.createFormatter("SS").parse(String(value));
+    }
+    if (maskType === "Phone" || fieldFormat === "P") {
+      return this.BLL.Formatter.createFormatter("P").parse(String(value), {
+        unmaskPattern
+      });
+    }
+    return value;
+  }
+  parseNumberValue(params) {
+    const { value, fieldFormat, unmaskPattern } = params;
+    return this.BLL.Formatter.createFormatter("D2").parse(String(value), {
+      fieldFormat,
+      unmaskPattern
+    });
+  }
+  parseBooleanValue(value) {
+    return this.BLL.Formatter.createFormatter("Y").parse(Boolean(value));
+  }
+  parseDateValue(params) {
+    const { value, dateFormat } = params;
+    return this.BLL.Formatter.createFormatter("DT").parse(String(value), {
+      dateFormat
+    });
+  }
+  parseZipValue(value) {
+    return this.BLL.Formatter.createFormatter("Z").parse(value);
+  }
+}
+export {
+  FieldValue
+};

package/dist/esm/renderer/base/hooks/hookBase.js

@@ -0,0 +1,9 @@
+class HookBase {
+  BLL;
+  constructor(bll) {
+    this.BLL = bll;
+  }
+}
+export {
+  HookBase
+};

package/dist/esm/renderer/base/hooks/index.js

@@ -0,0 +1,121 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { decorators } from "@elliemae/pui-app-sdk";
+import { useState, useEffect } from "react";
+import { FieldMeta } from "./fieldMeta";
+import { FieldValue } from "./fieldValue";
+import { FieldDisabled } from "./fieldDisabled";
+import { FieldLocked } from "./fieldLocked";
+import { FieldValidation } from "./fieldValidation";
+import { FieldSubscribers } from "./fieldSubscribers";
+import { FieldGoTo } from "./fieldGoTo";
+import { HookBase } from "./hookBase";
+import { FieldDescription } from "./fieldDescription";
+let Hooks = class extends HookBase {
+  useFieldInit(params) {
+    const {
+      fieldId,
+      label = "",
+      rendererType,
+      maskType,
+      numberMaskOptions,
+      dateFormat,
+      forceRefresh
+    } = params;
+    const [fieldMetadata, setFieldMetadata] = useState(
+      {}
+    );
+    const [fieldValue, setFieldValue] = useState(void 0);
+    const [isLockedState, setIsLockedState] = useState(false);
+    const [isSearchedField, setIsSearchedField] = useState(false);
+    const [isReadonlyLoan, setIsReadonlyLoan] = useState(false);
+    const [validationResult, setValidationResult] = useState(null);
+    const [ariaDescProps, setAriaDescProps] = useState({ "aria-label": label || "" });
+    useEffect(() => {
+      if (!fieldId) return;
+      (async () => {
+        const [metadata, isLoanReadonly, lockStatus, fldValue, isGoToField] = await Promise.all([
+          this.getMetadata(fieldId),
+          this.isLoanReadonly(),
+          this.getFieldLockStatus(fieldId),
+          this.getFieldValue(fieldId),
+          this.isGoToField(fieldId)
+        ]);
+        setFieldMetadata(metadata);
+        setFieldValue(
+          this.formatValue({
+            fieldValue: fldValue,
+            fieldFormat: metadata.fieldFormat,
+            options: {
+              rendererType,
+              maskType,
+              numberMaskOptions,
+              dateFormat
+            }
+          })
+        );
+        if (metadata.isLockField) {
+          setIsLockedState(lockStatus);
+        } else {
+          setIsLockedState(false);
+        }
+        setIsReadonlyLoan(isLoanReadonly);
+        setIsSearchedField(isGoToField);
+        setAriaDescProps(
+          this.getFieldAriaDescProps(label || "", metadata.description || "")
+        );
+      })();
+    }, [fieldId, forceRefresh]);
+    const isFieldDisabled = isReadonlyLoan || fieldMetadata.isLockField && !isLockedState || fieldMetadata.isReadOnly;
+    return {
+      fieldMetadata,
+      fieldValue,
+      setFieldValue,
+      isLockedState,
+      setIsLockedState,
+      isSearchedField,
+      setIsSearchedField,
+      isFieldDisabled,
+      validationResult,
+      setValidationResult,
+      ariaDescProps
+    };
+  }
+  useFieldGoTo(fieldId) {
+    const [isGoToField, setIsGoToField] = useState(false);
+    useEffect(() => {
+      if (!fieldId) return;
+      (async () => {
+        const goToStatus = await this.isGoToField(fieldId);
+        setIsGoToField(goToStatus);
+      })();
+    }, [fieldId]);
+    return {
+      isGoToField,
+      setIsGoToField
+    };
+  }
+};
+Hooks = __decorateClass([
+  decorators.class.Mixins(
+    FieldMeta,
+    FieldValue,
+    FieldDisabled,
+    FieldLocked,
+    FieldValidation,
+    FieldSubscribers,
+    FieldGoTo,
+    FieldDescription
+  )
+], Hooks);
+export {
+  Hooks
+};

package/dist/esm/renderer/base/renderer.js

@@ -0,0 +1,178 @@
+import { jsx } from "react/jsx-runtime";
+import { BrComponent } from "@elliemae/business-rules";
+import { BLL } from "../../bll";
+import { RENDERER_CONTROLLED_PROPS } from "../../bll/constants";
+import { Hooks } from "./hooks";
+class Renderer {
+  BrComponent = BrComponent;
+  fieldFormat = "";
+  BLL;
+  Hooks;
+  BRWrapper;
+  VM;
+  Props;
+  constructor() {
+    this.VM = {};
+    this.BLL = new BLL();
+    this.Hooks = new Hooks(this.BLL);
+    this.BRWrapper = this.renderBR();
+    this.Props = {};
+  }
+  async refreshFieldFromLoan() {
+    if (this.BLL.SSF.fieldValueResolver) return;
+    const { fieldId } = this.Props;
+    const fieldVal = await this.BLL.SSF.getFieldValue(fieldId);
+    const formattedValue = this.getFormattedValue(fieldVal);
+    this.VM.setFieldValue(formattedValue);
+    const valResult = this.Hooks.runValidationsOnValue(formattedValue, []);
+    if (!valResult.isValid) {
+      return;
+    }
+    this.VM.setValidationResult(valResult);
+  }
+  initCallbacks = () => {
+    (async () => {
+      await this.refreshFieldFromLoan();
+    })();
+  };
+  renderBR() {
+    const { BrComponent: BRWrapper } = this;
+    const BrComponentWrapper = (props) => /* @__PURE__ */ jsx(BRWrapper, { ...props, init: this.initCallbacks });
+    return BrComponentWrapper;
+  }
+  syncVM(vm) {
+    Object.keys(vm).forEach(
+      (key) => {
+        this.VM[key] = vm[key];
+      }
+    );
+    return this.VM;
+  }
+  buildFormatOptions(props) {
+    const { rendererType } = props;
+    const rendererOptionMap = {
+      text: "maskType",
+      number: "numberMaskOptions",
+      date: "dateFormat"
+    };
+    const formatOptions = {};
+    const optionKey = rendererOptionMap[rendererType];
+    if (optionKey && optionKey in props && props[optionKey]) {
+      formatOptions[optionKey] = props[optionKey];
+    }
+    return formatOptions;
+  }
+  initVM(props) {
+    const { fieldId, label = "", forceRefresh } = props;
+    Object.assign(this.Props, props);
+    const formatOptions = this.buildFormatOptions(props);
+    const {
+      fieldMetadata,
+      fieldValue,
+      setFieldValue,
+      isLockedState,
+      setIsLockedState,
+      isSearchedField,
+      setIsSearchedField,
+      isFieldDisabled,
+      validationResult,
+      setValidationResult,
+      ariaDescProps
+    } = this.Hooks.useFieldInit({
+      fieldId,
+      label,
+      rendererType: props.rendererType,
+      maskType: formatOptions.maskType,
+      numberMaskOptions: formatOptions.numberMaskOptions,
+      dateFormat: formatOptions.dateFormat,
+      forceRefresh
+    });
+    return this.syncVM({
+      fieldMetadata,
+      fieldValue,
+      setFieldValue,
+      isLockedState,
+      setIsLockedState,
+      isSearchedField,
+      setIsSearchedField,
+      isFieldDisabled,
+      validationResult,
+      setValidationResult,
+      ariaDescProps
+    });
+  }
+  toggleLockStatus(fieldId, isLockedState) {
+    (async () => {
+      await this.BLL.SSF.callCalcForLock(fieldId, isLockedState);
+    })();
+    this.VM.setIsLockedState(!isLockedState);
+  }
+  buildValidationProps(validationResult) {
+    return {
+      validationMessage: validationResult && !validationResult.isValid ? validationResult.message || "" : "",
+      hasError: validationResult ? !validationResult.isValid : false
+    };
+  }
+  getFormattedValue(fieldValue) {
+    const props = this.Props;
+    const { rendererType, maskType, numberMaskOptions, dateFormat } = props;
+    const fieldFormat = this.VM.fieldMetadata?.fieldFormat || "";
+    return this.Hooks.formatValue({
+      fieldValue,
+      fieldFormat,
+      options: {
+        rendererType,
+        maskType: rendererType === "text" ? maskType : void 0,
+        numberMaskOptions: rendererType === "number" ? numberMaskOptions : void 0,
+        dateFormat: rendererType === "date" ? dateFormat : void 0
+      }
+    });
+  }
+  getParsedValue(fieldValue) {
+    const props = this.Props;
+    const { rendererType, maskType, dateFormat } = props;
+    const fieldFormat = this.VM.fieldMetadata?.fieldFormat || "";
+    return this.Hooks.parseValue({
+      fieldValue,
+      fieldFormat,
+      options: {
+        rendererType,
+        maskType: rendererType === "text" ? maskType : void 0,
+        dateFormat: rendererType === "date" ? dateFormat : void 0
+      }
+    });
+  }
+  /**
+   * Sanitizes extra props by filtering out renderer-controlled properties.
+   * Prevents consumers from accidentally overriding internal state management.
+   * @template TExtra - Type of the extra props object
+   * @param {TExtra | undefined} extra - Additional props passed by the consumer
+   * @returns {Omit<TExtra, string>} Sanitized props object with controlled keys removed
+   * @example
+   * const sanitized = this.sanitize({ className: 'custom', onChange: () => {} });
+   * // Returns: { className: 'custom' } (onChange is filtered out)
+   */
+  sanitize(extra) {
+    if (!extra) return {};
+    const controlledKeys = RENDERER_CONTROLLED_PROPS[this.Props.rendererType];
+    if (!controlledKeys || controlledKeys.length === 0) {
+      return extra;
+    }
+    const controlledSet = new Set(controlledKeys);
+    const sanitized = Object.keys(extra).reduce((acc, key) => {
+      if (controlledSet.has(key)) {
+        this.BLL.Core.Log(
+          "warn",
+          `[${this.Props.rendererType}Renderer] Filtered controlled prop '${key}' from extra props. This prop is managed internally.`
+        );
+      } else {
+        acc[key] = extra[key];
+      }
+      return acc;
+    }, {});
+    return sanitized;
+  }
+}
+export {
+  Renderer
+};

package/dist/esm/renderer/base/rendererValidator.js

@@ -0,0 +1,77 @@
+import { bllInstance } from "../../bll";
+class RendererValidator {
+  static NUMERIC_FORMATS = ["DECIMAL", "INTEGER"];
+  static BOOLEAN_FORMATS = ["YN", "BOOLEAN"];
+  static DATE_FORMATS = ["DATE", "DATETIME"];
+  static validateRendererType({
+    rendererType,
+    fieldFormat
+  }) {
+    const format = fieldFormat?.toUpperCase();
+    if (rendererType === "number") {
+      return {
+        isValid: this.isNumericFormat(format),
+        expectedType: "number"
+      };
+    }
+    if (rendererType === "checkbox") {
+      return {
+        isValid: this.isBooleanFormat(format),
+        expectedType: "checkbox"
+      };
+    }
+    if (rendererType === "text" || rendererType === "email") {
+      return {
+        isValid: this.isTextCompatibleFormat(format),
+        expectedType: "text/email"
+      };
+    }
+    if (rendererType === "date" || rendererType === "datetime") {
+      return {
+        isValid: this.isDateFormat(format),
+        expectedType: "date/datetime"
+      };
+    }
+    return { isValid: true, expectedType: "unknown" };
+  }
+  static isNumericFormat(format) {
+    return this.NUMERIC_FORMATS.some((f) => format?.includes(f)) || false;
+  }
+  static isBooleanFormat(format) {
+    return this.BOOLEAN_FORMATS.includes(format || "");
+  }
+  static isDateFormat(format) {
+    return this.DATE_FORMATS.includes(format || "");
+  }
+  static isTextCompatibleFormat(format) {
+    return !(this.isNumericFormat(format) || this.isBooleanFormat(format) || this.isDateFormat(format));
+  }
+  static logMismatch({
+    fieldId,
+    rendererType,
+    fieldFormat,
+    metadata
+  }) {
+    const { isValid, expectedType } = this.validateRendererType({
+      rendererType,
+      fieldFormat
+    });
+    if (isValid) {
+      return;
+    }
+    bllInstance.Core.Log(
+      "error",
+      `[RendererValidator] Mismatch for field ${fieldId}: using rendererType="${rendererType}" but fieldFormat="${fieldFormat}" suggests "${expectedType}"`,
+      {
+        rendererType,
+        fieldFormat,
+        expectedType,
+        metadata
+      }
+    );
+    throw new Error("Renderer type mismatch");
+  }
+}
+export {
+  RendererValidator
+};

package/dist/esm/renderer/factory/index.js

@@ -0,0 +1,38 @@
+import { TextRenderer } from "../field-renderers/TextRenderer";
+import { NumberRenderer } from "../field-renderers/NumberRenderer";
+import { CheckboxRenderer } from "../field-renderers/CheckboxRenderer";
+import { RadioRenderer } from "../field-renderers/RadioRenderer";
+import { RadioGroupRenderer } from "../field-renderers/RadioGroupRenderer";
+import { DropdownRenderer } from "../field-renderers/DropdownRenderer";
+import { DateRenderer } from "../field-renderers/DateRenderer";
+import { LargeTextRenderer } from "../field-renderers/LargeTextRenderer";
+import { ZipCodeRenderer } from "../field-renderers/ZipCodeRenderer/index";
+import { ToggleRenderer } from "../field-renderers/ToggleRenderer";
+const rendererMap = {
+  text: () => new TextRenderer().render(),
+  email: () => new TextRenderer().render(),
+  number: () => new NumberRenderer().render(),
+  checkbox: () => new CheckboxRenderer().render(),
+  radio: () => new RadioRenderer().render(),
+  radiogroup: () => new RadioGroupRenderer().render(),
+  dropdown: () => new DropdownRenderer().render(),
+  date: () => new DateRenderer().render(),
+  zipcode: () => new ZipCodeRenderer().render(),
+  largetext: () => new LargeTextRenderer().render(),
+  toggle: () => new ToggleRenderer().render()
+};
+class RendererFactory {
+  static create(type) {
+    const factory = rendererMap[type];
+    if (!factory) {
+      throw new Error(`Renderer type ${type} is not supported.`);
+    }
+    return factory();
+  }
+  render() {
+    return (props) => RendererFactory.create(props.rendererType)(props);
+  }
+}
+export {
+  RendererFactory
+};

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

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { DSInputGroup } from "@elliemae/ds-form-layout-input-group";
+import { LockUnlocked, LockLocked } from "@elliemae/ds-icons";
+import { BUTTON_SIZES, DSButtonV3, BUTTON_TYPES } from "@elliemae/ds-button-v2";
+import { Renderer } from "../base/renderer";
+class AddonRenderer extends Renderer {
+  renderPadLock({
+    fieldId,
+    isLocked,
+    isDisabled = false,
+    onToggle
+  }) {
+    return /* @__PURE__ */ jsx(
+      DSButtonV3,
+      {
+        buttonType: BUTTON_TYPES.ICON,
+        "aria-label": isLocked ? "Lock" : "UnLock",
+        "data-testid": isLocked ? `lock-${fieldId}` : `unlock-${fieldId}`,
+        disabled: isDisabled,
+        size: BUTTON_SIZES.M,
+        onClick: onToggle,
+        children: isLocked ? /* @__PURE__ */ jsx(LockLocked, {}) : /* @__PURE__ */ jsx(LockUnlocked, {})
+      }
+    );
+  }
+  render() {
+    const Addon = (props) => {
+      const {
+        fieldId,
+        isPadLock,
+        isLocked,
+        isDisable,
+        rightAddon,
+        onPadLockToggle
+      } = props;
+      return isPadLock || rightAddon ? /* @__PURE__ */ jsx(
+        DSInputGroup,
+        {
+          leftAddon: isPadLock ? this.renderPadLock({
+            fieldId,
+            isLocked: isLocked || false,
+            isDisabled: isDisable,
+            onToggle: onPadLockToggle
+          }) : void 0,
+          rightAddon,
+          children: props.children
+        }
+      ) : props.children;
+    };
+    return Addon;
+  }
+}
+export {
+  AddonRenderer
+};