@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

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

@@ -1,32 +1,34 @@
 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 { a as ComponentErrorSeverity } from './ComponentError.js';
-import { c as checkPkgVersion } from './check-pkg-version.js';
-import { J as JustifiAnalytics } from './Analytics.js';
-import { d as defineCustomElement$d } from './custom-popper2.js';
-import { d as defineCustomElement$c } from './form-control-error-text2.js';
-import { d as defineCustomElement$b } from './form-control-select2.js';
-import { d as defineCustomElement$a } from './form-control-text2.js';
-import { d as defineCustomElement$9 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$8 } from './billing-form.js';
-import { d as defineCustomElement$7 } from './new-payment-method.js';
-import { d as defineCustomElement$6 } from './payment-method-form.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
+import { d as defineCustomElement$i } from './bank-account-form2.js';
+import { d as defineCustomElement$h } from './card-form2.js';
+import { d as defineCustomElement$g } from './custom-popper2.js';
+import { d as defineCustomElement$f } from './form-control-checkbox2.js';
+import { d as defineCustomElement$e } from './form-control-help-text3.js';
+import { d as defineCustomElement$d } from './form-control-radio2.js';
+import { d as defineCustomElement$c } from './form-control-select2.js';
+import { d as defineCustomElement$b } from './form-control-text2.js';
+import { d as defineCustomElement$a } from './form-control-tooltip2.js';
+import { d as defineCustomElement$9 } from './hidden-input2.js';
+import { d as defineCustomElement$8 } from './iframe-input2.js';
+import { d as defineCustomElement$7 } from './billing-form.js';
+import { d as defineCustomElement$6 } from './new-payment-method.js';
 import { d as defineCustomElement$5 } from './payment-method-options.js';
 import { d as defineCustomElement$4 } from './save-new-payment-method.js';
 import { d as defineCustomElement$3 } from './saved-payment-method.js';
 import { d as defineCustomElement$2 } from './sezzle-payment-method.js';
 
-const tokenizePaymentMethodCss = ":host{display:block}justifi-payment-method-form{display:block;margin-left:calc(var(--jfi-layout-padding) * -1);margin-right:calc(var(--jfi-layout-padding) * -1)}";
-const JustifiTokenizePaymentMethodStyle0 = tokenizePaymentMethodCss;
-
 const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePaymentMethod extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.submitted = createEvent(this, "submitted", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
+        this.submitEvent = createEvent(this, "submit-event", 7);
         this.authToken = undefined;
         this.accountId = undefined;
         this.paymentMethodGroupId = undefined;
@@ -51,16 +53,15 @@ const TokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class TokenizePay
             });
         }
         else if (tokenizeResponse.token) {
-            this.submitted.emit({ token: tokenizeResponse.token });
+            this.submitEvent.emit({ response: tokenizeResponse });
         }
     }
     async fillBillingForm(fields) {
         this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     render() {
-        return (h(StyledHost, { key: 'ff495ccfaf453b5efc1e09d6a3dbeae2f7056368' }, h("form", { key: '92e7ce29d3d7f12def1f83e35130de8ec3637140' }, h("fieldset", { key: 'b0e1b306f0ad87cabf04429760f9043319ea45c3' }, h("div", { key: '1176a0d441ed62522ddabf573f674903e39b17f2', class: "row gy-3" }, h("div", { key: 'c920e3759b0ae8dabda8947823831a5bac39b33a', class: "col-12" }, h("justifi-payment-method-options", { key: '1e764236818baef88ce825dbc8903f2767d2fa95', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: 'f1cd3b08d4c558933b3da04073e527b5b0958f8b', class: "col-12" }, h(Button, { key: 'd321de173c8deaf8dcb382d14d9688cbd83ee3b9', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button" }, this.submitButtonText || 'Submit')))))));
+        return (h(StyledHost, { key: '1f0ab23a66f201b93ad60c42a0cd59a9960a5034' }, h("form", { key: 'b4b6e0b75e99505d53bdeae210a15c11e764a1e0' }, h("fieldset", { key: '8094449e89e44f99e4bf3e3517517d5ef5136974' }, h("div", { key: 'aaf859db2a1d7377b3ab37fd9bfa57ed3246ebd9', class: "row gy-3" }, h("div", { key: '3c5b24886edc5d991c5ba760e60741e01818c310', class: "col-12" }, h("justifi-payment-method-options", { key: '39ad866846a9c8ae32f9d34c1cecf812ed6d7c45', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: '1ed6ae634f618a9fafc11961c4db5aea60f368ec', class: "col-12" }, h(Button, { key: 'eed74cc9b5a475b925986b087cd34cc2e912aae6', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button" }, this.submitButtonText || 'Submit')))))));
     }
-    static get style() { return JustifiTokenizePaymentMethodStyle0; }
 }, [1, "justifi-tokenize-payment-method", {
         "authToken": [1, "auth-token"],
         "accountId": [1, "account-id"],
@@ -76,49 +77,74 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-tokenize-payment-method", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-billing-form", "justifi-new-payment-method", "justifi-payment-method-form", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
+    const components = ["justifi-tokenize-payment-method", "bank-account-form", "card-form", "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-billing-form", "justifi-new-payment-method", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-tokenize-payment-method":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TokenizePaymentMethod);
             }
             break;
+        case "bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
         case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "form-control-radio":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "form-control-error-text":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "form-control-tooltip":
+        case "hidden-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "justifi-billing-form":
+        case "iframe-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "justifi-new-payment-method":
+        case "justifi-billing-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "justifi-payment-method-form":
+        case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

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

@@ -2,9 +2,6 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { D as DetailSectionTitle, a as DetailItem } from './utils.js';
 import { i as isEmptyObject } from './utils2.js';
 
-const sharedBusinessDetailsCss = ".flex-1{flex:1}";
-const LegalAddressDetailsStyle0 = sharedBusinessDetailsCss;
-
 const LegalAddressDetails = /*@__PURE__*/ proxyCustomElement(class LegalAddressDetails extends HTMLElement {
     constructor() {
         super();
@@ -15,9 +12,8 @@ const LegalAddressDetails = /*@__PURE__*/ proxyCustomElement(class LegalAddressD
         var _a, _b, _c, _d, _e, _f, _g;
         if (isEmptyObject(this.legalAddress))
             return null;
-        return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Business Legal Address Details" }), h("div", { class: "d-table gap-2 w-100" }, 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() }))))));
+        return (h(Host, 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() }))))));
     }
-    static get style() { return LegalAddressDetailsStyle0; }
 }, [0, "legal-address-details", {
         "legalAddress": [16]
     }]);

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

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { a as addressSchema } from './business-address-schema.js';
 import { F as FormController } from './form.js';
-import { b as Address } from './Business.js';
-import { B as BusinessFormStepV2 } from './business-form-types.js';
+import { c as Address } from './Business.js';
 import { S as StateOptions } from './state-options.js';
-import { n as numberOnlyHandler } from './utils5.js';
-import { d as defineCustomElement$5 } from './custom-popper2.js';
-import { d as defineCustomElement$4 } from './form-control-error-text2.js';
+import { n as numberOnlyHandler } from './utils4.js';
+import { h as heading2 } from './parts.js';
+import { B as BusinessFormStep } from './event-types2.js';
+import { d as defineCustomElement$4 } from './custom-popper2.js';
 import { d as defineCustomElement$3 } from './form-control-select2.js';
 import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
@@ -15,10 +15,9 @@ const LegalAddressFormStepCore = /*@__PURE__*/ proxyCustomElement(class LegalAdd
     constructor() {
         super();
         this.__registerHost();
-        this.submitted = createEvent(this, "submitted", 7);
-        this.stepCompleted = createEvent(this, "form-step-completed", 7);
-        this.formLoading = createEvent(this, "formLoading", 7);
+        this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
+        this.formLoading = createEvent(this, "formLoading", 7);
         this.getData = () => {
             this.formLoading.emit(true);
             this.getBusiness({
@@ -54,8 +53,7 @@ const LegalAddressFormStepCore = /*@__PURE__*/ proxyCustomElement(class LegalAdd
                     });
                 },
                 final: () => {
-                    this.submitted.emit({ data: { submittedData } });
-                    this.stepCompleted.emit({ data: submittedData, formStep: BusinessFormStepV2.legalAddress });
+                    this.stepCompleteEvent.emit({ response: submittedData, formStep: BusinessFormStep.legalAddress });
                     this.formLoading.emit(false);
                 }
             });
@@ -90,7 +88,7 @@ const LegalAddressFormStepCore = /*@__PURE__*/ proxyCustomElement(class LegalAdd
     render() {
         var _a, _b, _c, _d, _e, _f;
         const legalAddressDefaultValue = this.formController.getInitialValues();
-        return (h("form", { key: 'cc749f565087adf5a0806a179ebc4682783763bd' }, h("fieldset", { key: '98fecaf00779da20c4f023dd4081be6f616e59ae' }, h("div", { key: '854d921b4b140738cb2cf2f48b51a207eb58c329', class: "d-flex align-items-center gap-2" }, h("legend", { key: 'ae741c143648c14145eac2066fa40799726682e5', class: "mb-0" }, "Legal Address of your Business"), h("form-control-tooltip", { key: 'd30c4a70183f7afc9a809d399b775c5610ef952c', helpText: "No PO Boxes." })), h("hr", { key: '78f7c51df66d265ff1a9f62b38aedfba014ed7cb', class: "mt-2" }), h("div", { key: 'b32031b925e908dc4a9459f0e082312f72fc64f9', class: "row gy-3" }, h("div", { key: '1564426893f46dc7ace7192ce264a10d879bc5c2', class: "col-12" }, h("form-control-text", { key: '9c70add04a610ce6280f7047ad56d260bb0adcf1', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.line1 })), h("div", { key: 'bba886684830ab3dd7f3470e13bcf8ce970f357f', class: "col-12" }, h("form-control-text", { key: '43c507918eb72b586c43b4839c40499196c41625', name: "line2", label: "Address Line 2 (optional)", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line2 })), h("div", { key: 'e9ff6df356c8c4f1ddef5318936d39c4b92a58e9', class: "col-12" }, h("form-control-text", { key: 'ff17e63977ba52fea319f1dfb2936b0836fa1f5f', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.city })), h("div", { key: 'd0da7fbd59236105cb1f7725eb4fddc0fe0e028b', class: "col-12" }, h("form-control-select", { key: '666abe057f3a06705b42e8bfb3aae4e15b50f8dc', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.state })), h("div", { key: 'c9c2ea66adc0e15f07a9070ca46f685042b41042', class: "col-12" }, h("form-control-text", { key: '614c03164e755b945610b91f8ec7757980956261', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: 'cfab73c10bf56bf001a246f0ad8c56fd8c36fbeb', class: "col-12" }, h("form-control-select", { key: 'd42b86c2d2de13504f2934fa63a3e83f998134ac', name: "country", label: "Country", options: [{ label: "United States", value: "USA" }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.country,
+        return (h("form", { key: '1e6065ae448a770d278a526cb76756f7f0bd7567' }, h("fieldset", { key: '2af32416088e57165f79690869085156f8d9c7b0' }, h("div", { key: '3c76e75ffb68a3a3df3dfeaa6d99f116308e0030', class: "d-flex align-items-center gap-2" }, h("legend", { key: '6c6ef9016703a2e2e331f8aced8af8ed0888862b', class: "mb-0", part: heading2 }, "Legal Address of your Business"), h("form-control-tooltip", { key: '474cac4455beeaf1ad6d5c1b74e5bb7bb7e35e0b', helpText: "No PO Boxes." })), h("hr", { key: 'aff498cf796610a39c4c1767117b4602f06e2e85', class: "mt-2" }), h("div", { key: 'af60b65ff725643c758db069a56b50f642f216d7', class: "row gy-3" }, h("div", { key: '870fe8afade8361858130788744d3334a22fd5c5', class: "col-12" }, h("form-control-text", { key: '85ad65ac883ed7fc46e8bb85fae296148d7ea4b6', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.line1 })), h("div", { key: '12d661b8f7a2664616a606f2d0f4ef00e26be8cc', class: "col-12" }, h("form-control-text", { key: '3f09668d35495618b8e52fe624ab711c9710ebb9', name: "line2", label: "Address Line 2 (optional)", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line2 })), h("div", { key: '380c8ab7fc2ac404a6a78b5055a984fc44009d4d', class: "col-12" }, h("form-control-text", { key: '0a9341c12c4b6f0a6950a64453918643338bfbe2', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.city })), h("div", { key: '03c7206900569a51b5abc6d4358e8fe25131aab4', class: "col-12" }, h("form-control-select", { key: 'f32410394f052a7392e250e26abf26b6ed653980', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.state })), h("div", { key: '0c5833503a32b99fa460ecd4987ecfcbd7927405', class: "col-12" }, h("form-control-text", { key: 'fbbf5fb1b5bed5102e3730e8061c0d84474c44cc', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: '64251fecb733ded3ae50c5e83ce384b027488654', class: "col-12" }, h("form-control-select", { key: 'a2dc29311bd2d7bc7dcb546f8b4f386ded5e8c14', name: "country", label: "Country", options: [{ label: "United States", value: "USA" }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.country,
             // just for now so we skip handling country specificities
             disabled: true }))))));
     }
@@ -107,7 +105,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-legal-address-form-step-core", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip"];
+    const components = ["justifi-legal-address-form-step-core", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-legal-address-form-step-core":
             if (!customElements.get(tagName)) {
@@ -115,11 +113,6 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

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

@@ -2,8 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
 import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';
 import { B as BusinessService } from './business.service.js';
-import { d as defineCustomElement$6 } from './custom-popper2.js';
-import { d as defineCustomElement$5 } from './form-control-error-text2.js';
+import { d as defineCustomElement$5 } from './custom-popper2.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';
@@ -51,7 +50,7 @@ const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddress
         }
     }
     render() {
-        return (h("justifi-legal-address-form-step-core", { key: '06ac5acac2cc9c167a86448b0e12d885d21361fb', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-legal-address-form-step-core", { key: '66973db19fe252e82b8e44f875aef6e6de4f519d', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -72,7 +71,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-legal-address-form-step", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-legal-address-form-step-core"];
+    const components = ["justifi-legal-address-form-step", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-legal-address-form-step-core"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-legal-address-form-step":
             if (!customElements.get(tagName)) {
@@ -80,11 +79,6 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

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

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { S as StateOptions } from './state-options.js';
-import { n as numberOnlyHandler } from './utils5.js';
-import { d as defineCustomElement$5 } from './custom-popper2.js';
-import { d as defineCustomElement$4 } from './form-control-error-text2.js';
+import { n as numberOnlyHandler } from './utils4.js';
+import { h as heading2 } from './parts.js';
+import { d as defineCustomElement$4 } from './custom-popper2.js';
 import { d as defineCustomElement$3 } from './form-control-select2.js';
 import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
@@ -26,7 +26,7 @@ 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: 'c882f02585a8b78ddd35e0d28a71252324631634', exportparts: "label,input,input-invalid" }, h("fieldset", { key: '7b41893d22bc032020060200e63f80707385585c' }, h("legend", { key: 'ddd67063e34b95920080bd649c0e3cfd1f4f1c0b' }, "Business Legal Address"), h("hr", { key: '7a74e634115497c445437543120bc8d9ff2d16ef' }), h("div", { key: 'acd00ea38decc4f4605ba058e2580626a86397a4', class: "row gy-3" }, h("div", { key: 'ca5a109b181dceab7d71bf3b7aa4cbaadc70ad6f', class: "col-12" }, h("form-control-text", { key: '67271661212a45157e37fe136a4a778552a9bfc9', 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: '1d2ed08d41694bf530c92c1cd6f7092c46f93b40', class: "col-12" }, h("form-control-text", { key: '66dcae505b16fe4a5cb43e541f197d7de45f374e', 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: 'ad5bd6ecb8fd5afec958d44fe6fb265b8cfac358', class: "col-12" }, h("form-control-text", { key: '33053662779ae34f6117fec9d2c8f2b3ae57ab53', 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: 'fa19d830d677b2e183dff7ee8532c23e77d2d162', class: "col-12" }, h("form-control-select", { key: '481324e4af2b4af52cd9955331b402a30ca0bc45', 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: '76642ac99c59d4a4a75b2d8b03cffe807d96d62b', class: "col-12" }, h("form-control-text", { key: '0d46bb841e259ff86da5aff4e1e8ac9b000db331', 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: '947782f5fa17fa0df3e431fe587d1efefbecdc27', class: "col-12" }, h("form-control-select", { key: 'd8848595610231ad5bf86f21eaad4bbb45617b01', 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: 'cdc38fd9219f476ab7e96dc822e011e576ffd4a4' }, h("fieldset", { key: '2ede5cb6b37f1e3777ca0cc67301df09c3fba094' }, h("legend", { key: '172c62472d8604980ad3852706753fa57ca7de61', part: heading2 }, "Business Legal Address"), h("div", { key: 'e06b8a7685b684d0b13dca7d353a25657a193d7f', class: "row gy-3" }, h("div", { key: '666b922155f4867095c42bc8e5d532666bfa5dae', class: "col-12" }, h("form-control-text", { key: '3438b500fa38f5a8598087e9f1443c81727a25f7', 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: '161beeeed0ee761e3a46eedf8be84fa41d3baa97', class: "col-12" }, h("form-control-text", { key: '50529cbf0bace2992f1a26904711b44900e7f9ae', 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: '9197e0c08d20fb1b4833bd5e3753bc9a98be38d3', class: "col-12" }, h("form-control-text", { key: 'a4f76e3e053a970971c65315679a26046e4bf93d', 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: 'fc0751e18457603a59d6f159a8355b05f3199098', class: "col-12" }, h("form-control-select", { key: '3b9c78bdc3997badec0d0752fd8a0dcfa278ebbe', 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: '088917f3ec58d3e0b91a80fc545be78cb7a0d5f2', class: "col-12" }, h("form-control-text", { key: 'abb1e41d287a7ea0165f68811ee60a7985d3bcc7', 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: '2f042e9969d48a35618124975def5b2fd06a9b98', class: "col-12" }, h("form-control-select", { key: '67bf02cb2b3e786b2a5a4f5817a4ffd5ff2fee96', 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 }))))));
     }
@@ -39,7 +39,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-legal-address-form", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip"];
+    const components = ["justifi-legal-address-form", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-legal-address-form":
             if (!customElements.get(tagName)) {
@@ -47,11 +47,6 @@ function defineCustomElement() {
             }
             break;
         case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/module/new-payment-method.js

@@ -1,14 +1,25 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { c as config } from './config.js';
-import { d as defineCustomElement$8 } from './custom-popper2.js';
-import { d as defineCustomElement$7 } from './form-control-error-text2.js';
-import { d as defineCustomElement$6 } from './form-control-select2.js';
-import { d as defineCustomElement$5 } from './form-control-text2.js';
-import { d as defineCustomElement$4 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$3 } from './billing-form.js';
-import { d as defineCustomElement$2 } from './payment-method-form.js';
+import { O as heading3, P as billingForm, Q as radioListItem } from './parts.js';
+import './details.js';
+import { d as defineCustomElement$d } from './bank-account-form2.js';
+import { d as defineCustomElement$c } from './card-form2.js';
+import { d as defineCustomElement$b } from './custom-popper2.js';
+import { d as defineCustomElement$a } from './form-control-checkbox2.js';
+import { d as defineCustomElement$9 } from './form-control-help-text3.js';
+import { d as defineCustomElement$8 } from './form-control-radio2.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 './hidden-input2.js';
+import { d as defineCustomElement$3 } from './iframe-input2.js';
+import { d as defineCustomElement$2 } from './billing-form.js';
 import { d as defineCustomElement$1 } from './save-new-payment-method.js';
 
+const Header3 = (props) => {
+    return h("h3", { class: `header-3 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading3 }, props.text);
+};
+
 const PaymentMethodTypeLabels = {
     bankAccount: 'New bank account',
     card: 'New credit or debit card',
@@ -18,7 +29,8 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
         super();
         this.__registerHost();
         this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected", 7);
-        this.onPaymentMethodOptionClick = () => {
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
         this.iframeOrigin = config.iframeOrigin;
@@ -39,17 +51,22 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
         var _a, _b;
         if (!this.paymentMethodFormRef || !this.billingFormRef)
             return;
-        const isValid = await this.validate();
-        if (!isValid || !insuranceValidation.isValid) {
-            return { validationError: true };
-        }
-        const tokenizeResponse = await this.tokenize();
-        if (tokenizeResponse.error) {
-            return { error: tokenizeResponse.error };
+        try {
+            const isValid = await this.validate();
+            if (!isValid || !insuranceValidation.isValid) {
+                return { validationError: true };
+            }
+            const tokenizeResponse = await this.tokenize();
+            if (tokenizeResponse.error) {
+                return { error: tokenizeResponse.error };
+            }
+            else {
+                const tokenizeRessponseData = tokenizeResponse.data;
+                return { token: ((_a = tokenizeRessponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeRessponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token) };
+            }
         }
-        else {
-            const tokenizeRessponseData = tokenizeResponse.data;
-            return { token: ((_a = tokenizeRessponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeRessponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token) };
+        catch (error) {
+            return { error };
         }
     }
     async validate() {
@@ -77,11 +94,11 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
     }
     showNewPaymentMethodForm() {
         var _a;
-        return (h("div", { class: "mt-2 pb-4 border-bottom" }, h("div", { class: "mb-3" }, h("justifi-payment-method-form", { ref: (el) => (this.paymentMethodFormRef = el), "payment-method-form-type": (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, "iframe-origin": this.iframeOrigin })), h("h3", { class: "fs-6 fw-bold lh-lg mb-4" }, "Billing address"), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+        return (h("div", { class: "mt-4 pb-4 border-bottom" }, h("hidden-input", null), h("div", { class: "mb-4" }, ((_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id) === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el }))), h("div", { part: billingForm }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) })), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
     }
     render() {
-        var _a, _b, _c, _d;
-        return (h("div", { key: 'a3ab3946d37bc52aff2a08a99b5f9e0a1dce9902', class: "payment-method" }, h("div", { key: '8bd1d2c2f4272e383ab93fff3829013307316369', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '5fb9efbdcee3ca7f53e1592862188db5a4ae59a3', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: 'cf174ee431e67f9e4483ff15d1a7841fc61bbc95', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        var _a, _b;
+        return (h(Host, { key: '4b6e52ca95845aa1c9163f4d3eafbfc98ca51deb', class: "payment-method" }, h("div", { key: 'd4aea7115ff71564a4d1e87a468174a29a040406', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0204f84a72bb89e03772894f208895359370714b', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
 }, [0, "justifi-new-payment-method", {
         "iframeOrigin": [1025, "iframe-origin"],
@@ -98,44 +115,69 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-new-payment-method", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-billing-form", "justifi-payment-method-form", "justifi-save-new-payment-method"];
+    const components = ["justifi-new-payment-method", "bank-account-form", "card-form", "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-billing-form", "justifi-save-new-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, NewPaymentMethod);
             }
             break;
+        case "bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
         case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "form-control-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "form-control-help-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "form-control-radio":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "form-control-error-text":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "form-control-tooltip":
+        case "hidden-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "justifi-billing-form":
+        case "iframe-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-payment-method-form":
+        case "justifi-billing-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
@@ -149,4 +191,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { NewPaymentMethod as N, defineCustomElement as d };
+export { Header3 as H, NewPaymentMethod as N, defineCustomElement as d };

package/dist/module/owner-details2.js

@@ -2,9 +2,6 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { D as DetailSectionTitle, a as DetailItem } from './utils.js';
 import { f as formatMediumDate } from './utils2.js';
 
-const sharedBusinessDetailsCss = ".flex-1{flex:1}";
-const OwnerDetailsStyle0 = sharedBusinessDetailsCss;
-
 const OwnerDetails = /*@__PURE__*/ proxyCustomElement(class OwnerDetails extends HTMLElement {
     constructor() {
         super();
@@ -19,11 +16,10 @@ const OwnerDetails = /*@__PURE__*/ proxyCustomElement(class OwnerDetails extends
             var _a, _b, _c, _d, _e;
             return [
                 h(DetailSectionTitle, { sectionTitle: `Owner ${owner === null || owner === void 0 ? void 0 : owner.name}'s Details` }),
-                h("div", { class: "d-table gap-2 w-100" }, h(DetailItem, { title: "Name", value: owner === null || owner === void 0 ? void 0 : owner.name }), h(DetailItem, { title: "Title", value: owner === null || owner === void 0 ? void 0 : owner.title }), h(DetailItem, { title: "Email", value: owner === null || owner === void 0 ? void 0 : owner.email }), h(DetailItem, { title: "Phone", value: owner === null || owner === void 0 ? void 0 : owner.phone }), h(DetailItem, { title: "Date of Birth", value: formatMediumDate(new Date(Number(owner === null || owner === void 0 ? void 0 : owner.dob_day), Number(owner === null || owner === void 0 ? void 0 : owner.dob_month), Number(owner === null || owner === void 0 ? void 0 : owner.dob_year))) }), h(DetailItem, { title: "Identification Number", value: `********${owner === null || owner === void 0 ? void 0 : owner.ssn_last4}` }), h(DetailItem, { title: "Line 1", value: (_a = owner === null || owner === void 0 ? void 0 : owner.address) === null || _a === void 0 ? void 0 : _a.line1 }), h(DetailItem, { title: "Line 2", value: (_b = owner === null || owner === void 0 ? void 0 : owner.address) === null || _b === void 0 ? void 0 : _b.line2 }), h(DetailItem, { title: "City", value: (_c = owner === null || owner === void 0 ? void 0 : owner.address) === null || _c === void 0 ? void 0 : _c.city }), h(DetailItem, { title: "State", value: (_d = owner === null || owner === void 0 ? void 0 : owner.address) === null || _d === void 0 ? void 0 : _d.state }), h(DetailItem, { title: "Zip", value: (_e = owner === null || owner === void 0 ? void 0 : owner.address) === null || _e === void 0 ? void 0 : _e.postal_code }))
+                h("div", { class: "d-table gap-2 w-100 mt-3" }, h(DetailItem, { title: "Name", value: owner === null || owner === void 0 ? void 0 : owner.name }), h(DetailItem, { title: "Title", value: owner === null || owner === void 0 ? void 0 : owner.title }), h(DetailItem, { title: "Email", value: owner === null || owner === void 0 ? void 0 : owner.email }), h(DetailItem, { title: "Phone", value: owner === null || owner === void 0 ? void 0 : owner.phone }), h(DetailItem, { title: "Date of Birth", value: formatMediumDate(new Date(Number(owner === null || owner === void 0 ? void 0 : owner.dob_day), Number(owner === null || owner === void 0 ? void 0 : owner.dob_month), Number(owner === null || owner === void 0 ? void 0 : owner.dob_year))) }), h(DetailItem, { title: "Identification Number", value: `********${owner === null || owner === void 0 ? void 0 : owner.ssn_last4}` }), h(DetailItem, { title: "Line 1", value: (_a = owner === null || owner === void 0 ? void 0 : owner.address) === null || _a === void 0 ? void 0 : _a.line1 }), h(DetailItem, { title: "Line 2", value: (_b = owner === null || owner === void 0 ? void 0 : owner.address) === null || _b === void 0 ? void 0 : _b.line2 }), h(DetailItem, { title: "City", value: (_c = owner === null || owner === void 0 ? void 0 : owner.address) === null || _c === void 0 ? void 0 : _c.city }), h(DetailItem, { title: "State", value: (_d = owner === null || owner === void 0 ? void 0 : owner.address) === null || _d === void 0 ? void 0 : _d.state }), h(DetailItem, { title: "Zip", value: (_e = owner === null || owner === void 0 ? void 0 : owner.address) === null || _e === void 0 ? void 0 : _e.postal_code }))
             ];
         }))));
     }
-    static get style() { return OwnerDetailsStyle0; }
 }, [0, "owner-details", {
         "owners": [16]
     }]);