@justifi/webcomponents 4.11.0 → 4.12.0

package/dist/module/business-core-info-schema.js

@@ -1,26 +1,57 @@
-import { c as create$3, a as create$6 } from './index.esm.js';
-import { u as urlRegex, p as phoneRegex } from './helpers.js';
+import { a as create$6, c as create$3 } from './index.esm.js';
+import { a as BusinessTypeOptions } from './business-form-types.js';
+import { b as businessNameRegex, t as transformEmptyString, u as urlRegex, a as phoneRegex, s as stringLettersOnlyRegex, c as taxIdRegex } from './payload-parsers.js';
 
+const nameValidation = create$6()
+    .min(2, 'Name must be at least 2 characters')
+    .max(100, 'Name must be less than 100 characters')
+    .matches(businessNameRegex, 'Enter valid business name')
+    .transform(transformEmptyString);
+const doingBusinessAsValidation = create$6()
+    .min(2, 'Name must be at least 2 characters')
+    .max(100, 'Name must be less than 100 characters')
+    .matches(businessNameRegex, 'Enter valid doing business as')
+    .transform(transformEmptyString);
+const websiteUrlValidation = create$6()
+    .matches(urlRegex, 'Enter valid website url')
+    .transform(transformEmptyString);
+const emailValidation = create$6()
+    .email('Enter valid email')
+    .transform(transformEmptyString);
+const phoneValidation = create$6()
+    .matches(phoneRegex, 'Enter valid phone number')
+    .transform(transformEmptyString);
+const businessTypeValidation = create$6()
+    .oneOf(BusinessTypeOptions.map((option) => option.value), 'Select business type')
+    .transform(transformEmptyString);
+const industryValidation = create$6()
+    .min(2, 'Industry must be at least 2 characters')
+    .max(50, 'Industry must be less than 50 characters')
+    .matches(stringLettersOnlyRegex, 'Enter valid industry')
+    .transform(transformEmptyString);
+const taxIdValidation = create$6()
+    .matches(taxIdRegex, 'Enter valid tax id')
+    .transform(transformEmptyString);
 const businessCoreInfoSchema = (allowOptionalFields) => {
     const schema = create$3({
-        legal_name: create$6().required('Enter legal name'),
-        website_url: create$6().matches(urlRegex, 'Enter valid website url').required('Enter website url'),
-        email: create$6().email('Enter valid email').required('Enter email'),
-        phone: create$6().matches(phoneRegex, 'Enter valid phone number').required('Enter phone number'),
-        doing_business_as: create$6().required('Enter doing business as'),
-        business_type: create$6().required('Select business type'),
-        business_structure: create$6().required('Select business structure'),
-        industry: create$6().required('Enter a business industry'),
+        legal_name: nameValidation.required('Enter legal name'),
+        website_url: websiteUrlValidation.required('Enter business website url'),
+        email: emailValidation.required('Enter business email'),
+        phone: phoneValidation.required('Enter phone number'),
+        doing_business_as: doingBusinessAsValidation.required('Enter doing business as'),
+        business_type: businessTypeValidation.required('Select business type'),
+        industry: industryValidation.required('Enter a business industry'),
+        tax_id: taxIdValidation.required('Enter tax id'),
     });
     const easySchema = create$3({
-        legal_name: create$6().required('Enter legal name'),
-        website_url: create$6().matches(urlRegex, 'Enter valid website url').nullable(),
-        email: create$6().email('Enter valid email').nullable(),
-        phone: create$6().matches(phoneRegex, 'Enter valid phone number').nullable(),
-        doing_business_as: create$6().nullable(),
-        business_type: create$6().nullable(),
-        business_structure: create$6().nullable(),
-        industry: create$6().nullable(),
+        legal_name: nameValidation.required('Enter legal name'),
+        website_url: websiteUrlValidation.nullable(),
+        email: emailValidation.nullable(),
+        phone: phoneValidation.nullable(),
+        doing_business_as: doingBusinessAsValidation.nullable(),
+        business_type: businessTypeValidation.nullable(),
+        industry: industryValidation.nullable(),
+        tax_id: taxIdValidation.nullable(),
     });
     return allowOptionalFields ? easySchema : schema;
 };

package/dist/module/business-core-info.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { B as BusinessTypeOptions, a as BusinessStructureOptions } from './business-form-select-options.js';
+import { a as BusinessTypeOptions } from './business-form-types.js';
 import { T as TAX_ID_MASKS, P as PHONE_MASKS } from './form-input-masks.js';
 import { C as CoreBusinessInfo } from './Business.js';
 import { d as defineCustomElement$3 } from './form-control-number-masked2.js';
@@ -28,7 +28,7 @@ const BusinessCoreInfo = /*@__PURE__*/ proxyCustomElement(class BusinessCoreInfo
     }
     render() {
         const coreInfoDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: coreInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
     }
     static get style() { return businessCoreInfoCss; }
 }, [0, "justifi-business-core-info", {

package/dist/module/business-form-types.js

@@ -1,3 +1,5 @@
+import { B as BusinessType } from './Business.js';
+
 var BusinessFormServerErrors;
 (function (BusinessFormServerErrors) {
     BusinessFormServerErrors["fetchData"] = "Error retrieving business data";
@@ -22,5 +24,27 @@ var OwnerFormClickActions;
     OwnerFormClickActions["addOwnerForm"] = "addOwnerForm";
     OwnerFormClickActions["updateOwner"] = "updateOwner";
 })(OwnerFormClickActions || (OwnerFormClickActions = {}));
+const BusinessTypeOptions = [
+    {
+        label: 'Choose business type',
+        value: '',
+    },
+    {
+        label: 'Individual',
+        value: BusinessType.individual,
+    },
+    {
+        label: 'For Profit',
+        value: BusinessType.for_profit,
+    },
+    {
+        label: 'Non Profit',
+        value: BusinessType.non_profit,
+    },
+    {
+        label: 'Government Entity',
+        value: BusinessType.government_entity,
+    },
+];
 
-export { BusinessFormServerErrors as B, OwnerFormClickActions as O, BusinessFormClickActions as a, OwnerFormServerErrors as b };
+export { BusinessFormServerErrors as B, OwnerFormClickActions as O, BusinessTypeOptions as a, BusinessFormClickActions as b, OwnerFormServerErrors as c };

package/dist/module/business-identity-schema.js

@@ -1,7 +1,22 @@
 import { c as create$3, a as create$6 } from './index.esm.js';
 import { a as addressSchema } from './business-address-schema.js';
-import { p as phoneRegex } from './helpers.js';
+import { a as phoneRegex, t as transformEmptyString } from './payload-parsers.js';
 
+const dobValidation = (title) => {
+    return (create$6()
+        .test('min', 'Enter a valid date', (value) => {
+        const date = new Date(value);
+        const minDate = new Date('1902-01-01');
+        return date >= minDate;
+    })
+        .test('age', `${title} must be at least 18 years old`, (value) => {
+        const date = new Date(value);
+        const minAgeDate = new Date();
+        minAgeDate.setFullYear(minAgeDate.getFullYear() - 18);
+        return date <= minAgeDate;
+    })
+        .transform(transformEmptyString));
+};
 const identitySchema = (title, allowOptionalFields) => {
     const schema = create$3({
         name: create$6().required(`Enter ${title} name`),
@@ -9,9 +24,7 @@ const identitySchema = (title, allowOptionalFields) => {
             .email(`Enter valid ${title} email`)
             .required(`Enter ${title} email`),
         phone: create$6().matches(phoneRegex, 'Enter valid phone number').required('Enter phone number'),
-        dob_day: create$6().required(`Enter ${title} birth day`),
-        dob_month: create$6().required(`Enter ${title} birth month`),
-        dob_year: create$6().required(`Enter ${title} birth year`),
+        dob_full: dobValidation(title).required('Enter date of birth'),
         identification_number: create$6(),
         address: addressSchema(allowOptionalFields),
     });
@@ -21,9 +34,7 @@ const identitySchema = (title, allowOptionalFields) => {
             .email(`Enter valid ${title} email`)
             .nullable(),
         phone: create$6().matches(phoneRegex, 'Enter valid phone number').nullable(),
-        dob_day: create$6().nullable(),
-        dob_month: create$6().nullable(),
-        dob_year: create$6().nullable(),
+        dob_full: dobValidation(title).nullable('Enter date of birth'),
         identification_number: create$6().nullable(),
         address: addressSchema(allowOptionalFields),
     });

package/dist/module/business-owners-form-step.js

@@ -6,7 +6,7 @@ import './Payout.js';
 import { c as config } from './config.js';
 import { O as Owner } from './Business.js';
 import { B as BusinessFormServerErrors, O as OwnerFormClickActions } from './business-form-types.js';
-import { d as defineCustomElement$7 } from './form-control-datepart2.js';
+import { d as defineCustomElement$7 } from './form-control-date2.js';
 import { d as defineCustomElement$6 } from './form-control-number2.js';
 import { d as defineCustomElement$5 } from './form-control-number-masked2.js';
 import { d as defineCustomElement$4 } from './form-control-select2.js';
@@ -169,14 +169,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-owners-form-step", "form-control-datepart", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-identity-address-form", "justifi-owner-form"];
+    const components = ["justifi-business-owners-form-step", "form-control-date", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-identity-address-form", "justifi-owner-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-owners-form-step":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessOwnersFormStep);
             }
             break;
-        case "form-control-datepart":
+        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

package/dist/module/business-representative-form-step.js

@@ -2,12 +2,13 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { F as FormController } from './form.js';
 import { P as PHONE_MASKS } from './form-input-masks.js';
 import { A as Api } from './Api.js';
-import { b as parseIdentityInfo } from './payload-parsers.js';
+import { e as parseIdentityInfo } from './payload-parsers.js';
 import { i as identitySchema } from './business-identity-schema.js';
 import { c as config } from './config.js';
 import { B as BusinessFormServerErrors } from './business-form-types.js';
 import { R as Representative } from './Business.js';
-import { d as defineCustomElement$6 } from './form-control-datepart2.js';
+import { d as deconstructDate } from './helpers.js';
+import { d as defineCustomElement$6 } from './form-control-date2.js';
 import { d as defineCustomElement$5 } from './form-control-number2.js';
 import { d as defineCustomElement$4 } from './form-control-number-masked2.js';
 import { d as defineCustomElement$3 } from './form-control-select2.js';
@@ -57,6 +58,15 @@ const BusinessRepresentativeFormStep = /*@__PURE__*/ proxyCustomElement(class Bu
         this.onAddressFormUpdate = (values) => {
             this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { address: Object.assign(Object.assign({}, this.formController.values.getValue().address), values) }));
         };
+        this.onDateOfBirthUpdate = (event) => {
+            if (event.detail === '') {
+                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { dob_day: null, dob_month: null, dob_year: null }));
+            }
+            else {
+                const dob_values = deconstructDate(event.detail);
+                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { dob_day: dob_values.dob_day, dob_month: dob_values.dob_month, dob_year: dob_values.dob_year }));
+            }
+        };
         this.authToken = undefined;
         this.businessId = undefined;
         this.allowOptionalFields = undefined;
@@ -97,7 +107,7 @@ const BusinessRepresentativeFormStep = /*@__PURE__*/ proxyCustomElement(class Bu
     }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, error: this.errors.title, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12" }, h("label", { part: "label", class: "form-label" }, "Birth Date")), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_day", label: "Day", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_day, error: this.errors.dob_day, inputHandler: this.inputHandler, type: "day" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_month", label: "Month", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_month, error: this.errors.dob_month, inputHandler: this.inputHandler, type: "month" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_year", label: "Year", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_year, error: this.errors.dob_year, inputHandler: this.inputHandler, type: "year" })), h("div", { class: "col-12" }, h("form-control-number", { name: "identification_number", label: "EIN/SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, error: this.errors.title, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, error: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { class: "col-12 col-md-8" }, h("form-control-number", { name: "identification_number", label: "SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })))))));
     }
     static get style() { return businessRepresentativeFormStepCss; }
 }, [0, "justifi-business-representative-form-step", {
@@ -113,14 +123,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-representative-form-step", "form-control-datepart", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-identity-address-form"];
+    const components = ["justifi-business-representative-form-step", "form-control-date", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-identity-address-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-representative-form-step":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessRepresentativeFormStep);
             }
             break;
-        case "form-control-datepart":
+        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

package/dist/module/business-representative.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { P as PHONE_MASKS } from './form-input-masks.js';
-import { d as defineCustomElement$6 } from './form-control-datepart2.js';
+import { d as deconstructDate } from './helpers.js';
+import { d as defineCustomElement$6 } from './form-control-date2.js';
 import { d as defineCustomElement$5 } from './form-control-number2.js';
 import { d as defineCustomElement$4 } from './form-control-number-masked2.js';
 import { d as defineCustomElement$3 } from './form-control-select2.js';
@@ -13,25 +14,27 @@ const BusinessRepresentative = /*@__PURE__*/ proxyCustomElement(class BusinessRe
     constructor() {
         super();
         this.__registerHost();
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { [name]: value }) }));
+        };
+        this.onAddressFormUpdate = (values) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { address: Object.assign(Object.assign({}, this.formController.values.getValue().representative.address), values) }) }));
+        };
+        this.onDateOfBirthUpdate = (event) => {
+            const dob_values = deconstructDate(event.detail);
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { dob_day: dob_values.dob_day, dob_month: dob_values.dob_month, dob_year: dob_values.dob_year }) }));
+        };
         this.formController = undefined;
         this.errors = {};
         this.representative = {};
-        this.inputHandler = this.inputHandler.bind(this);
-        this.onAddressFormUpdate = this.onAddressFormUpdate.bind(this);
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors.representative)));
         this.formController.values.subscribe(values => (this.representative = Object.assign({}, values.representative)));
     }
-    inputHandler(name, value) {
-        this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { [name]: value }) }));
-    }
-    onAddressFormUpdate(values) {
-        this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { address: Object.assign(Object.assign({}, this.formController.values.getValue().representative.address), values) }) }));
-    }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues().representative;
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, error: this.errors.title, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12" }, h("label", { part: "label", class: "form-label" }, "Birth Date")), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_day", label: "Day", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_day, error: this.errors.dob_day, inputHandler: this.inputHandler, type: "day" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_month", label: "Month", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_month, error: this.errors.dob_month, inputHandler: this.inputHandler, type: "month" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_year", label: "Year", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_year, error: this.errors.dob_year, inputHandler: this.inputHandler, type: "year" })), h("div", { class: "col-12" }, h("form-control-number", { name: "identification_number", label: "SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, error: this.errors.title, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, error: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { class: "col-12 col-md-8" }, h("form-control-number", { name: "identification_number", label: "SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
     }
     static get style() { return businessRepresentativeCss; }
 }, [0, "justifi-business-representative", {
@@ -43,14 +46,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-representative", "form-control-datepart", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-identity-address-form"];
+    const components = ["justifi-business-representative", "form-control-date", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-identity-address-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-representative":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessRepresentative);
             }
             break;
-        case "form-control-datepart":
+        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }