@elliemae/loan-field-renderers 26.2.2

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

@@ -0,0 +1,139 @@
+"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 __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;
+};
+var hooks_exports = {};
+__export(hooks_exports, {
+  Hooks: () => Hooks
+});
+module.exports = __toCommonJS(hooks_exports);
+var import_pui_app_sdk = require("@elliemae/pui-app-sdk");
+var import_react = require("react");
+var import_fieldMeta = require("./fieldMeta");
+var import_fieldValue = require("./fieldValue");
+var import_fieldDisabled = require("./fieldDisabled");
+var import_fieldLocked = require("./fieldLocked");
+var import_fieldValidation = require("./fieldValidation");
+var import_fieldSubscribers = require("./fieldSubscribers");
+var import_fieldGoTo = require("./fieldGoTo");
+var import_hookBase = require("./hookBase");
+var import_fieldDescription = require("./fieldDescription");
+let Hooks = class extends import_hookBase.HookBase {
+  useFieldInit(params) {
+    const {
+      fieldId,
+      label = "",
+      rendererType,
+      maskType,
+      numberMaskOptions,
+      dateFormat,
+      forceRefresh
+    } = params;
+    const [fieldMetadata, setFieldMetadata] = (0, import_react.useState)(
+      {}
+    );
+    const [fieldValue, setFieldValue] = (0, import_react.useState)(void 0);
+    const [isLockedState, setIsLockedState] = (0, import_react.useState)(false);
+    const [isSearchedField, setIsSearchedField] = (0, import_react.useState)(false);
+    const [isReadonlyLoan, setIsReadonlyLoan] = (0, import_react.useState)(false);
+    const [validationResult, setValidationResult] = (0, import_react.useState)(null);
+    const [ariaDescProps, setAriaDescProps] = (0, import_react.useState)({ "aria-label": label || "" });
+    (0, import_react.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] = (0, import_react.useState)(false);
+    (0, import_react.useEffect)(() => {
+      if (!fieldId) return;
+      (async () => {
+        const goToStatus = await this.isGoToField(fieldId);
+        setIsGoToField(goToStatus);
+      })();
+    }, [fieldId]);
+    return {
+      isGoToField,
+      setIsGoToField
+    };
+  }
+};
+Hooks = __decorateClass([
+  import_pui_app_sdk.decorators.class.Mixins(
+    import_fieldMeta.FieldMeta,
+    import_fieldValue.FieldValue,
+    import_fieldDisabled.FieldDisabled,
+    import_fieldLocked.FieldLocked,
+    import_fieldValidation.FieldValidation,
+    import_fieldSubscribers.FieldSubscribers,
+    import_fieldGoTo.FieldGoTo,
+    import_fieldDescription.FieldDescription
+  )
+], Hooks);

package/dist/cjs/renderer/base/renderer.js

@@ -0,0 +1,198 @@
+"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 renderer_exports = {};
+__export(renderer_exports, {
+  Renderer: () => Renderer
+});
+module.exports = __toCommonJS(renderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_business_rules = require("@elliemae/business-rules");
+var import_bll = require("../../bll");
+var import_constants = require("../../bll/constants");
+var import_hooks = require("./hooks");
+class Renderer {
+  BrComponent = import_business_rules.BrComponent;
+  fieldFormat = "";
+  BLL;
+  Hooks;
+  BRWrapper;
+  VM;
+  Props;
+  constructor() {
+    this.VM = {};
+    this.BLL = new import_bll.BLL();
+    this.Hooks = new import_hooks.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__ */ (0, import_jsx_runtime.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 = import_constants.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;
+  }
+}

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

@@ -0,0 +1,97 @@
+"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 rendererValidator_exports = {};
+__export(rendererValidator_exports, {
+  RendererValidator: () => RendererValidator
+});
+module.exports = __toCommonJS(rendererValidator_exports);
+var import_bll = require("../../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;
+    }
+    import_bll.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");
+  }
+}

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

@@ -0,0 +1,58 @@
+"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 factory_exports = {};
+__export(factory_exports, {
+  RendererFactory: () => RendererFactory
+});
+module.exports = __toCommonJS(factory_exports);
+var import_TextRenderer = require("../field-renderers/TextRenderer");
+var import_NumberRenderer = require("../field-renderers/NumberRenderer");
+var import_CheckboxRenderer = require("../field-renderers/CheckboxRenderer");
+var import_RadioRenderer = require("../field-renderers/RadioRenderer");
+var import_RadioGroupRenderer = require("../field-renderers/RadioGroupRenderer");
+var import_DropdownRenderer = require("../field-renderers/DropdownRenderer");
+var import_DateRenderer = require("../field-renderers/DateRenderer");
+var import_LargeTextRenderer = require("../field-renderers/LargeTextRenderer");
+var import_ZipCodeRenderer = require("../field-renderers/ZipCodeRenderer/index");
+var import_ToggleRenderer = require("../field-renderers/ToggleRenderer");
+const rendererMap = {
+  text: () => new import_TextRenderer.TextRenderer().render(),
+  email: () => new import_TextRenderer.TextRenderer().render(),
+  number: () => new import_NumberRenderer.NumberRenderer().render(),
+  checkbox: () => new import_CheckboxRenderer.CheckboxRenderer().render(),
+  radio: () => new import_RadioRenderer.RadioRenderer().render(),
+  radiogroup: () => new import_RadioGroupRenderer.RadioGroupRenderer().render(),
+  dropdown: () => new import_DropdownRenderer.DropdownRenderer().render(),
+  date: () => new import_DateRenderer.DateRenderer().render(),
+  zipcode: () => new import_ZipCodeRenderer.ZipCodeRenderer().render(),
+  largetext: () => new import_LargeTextRenderer.LargeTextRenderer().render(),
+  toggle: () => new import_ToggleRenderer.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);
+  }
+}

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

@@ -0,0 +1,75 @@
+"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 AddonRenderer_exports = {};
+__export(AddonRenderer_exports, {
+  AddonRenderer: () => AddonRenderer
+});
+module.exports = __toCommonJS(AddonRenderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_form_layout_input_group = require("@elliemae/ds-form-layout-input-group");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_renderer = require("../base/renderer");
+class AddonRenderer extends import_renderer.Renderer {
+  renderPadLock({
+    fieldId,
+    isLocked,
+    isDisabled = false,
+    onToggle
+  }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_button_v2.DSButtonV3,
+      {
+        buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
+        "aria-label": isLocked ? "Lock" : "UnLock",
+        "data-testid": isLocked ? `lock-${fieldId}` : `unlock-${fieldId}`,
+        disabled: isDisabled,
+        size: import_ds_button_v2.BUTTON_SIZES.M,
+        onClick: onToggle,
+        children: isLocked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.LockLocked, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.LockUnlocked, {})
+      }
+    );
+  }
+  render() {
+    const Addon = (props) => {
+      const {
+        fieldId,
+        isPadLock,
+        isLocked,
+        isDisable,
+        rightAddon,
+        onPadLockToggle
+      } = props;
+      return isPadLock || rightAddon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ds_form_layout_input_group.DSInputGroup,
+        {
+          leftAddon: isPadLock ? this.renderPadLock({
+            fieldId,
+            isLocked: isLocked || false,
+            isDisabled: isDisable,
+            onToggle: onPadLockToggle
+          }) : void 0,
+          rightAddon,
+          children: props.children
+        }
+      ) : props.children;
+    };
+    return Addon;
+  }
+}

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

@@ -0,0 +1,123 @@
+"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 CheckboxRenderer_exports = {};
+__export(CheckboxRenderer_exports, {
+  CheckboxRenderer: () => CheckboxRenderer
+});
+module.exports = __toCommonJS(CheckboxRenderer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
+var import_renderer = require("../base/renderer");
+var import_styles = require("../styles");
+class CheckboxRenderer extends import_renderer.Renderer {
+  constructor() {
+    super();
+    this.BRWrapper = this.renderBR();
+  }
+  render() {
+    const { BRWrapper } = this;
+    const CheckboxComponent = (props) => {
+      const {
+        fieldId,
+        onBlur,
+        autoFieldSet = true,
+        validationRules,
+        isDisable,
+        label,
+        extra,
+        ...rest
+      } = props;
+      const {
+        fieldValue,
+        isFieldDisabled,
+        setFieldValue,
+        validationResult,
+        isSearchedField,
+        setIsSearchedField
+      } = this.initVM(props);
+      const validationProps = this.buildValidationProps(validationResult);
+      const onChangeEvent = (0, import_react.useCallback)(
+        (newVal) => {
+          setIsSearchedField(false);
+          if (!isDisable && !isFieldDisabled) {
+            const formattedValue = this.getFormattedValue(newVal);
+            setFieldValue(formattedValue);
+            const parsedValue = this.getParsedValue(formattedValue);
+            if (autoFieldSet) {
+              (async () => {
+                await this.BLL.SSF.setFieldValue(fieldId, parsedValue);
+              })();
+            }
+            if (onBlur) {
+              onBlur(fieldId, parsedValue);
+            }
+          }
+        },
+        [
+          isDisable,
+          isFieldDisabled,
+          setFieldValue,
+          setIsSearchedField,
+          onBlur,
+          autoFieldSet,
+          fieldId
+        ]
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        BRWrapper,
+        {
+          fieldId,
+          inputID: fieldId,
+          value: !!fieldValue,
+          ...props.brCompProps || {},
+          withHighlight: isSearchedField,
+          ...validationProps,
+          children: [
+            !label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.EmptyLabel, { htmlFor: fieldId }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ds_form_checkbox.DSControlledCheckbox,
+              {
+                id: fieldId,
+                label,
+                "data-testid": fieldId,
+                checked: !!fieldValue,
+                applyAriaDisabled: isFieldDisabled || isDisable,
+                onChange: onChangeEvent,
+                ...extra,
+                ...this.sanitize(rest)
+              }
+            )
+          ]
+        }
+      );
+    };
+    return import_react.default.memo(CheckboxComponent);
+  }
+}