@justifi/webcomponents 6.10.4 → 6.12.0

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

@@ -0,0 +1,304 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
+import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';
+import { B as BusinessService } from './business.service.js';
+import { B as Button } from './button.js';
+import { h as heading2, F as alert } from './parts.js';
+import './justifi-details2.js';
+import './event-types.js';
+import './justifi-radio-list-item2.js';
+import { P as PaymentProvisioningLoading } from './payment-provisioning-loading.js';
+import { B as BusinessFormStep, a as BusinessFormClickActions } from './event-types2.js';
+import { R as Representative } from './Business.js';
+import { d as defineCustomElement$c } from './custom-popper2.js';
+import { d as defineCustomElement$b } from './form-address-fields2.js';
+import { d as defineCustomElement$a } from './form-control-date2.js';
+import { d as defineCustomElement$9 } from './form-control-number2.js';
+import { d as defineCustomElement$8 } from './form-control-number-masked2.js';
+import { d as defineCustomElement$7 } from './form-control-select2.js';
+import { d as defineCustomElement$6 } from './form-control-text2.js';
+import { d as defineCustomElement$5 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$4 } from './identity-address-form2.js';
+import { d as defineCustomElement$3 } from './owner-form2.js';
+import { d as defineCustomElement$2 } from './owner-form-core2.js';
+import { d as defineCustomElement$1 } from './owner-form-inputs2.js';
+
+const BusinessOwnersFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessOwnersFormStep extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.clickEvent = createEvent(this, "click-event", 7);
+        this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.formLoading = createEvent(this, "formLoading", 7);
+        this.ownersPayload = [];
+        this.refs = [];
+        this.isLoading = false;
+        this.representativeIsOwner = null;
+        this.matchRef = (ref, ownerId) => {
+            if (ref === null)
+                return;
+            const ownerIndex = this.ownersPayload.findIndex(owner => owner.id === ownerId);
+            if (ownerIndex !== -1) {
+                // Ensure refs array is properly sized before setting ref
+                if (this.refs.length !== this.ownersPayload.length) {
+                    this.manageRefs();
+                }
+                this.refs[ownerIndex] = ref;
+            }
+        };
+        this.getData = () => {
+            this.formLoading.emit(true);
+            this.isLoading = true;
+            this.getBusiness({
+                onSuccess: (response) => {
+                    this.representative = new Representative(response.data.representative || {});
+                    if (response.data.owners.length) {
+                        this.ownersPayload = response.data.owners.map(owner => ({ id: owner.id }));
+                    }
+                    else {
+                        this.addOwnerForm();
+                    }
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => {
+                    this.formLoading.emit(false);
+                    this.isLoading = false;
+                    this.manageRefs();
+                }
+            });
+        };
+        this.sendData = async (onSuccess) => {
+            let submittedData;
+            this.formLoading.emit(true);
+            this.patchBusiness({
+                payload: { owners: this.ownersPayload },
+                onSuccess: (response) => {
+                    submittedData = response;
+                    onSuccess();
+                },
+                onError: ({ error, code, severity }) => {
+                    submittedData = error;
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => {
+                    this.stepCompleteEvent.emit({ response: submittedData, formStep: BusinessFormStep.owners });
+                    this.formLoading.emit(false);
+                }
+            });
+        };
+        this.addOwnerForm = (fireClick) => {
+            this.newFormOpen = true;
+            this.ownersPayload = [...this.ownersPayload, { id: '' }];
+            fireClick && this.clickEvent.emit({ name: BusinessFormClickActions.addOwnerForm });
+        };
+        this.removeOwnerForm = (id) => {
+            this.ownersPayload = this.ownersPayload.filter(owner => owner.id !== id);
+            this.newFormOpen && (this.newFormOpen = false);
+        };
+        this.handleRepresentativeIsOwnerChange = (value) => {
+            this.representativeIsOwner = value;
+            if (this.representativeIsOwner) {
+                this.formLoading.emit(true);
+                this.isLoading = true;
+                this.ownersPayload = this.ownersPayload.filter(owner => owner.id !== '');
+                this.patchBusiness({
+                    payload: {
+                        owners: [{ id: this.representative.id }, ...this.ownersPayload],
+                    },
+                    onSuccess: () => {
+                        this.getData();
+                        this.newFormOpen = false;
+                    },
+                    finally: () => {
+                        this.isLoading = false;
+                        this.formLoading.emit(false);
+                    }
+                });
+            }
+        };
+    }
+    propChanged() {
+        this.initializeApi();
+    }
+    get showAddOwnerButton() {
+        return this.ownersPayload.length < 4 && !this.newFormOpen;
+    }
+    manageRefs() {
+        this.refs = this.ownersPayload.map((owner) => { return owner.id; });
+    }
+    async validateAndSubmit({ onSuccess }) {
+        const formValidations = this.refs.map(ref => ref.validate());
+        const formsValid = (await Promise.all(formValidations)).every(result => result);
+        if (!formsValid) {
+            return;
+        }
+        const formSubmissions = this.refs.map(ref => ref.submit());
+        const submissionsValid = (await Promise.all(formSubmissions)).every(result => result);
+        if (!submissionsValid) {
+            return;
+        }
+        this.sendData(onSuccess);
+    }
+    componentWillLoad() {
+        this.initializeApi();
+        if (this.getBusiness) {
+            this.getData();
+        }
+    }
+    initializeApi() {
+        if (this.authToken && this.businessId) {
+            this.getBusiness = makeGetBusiness({
+                authToken: this.authToken,
+                businessId: this.businessId,
+                service: new BusinessService()
+            });
+            this.patchBusiness = makePatchBusiness({
+                authToken: this.authToken,
+                businessId: this.businessId,
+                service: new BusinessService()
+            });
+        }
+        else {
+            this.errorEvent.emit({
+                message: 'Missing required props',
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    ownersWatcher() {
+        this.manageRefs();
+    }
+    handleOwnerSubmit(event) {
+        const submittedOwner = event.detail;
+        const updatedOwners = this.ownersPayload.map(owner => owner.id === submittedOwner.id ? submittedOwner : owner);
+        if (!updatedOwners.includes(submittedOwner)) {
+            const newOwnerIndex = this.ownersPayload.findIndex(owner => !owner.id);
+            updatedOwners[newOwnerIndex] = submittedOwner;
+            this.newFormOpen && (this.newFormOpen = false);
+        }
+        this.ownersPayload = updatedOwners;
+    }
+    render() {
+        if (this.isLoading) {
+            return (h(Host, null, h(PaymentProvisioningLoading, null)));
+        }
+        const isRepresentativeOwner = this.ownersPayload.some(owner => owner.id === this.representative.id);
+        const shouldShowRepresentativeIsOwner = this.representativeIsOwner === null && !isRepresentativeOwner;
+        return (h(Host, null, h("div", null, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Owners"), h("form-control-tooltip", { helpText: "For partnerships, LLCs or privately held corporations, the business is required to apply with all individuals with 25% or more ownership to the application. For charities and registered non-profits, the business is required to apply with 1 individual with substantial control over the entity, such as a board member or director." })), h("hr", { class: "mt-2" }), shouldShowRepresentativeIsOwner && (h("div", { class: `alert alert-warning mb-3`, part: alert }, h("div", { class: "card-body" }, h("div", { class: "d-flex align-items-center mb-3" }, h("strong", null, "Is the representative of this business also an owner?")), h("div", { class: "d-flex gap-2" }, h(Button, { variant: 'primary', onClick: () => this.handleRepresentativeIsOwnerChange(true) }, "Yes"), h(Button, { variant: 'secondary', onClick: () => this.handleRepresentativeIsOwnerChange(false) }, "No"))))), h("div", { class: 'row gy-3' }, this.ownersPayload.map((owner) => {
+            return (h("owner-form", { key: owner.id, authToken: this.authToken, businessId: this.businessId, ownerId: owner.id, removeOwner: this.removeOwnerForm, newFormOpen: this.newFormOpen, ownersLength: this.ownersPayload.length, country: this.country, allowOptionalFields: this.allowOptionalFields, ref: (ref) => this.matchRef(ref, owner.id) }));
+        })), h("div", { class: 'd-flex justify-content-start' }, h("div", { class: 'gap-2' }, h(Button, { variant: 'primary', onClick: () => this.addOwnerForm(true), hidden: !this.showAddOwnerButton }, "Add Owner"))))));
+    }
+    static get watchers() { return {
+        "authToken": ["propChanged"],
+        "businessId": ["propChanged"],
+        "ownersPayload": ["ownersWatcher"]
+    }; }
+}, [256, "business-owners-form-step", {
+        "authToken": [1, "auth-token"],
+        "businessId": [1, "business-id"],
+        "allowOptionalFields": [4, "allow-optional-fields"],
+        "country": [1],
+        "getBusiness": [32],
+        "patchBusiness": [32],
+        "ownersPayload": [32],
+        "refs": [32],
+        "newFormOpen": [32],
+        "isLoading": [32],
+        "representativeIsOwner": [32],
+        "representative": [32],
+        "validateAndSubmit": [64]
+    }, [[0, "ownerSubmitted", "handleOwnerSubmit"]], {
+        "authToken": ["propChanged"],
+        "businessId": ["propChanged"],
+        "ownersPayload": ["ownersWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["business-owners-form-step", "custom-popper", "form-address-fields", "form-control-date", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "identity-address-form", "owner-form", "owner-form-core", "owner-form-inputs"];
+    components.forEach(tagName => { switch (tagName) {
+        case "business-owners-form-step":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BusinessOwnersFormStep);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "form-address-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "form-control-date":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "form-control-number":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "form-control-number-masked":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "identity-address-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "owner-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "owner-form-core":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "owner-form-inputs":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BusinessOwnersFormStep as B, defineCustomElement as d };

package/dist/module/business-representative-form-inputs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BusinessRepresentativeFormInputs extends Components.BusinessRepresentativeFormInputs, HTMLElement {}
+export const BusinessRepresentativeFormInputs: {
+    prototype: BusinessRepresentativeFormInputs;
+    new (): BusinessRepresentativeFormInputs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -1,102 +1,6 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { u as updateFormValues, a as updateAddressFormValues, b as updateDateOfBirthFormValues } from './input-handlers.js';
-import { P as PHONE_MASKS, I as IDENTITY_MASKS } from './form-input-masks.js';
-import { h as heading2, b as label, d as inputDisabled, Z as buttonSecondary } from './parts.js';
-import { c as countryLabels } from './country-config.js';
-import { d as defineCustomElement$8 } from './custom-popper2.js';
-import { d as defineCustomElement$7 } from './form-control-date2.js';
-import { d as defineCustomElement$6 } from './form-control-number-masked2.js';
-import { d as defineCustomElement$5 } from './form-control-select2.js';
-import { d as defineCustomElement$4 } from './form-control-text2.js';
-import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$2 } from './form-address-fields.js';
-import { d as defineCustomElement$1 } from './identity-address-form.js';
+import { B as BusinessRepresentativeFormInputs$1, d as defineCustomElement$1 } from './business-representative-form-inputs2.js';
 
-const RepresentativeFormInputs = /*@__PURE__*/ proxyCustomElement(class RepresentativeFormInputs extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.isEditingIdentification = false;
-        this.inputHandler = (name, value) => {
-            updateFormValues(this.formController, { [name]: value });
-        };
-        this.onAddressFormUpdate = (values) => {
-            updateAddressFormValues(this.formController, Object.assign(Object.assign({}, this.formController.values.getValue().address), values));
-        };
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return (h("form", { key: 'a9c0f6332bf302d5eb9f93c4ca045d572a40468f' }, h("fieldset", { key: '115c564826335a9c7b670bbc0409912c3eb7a4aa' }, h("div", { key: '6de8909b4b2f3c7d8ec4665aad77ef59cdf035b4', class: "d-flex align-items-center gap-2" }, h("legend", { key: 'bb8b5a3775eae450a866356a9e149a0bf57b5699', class: "mb-0", part: heading2 }, "Representative"), h("form-control-tooltip", { key: 'a0296d4a3c35a039525f39501e117ee6fdd12257', helpText: "The representative for your business needs to be someone who has significant control over managing your business\u2019s finance. You will have an opportunity to add owners later in the form." })), h("hr", { key: 'abbee22f5664275f27dd8eeb2b12c87b059ff024', class: "mt-2" }), h("div", { key: 'e165ff125df62dc1d22b7329fe7fe2ff200cbbb3', class: "row gy-3" }, h("div", { key: '114ff752eeda3ffa90529ff6bc675b874f543336', class: "col-12 col-md-8" }, h("form-control-text", { key: '8b6ce9f4a327ca5282aa32c226f671945aa10404', name: "name", label: "Full Name", defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'bce864367883c6bbf7bd0841114a3dbb39db692b', class: "col-12 col-md-4" }, h("form-control-text", { key: 'ec3e72dc3f84c0daee2c6509f7dbf2bad22f5db6', name: "title", label: "Title", defaultValue: (_b = this.representativeDefaultValue) === null || _b === void 0 ? void 0 : _b.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: '200ae959d897d9d22016553d3c586cf3f0438dd9', class: "col-12 col-md-6" }, h("form-control-text", { key: '4f77d6ca6c3c85edabc11af6f5703ab1327f05e7', name: "email", label: "Email Address", defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'cf642ee73f7ae8b254920a3f781c23dc456f16ae', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'df609213bec728f17b2527a2e99ff3e0e69604aa', name: "phone", label: "Phone Number", defaultValue: (_d = this.representativeDefaultValue) === null || _d === void 0 ? void 0 : _d.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '2e4565c06976723ae4e497a5305cea7468bac2f4', class: "col-12 col-md-4" }, h("form-control-date", { key: 'ca7d4bf05c32d1d9983df430d338cc3433015957', name: "dob_full", label: "Birth Date", defaultValue: (_e = this.representativeDefaultValue) === null || _e === void 0 ? void 0 : _e.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: 'f6cbe1b7f4e5575f626e6d73f31b4a1a09ac33e3', class: "col-12 col-md-8" }, (!((_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.ssn_last4) || this.isEditingIdentification) ? (h("form-control-number-masked", { name: "identification_number", label: countryLabels[this.country].idNumberLabel, defaultValue: this.isEditingIdentification ? '' : (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: IDENTITY_MASKS[this.country], helpText: countryLabels[this.country].identityHelpText })) : (h("div", null, h("label", { class: "form-label", part: label }, countryLabels[this.country].idNumberLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_h = this.representativeDefaultValue) === null || _h === void 0 ? void 0 : _h.ssn_last4}`, disabled: true }), h("button", { class: "btn btn-secondary", type: "button", part: buttonSecondary, onClick: () => {
-                this.isEditingIdentification = true;
-                // Clear current value to force validation
-                updateFormValues(this.formController, {
-                    identification_number: '',
-                    ssn_last4: null
-                });
-            } }, "Change"))))), h("div", { key: 'e3fa556dece2feaf5eb175ae3734c2319777ef48', class: "col-12" }, h("justifi-identity-address-form", { key: 'fe3d349371d11b8a246b9c31aebd7d9c84e03f8e', errors: this.errors.address, defaultValues: (_j = this.representativeDefaultValue) === null || _j === void 0 ? void 0 : _j.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))))));
-    }
-}, [256, "justifi-business-representative-form-inputs", {
-        "representativeDefaultValue": [8, "representative-default-value"],
-        "errors": [8],
-        "formController": [16],
-        "country": [1],
-        "isEditingIdentification": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-business-representative-form-inputs", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-form-address-fields", "justifi-identity-address-form"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-business-representative-form-inputs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, RepresentativeFormInputs);
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "form-control-date":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "form-control-number-masked":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "justifi-form-address-fields":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "justifi-identity-address-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+const BusinessRepresentativeFormInputs = BusinessRepresentativeFormInputs$1;
+const defineCustomElement = defineCustomElement$1;
 
-export { RepresentativeFormInputs as R, defineCustomElement as d };
+export { BusinessRepresentativeFormInputs, defineCustomElement };

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

@@ -0,0 +1,102 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { u as updateFormValues, a as updateAddressFormValues, b as updateDateOfBirthFormValues } from './input-handlers.js';
+import { P as PHONE_MASKS, I as IDENTITY_MASKS } from './form-input-masks.js';
+import { h as heading2, l as label, c as inputDisabled, E as buttonSecondary } from './parts.js';
+import { c as countryLabels } from './country-config.js';
+import { d as defineCustomElement$8 } from './custom-popper2.js';
+import { d as defineCustomElement$7 } from './form-address-fields2.js';
+import { d as defineCustomElement$6 } from './form-control-date2.js';
+import { d as defineCustomElement$5 } from './form-control-number-masked2.js';
+import { d as defineCustomElement$4 } from './form-control-select2.js';
+import { d as defineCustomElement$3 } from './form-control-text2.js';
+import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$1 } from './identity-address-form2.js';
+
+const BusinessRepresentativeFormInputs = /*@__PURE__*/ proxyCustomElement(class BusinessRepresentativeFormInputs extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.isEditingIdentification = false;
+        this.inputHandler = (name, value) => {
+            updateFormValues(this.formController, { [name]: value });
+        };
+        this.onAddressFormUpdate = (values) => {
+            updateAddressFormValues(this.formController, Object.assign(Object.assign({}, this.formController.values.getValue().address), values));
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (h("form", { key: '580cc163d4a4ef66cbb0fe81af2166d759caeeeb' }, h("fieldset", { key: '08086211fcb72f513bd5be32356617573ef70490' }, h("div", { key: '6685a37111331c6a9398827bccc81983f0710dec', class: "d-flex align-items-center gap-2" }, h("legend", { key: '426288711b83c90a00b5fc5848d9ed73d5cba497', class: "mb-0", part: heading2 }, "Representative"), h("form-control-tooltip", { key: '12fcc06fb816415b4e3ebaf500dbeffda0ada39b', helpText: "The representative for your business needs to be someone who has significant control over managing your business's finance. You will have an opportunity to add owners later in the form." })), h("hr", { key: 'a405d27e2fdf8cf582e64b13a7bc46ffb746200d', class: "mt-2" }), h("div", { key: '083901b24bf65cea21850e409d51d65d69d7755a', class: "row gy-3" }, h("div", { key: '1f5cc8b3478849a3ded3ac7d00a3235d281653fb', class: "col-12 col-md-8" }, h("form-control-text", { key: '123959d648781de5937725731e81659f886d8331', name: "name", label: "Full Name", defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'a0184a9578b9c479795ef1647f0fd3afef9ca0be', class: "col-12 col-md-4" }, h("form-control-text", { key: 'c15816619a4d257dbe962ae0979472495e5cf9a4', name: "title", label: "Title", defaultValue: (_b = this.representativeDefaultValue) === null || _b === void 0 ? void 0 : _b.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: '102d285365880f746517ee49f7bee1bd4753a4df', class: "col-12 col-md-6" }, h("form-control-text", { key: 'cd81f70f7ae01f06cebd66da58950943578cc5a1', name: "email", label: "Email Address", defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '7b2d40d02a5b7d21901aed889609bf168a2adbbe', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '43a781692abe57493fbdc40080c4f03919878791', name: "phone", label: "Phone Number", defaultValue: (_d = this.representativeDefaultValue) === null || _d === void 0 ? void 0 : _d.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '22e2d29dd536eb9ece522dad9b8138c0df4090f7', class: "col-12 col-md-4" }, h("form-control-date", { key: '7bc2e191dcca6b840d6d50e4714af5053844ffc7', name: "dob_full", label: "Birth Date", defaultValue: (_e = this.representativeDefaultValue) === null || _e === void 0 ? void 0 : _e.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: '80c790db5b938b70fb74642ab4e5ced869f46f3a', class: "col-12 col-md-8" }, (!((_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.ssn_last4) || this.isEditingIdentification) ? (h("form-control-number-masked", { name: "identification_number", label: countryLabels[this.country].idNumberLabel, defaultValue: this.isEditingIdentification ? '' : (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: IDENTITY_MASKS[this.country], helpText: countryLabels[this.country].identityHelpText })) : (h("div", null, h("label", { class: "form-label", part: label }, countryLabels[this.country].idNumberLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_h = this.representativeDefaultValue) === null || _h === void 0 ? void 0 : _h.ssn_last4}`, disabled: true }), h("button", { class: "btn btn-secondary", type: "button", part: buttonSecondary, onClick: () => {
+                this.isEditingIdentification = true;
+                // Clear current value to force validation
+                updateFormValues(this.formController, {
+                    identification_number: '',
+                    ssn_last4: null
+                });
+            } }, "Change"))))), h("div", { key: '84afac0a4f45f734bf1dd5266882feaed8e3a4ea', class: "col-12" }, h("identity-address-form", { key: 'dfe5ddbccc76a3b60e0594c8a7ba30b893682a59', errors: this.errors.address, defaultValues: (_j = this.representativeDefaultValue) === null || _j === void 0 ? void 0 : _j.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))))));
+    }
+}, [256, "business-representative-form-inputs", {
+        "representativeDefaultValue": [8, "representative-default-value"],
+        "errors": [8],
+        "formController": [16],
+        "country": [1],
+        "isEditingIdentification": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["business-representative-form-inputs", "custom-popper", "form-address-fields", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "identity-address-form"];
+    components.forEach(tagName => { switch (tagName) {
+        case "business-representative-form-inputs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BusinessRepresentativeFormInputs);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "form-address-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "form-control-date":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "form-control-number-masked":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "identity-address-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BusinessRepresentativeFormInputs as B, defineCustomElement as d };

package/dist/module/business-representative-form-step.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BusinessRepresentativeFormStep extends Components.BusinessRepresentativeFormStep, HTMLElement {}
+export const BusinessRepresentativeFormStep: {
+    prototype: BusinessRepresentativeFormStep;
+    new (): BusinessRepresentativeFormStep;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;