@elliemae/loan-field-renderers 26.2.2

package/dist/esm/OVERVIEW.md

@@ -0,0 +1,229 @@
+# Loan Field Renderers — Overview
+
+## What Is It?
+
+A **metadata-driven smart control system** that renders loan form fields. Instead of each page manually handling data fetching, formatting, validation, locking, and persistence — a single component does it all.
+
+**Before (without smart controls):**
+Each page manually wires up SSF calls, formatting logic, validation, lock handling, accessibility, and event subscriptions for every field.
+
+**After (with smart controls):**
+
+```jsx
+<FieldRenderer fieldId="FR0104" rendererType="number" />
+```
+
+One line. The system handles everything else automatically.
+
+---
+
+## What Does It Do Automatically?
+
+| Capability        | Description                                                                      |
+| ----------------- | -------------------------------------------------------------------------------- |
+| **Data Fetch**    | Fetches field metadata + current value from SSF on mount                         |
+| **Formatting**    | Applies the correct display format (currency, phone, SSN, date, zip)             |
+| **Input Masking** | Enforces input patterns (phone mask, SSN mask, number mask)                      |
+| **Validation**    | Runs configurable validation rules on blur (required, email, date, zip, maxChar) |
+| **Persistence**   | Parses display value back to raw data and saves to loan on blur                  |
+| **Lock/Unlock**   | Shows lock button, manages lock state, disables field when locked                |
+| **Read-Only**     | Respects both field-level and loan-level read-only states                        |
+| **Live Sync**     | Subscribes to loan events — auto-refreshes when data changes externally          |
+| **Accessibility** | Builds ARIA attributes from field description metadata                           |
+| **Go-To-Field**   | Highlights the field when navigated to via Go-To-Field                           |
+
+---
+
+## Supported Renderer Types
+
+| Type         | UI Component        | Use Case                                                  |
+| ------------ | ------------------- | --------------------------------------------------------- |
+| `text`       | Text input          | Names, addresses, general text (supports Phone/SSN masks) |
+| `number`     | Masked number input | Amounts, rates, percentages                               |
+| `date`       | Date picker         | Dates with configurable format                            |
+| `dropdown`   | Combobox            | Picklists, state selection                                |
+| `zipcode`    | Autocomplete input  | Zip codes with geo-lookup                                 |
+| `checkbox`   | Checkbox            | Yes/No boolean fields                                     |
+| `toggle`     | Toggle switch       | On/Off boolean fields                                     |
+| `radio`      | Single radio button | One option in a group                                     |
+| `radiogroup` | Radio button group  | Multiple exclusive options                                |
+| `largetext`  | Textarea            | Comments, large text with char counter                    |
+| `button`     | Button              | Action triggers                                           |
+| `email`      | Text input          | Email with built-in email validation                      |
+
+---
+
+## How It Works — 3 Phases
+
+### Phase 1: Mount — "Set Up the Field"
+
+```
+  Consumer passes fieldId + rendererType
+           │
+           ▼
+  RendererFactory picks the right renderer
+           │
+           ▼
+  Parallel SSF calls (all at once):
+  ┌─────────────────────────────────┐
+  │  • Field metadata (format,      │
+  │    options, readonly, lock,     │
+  │    maxLength, description)      │
+  │  • Current field value          │
+  │  • Lock status                  │
+  │  • Loan readonly status         │
+  │  • Go-To-Field status           │
+  └─────────────────────────────────┘
+           │
+           ▼
+  Build ViewModel → Render UI
+```
+
+### Phase 2: User Interaction — "Handle Input"
+
+```
+  User types → onChange
+  ┌────────────────────────────┐
+  │  Update local display value │
+  │  Fire optional callback     │
+  └────────────────────────────┘
+
+  User leaves field → onBlur
+  ┌────────────────────────────┐
+  │  1. Format the value        │
+  │  2. Validate                │
+  │     └─ Invalid? Show error, │
+  │        stop here            │
+  │  3. Parse to raw value      │
+  │  4. Save to loan via SSF    │
+  │  5. Fire optional callback  │
+  └────────────────────────────┘
+```
+
+### Phase 3: External Changes — "Stay in Sync"
+
+```
+  Business rule or another field changes loan data
+           │
+           ▼
+  SSF fires "change" or "loanUpdated" event
+           │
+           ▼
+  Field re-fetches its value from SSF
+           │
+           ▼
+  Re-formats and updates display automatically
+```
+
+---
+
+## Architecture — 3 Layers
+
+```
+┌───────────────────────────────────────────┐
+│          RENDERER LAYER                    │
+│  UI components, event handling, ViewModel  │
+│  12 specific renderers + shared base class │
+├───────────────────────────────────────────┤
+│          BUSINESS LOGIC LAYER              │
+│  Formatters (10 types) — format ↔ parse    │
+│  Validators (5 types) — validate on blur   │
+│  SSF Service — loan data access & events   │
+├───────────────────────────────────────────┤
+│          DATA ACCESS LAYER (SSF)           │
+│  Field metadata, values, lock status       │
+│  Loan readonly, Go-To-Field, state list    │
+│  Event subscriptions (change, loanUpdated) │
+└───────────────────────────────────────────┘
+```
+
+**Key design decisions:**
+
+- **Factory Pattern** — Renderers, formatters, and validators are created dynamically by type
+- **Mixin Composition** — Hooks and SSF combine focused classes instead of deep inheritance
+- **ViewModel Pattern** — All reactive state lives in one object, decoupled from UI
+
+---
+
+## How Metadata Drives Everything
+
+When a field is loaded, its metadata from SSF determines behavior automatically:
+
+```
+  fieldFormat: "D2"  →  NumberFormatter with 2 decimal places
+  fieldFormat: "SS"  →  SSN mask (***-**-1234)
+  fieldFormat: "ST"  →  Auto-fetch state dropdown list
+  fieldFormat: "P"   →  Phone mask ((123) 456-7890)
+
+  isLockField: true  →  Show lock button, disable when locked
+  isReadOnly: true   →  Disable the field
+  isReadonlyLoan     →  Loan-level check — if loan is disabled, all fields disable
+  maxLength: 50      →  Enforce character limit
+  description: "..." →  Set ARIA label/description
+  fieldOptions: [...] → Populate dropdown choices
+```
+
+No conditional logic needed in consuming pages — the metadata configures the control.
+
+---
+
+## Consumer API — Quick Reference
+
+### Basic Usage
+
+```jsx
+// Simple text field
+<FieldRenderer fieldId="FR0001" rendererType="text" label="First Name" />
+
+// Number with label
+<FieldRenderer fieldId="FR0104" rendererType="number" label="Loan Amount" />
+
+// Dropdown
+<FieldRenderer fieldId="FR0200" rendererType="dropdown" label="State" />
+
+// Date
+<FieldRenderer fieldId="FR0300" rendererType="date" label="Closing Date" />
+```
+
+### With Optional Props
+
+```jsx
+<FieldRenderer
+  fieldId="FR0104"
+  rendererType="number"
+  label="Loan Amount"
+  onBlur={(fieldId, value) => console.log('saved', value)}
+  onChange={(fieldId, value) => console.log('changed', value)}
+  validationRules={[{ type: 'required', message: 'Amount is required' }]}
+  autoFieldSet={true} // auto-persist on blur (default: true)
+  isDisable={false} // consumer-controlled disable
+  forceRefresh={refreshFlag} // trigger re-fetch from SSF
+/>
+```
+
+### Common Props
+
+| Prop              | Type        | Purpose                                           |
+| ----------------- | ----------- | ------------------------------------------------- |
+| `fieldId`         | `string`    | **(Required)** SSF field identifier               |
+| `rendererType`    | `string`    | **(Required)** Which UI control to render         |
+| `label`           | `string`    | Field label text                                  |
+| `onBlur`          | `function`  | Callback after value is validated and parsed      |
+| `onChange`        | `function`  | Callback on every value change                    |
+| `validationRules` | `array`     | Custom validation rules                           |
+| `autoFieldSet`    | `boolean`   | Auto-save to SSF on blur (default: `true`)        |
+| `isDisable`       | `boolean`   | Consumer-controlled disable override              |
+| `forceRefresh`    | `boolean`   | Toggle to force re-fetch from SSF                 |
+| `extra`           | `object`    | Pass-through props to the underlying DS component |
+| `rightAddon`      | `ReactNode` | Custom content to the right of the input          |
+
+---
+
+## Adding a New Renderer (Extensibility)
+
+1. Create `NewRenderer.tsx` extending `Renderer<T>`
+2. Define props type in `renderer/types.ts`
+3. Register in `renderer/factory/index.ts`
+4. Add controlled props to `bll/constants.ts` (if applicable)
+
+The factory pattern means zero changes to existing renderers or the `FieldRenderer` entry point.

package/dist/esm/bll/constants.js

@@ -0,0 +1,66 @@
+const ACRONYM_FORMAT_MAP = {
+  SS: "SSN",
+  T: "DATE",
+  TD: "DATETIME",
+  I: "INTEGER",
+  S: "STRING",
+  Y: "YN",
+  P: "PHONE",
+  Z: "ZIPCODE",
+  ST: "STATE",
+  D2: "DECIMAL_2",
+  D3: "DECIMAL_3",
+  D4: "DECIMAL_4",
+  D5: "DECIMAL_5",
+  D6: "DECIMAL_6",
+  RS: "RA_STRING",
+  RI: "RA_INTEGER",
+  RD2: "RA_DECIMAL_2",
+  RD3: "RA_DECIMAL_3",
+  RD4: "RA_DECIMAL_4",
+  RD5: "RA_DECIMAL_5",
+  RD6: "RA_DECIMAL_6"
+};
+const FORMATTER_ACRONYMS = Object.keys(ACRONYM_FORMAT_MAP);
+const FORMATTER_TYPE_MAP = {
+  ssn: "SSN",
+  date: "DATE",
+  datetime: "DATETIME",
+  integer: "INTEGER",
+  text: "STRING",
+  boolean: "YN",
+  phone: "PHONE",
+  zip: "ZIPCODE",
+  state: "STATE"
+};
+const DECIMAL_POINTS_MAP = {
+  D2: 2,
+  D3: 3,
+  D4: 4,
+  D5: 5,
+  D6: 6,
+  I: 0,
+  RI: 0,
+  RD2: 2,
+  RD3: 3,
+  RD4: 4,
+  RD5: 5,
+  RD6: 6
+};
+const RENDERER_CONTROLLED_PROPS = {
+  text: ["onChange", "onBlur", "value"],
+  number: ["onChange", "onBlur", "value"],
+  checkbox: ["value", "checked", "onChange"],
+  toggle: ["checked", "onChange"],
+  radio: ["onChange", "value", "checked"],
+  dropdown: ["selectedValues", "allOptions", "onChange", "onBlur", "onCreate"],
+  date: ["onDateChange", "onBlur", "date", "type"],
+  zipcode: ["onChange", "onBlur", "value", "onValueChange"]
+};
+export {
+  ACRONYM_FORMAT_MAP,
+  DECIMAL_POINTS_MAP,
+  FORMATTER_ACRONYMS,
+  FORMATTER_TYPE_MAP,
+  RENDERER_CONTROLLED_PROPS
+};

package/dist/esm/bll/formatters/booleanFormatter.js

@@ -0,0 +1,33 @@
+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";
+let BooleanFormatter = class {
+  format(input) {
+    if (input === null || input === void 0) return false;
+    if (typeof input === "boolean") return input;
+    if (input === "") return false;
+    if (typeof input === "string") {
+      const lower = input.toLowerCase();
+      return lower === "true" || lower === "yes" || lower === "y";
+    }
+    return Boolean(input);
+  }
+  parse(input) {
+    if (input === null || input === void 0) return void 0;
+    return input;
+  }
+};
+BooleanFormatter = __decorateClass([
+  decorators.class.Singleton
+], BooleanFormatter);
+export {
+  BooleanFormatter
+};

package/dist/esm/bll/formatters/dateFormatter.js

@@ -0,0 +1,48 @@
+import moment from "moment";
+class DateFormatter {
+  /**
+   * Format date from storage format to display format
+   * @param {unknown} input - Date value from loan (typically YYYY-MM-DD or ISO format)
+   * @param {object} [options] - Formatting options
+   * @param {string} [options.dateFormat] - Target display format (default: MM/DD/YYYY)
+   * @returns {string} Formatted date string for UI display
+   */
+  format(input, options) {
+    if (!input || input === "") return "";
+    const dateStr = String(input).trim();
+    if (!dateStr) return "";
+    if (dateStr.includes("_")) return dateStr;
+    const displayFormat = options?.dateFormat || "MM/DD/YYYY";
+    if (moment(dateStr, displayFormat, true).isValid()) {
+      return dateStr;
+    }
+    const parsed = moment(dateStr);
+    if (parsed.isValid()) {
+      return parsed.format(displayFormat);
+    }
+    return "";
+  }
+  /**
+   * Parse date from display format to storage format
+   * @param {string} input - Date string from UI (in display format)
+   * @param {object} [options] - Parsing options
+   * @param {string} [options.dateFormat] - Source display format (default: MM/DD/YYYY)
+   * @returns {unknown} Date in storage format (YYYY-MM-DD)
+   */
+  parse(input, options) {
+    if (!input || input === "") return "";
+    const displayFormat = options?.dateFormat || "MM/DD/YYYY";
+    let parsed = moment(input, displayFormat, true);
+    if (parsed.isValid()) {
+      return parsed.format("YYYY-MM-DD");
+    }
+    parsed = moment(input);
+    if (parsed.isValid()) {
+      return parsed.format("YYYY-MM-DD");
+    }
+    return input;
+  }
+}
+export {
+  DateFormatter
+};

package/dist/esm/bll/formatters/dropdownFormatter.js

@@ -0,0 +1,14 @@
+class DropdownFormatter {
+  format(input) {
+    if (typeof input === "boolean") {
+      return input ? "Y" : "N";
+    }
+    return input ? String(input) : "";
+  }
+  parse(input) {
+    return input;
+  }
+}
+export {
+  DropdownFormatter
+};

package/dist/esm/bll/formatters/factory/index.js

@@ -0,0 +1,97 @@
+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 { PhoneFormatter } from "../phoneFormatter";
+import { RegexFormatter } from "../regexFormatter";
+import { SSNFormatter } from "../ssnFormatter";
+import { ZipFormatter } from "../zipFormatter";
+import { BooleanFormatter } from "../booleanFormatter";
+import { TextFormatter } from "../textFormatter";
+import { NumberFormatter } from "../numberFormatter";
+import { DateFormatter } from "../dateFormatter";
+import { DropdownFormatter } from "../dropdownFormatter";
+let FormatterFactory = class {
+  /**
+   * Cache for formatter instances by acronym
+   * Since formatters are stateless, we can safely reuse instances
+   */
+  formatterCache = /* @__PURE__ */ new Map();
+  /**
+   * Helper to check if acronym is for number formatter
+   * @param {string} acronym - Acronym to check
+   * @returns {boolean} True if number formatter
+   */
+  isNumberAcronym(acronym) {
+    if (acronym === "DT" || acronym === "DD") return false;
+    return acronym === "I" || acronym === "RI" || acronym.startsWith("D") || acronym.startsWith("RD");
+  }
+  /**
+   * Helper to check if acronym is for text formatter
+   * @param {string} acronym - Acronym to check
+   * @returns {boolean} True if text formatter
+   */
+  isTextAcronym(acronym) {
+    return acronym === "S" || acronym === "ST";
+  }
+  /**
+   * Create specific formatter based on acronym
+   * @param {string} upperAcronym - Uppercase acronym
+   * @returns Specific formatter instance
+   */
+  createSpecificFormatter(upperAcronym) {
+    switch (upperAcronym) {
+      case "SS":
+        return new SSNFormatter();
+      case "Y":
+        return new BooleanFormatter();
+      case "P":
+        return new PhoneFormatter();
+      case "Z":
+        return new ZipFormatter();
+      case "RS":
+        return new RegexFormatter();
+      case "DD":
+        return new DropdownFormatter();
+      case "DT":
+      case "TD":
+      case "T":
+        return new DateFormatter();
+      default:
+        throw new Error(
+          `Unknown acronym "${upperAcronym}". Cannot create formatter.`
+        );
+    }
+  }
+  createFormatter(acronym) {
+    const upperAcronym = acronym.toUpperCase();
+    const cached = this.formatterCache.get(upperAcronym);
+    if (cached) {
+      return cached;
+    }
+    let formatter;
+    if (this.isNumberAcronym(upperAcronym)) {
+      formatter = new NumberFormatter();
+    } else if (this.isTextAcronym(upperAcronym)) {
+      formatter = new TextFormatter();
+    } else {
+      formatter = this.createSpecificFormatter(upperAcronym);
+    }
+    this.formatterCache.set(upperAcronym, formatter);
+    return formatter;
+  }
+};
+FormatterFactory = __decorateClass([
+  decorators.class.Singleton
+], FormatterFactory);
+const factoryInstance = new FormatterFactory();
+export {
+  factoryInstance
+};

package/dist/esm/bll/formatters/index.js

@@ -0,0 +1,4 @@
+import { factoryInstance } from "./factory";
+export {
+  factoryInstance
+};

package/dist/esm/bll/formatters/numberFormatter.js

@@ -0,0 +1,54 @@
+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 {
+  getNumberMaskedValue
+} from "@elliemae/ds-form-helpers-mask-hooks";
+let NumberFormatter = class {
+  getMaskOptions(fieldFormat, decimalPlaces) {
+    return {
+      decimalPlaces: decimalPlaces || 0,
+      allowNegative: true,
+      decimalRequired: !(fieldFormat === "I" || fieldFormat === "RI"),
+      includeThousandsSeparator: true,
+      prefix: "",
+      suffix: ""
+    };
+  }
+  format(input, { fieldFormat, numberOptions = {} }) {
+    if (input === null || input === void 0) return "";
+    if (input === "") return "";
+    if (!fieldFormat) return String(input);
+    const decimalPlaces = parseInt(fieldFormat.match(/\d+$/)?.[0] || "0", 10) || 0;
+    const maskOptions = this.getMaskOptions(fieldFormat, decimalPlaces);
+    const decimalValue = fieldFormat === "I" || fieldFormat === "RI" ? input : parseFloat(String(input).replace(/[^\d.-]/g, "")).toFixed(
+      maskOptions.decimalPlaces || 2
+    );
+    const maskedValue = getNumberMaskedValue(String(decimalValue), {
+      ...maskOptions,
+      ...numberOptions
+    });
+    return maskedValue;
+  }
+  parse(input, { fieldFormat, unmaskPattern = /[^\d.-]/g }) {
+    if (input === void 0 || input === null || input === "") return void 0;
+    if (!fieldFormat) return Number(input);
+    const decimalPlaces = parseInt(fieldFormat.match(/\d+$/)?.[0] || "0", 10) || 0;
+    const unmaskedValue = input.replace(unmaskPattern, "");
+    return decimalPlaces > 0 ? Number(parseFloat(unmaskedValue).toFixed(decimalPlaces)) : Number(unmaskedValue);
+  }
+};
+NumberFormatter = __decorateClass([
+  decorators.class.Singleton
+], NumberFormatter);
+export {
+  NumberFormatter
+};

package/dist/esm/bll/formatters/phoneFormatter.js

@@ -0,0 +1,41 @@
+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 {
+  getPhoneMaskedValue
+} from "@elliemae/ds-form-helpers-mask-hooks";
+let PhoneFormatter = class {
+  format(input, { isInternational }) {
+    if (input === null || input === void 0) {
+      return "";
+    }
+    const maskedValue = getPhoneMaskedValue(String(input), { isInternational });
+    return maskedValue;
+  }
+  parse(input, { unmaskPattern = /[()-\s]/g } = {}) {
+    if (!input) return void 0;
+    const unmaskedValue = input.replace(unmaskPattern, "");
+    return unmaskedValue;
+  }
+  static getPhoneFormatOptions({
+    isInternational = false
+  }) {
+    return {
+      isInternational
+    };
+  }
+};
+PhoneFormatter = __decorateClass([
+  decorators.class.Singleton
+], PhoneFormatter);
+export {
+  PhoneFormatter
+};

package/dist/esm/bll/formatters/regexFormatter.js

@@ -0,0 +1,34 @@
+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 { getRegExpMaskedValue } from "@elliemae/ds-form-helpers-mask-hooks";
+let RegexFormatter = class {
+  format(input, patterns) {
+    if (!patterns || patterns.length === 0) {
+      return input;
+    }
+    const maskedValue = getRegExpMaskedValue(input, patterns);
+    return maskedValue;
+  }
+  parse(input, patterns) {
+    if (!patterns || patterns.length === 0) {
+      return input;
+    }
+    const unmaskedValue = getRegExpMaskedValue(input, patterns);
+    return unmaskedValue;
+  }
+};
+RegexFormatter = __decorateClass([
+  decorators.class.Singleton
+], RegexFormatter);
+export {
+  RegexFormatter
+};

package/dist/esm/bll/formatters/ssnFormatter.js

@@ -0,0 +1,32 @@
+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 { getSSNMaskedValue } from "@elliemae/ds-form-helpers-mask-hooks";
+let SSNFormatter = class {
+  format(input) {
+    if (input === null || input === void 0 || input === "") {
+      return "";
+    }
+    const maskedValue = getSSNMaskedValue(String(input));
+    return maskedValue;
+  }
+  parse(input) {
+    if (!input) return void 0;
+    const unmaskedValue = input.replace(/-/g, "");
+    return unmaskedValue;
+  }
+};
+SSNFormatter = __decorateClass([
+  decorators.class.Singleton
+], SSNFormatter);
+export {
+  SSNFormatter
+};

package/dist/esm/bll/formatters/textFormatter.js

@@ -0,0 +1,25 @@
+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";
+let TextFormatter = class {
+  format(input) {
+    return input ? String(input) : "";
+  }
+  parse(input) {
+    return input;
+  }
+};
+TextFormatter = __decorateClass([
+  decorators.class.Singleton
+], TextFormatter);
+export {
+  TextFormatter
+};