@justifi/webcomponents 5.7.6-rc-03 → 5.7.6-rc-05

package/dist/module/justifi-tokenize-payment-method.js

@@ -1,369 +1,131 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
 import './details.js';
 import './event-types.js';
-import { d as defineCustomElement$3 } from './justifi-radio-list-item2.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
-import { a as ComponentErrorCodes, c as PaymentMethodTypes, C as ComponentErrorSeverity } from './Refund.js';
 import './config-state.js';
-import './dinero.js';
+import './utils2.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import './Pagination.js';
+import './Payment.js';
 import './Business.js';
 import { c as checkoutStore } from './checkout.store.js';
-import { d as defineCustomElement$j } from './custom-popper2.js';
-import { d as defineCustomElement$i } from './form-control-checkbox2.js';
-import { d as defineCustomElement$h } from './form-control-help-text2.js';
-import { d as defineCustomElement$g } from './form-control-radio2.js';
-import { d as defineCustomElement$f } from './form-control-select2.js';
-import { d as defineCustomElement$e } from './form-control-text2.js';
-import { d as defineCustomElement$d } from './form-control-tooltip2.js';
-import { d as defineCustomElement$c } from './hidden-input2.js';
-import { d as defineCustomElement$b } from './iframe-input2.js';
-import { d as defineCustomElement$a } from './bank-account.js';
-import { d as defineCustomElement$9 } from './billing-form.js';
-import { d as defineCustomElement$8 } from './billing-information-form.js';
-import { d as defineCustomElement$7 } from './justifi-button2.js';
-import { d as defineCustomElement$6 } from './card-form2.js';
-import { d as defineCustomElement$5 } from './justifi-header2.js';
-import { d as defineCustomElement$4 } from './postal-code-form.js';
-import { d as defineCustomElement$2 } from './save-new-payment-method.js';
+import { d as defineCustomElement$6 } from './form-control-help-text2.js';
+import { d as defineCustomElement$5 } from './form-control-radio2.js';
+import { d as defineCustomElement$4 } from './payment-method-options.js';
+import { d as defineCustomElement$3 } from './saved-payment-methods.js';
+import { d as defineCustomElement$2 } from './sezzle-payment-method.js';
 
-// Constants
-const PAYMENT_METHOD_TYPE_LABELS = {
-    [PaymentMethodTypes.bankAccount]: 'New bank account',
-    [PaymentMethodTypes.card]: 'New credit or debit card',
-};
-const ERROR_MESSAGES = {
-    AUTH_TOKEN_REQUIRED: 'Auth token is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
-    ACCOUNT_ID_REQUIRED: 'Account ID is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
-    FORM_NOT_READY: 'Payment form not ready',
-    VALIDATION_ERROR: 'Validation error',
-};
 const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePaymentMethod extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.errorEvent = createEvent(this, "error-event", 7);
         this.submitEvent = createEvent(this, "submit-event", 7);
-        this.isLoading = false;
-        this.saveNewPaymentMethodChecked = false;
         this.submitButtonText = 'Submit';
+        this.isLoading = false;
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
-        this.validateRequiredProps();
-    }
-    connectedCallback() {
-        this.setDefaultSelectedPaymentMethod();
+        if (!this.authToken) {
+            this.authToken = checkoutStore.authToken;
+        }
+        if (!this.accountId) {
+            this.accountId = checkoutStore.accountId;
+        }
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    paymentMethodsChanged() {
-        this.setDefaultSelectedPaymentMethod();
-    }
-    handleRadioClick(event) {
-        this.selectedPaymentMethodId = event.detail;
-    }
-    handleCheckboxChanged(event) {
-        this.saveNewPaymentMethodChecked = event.detail;
-    }
-    async fillBillingForm(fields) {
-        var _a;
-        (_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
-    }
+    ;
     async tokenizePaymentMethod(event) {
-        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event && event.preventDefault();
         this.isLoading = true;
+        let tokenizeResponse;
         try {
-            const validation = await this.validate();
-            if (!validation.isValid) {
-                this.errorEvent.emit({
-                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                    message: ERROR_MESSAGES.VALIDATION_ERROR,
-                });
-                this.isLoading = false;
-                return;
-            }
-            const tokenizeResponse = await this.resolvePaymentMethod({ isValid: true });
+            tokenizeResponse = await this.paymentMethodOptionsRef.resolvePaymentMethod({ isValid: true });
             if (tokenizeResponse.error) {
-                this.emitError({
+                this.errorEvent.emit({
                     errorCode: tokenizeResponse.error.code,
                     message: tokenizeResponse.error.message,
+                    severity: ComponentErrorSeverity.ERROR,
                 });
             }
-            this.submitEvent.emit({ response: tokenizeResponse });
-            return tokenizeResponse;
         }
         catch (error) {
-            const errorResponse = this.createErrorResponse(ComponentErrorCodes.TOKENIZE_ERROR, error.message);
-            this.emitError({
+            const errorData = {
                 errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                 message: error.message,
-            });
-            this.submitEvent.emit({ response: errorResponse });
-            return errorResponse;
+                severity: ComponentErrorSeverity.ERROR,
+            };
+            this.errorEvent.emit(errorData);
         }
         finally {
+            this.submitEvent.emit({ response: tokenizeResponse });
             this.isLoading = false;
+            return tokenizeResponse;
         }
     }
-    async validate() {
-        if (!this.areFormsReady()) {
-            return { isValid: false, errors: { general: ERROR_MESSAGES.FORM_NOT_READY } };
-        }
-        const [billingValidation, paymentMethodValidation] = await Promise.all([
-            this.billingFormRef.validate(),
-            this.paymentMethodFormRef.validate(),
-        ]);
-        return {
-            isValid: billingValidation.isValid && paymentMethodValidation.isValid,
-            errors: Object.assign(Object.assign({}, billingValidation.errors), paymentMethodValidation.errors),
-        };
-    }
-    validateRequiredProps() {
-        if (!this.authToken && !checkoutStore.authToken) {
-            this.emitError({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: ERROR_MESSAGES.AUTH_TOKEN_REQUIRED,
-            });
-        }
-        if (!this.accountId && !checkoutStore.accountId) {
-            this.emitError({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: ERROR_MESSAGES.ACCOUNT_ID_REQUIRED,
-            });
-        }
-    }
-    setDefaultSelectedPaymentMethod() {
-        if (!this.selectedPaymentMethodId) {
-            if (!this.disableCreditCard) {
-                this.selectedPaymentMethodId = PaymentMethodTypes.card;
-            }
-            else if (!this.disableBankAccount) {
-                this.selectedPaymentMethodId = PaymentMethodTypes.bankAccount;
-            }
-        }
-    }
-    get availablePaymentMethods() {
-        const methods = [];
-        if (!this.disableCreditCard) {
-            methods.push(PaymentMethodTypes.card);
-        }
-        if (!this.disableBankAccount) {
-            methods.push(PaymentMethodTypes.bankAccount);
-        }
-        return methods;
-    }
-    areFormsReady() {
-        return !!(this.billingFormRef && this.paymentMethodFormRef);
-    }
-    emitError(errorData) {
-        this.errorEvent.emit(Object.assign(Object.assign({}, errorData), { severity: ComponentErrorSeverity.ERROR }));
-    }
-    createErrorResponse(code, message) {
-        return {
-            error: {
-                code: code,
-                message,
-                decline_code: undefined,
-            },
-        };
-    }
-    async resolvePaymentMethod(insuranceValidation) {
-        if (!this.areFormsReady()) {
-            return this.createErrorResponse('form_not_ready', ERROR_MESSAGES.FORM_NOT_READY);
-        }
-        try {
-            const validation = await this.validate();
-            if (!validation.isValid || !insuranceValidation.isValid) {
-                const errorMessage = Object.values(validation.errors)[0] || ERROR_MESSAGES.VALIDATION_ERROR;
-                return {
-                    validationError: true,
-                    error: {
-                        code: 'validation_error',
-                        message: String(errorMessage),
-                        decline_code: undefined,
-                    },
-                };
-            }
-            return await this.performTokenization();
-        }
-        catch (error) {
-            return { error };
-        }
-    }
-    async performTokenization() {
-        var _a, _b;
-        const tokenizeResponse = await this.tokenize();
-        if (tokenizeResponse.error) {
-            return { error: tokenizeResponse.error };
-        }
-        const tokenizeResponseData = tokenizeResponse.data;
-        return {
-            token: ((_a = tokenizeResponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeResponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token),
-            data: tokenizeResponseData,
-        };
-    }
-    async tokenize() {
-        try {
-            const billingFormFieldValues = await this.billingFormRef.getValues();
-            const config = {
-                clientId: this.authToken || checkoutStore.authToken,
-                account: this.accountId || checkoutStore.accountId,
-                paymentMethodMetadata: this.buildPaymentMethodMetadata(billingFormFieldValues),
-            };
-            return await this.paymentMethodFormRef.tokenize(config);
-        }
-        catch (error) {
-            return error;
-        }
-    }
-    buildPaymentMethodMetadata(billingFormFieldValues) {
-        return this.saveNewPaymentMethodChecked
-            ? Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupId }) : Object.assign({}, billingFormFieldValues);
-    }
-    get shouldHideRadioInput() {
-        const showCard = !this.disableCreditCard;
-        const showAch = !this.disableBankAccount;
-        return !showAch || !showCard;
-    }
-    renderPaymentMethodOption(paymentMethodType) {
-        const isSelected = this.selectedPaymentMethodId === paymentMethodType;
-        return (h("div", { class: "payment-method" }, h("justifi-radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
-    }
-    renderSelectedPaymentMethodForm(paymentMethodId) {
-        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+    async fillBillingForm(fields) {
+        this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
-    renderPaymentMethodForm(paymentMethodId) {
-        return paymentMethodId === PaymentMethodTypes.card ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
+    async validate() {
+        return this.paymentMethodOptionsRef.validate();
     }
     render() {
-        return (h(StyledHost, { key: 'c3c12d1c58540f7fe794bc999e8cc8f47e9e1f8c' }, h("form", { key: 'aeb7843431a96feb79da49f1c28e0de6dc2d65c4' }, h("fieldset", { key: 'e890fbe8bb05bb6d74f8cabc9f4eb4feee4284ee' }, h("div", { key: '5abfab85b050239deea655dc777ff026b6627b8b', class: "row gy-3" }, h("div", { key: '9bb9dd865d6b2162d19a773ca232934da71bd792', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'aac644f69aa0e68632b850fc0f5c1442e26979e4', class: "col-12" }, h("justifi-button", { key: 'd2a35bd402b0d45dbcb48fefd44a624d4ab27a64', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton })))))));
+        return (h(StyledHost, { key: '6e7b234e3765b82dfe2451544921e3f6a96f7dec' }, h("form", { key: 'df5d244cae1b7204928e6c67a53901fa9bce0c23' }, h("fieldset", { key: '792d260c13b348c00f0859ee715ff72e849333e1' }, h("div", { key: 'e75ce50e15fa074b31436fd1a031a1edb7be399d', class: "row gy-3" }, h("div", { key: '34d1c5d25ad741acb0c91320018c8ec789d6fba4', class: "col-12" }, h("justifi-payment-method-options", { key: '08cbb9393087384d9605414694e905b1a293db98', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: '3cc39e4b7c637ad3876ed8b20aaba656552e04dd', class: "col-12" }, h(Button, { key: 'ef5a9a545a8765666026400f8e6b23aa919521fb', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText)))))));
     }
-    static get watchers() { return {
-        "disableCreditCard": ["paymentMethodsChanged"],
-        "disableBankAccount": ["paymentMethodsChanged"]
-    }; }
-}, [0, "justifi-tokenize-payment-method", {
-        "accountId": [1, "account-id"],
+}, [257, "justifi-tokenize-payment-method", {
         "authToken": [1, "auth-token"],
-        "disableBankAccount": [4, "disable-bank-account"],
-        "disableCreditCard": [4, "disable-credit-card"],
-        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
-        "hideCardBillingForm": [4, "hide-card-billing-form"],
-        "hideSubmitButton": [4, "hide-submit-button"],
+        "accountId": [1, "account-id"],
         "paymentMethodGroupId": [1, "payment-method-group-id"],
         "submitButtonText": [1, "submit-button-text"],
+        "disableCreditCard": [4, "disable-credit-card"],
+        "disableBankAccount": [4, "disable-bank-account"],
+        "hideSubmitButton": [4, "hide-submit-button"],
+        "hideCardBillingForm": [4, "hide-card-billing-form"],
+        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
         "isLoading": [32],
-        "selectedPaymentMethodId": [32],
-        "saveNewPaymentMethodChecked": [32],
-        "fillBillingForm": [64],
         "tokenizePaymentMethod": [64],
+        "fillBillingForm": [64],
         "validate": [64]
-    }, [[0, "radio-click", "handleRadioClick"], [0, "checkboxChanged", "handleCheckboxChanged"]], {
-        "disableCreditCard": ["paymentMethodsChanged"],
-        "disableBankAccount": ["paymentMethodsChanged"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-tokenize-payment-method", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-bank-account-form", "justifi-billing-form", "justifi-billing-information-form", "justifi-button", "justifi-card-form", "justifi-header", "justifi-postal-code-form", "justifi-radio-list-item", "justifi-save-new-payment-method"];
+    const components = ["justifi-tokenize-payment-method", "form-control-help-text", "form-control-radio", "justifi-payment-method-options", "justifi-saved-payment-methods", "justifi-sezzle-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-tokenize-payment-method":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TokenizePaymentMethod);
             }
             break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$j();
-            }
-            break;
-        case "form-control-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$i();
-            }
-            break;
         case "form-control-help-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$h();
-            }
-            break;
-        case "form-control-radio":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$g();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$e();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "hidden-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "iframe-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "justifi-bank-account-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "justifi-billing-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "justifi-billing-information-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "justifi-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "justifi-card-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "justifi-header":
+        case "form-control-radio":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "justifi-postal-code-form":
+        case "justifi-payment-method-options":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "justifi-radio-list-item":
+        case "justifi-saved-payment-methods":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-save-new-payment-method":
+        case "justifi-sezzle-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/legal-address-details2.js

@@ -13,7 +13,7 @@ const LegalAddressDetails = /*@__PURE__*/ proxyCustomElement(class LegalAddressD
             return null;
         return (h("div", null, h(DetailSectionTitle, { sectionTitle: "Business Legal Address Details" }), h("div", { class: "d-table gap-2 w-100 mt-3" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Country", value: (_a = this.legalAddress) === null || _a === void 0 ? void 0 : _a.country }), h(DetailItem, { title: "Legal Address", value: (_b = this.legalAddress) === null || _b === void 0 ? void 0 : _b.line1 }), h(DetailItem, { title: "Address Line 2", value: (_c = this.legalAddress) === null || _c === void 0 ? void 0 : _c.line2 })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "City", value: (_d = this.legalAddress) === null || _d === void 0 ? void 0 : _d.city }), h(DetailItem, { title: "State", value: (_e = this.legalAddress) === null || _e === void 0 ? void 0 : _e.state }), h(DetailItem, { title: "Postal Code", value: (_g = (_f = this.legalAddress) === null || _f === void 0 ? void 0 : _f.postal_code) === null || _g === void 0 ? void 0 : _g.toString() }))))));
     }
-}, [0, "legal-address-details", {
+}, [256, "legal-address-details", {
         "legalAddress": [16, "legal-address"]
     }]);
 function defineCustomElement() {

package/dist/module/legal-address-form-step-core.js

@@ -97,7 +97,7 @@ const LegalAddressFormStepCore = /*@__PURE__*/ proxyCustomElement(class LegalAdd
             // just for now so we skip handling country specificities
             disabled: true }))))));
     }
-}, [0, "justifi-legal-address-form-step-core", {
+}, [256, "justifi-legal-address-form-step-core", {
         "getBusiness": [16, "get-business"],
         "patchBusiness": [16, "patch-business"],
         "allowOptionalFields": [4, "allow-optional-fields"],

package/dist/module/legal-address-form-step.js

@@ -45,13 +45,13 @@ const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddress
         }
     }
     render() {
-        return (h("justifi-legal-address-form-step-core", { key: 'bd286476461181f2e8a435a97bf148d55876b49c', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-legal-address-form-step-core", { key: '65d876bee76f4deb4df115e636fafaef2c883f24', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
         "businessId": ["propChanged"]
     }; }
-}, [0, "justifi-legal-address-form-step", {
+}, [256, "justifi-legal-address-form-step", {
         "authToken": [1, "auth-token"],
         "businessId": [1, "business-id"],
         "allowOptionalFields": [4, "allow-optional-fields"],

package/dist/module/legal-address-form.js

@@ -24,11 +24,11 @@ const LegalAddressForm = /*@__PURE__*/ proxyCustomElement(class LegalAddressForm
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const legalAddressDefaultValue = this.formController.getInitialValues().legal_address;
-        return (h(Host, { key: '5b21d99717f9b24c0551c7a96acf68e53e7787bf' }, h("fieldset", { key: 'd63cbd20b2648405c50a819724e0f8cf556f7d26' }, h("legend", { key: 'c0acd14073f13f914015f40d39bf22fb58792434', part: heading2 }, "Business Legal Address"), h("div", { key: 'ee4cee6bd662816f822ee209aeda5e9664f6a64d', class: "row gy-3" }, h("div", { key: '86b258fd09e73cbd2475330419274732231f3871', class: "col-12" }, h("form-control-text", { key: '8d898a9ae448f07932afe2d8cfc2314b92d9c597', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { key: '1a50c4b86a754035f71efacd39721219fcd54d60', class: "col-12" }, h("form-control-text", { key: '507b1451685e359a900f0bc7010ff39e3631daf2', name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { key: '1446b4db5f86a3b18e3aceb78274ffe458dbd3db', class: "col-12" }, h("form-control-text", { key: 'e17e4bd95ad4290d18edde79cf05a6b3a105166c', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.city })), h("div", { key: '9b880203bad9e104e6d1299ff73c83cba46ab563', class: "col-12" }, h("form-control-select", { key: '24e4df10f688c9a1b5f2af5217f03919bf7abec7', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.state })), h("div", { key: '71f21b19602c268e3b6a839ce41ff9d4f8ffb8c4', class: "col-12" }, h("form-control-text", { key: 'ca71d3e21c5a0aea5367fa28ec1a2422ba9b1cf3', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: 'aaee0bf6a24ba182e002c1ffb49736fb622cde1f', class: "col-12" }, h("form-control-select", { key: '2b6486771818e584dcc195c304e5a6e16850b4a9', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_m = (_l = this.errors) === null || _l === void 0 ? void 0 : _l.legal_address) === null || _m === void 0 ? void 0 : _m.country,
+        return (h(Host, { key: '129b2ec053708454db5a515fdae9a7fba5289336' }, h("fieldset", { key: '6af5c9469acc432ea01ff404af25727bd444abc7' }, h("legend", { key: '1af149db608a13d18142aaea83f9ed2e8271fdc0', part: heading2 }, "Business Legal Address"), h("div", { key: '805c6ae992ebed34937b9a2622f50a7f99c7d0e6', class: "row gy-3" }, h("div", { key: '78750dc68bcc6782bc4a71cfd14d417e980a57a6', class: "col-12" }, h("form-control-text", { key: '18a75e38a7a5fbfcbbbce56e4967ce34c5618c8e', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { key: '676622c84785edfafa3413359d4985d26a734985', class: "col-12" }, h("form-control-text", { key: 'e8467f96595d240f5fc93585e472ad844cc49143', name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { key: '01556012d9335d23c14e130ca72b6e75028bcb36', class: "col-12" }, h("form-control-text", { key: 'c08dcd0ef726ff714d60de26492ced763a7d32ff', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.city })), h("div", { key: 'ad811869e742f265a5441c6f36c2a55fa0b07952', class: "col-12" }, h("form-control-select", { key: '47cc4b15578257f3c1fdee7896d28da94b5aaa16', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.state })), h("div", { key: 'f732fd2ed3967ee7fd602f41c62efd24cf6038eb', class: "col-12" }, h("form-control-text", { key: '0431a63d11beb6682a2544d2483901f7fffa77bd', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: 'cca67b0cd006f6cf9f9bbfe147507eb0ac6fecca', class: "col-12" }, h("form-control-select", { key: 'f561947f9443ea6f56d7ae31d44a69e2462c0751', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_m = (_l = this.errors) === null || _l === void 0 ? void 0 : _l.legal_address) === null || _m === void 0 ? void 0 : _m.country,
             // just for now so we skip handling country specificities
             disabled: true }))))));
     }
-}, [0, "justifi-legal-address-form", {
+}, [256, "justifi-legal-address-form", {
         "formController": [16, "form-controller"],
         "errors": [32],
         "legal_address": [32]