@elliemae/loan-field-renderers 26.2.2

package/dist/esm/demo/config.js

@@ -0,0 +1,371 @@
+class Config {
+  static getTextFields() {
+    return [
+      {
+        label: "Text Field",
+        fieldId: "4003",
+        rendererType: "text"
+      },
+      {
+        label: "Email Field",
+        fieldId: "1178",
+        rendererType: "email",
+        onBlur: (fieldId, value) => {
+          console.log(
+            `OnBlur called for fieldId: ${fieldId} with value: ${String(
+              value
+            )}`
+          );
+        },
+        onChange: (fieldId, value) => {
+          console.log(
+            `OnChange called for fieldId: ${fieldId} with value: ${String(
+              value
+            )}`
+          );
+        }
+      },
+      {
+        label: "Phone Field",
+        fieldId: "USDA.X103",
+        rendererType: "text",
+        maskType: "Phone"
+      },
+      {
+        label: "SSN Field",
+        fieldId: "65",
+        rendererType: "text",
+        maskType: "SSN"
+      },
+      {
+        label: "Lock Text Field",
+        fieldId: "LE1.X5",
+        rendererType: "text"
+      },
+      {
+        label: "Custom Format Field",
+        fieldId: "LE1.X6",
+        rendererType: "text",
+        formatFn: (value) => {
+          if (!value) return "";
+          return value.toUpperCase();
+        },
+        parseFn: (displayValue) => {
+          if (!displayValue) return "";
+          return displayValue.toLowerCase();
+        }
+      },
+      {
+        label: "City",
+        fieldId: "FR0106",
+        rendererType: "text"
+      },
+      {
+        label: "State",
+        fieldId: "FR0107",
+        rendererType: "dropdown",
+        onBlur: (fieldId, value) => {
+          console.log(`Dropdown onBlur: ${fieldId} = ${String(value)}`);
+        }
+      },
+      {
+        label: "Zip Code Field",
+        fieldId: "FR0108",
+        geoFields: {
+          city: "FR0106",
+          state: "FR0107",
+          county: "FR0109"
+        },
+        useLatLong: true,
+        rendererType: "zipcode",
+        onGeoLookupComplete: (zip, cityData) => {
+          console.log("Zip Code Updated:", zip, cityData);
+        },
+        onChange: (fieldId, value) => {
+          console.log(`ZipCode onChange: ${fieldId} = ${String(value)}`);
+        },
+        onBlur: (fieldId, value) => {
+          console.log(`ZipCode onBlur: ${fieldId} = ${String(value)}`);
+        }
+      },
+      {
+        label: "LE1 Address Zip Code",
+        fieldId: "15",
+        geoFields: {
+          city: "12",
+          state: "14",
+          county: "16"
+        },
+        rendererType: "zipcode",
+        onChange: (fieldId, value) => {
+          console.log(`ZipCode onChange: ${fieldId} = ${String(value)}`);
+        },
+        onBlur: (fieldId, value) => {
+          console.log(`ZipCode onBlur: ${fieldId} = ${String(value)}`);
+        }
+      },
+      {
+        label: "LE1 Applicants: City",
+        fieldId: "1417",
+        rendererType: "text"
+      },
+      {
+        label: "LE1 Applicants: State",
+        fieldId: "1418",
+        rendererType: "text"
+      },
+      {
+        label: "LE1 Applicants: Zip Code (Foreign)",
+        fieldId: "1419",
+        geoFields: {
+          city: "1417",
+          state: "1418",
+          country: "URLA.X269"
+        },
+        isForeignAddress: true,
+        rendererType: "zipcode",
+        onChange: (fieldId, value) => {
+          console.log(
+            `Foreign ZipCode onChange: ${fieldId} = ${String(value)}`
+          );
+        },
+        onBlur: (fieldId, value) => {
+          console.log(`Foreign ZipCode onBlur: ${fieldId} = ${String(value)}`);
+        }
+      },
+      {
+        label: "LE1 Applicants: Country",
+        fieldId: "URLA.X269",
+        rendererType: "text"
+      },
+      {
+        label: "LE1 Applicants Zip Code",
+        fieldId: "1260",
+        geoFields: {
+          city: "1258",
+          state: "1259"
+        },
+        rendererType: "zipcode"
+      },
+      {
+        label: "State",
+        fieldId: "1259",
+        rendererType: "dropdown"
+      },
+      {
+        label: "City",
+        fieldId: "1258",
+        rendererType: "text"
+      },
+      {
+        label: "Editable Lock Dropdown Field",
+        fieldId: "33",
+        rendererType: "dropdown",
+        isEditable: true
+      }
+    ];
+  }
+  static getNumberFields() {
+    return [
+      {
+        label: "Number Field with D3 format",
+        fieldId: "3",
+        rendererType: "number",
+        numberMaskOptions: {
+          suffix: "%"
+        }
+      },
+      {
+        label: "Number Field with D2 format",
+        fieldId: "2",
+        rendererType: "number",
+        numberMaskOptions: {
+          prefix: "$"
+        }
+      },
+      {
+        label: "Number Field with Integer format",
+        fieldId: "4",
+        rendererType: "number",
+        onBlur: (fieldId, value) => {
+          console.log(
+            `OnBlur called for fieldId: ${fieldId} with value: ${String(
+              value
+            )}`
+          );
+        },
+        onChange: (fieldId, value) => {
+          console.log(
+            `OnChange called for fieldId: ${fieldId} with value: ${String(
+              value
+            )}`
+          );
+        }
+      },
+      {
+        label: "Number Field with D6 format",
+        fieldId: "3422",
+        rendererType: "number",
+        numberMaskOptions: {
+          prefix: " $"
+        }
+      },
+      {
+        label: "Lock number integer field",
+        fieldId: "LE2.X1",
+        rendererType: "number"
+      }
+    ];
+  }
+  static getCheckboxFields() {
+    return [
+      {
+        label: "Checkbox Field 1",
+        fieldId: "LE1.X78",
+        rendererType: "checkbox",
+        onBlur(fieldId, value) {
+          console.log(
+            `Checkbox onBlur called for fieldId: ${fieldId} with value: ${String(
+              value
+            )}`
+          );
+        }
+      },
+      {
+        label: "Checkbox Field 2",
+        fieldId: "LE1.X79",
+        rendererType: "checkbox",
+        isDisable: true
+      }
+    ];
+  }
+  static getRadioButtonFields() {
+    return [
+      {
+        label: "Radio Button Field",
+        fieldId: "RESPA.X28",
+        rendererType: "radio",
+        name: "Service your loan. If so, you will make your payment to us.",
+        value: true,
+        onSelect(fieldId, value) {
+          console.log(
+            `Radio onSelect called for fieldId: ${fieldId} with value: ${String(
+              value
+            )}`
+          );
+        }
+      },
+      {
+        label: "Radio Group Field",
+        fieldId: "LE3.X11",
+        rendererType: "radiogroup",
+        onSelect(fieldId, value) {
+          console.log(
+            `Radio Group onSelect called for fieldId: ${fieldId} with value: ${String(
+              value
+            )}`
+          );
+        }
+      },
+      {
+        label: "check disabled Radio Group Field",
+        fieldId: "LE3.X12",
+        rendererType: "radiogroup",
+        isDisable: true
+      }
+    ];
+  }
+  static getDateFields() {
+    return [
+      {
+        label: "Application Date",
+        fieldId: "748",
+        rendererType: "date",
+        onBlur: (fieldId, value) => {
+          console.log(`Date onBlur: ${fieldId} = ${String(value)}`);
+        },
+        onChange: (fieldId, value) => {
+          console.log(`Date onChange: ${fieldId} = ${String(value)}`);
+        }
+      },
+      {
+        label: "Closing Date",
+        fieldId: "763",
+        rendererType: "date"
+      },
+      {
+        label: "Disabled Date Field",
+        fieldId: "762",
+        rendererType: "date",
+        isDisable: true
+      },
+      {
+        label: "Date Field (autoFieldSet=false)",
+        fieldId: "761",
+        rendererType: "date",
+        autoFieldSet: false,
+        onBlur: (fieldId, value) => {
+          console.log(`Date (manual) onBlur: ${fieldId} = ${String(value)}`);
+        }
+      }
+    ];
+  }
+  static getLargeTextField() {
+    return [
+      {
+        label: "Large Text Field",
+        fieldId: "3169",
+        rendererType: "largetext",
+        onBlur: (fieldId, value) => {
+          console.log(`Large Text onBlur: ${fieldId} = ${String(value)}`);
+        },
+        onChange: (fieldId, value) => {
+          console.log(`Large Text onChange: ${fieldId} = ${String(value)}`);
+        }
+      },
+      {
+        label: "Large Text Field with max length 10",
+        fieldId: "1867",
+        rendererType: "largetext",
+        maxCharactersDisplay: true,
+        maxCharCounter: 10
+      }
+    ];
+  }
+  static getToggleFields() {
+    return [
+      {
+        label: "Toggle Field",
+        fieldId: "LE1.X80",
+        rendererType: "toggle",
+        onChange: (fieldId, value) => {
+          console.log(
+            `Toggle onChange called for fieldId: ${fieldId} with value: ${String(
+              value
+            )}`
+          );
+        }
+      },
+      {
+        label: "Disabled Toggle Field",
+        fieldId: "LE1.X81",
+        rendererType: "toggle",
+        isDisable: true
+      }
+    ];
+  }
+  static getRendererConfigs() {
+    return [
+      ...Config.getTextFields(),
+      ...Config.getNumberFields(),
+      ...Config.getCheckboxFields(),
+      ...Config.getRadioButtonFields(),
+      ...Config.getDateFields(),
+      ...Config.getLargeTextField(),
+      ...Config.getToggleFields()
+    ];
+  }
+}
+export {
+  Config
+};

package/dist/esm/demo/index.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Grid } from "@elliemae/ds-grid";
+import { FieldRenderer } from "../renderer";
+import { Config } from "./config";
+const Demo = () => /* @__PURE__ */ jsxs(Grid, { children: [
+  /* @__PURE__ */ jsx(Grid, { "data-testid": "demo-title", children: "This is a demo page for loan field renderers" }),
+  /* @__PURE__ */ jsx(Grid, { cols: [1, 1], children: /* @__PURE__ */ jsx(Grid, { children: Config.getRendererConfigs().map((fieldConfig) => /* @__PURE__ */ jsx(FieldRenderer, { ...fieldConfig }, fieldConfig.fieldId)) }) })
+] });
+export {
+  Demo
+};

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/dist/esm/renderer/FieldRenderer.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { RendererFactory } from "./factory";
+const FieldRenderer = (props) => {
+  const RendererComponent = useMemo(
+    () => RendererFactory.create(props.rendererType),
+    [props.rendererType]
+  );
+  return /* @__PURE__ */ jsx(RendererComponent, { ...props });
+};
+var FieldRenderer_default = React.memo(FieldRenderer);
+export {
+  FieldRenderer,
+  FieldRenderer_default as default
+};

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

@@ -0,0 +1,19 @@
+import { HookBase } from "./hookBase";
+class FieldDescription extends HookBase {
+  getFieldAriaDescProps(label, description) {
+    if (description) {
+      if (this.BLL.Core.CoreUtils.Validate.isNullOrUndefined(label) || label === "") {
+        return {
+          "aria-label": description
+        };
+      }
+      return {
+        "aria-description": description
+      };
+    }
+    return {};
+  }
+}
+export {
+  FieldDescription
+};

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

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+import { HookBase } from "./hookBase";
+class FieldDisabled extends HookBase {
+  async isLoanReadonly() {
+    try {
+      const readonlyStatus = await this.BLL.SSF.isReadOnlyLoan();
+      return readonlyStatus;
+    } catch (error) {
+      this.BLL.Core.Log("error", `error fetching loan readonly status`, {
+        error
+      });
+      return false;
+    }
+  }
+  useFieldDisabled({
+    fieldId,
+    metadata,
+    isLockedState
+  }) {
+    const { isLockField = false, isReadOnly = false } = metadata || {};
+    const [isReadonlyLoan, setIsReadonlyLoan] = useState(false);
+    useEffect(() => {
+      (async () => {
+        const readonlyStatus = await this.isLoanReadonly();
+        setIsReadonlyLoan(readonlyStatus);
+      })();
+    }, [fieldId]);
+    return isReadonlyLoan || isLockField && !isLockedState || isReadOnly;
+  }
+}
+export {
+  FieldDisabled
+};

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

@@ -0,0 +1,30 @@
+import { HookBase } from "./hookBase";
+class FieldGoTo extends HookBase {
+  async isGoToField(fieldId) {
+    const formDetails = this.BLL.SSF.getCachedGTFFormDetails();
+    if (formDetails) {
+      return formDetails.fieldId === fieldId;
+    }
+    try {
+      const fetchedDetails = await this.BLL.SSF.getGTFSelectedFormDetails();
+      if (fetchedDetails) {
+        this.BLL.SSF.setCachedGTFFormDetails(fetchedDetails);
+        return fetchedDetails.fieldId === fieldId;
+      }
+      return false;
+    } catch (error) {
+      this.BLL.Core.Log(
+        "error",
+        `Error fetching GTF selected form details in fetchGTFFormDetails for fieldId ${fieldId}`,
+        {
+          fieldId,
+          error
+        }
+      );
+      return false;
+    }
+  }
+}
+export {
+  FieldGoTo
+};

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

@@ -0,0 +1,22 @@
+import { HookBase } from "./hookBase";
+class FieldLocked extends HookBase {
+  async getFieldLockStatus(fieldId) {
+    try {
+      const lockedStatus = await this.BLL.SSF.getLockStatus(fieldId);
+      return lockedStatus;
+    } catch (error) {
+      this.BLL.Core.Log(
+        "error",
+        `error fetching field lock status for ${fieldId}`,
+        {
+          fieldId,
+          error
+        }
+      );
+      return false;
+    }
+  }
+}
+export {
+  FieldLocked
+};

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

@@ -0,0 +1,132 @@
+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 { HookBase } from "./hookBase";
+class FieldMeta extends HookBase {
+  async getMetadata(fieldId) {
+    try {
+      const fieldPaths = await this.BLL.SSF.getFieldContractPaths();
+      const { fieldData, isCollection } = await this.lookupFieldData(
+        fieldId,
+        fieldPaths
+      );
+      const [
+        contractPath,
+        isNullable,
+        fieldFormat,
+        description,
+        isReadOnly,
+        maxLength,
+        options,
+        isLockField
+      ] = fieldData;
+      const finalContractPath = await this.transformContractPath(
+        contractPath,
+        fieldId,
+        isCollection
+      );
+      return await this.buildFieldMetadata({
+        contractPath: finalContractPath,
+        isNullable,
+        fieldFormat,
+        description,
+        isReadOnly,
+        maxLength,
+        options,
+        isLockField
+      });
+    } catch (error) {
+      return this.handleMetadataError(fieldId, error);
+    }
+  }
+  async lookupFieldData(fieldId, fieldPaths) {
+    let fieldData = fieldPaths[fieldId];
+    let isCollection = false;
+    let lookupFieldId = fieldId;
+    if (!fieldData) {
+      lookupFieldId = await this.BLL.SSF.resolveBaseCollectionId(fieldId);
+      isCollection = lookupFieldId !== fieldId;
+      fieldData = fieldPaths[lookupFieldId];
+    }
+    if (!fieldData) {
+      throw new Error(
+        `Field metadata not found for ${fieldId}${isCollection ? ` (base: ${lookupFieldId})` : ""}`
+      );
+    }
+    return { fieldData, isCollection };
+  }
+  async transformContractPath(contractPath, fieldId, isCollection) {
+    if (!isCollection) {
+      return contractPath;
+    }
+    const rowIndex = await this.BLL.SSF.getCollectionRowIndex(fieldId);
+    const collectionIndex = rowIndex - 1;
+    return contractPath.replace(/\[%\]/g, `[${collectionIndex}]`);
+  }
+  async buildFieldMetadata(params) {
+    const {
+      contractPath,
+      isNullable,
+      fieldFormat,
+      description,
+      isReadOnly,
+      maxLength,
+      options,
+      isLockField
+    } = params;
+    const fieldMetadata = {
+      contractPath,
+      isNullable: Boolean(isNullable),
+      fieldFormat,
+      description: description || "",
+      isReadOnly: Boolean(isReadOnly),
+      maxLength,
+      isLockField: Boolean(isLockField),
+      fieldOptions: options && options.length > 0 ? options.map((option, currentIdx) => ({
+        dsId: `${currentIdx}`,
+        type: "option",
+        label: option[0],
+        value: option[1]
+      })) : []
+    };
+    if (fieldMetadata.fieldFormat === "ST") {
+      fieldMetadata.fieldOptions = await this.fetchStateOptions();
+    }
+    return fieldMetadata;
+  }
+  handleMetadataError(fieldId, error) {
+    this.BLL.Core.Log("error", `error fetching field metadata for ${fieldId}`, {
+      fieldId,
+      error
+    });
+    throw this.BLL.Core.ExceptionUtils.runtimeException(
+      error.message || "Unknown error",
+      {
+        context: `field metadata for fieldId: ${fieldId} not found`
+      }
+    );
+  }
+  async fetchStateOptions() {
+    const stateOptions = await this.BLL.SSF.getStateDropDownList();
+    return stateOptions?.map((state, idx) => ({
+      dsId: `${idx}`,
+      type: "option",
+      label: state.name,
+      value: state.value
+    }));
+  }
+}
+__decorateClass([
+  decorators.function.MemoizeAsync
+], FieldMeta.prototype, "fetchStateOptions", 1);
+export {
+  FieldMeta
+};

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

@@ -0,0 +1,36 @@
+import * as elli from "@elliemae/em-ssf-guest";
+import { useEffect } from "react";
+import { HookBase } from "./hookBase";
+class FieldSubscribers extends HookBase {
+  useSubscribeEffect({
+    objectId = "loan",
+    eventName = "loanUpdated",
+    callback
+  }) {
+    useEffect(() => {
+      const token = elli.subscribe(objectId, eventName, callback);
+      return () => {
+        if (token) {
+          elli.unsubscribe(objectId, eventName, token);
+        }
+      };
+    }, []);
+  }
+  useLoanUpdatedCB(callback) {
+    this.useSubscribeEffect({
+      objectId: "loan",
+      eventName: "loanUpdated",
+      callback
+    });
+  }
+  useLoanChangeCB(callback) {
+    this.useSubscribeEffect({
+      objectId: "loan",
+      eventName: "change",
+      callback
+    });
+  }
+}
+export {
+  FieldSubscribers
+};

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

@@ -0,0 +1,25 @@
+import { useState } from "react";
+import { HookBase } from "./hookBase";
+class FieldValidation extends HookBase {
+  runValidationsOnValue(value, validationRules, customValidation) {
+    const result = { isValid: true, message: "" };
+    if (customValidation) {
+      customValidation(value);
+      return result;
+    }
+    if (validationRules.length > 0) {
+      return this.BLL.Validator.runValidators(validationRules, value);
+    }
+    return result;
+  }
+  useFieldValidation() {
+    const [validationResult, setValidationResult] = useState(null);
+    return {
+      validationResult,
+      setValidationResult
+    };
+  }
+}
+export {
+  FieldValidation
+};