@justifi/webcomponents 6.0.0-rc.9 → 6.0.1-rc.0

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

@@ -14,9 +14,11 @@ import { d as defineCustomElement$2 } from './business-representative-form-input
 import { d as defineCustomElement$1 } from './identity-address-form.js';
 
 const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(class BusinessRepresentativeFormStepCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.formLoading = createEvent(this, "formLoading", 7);

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

@@ -13,9 +13,11 @@ import { d as defineCustomElement$2 } from './business-representative-form-step-
 import { d as defineCustomElement$1 } from './identity-address-form.js';
 
 const BusinessRepresentativeFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessRepresentativeFormStep extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
     }
     propChanged() {
@@ -49,7 +51,7 @@ const BusinessRepresentativeFormStep = /*@__PURE__*/ proxyCustomElement(class Bu
         }
     }
     render() {
-        return (h("justifi-business-representative-form-step-core", { key: '582c77f4b763573a1d29726285a9b871afe96d89', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-representative-form-step-core", { key: '241cd9ff1afae3bf1f9107cf6f66392b7b656471', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],

package/dist/module/business-representative.js

@@ -11,9 +11,11 @@ import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$1 } from './identity-address-form.js';
 
 const BusinessRepresentative = /*@__PURE__*/ proxyCustomElement(class BusinessRepresentative extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errors = {};
         this.representative = {};
         this.inputHandler = (name, value) => {
@@ -36,10 +38,10 @@ const BusinessRepresentative = /*@__PURE__*/ proxyCustomElement(class BusinessRe
     }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues().representative;
-        return (h(Host, { key: '88bd35928331776d5cbb7d085fd55a76fde1a084' }, h("fieldset", { key: '202c40f332352c2f4d3c8a136888c39c67379e5f' }, h("legend", { key: 'a0b5043b348b1d8632a6bf0fe2d4309a8132d1f7', part: heading2 }, "Representative"), h("div", { key: 'ba50c004e2b37f384dd8af63b1e0e397abadb9de', class: "row gy-3" }, h("div", { key: 'b85bf5fb0da9e8feae19dbebb0a911362e914601', class: "col-12 col-md-8" }, h("form-control-text", { key: '95f849c7c0ba0c67bdc0a55727e00755e03897ef', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '074067a3ce960b678ea38d53b84adda24e60754c', class: "col-12 col-md-4" }, h("form-control-text", { key: '7ef397af32b7c0f79eeae1499bf3d3d147961c96', name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: 'a26bfd8a0824aaa12c6ffa48ac58c2bccc7236ef', class: "col-12 col-md-6" }, h("form-control-text", { key: '39174c4b812462d1aa28824bca550e3f6e1d98b4', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'ed0a2c52e4df0c43b2536dfd1ff3692a4e5716d9', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '07bdcc1dd2e1473b64218eb28c8cdcf1cdce2a91', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '96092fd371ec82a8f8ebbf8bc4e3064768d4ad97', class: "col-12 col-md-4" }, h("form-control-date", { key: 'c24980f126c056aff139e897fdef9795905ea89b', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: '9d1695fa6e68bb4ae9a8184dcb5e15d588474ab8', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '8d8a56c08fb06f1a54baf3ee3d6e31a684205290', name: "identification_number", label: this.identificationNumberLabel, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: '22fa5e16517e14ab031aa5e7e95ea77bd7b28986', class: "col-12" }, h("justifi-identity-address-form", { key: '4a990de739a0ae6fbf1f6a621ff7c0078517e970', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (h(Host, { key: '94097bf5ab94fc900918d44510ea8810f2a1984d' }, h("fieldset", { key: '95619d9fa81838e5a08e191845a7343f8b3609ce' }, h("legend", { key: '9ec4d2470dc31e3128c0d3351e3983dc07bca92e', part: heading2 }, "Representative"), h("div", { key: 'a2b1d8ab98e3683c6ad57d6a6dfb259b27a8cd0f', class: "row gy-3" }, h("div", { key: 'ce36f02cde3b989b427418b7c09b92bcbc9638f1', class: "col-12 col-md-8" }, h("form-control-text", { key: '7912bcd5f4f4d5870a08529d09a21994911a7262', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '57f138c87e53aa0b555dc5d7ebe699c6207e5825', class: "col-12 col-md-4" }, h("form-control-text", { key: 'd98d5cfcb5f4a7e1dd9eb0e55844bb8a210bd305', name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: '08093caed32f9124c48fc73e05b2e5ec698fac5d', class: "col-12 col-md-6" }, h("form-control-text", { key: 'ef868e698b2369934bfeee522d8f4a7ff4924074', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'ffb1c8a6ccd2df1a198f679ad02d3921821939b9', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'ce4cd6e4edacdc536f74b85341fe35dc4aae435e', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '27d97a8149ba81e7576e850c8c273298c8394f51', class: "col-12 col-md-4" }, h("form-control-date", { key: '5cd76163b49822f9dcbd3339c89a0afffcc4247f', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: '62bd3c48ccc31d7f36a00bc27eafefc3369226e3', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '7d43730b2615e7b515ca6c66d90ceeb573e61d6a', name: "identification_number", label: this.identificationNumberLabel, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: 'ec6cb5f493f5335f6b0490894577eb401f1c150a', class: "col-12" }, h("justifi-identity-address-form", { key: '6ecffcd10914504148573e99a708cae6d6976cd2', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
     }
 }, [256, "justifi-business-representative", {
-        "formController": [16, "form-controller"],
+        "formController": [8, "form-controller"],
         "errors": [32],
         "representative": [32]
     }]);

package/dist/module/business-terms-conditions-form-step.js

@@ -21,9 +21,11 @@ const businessTermsConditionsSchema = (allowOptionalFields) => {
 };
 
 const BusinessTermsConditionsFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessTermsConditionsFormStep extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.formLoading = createEvent(this, "formLoading", 7);
@@ -129,7 +131,7 @@ const BusinessTermsConditionsFormStep = /*@__PURE__*/ proxyCustomElement(class B
         return (h("a", { href: "https://justifi.tech/merchant-agreement/", target: "_blank", rel: "noopener noreferrer" }, "merchant agreement"));
     }
     render() {
-        return (h("form", { key: '8cea6fff2e5b5cbfa7de6b3adfce238153599d1e' }, h("fieldset", { key: 'ef3c4ce5d0d03f1d048e072c6f7ac3da565ffb18' }, h("legend", { key: 'caa5fee86bd4b5c2a7204a76ae3533146526b9e1', part: heading2 }, "Terms and Conditions"), h("hr", { key: '5a72caeaf2dae8f57c0be09ca21feceb0793daf4' }), h("div", { key: 'e39700b83a10c479cf6d767c1af61ac8b480e4d5' }, h("p", { key: '2b8520977bedf73c295a387095724a561391b005' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), h("br", { key: '706ec9ecfd4a0909583745f90b36eeb42fa5e690' }), h("div", { key: 'd915e2c49188b829b33b03f07cc8f1ccea99ee1d', class: "row-gy-3" }, h("div", { key: 'cbbc74e6b5e80bf54884a8f41eb94f6d5bcdb6dd', class: "col-12" }, h("form-control-checkbox", { key: 'f63aed196d33f1760dae8c5ac5487c0fbc7d4838', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
+        return (h("form", { key: 'ed3e493e5c53e303c98e97a15149cffd2865de47' }, h("fieldset", { key: 'a4be899152d7930c2e5ac8b384f866ba313a434f' }, h("legend", { key: '6b473d236380c13ec4186cb5088f976349f18e7c', part: heading2 }, "Terms and Conditions"), h("hr", { key: '4ef52973bed72265e0ef29f0ac6e7a0ac1142f8a' }), h("div", { key: '621d89594d6335d10a746af628ce85df0bf4a71f' }, h("p", { key: '2f13e9851fdfa4b8f678de19261e7df7a7968cc0' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), h("br", { key: '7951565f2ad57491cbba0d05d650eb0aea1aea54' }), h("div", { key: 'e7d727efbd5d732b31746d3cc61eeaf9eb4b1ff6', class: "row-gy-3" }, h("div", { key: 'b6d8d501530fbe4de7c11eb46218c618a7aec26f', class: "col-12" }, h("form-control-checkbox", { key: '79030af1a43bc5d1742726b8ea66d6dda3306473', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
     }
 }, [256, "justifi-business-terms-conditions-form-step", {
         "authToken": [1, "auth-token"],

package/dist/module/button.js

@@ -1,8 +1,7 @@
 import { h } from '@stencil/core/internal/client';
 import { $ as buttonSecondary, a0 as buttonPrimary, a1 as buttonLoading } from './parts.js';
 
-const ButtonSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status", part: "button-spinner" },
-    h("span", { class: "visually-hidden" }, "Loading...")));
+const ButtonSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status", part: "button-spinner" }, h("span", { class: "visually-hidden" }, "Loading...")));
 
 const Button = (props, children) => {
     const variantToButton = {

package/dist/module/cancellation-policy.js

@@ -14,9 +14,11 @@ const CancellationPolicySchema = create$3({
 });
 
 const CancellationPolicy = /*@__PURE__*/ proxyCustomElement(class CancellationPolicy extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.documentErrors = {};
         this.errors = {};
         this.documents = { cancellation_policy: [] };
@@ -39,7 +41,7 @@ const CancellationPolicy = /*@__PURE__*/ proxyCustomElement(class CancellationPo
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '29819e51969e655219ccbdbb2e1d1b738b64f7d3' }, h("div", { key: '28279bbc8354128a5041ed6eac16d4966be1584c', class: "row gy-3" }, h("div", { key: '8b6215544f87a8c35b81a93a5f4826a35e0c0f9f', class: "col-12" }, h("h2", { key: 'b6337efb93f03ea48f2c29b1baef4929f236df2d', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: 'b7d78115378ecd0b4a4f8a43349f1b4f2527ca35', class: "col-12" }, h("form-control-textarea", { key: '6ab47f5626a945f222efceef43dc096061cb67ed', label: "Cancellation Policy Disclosure", name: "cancellation_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.cancellation_policy_disclosure, inputHandler: this.inputHandler, errorText: this.errors.cancellation_policy_disclosure })), h("div", { key: '6aeccf798d112e79251408401c99d916a9065e94', class: "col-12" }, h("form-control-textarea", { key: '580e61e4370570c9a04496fef4b7ad9c19058336', label: "Cancellation Rebuttal", name: "cancellation_rebuttal", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.cancellation_rebuttal, inputHandler: this.inputHandler, errorText: this.errors.cancellation_rebuttal })), h("div", { key: 'e0deddf002b64d02bc5a5db075da11d2566dc3bb', class: "col-12" }, h("form-control-file-v2", { key: '3da55e915d4d3126456de8e95debc6d9e46dca42', label: "Upload Cancellation Policy", name: "cancellation_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.cancellation_policy })))));
+        return (h("div", { key: 'ac10b9b21d37179211d74118b06f561e95d9ea71' }, h("div", { key: '8ff525f8ed20828ed153b7dc23cb84a0277b81d4', class: "row gy-3" }, h("div", { key: '4f22ed526972a6625dc77b3ab0ab5b074277d7b2', class: "col-12" }, h("h2", { key: 'd78d54468b91edd99238bd757f871b18ec5b58ca', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: '629c9660446cbba8951cd8396d9b72aea71c731b', class: "col-12" }, h("form-control-textarea", { key: '60e0b4903e4ddec6915d23617f215d5d2ea20935', label: "Cancellation Policy Disclosure", name: "cancellation_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.cancellation_policy_disclosure, inputHandler: this.inputHandler, errorText: this.errors.cancellation_policy_disclosure })), h("div", { key: 'aec3e4561f880b86ba6f5c7ce0298e45b837c2fd', class: "col-12" }, h("form-control-textarea", { key: 'e77d126709037cb22e6e4fcf2228652ffeb672ee', label: "Cancellation Rebuttal", name: "cancellation_rebuttal", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.cancellation_rebuttal, inputHandler: this.inputHandler, errorText: this.errors.cancellation_rebuttal })), h("div", { key: '407c071a0f7a1e488eb2ef4d522e515138a5ed2c', class: "col-12" }, h("form-control-file-v2", { key: '15dfacd8e1de439848d12ecec9a0f5ffac259484', label: "Upload Cancellation Policy", name: "cancellation_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.cancellation_policy })))));
     }
 }, [256, "justifi-cancellation-policy", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/card-billing-form-simple.js

@@ -12,9 +12,11 @@ import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const CardBillingFormSimple = /*@__PURE__*/ proxyCustomElement(class CardBillingFormSimple extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.errors = {};
         this.inputHandler = (name, value) => {
@@ -43,7 +45,7 @@ const CardBillingFormSimple = /*@__PURE__*/ proxyCustomElement(class CardBilling
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: 'a88ea2aa0b1cc2fccda7c169aad9c061e106ecfe' }, h("div", { key: '414df056d92819bf646886ca8e15f2ed10e6ab18', part: billingForm }, h("form", { key: 'c11f6eb5c7c5c1ecbeb8cc8f644a3b3ba72254c7' }, h("fieldset", { key: 'dd69c65ff7f36da3954c01ca2401e8ede6799f14' }, this.legend && (h("legend", { key: '25a86a61452b84237cc58c047916de22c35b764d' }, this.legend)), h("div", { key: '2fa8445fcf4ac0500f357d92480f18ccac655689', class: "row gy-3" }, h("div", { key: 'b7ac75fcab43435a03ad919757541f74661ce5b4', class: "col-12" }, h("form-control-text", { key: 'fd9e84c9605edf1a987c7243409eb0182f79a803', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+        return (h(StyledHost, { key: '648204826c1e3979b8556ce9049f5e025a52b282' }, h("div", { key: 'dba0067b4662662653e424ff2c81c6edc831ed46', part: billingForm }, h("form", { key: '651812a32f1ee195f89238d1125573b6f9a62fa7' }, h("fieldset", { key: '15e9d4713fba88bb6de715c48b41b1c3ebfab9df' }, this.legend && (h("legend", { key: '783b34c1a9c2f4d407587b1a356ccf1e0e119993' }, this.legend)), h("div", { key: 'f322d2a29f50bff82167e9c5633a9f1d8b3f3cef', class: "row gy-3" }, h("div", { key: 'a02f6b275a02b32c37fd8c15921a582fa6a235a7', class: "col-12" }, h("form-control-text", { key: '3efd6677727b377bbf4432dc13c34500930ec801', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
     }
 }, [257, "justifi-card-billing-form-simple", {
         "legend": [1025],

package/dist/module/card-form.js

@@ -1,6 +1,7 @@
 import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
 import { S as Skeleton } from './skeleton.js';
 import { w as waitForConfig, c as configState } from './config-state.js';
+import { j as generateTabId } from './utils2.js';
 import { d as defineCustomElement$2 } from './iframe-input2.js';
 
 const CardFormSkeleton = (props) => {
@@ -8,30 +9,21 @@ const CardFormSkeleton = (props) => {
     if (isReady) {
         return null;
     }
-    return (h("div", { class: "container-fluid p-0" },
-        h("div", { class: "mb-3" },
-            h(Skeleton, { height: "18px", width: "100px" }),
-            h(Skeleton, { height: "36px" })),
-        h("div", { class: "row" },
-            h("div", { class: "col-4 align-content-end" },
-                h(Skeleton, { height: "18px", width: "80px" }),
-                h(Skeleton, { height: "36px" })),
-            h("div", { class: "col-4 align-content-end" },
-                h(Skeleton, { height: "36px" })),
-            h("div", { class: "col-4 align-content-end" },
-                h(Skeleton, { height: "18px", width: "30px" }),
-                h(Skeleton, { height: "36px" })))));
+    return (h("div", { class: "container-fluid p-0" }, h("div", { class: "mb-3" }, h(Skeleton, { height: "18px", width: "100px" }), h(Skeleton, { height: "36px" })), h("div", { class: "row" }, h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "80px" }), h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "30px" }), h(Skeleton, { height: "36px" })))));
 };
 
 const CardForm$1 = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.isReady = false;
     }
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
+        this.tabId = generateTabId();
     }
     componentDidRender() {
         const elements = [
@@ -59,14 +51,15 @@ const CardForm$1 = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLE
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'd5e5c74e5e3be0bb5a9603a89724d23cc6216d6c' }, h(CardFormSkeleton, { key: 'a1e90d74ca6e72678255590a94937932a9520046', isReady: this.isReady }), h("div", { key: 'bb303552ed581492de8ebb0d83cea751ddd90a09', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '4918918c10e558587e1d356cee9ec8540ed88e1c' }, h(CardFormSkeleton, { key: 'e61d11784aa1a9ea84fe9f0544a84f587cdf6fa4', isReady: this.isReady }), h("div", { key: 'd0640890482bcb679c0d49e569ed34912aa37426', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '9641c97124a504729b1eba3e8704d8fd3fda7fde', class: "mb-3" }, h("iframe-input", { key: 'a5a73c00c2ac0cd12ef98b155a40108248529fb7', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'dad1b83f028745aa8b85a8e552f702d5daa3ac6f', class: "d-flex align-items-start" }, h("div", { key: '5de05029d93a81d5ad8c799135863e8cdd1e8619', class: "flex-fill me-3" }, h("iframe-input", { key: '4ec81652e51187bbaa25600299f8cb89f0c41c5c', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '0280f01efdbbfa3542036fa4ee7baec130e42688', class: "flex-fill me-3" }, h("iframe-input", { key: 'b13dba61a6bd18529e70987029592b5b7307e74b', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'edf1e383a148a2d535c4733a2b5af2d8e31e2f43', class: "flex-fill" }, h("iframe-input", { key: 'd63e832db1a089f36909db23cacb110f6571535c', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: 'ef3548ee5dcf517f5c31b3aa40fc5ed5f8e37f59', class: "mb-3" }, h("iframe-input", { key: '4fa52574bfe8334f3294e45b2e63bf109750f925', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '5ad5bfe88c1531a74a636e2e07572b8401095ecf', class: "d-flex align-items-start" }, h("div", { key: '29d9d3e3c0080243ea44ca7515c690b90bd0d944', class: "flex-fill me-3" }, h("iframe-input", { key: '01ebb2a6101d33b08135ac879fce192f57ea822e', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '769c4e873c4062ec90fae3a7b0606e8db49754c0', class: "flex-fill me-3" }, h("iframe-input", { key: 'a36c705e6f8231f01615ee8a878aa5427a11bcce', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '2923118dc4ec2f107aad34e0f77ea3d58340a734', class: "flex-fill" }, h("iframe-input", { key: 'ec3226c1eca1705672e8ea7f80be47ca6f81838b', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
 }, [256, "card-form", {
         "isReady": [32],
         "iframeOrigin": [32],
+        "tabId": [32],
         "validate": [64],
         "tokenize": [64]
     }]);

package/dist/module/card-form2.js

@@ -14,25 +14,15 @@ const CardFormSkeleton = (props) => {
     if (isReady) {
         return null;
     }
-    return (h("div", { class: "container-fluid p-0" },
-        h("div", { class: "mb-3" },
-            h(Skeleton, { height: "18px", width: "100px" }),
-            h(Skeleton, { height: "36px" })),
-        h("div", { class: "row" },
-            h("div", { class: "col-4 align-content-end" },
-                h(Skeleton, { height: "18px", width: "80px" }),
-                h(Skeleton, { height: "36px" })),
-            h("div", { class: "col-4 align-content-end" },
-                h(Skeleton, { height: "36px" })),
-            h("div", { class: "col-4 align-content-end" },
-                h(Skeleton, { height: "18px", width: "30px" }),
-                h(Skeleton, { height: "36px" })))));
+    return (h("div", { class: "container-fluid p-0" }, h("div", { class: "mb-3" }, h(Skeleton, { height: "18px", width: "100px" }), h(Skeleton, { height: "36px" })), h("div", { class: "row" }, h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "80px" }), h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "30px" }), h(Skeleton, { height: "36px" })))));
 };
 
 const JustifiCardForm = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.isReady = false;
     }
@@ -72,10 +62,10 @@ const JustifiCardForm = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm e
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: '75938c15dce1b5b078773f28c689c8f7d4ad5059' }, h(CardFormSkeleton, { key: 'fa27e1cb7262b012e69c6c88580bfa432edb13f0', isReady: this.isReady }), h("hidden-input", { key: '305afc644870ea4c5e11ade42e6f8b5504b0a299' }), h("div", { key: 'fc87adbea2130fd4334f2f7a8dbc666ad9b84f76', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: '46991f66161e4118fdf135bf18eb757435e26457' }, h(CardFormSkeleton, { key: 'aacb7f467a10debc809997a67172fe4f23a2ca76', isReady: this.isReady }), h("hidden-input", { key: '3e9bd9b7ff0aba356d9f8fd07428cbaedcb223b1' }), h("div", { key: '8fcf6d92703491fe6a0be076a5965c09c800f262', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'b426b711813d401e181c833c06f440adc2998f4a', class: "mb-3" }, h("iframe-input", { key: '1c81cac902a472ffe841340de40c8aa80688d908', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '370fb4bd7951ea6948b57923141842da07575bd3', class: "row" }, h("div", { key: '7912c07831d685c0f30d103537933c4ec0e41726', class: "col-4 align-content-end" }, h("iframe-input", { key: 'a892fead0333523eecd1a6e02fb6cd3807e1b0ad', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '699f614dcada9748525afe53cd461a5dd4f96847', class: "col-4 align-content-end" }, h("iframe-input", { key: '0c65a7fbb4bf1fa35fc645de62723f8d130217de', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'b25d6322892f5a3313db2592193552f34e364103', class: "col-4 align-content-end" }, h("iframe-input", { key: '279646b3bfa68f8e03d0118e2de86668471f5821', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: '8dea63dc69d7c7cfbcded0a07bfbcf9c7d7a41fa', class: "mb-3" }, h("iframe-input", { key: 'ffd4de932414b206ea5936c21349c522b762f8a4', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '3e56350822761119dbb7ff49e3cc56bec7f361ca', class: "row" }, h("div", { key: 'ab13b6b20573fbec961164a415ccaf21b663eb4b', class: "col-4 align-content-end" }, h("iframe-input", { key: 'e12d56f2c1dd12ae5eff7619204d9f746e1b6a43', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '62e4808ee208aec7cf3e1d7a99fd65f3d9a5e615', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c8e3945b466e61e8b21fbb13f71c0631740ca1a3', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '979929e29abb54f8837f71b1cdb7261df97a58df', class: "col-4 align-content-end" }, h("iframe-input", { key: '2c25868c5fd7e6c2d34722b39f22c2062248cdf6', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
 }, [257, "justifi-card-form", {
         "isReady": [32],

package/dist/module/checkout.store.js

@@ -1,33 +1,5 @@
 import { c as createStore } from './index2.js';
-
-var PAYMENT_MODE;
-(function (PAYMENT_MODE) {
-    PAYMENT_MODE["ECOM"] = "ecom";
-    PAYMENT_MODE["BNPL"] = "bnpl";
-    PAYMENT_MODE["APPLE_PAY"] = "apple_pay";
-})(PAYMENT_MODE || (PAYMENT_MODE = {}));
-// Maps the backend payment method types to the frontend payment method types
-var PAYMENT_METHOD_TYPES;
-(function (PAYMENT_METHOD_TYPES) {
-    PAYMENT_METHOD_TYPES["CARD"] = "card";
-    PAYMENT_METHOD_TYPES["BANK_ACCOUNT"] = "bank_account";
-    PAYMENT_METHOD_TYPES["APPLE_PAY"] = "apple_pay";
-    PAYMENT_METHOD_TYPES["GOOGLE_PAY"] = "google_pay";
-    PAYMENT_METHOD_TYPES["SEZZLE"] = "sezzle";
-    PAYMENT_METHOD_TYPES["PLAID"] = "plaid";
-})(PAYMENT_METHOD_TYPES || (PAYMENT_METHOD_TYPES = {}));
-// Available payment methods for the modular checkout component (differentiates between saved and new payment methods)
-var PAYMENT_METHODS;
-(function (PAYMENT_METHODS) {
-    PAYMENT_METHODS["SAVED_CARD"] = "saved_card";
-    PAYMENT_METHODS["NEW_CARD"] = "new_card";
-    PAYMENT_METHODS["SAVED_BANK_ACCOUNT"] = "saved_bank_account";
-    PAYMENT_METHODS["NEW_BANK_ACCOUNT"] = "new_bank_account";
-    PAYMENT_METHODS["APPLE_PAY"] = "apple_pay";
-    PAYMENT_METHODS["GOOGLE_PAY"] = "google_pay";
-    PAYMENT_METHODS["SEZZLE"] = "sezzle";
-    PAYMENT_METHODS["PLAID"] = "plaid";
-})(PAYMENT_METHODS || (PAYMENT_METHODS = {}));
+import { P as PAYMENT_METHODS } from './ModularCheckout.js';
 
 const initialState = {
     accountId: '',
@@ -42,6 +14,7 @@ const initialState = {
     bnplProviderClientId: '',
     bnplProviderMode: '',
     checkoutId: '',
+    checkoutLoaded: false,
     bankAccountVerification: undefined,
     disableBankAccount: false,
     disableBnpl: false,
@@ -54,8 +27,10 @@ const initialState = {
     paymentMethods: [],
     paymentToken: undefined,
     savePaymentMethod: false,
-    selectedPaymentMethod: PAYMENT_METHODS.NEW_CARD,
+    selectedPaymentMethod: undefined,
     totalAmount: 0,
+    plaidPublicToken: undefined,
+    plaidLinkTokenId: undefined,
 };
 const { state: checkoutStore, onChange } = createStore(initialState);
 Object.keys(initialState).forEach((key) => {
@@ -64,5 +39,41 @@ Object.keys(initialState).forEach((key) => {
         checkoutStore[key] = newValue;
     });
 });
+// Helper: compute available payment methods based on store flags
+function getAvailablePaymentMethodTypes() {
+    var _a;
+    const methods = [];
+    if (!checkoutStore.disablePaymentMethodGroup &&
+        ((_a = checkoutStore.paymentMethods) === null || _a === void 0 ? void 0 : _a.length)) {
+        const hasSavedCard = checkoutStore.paymentMethods.some((pm) => pm.type === PAYMENT_METHODS.SAVED_CARD);
+        const hasSavedBank = checkoutStore.paymentMethods.some((pm) => pm.type === PAYMENT_METHODS.SAVED_BANK_ACCOUNT);
+        if (hasSavedCard && !checkoutStore.disableCreditCard) {
+            methods.push(PAYMENT_METHODS.SAVED_CARD);
+        }
+        if (hasSavedBank && !checkoutStore.disableBankAccount) {
+            methods.push(PAYMENT_METHODS.SAVED_BANK_ACCOUNT);
+        }
+    }
+    if (!checkoutStore.disableCreditCard) {
+        methods.push(PAYMENT_METHODS.NEW_CARD);
+    }
+    if (!checkoutStore.disableBankAccount) {
+        methods.push(PAYMENT_METHODS.NEW_BANK_ACCOUNT);
+    }
+    if (checkoutStore.bnplEnabled && !checkoutStore.disableBnpl) {
+        methods.push(PAYMENT_METHODS.SEZZLE);
+    }
+    if (checkoutStore.bankAccountVerification === true &&
+        !checkoutStore.disableBankAccount) {
+        methods.push(PAYMENT_METHODS.PLAID);
+    }
+    return methods;
+}
+function onAnyChange(callback) {
+    Object.keys(initialState).forEach((key) => {
+        // @ts-ignore - onChange is generically typed by stencil/store but not exported here
+        onChange(key, (newValue) => callback(key, newValue));
+    });
+}
 
-export { PAYMENT_METHODS as P, PAYMENT_METHOD_TYPES as a, PAYMENT_MODE as b, checkoutStore as c, onChange as o };
+export { onChange as a, checkoutStore as c, getAvailablePaymentMethodTypes as g, onAnyChange as o };

package/dist/module/checkouts-list-core2.js

@@ -51,9 +51,7 @@ const checkoutTableColumns = {
     status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of each checkout" }, "Status")),
 };
 const checkoutTableCells = {
-    created_at: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) },
-        h("div", { class: "fw-bold" }, formatDate(checkout.created_at)),
-        h("div", { class: "fw-bold" }, formatTime(checkout.created_at)))),
+    created_at: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, formatDate(checkout.created_at)), h("div", { class: "fw-bold" }, formatTime(checkout.created_at)))),
     payment_amount: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, checkout.formattedPaymentAmount(checkout.payment_amount))),
     payment_description: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, checkout.payment_description)),
     sub_account_name: (checkout, index) => (h("td", { part: getAlternateTableCellPart(index) }, checkout.sub_account_name)),
@@ -62,9 +60,11 @@ const checkoutTableCells = {
 };
 
 const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.checkouts = [];
@@ -178,7 +178,7 @@ const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCo
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'ac27fa8b086e64e53a287f96be1d1212a7c23fc3' }, h(TableComponent, { key: '965b9e4761f686a254297a753b638952181d9758' }, h(TableHead, { key: '41502bb86d87acd8f730f22705d82a2bb4c3787c' }, h(TableHeadRow, { key: '9aa770a8bbb3c9623fde336580dcecda0ee6909e' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'ad20f6287a2eefd0aa659925cf4be8a03766c1c2' }, h(TableLoadingState, { key: 'bdd7d89bed12c4451199b59e2793cc3d4dbc24a8', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '8b89063a5cc78beb42a52375c431e834583ef12a', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'a557b0a68af21a5501139433f980a6c083536d71', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '0ba995e692b70214b1f63f3fbb7e05e76f229304' }, h(TableFootRow, { key: '25703345e36b46ce3a4cd9d09893c744b6db4d86' }, h(TableFootCell, { key: '07f5df6019322cb80053e4c061a2b5cb6ba7187e', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'daf2dd74a5f24192c9052a2906459a6d2b53544d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '04dae06915792f92df18740353f63781fbc15558' }, h(TableComponent, { key: '87f0d5658e76198d6332c272eabc09236569a6c3' }, h(TableHead, { key: '7b9d1d9e5875b7c83c126c06a80b1e4f8e9ec86c' }, h(TableHeadRow, { key: '8e8963b02099f6ae81a1ab9b9e00212a87be742f' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '2e1b461150fc01112c08f030402c8433611da6f3' }, h(TableLoadingState, { key: 'aefba717db73fb1052eb49906354492548eda57d', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'b353ddae94305c6f58c4026ab6a48ef16a05005c', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '852bb7c4f1968f56a692e595dbe9a6223b5b3b1d', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '5077d7f5843d62b73d85adafff03022db168de0f' }, h(TableFootRow, { key: 'b338655c2ef2fb256795f781113a0fc312d76a1b' }, h(TableFootCell, { key: 'c6f4f321400d0f6a73f2ef85a77ea9dab38270b6', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'de00aeea2bbf8cf88c2e31105967d6355ebb18f0', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

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

@@ -3,9 +3,11 @@ import { D as DetailSectionTitle, a as DetailItem } from './utils.js';
 import { s as snakeCaseToHumanReadable } from './utils2.js';
 
 const CoreInfoDetails = /*@__PURE__*/ proxyCustomElement(class CoreInfoDetails extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
         if (!this.business) {

package/dist/module/custom-popper2.js

@@ -1790,9 +1790,11 @@ var createPopper = /*#__PURE__*/popperGenerator({
 }); // eslint-disable-next-line import/no-unused-modules
 
 const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends HTMLElement$1 {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.showEvent = createEvent(this, "showEvent", 7);
         this.hideEvent = createEvent(this, "hideEvent", 7);
         this.placement = 'bottom';
@@ -1873,7 +1875,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '8bfc9503d439750dac5b1d7bf57b52a679342203' }, h("style", { key: 'c9b621af52af23eca1b31d212d212e9e1851efb4' }, `
+        return (h("div", { key: '6249f59c6bcced199fe4d509988644633d783b6b' }, h("style", { key: '9d6a47ff5b927ebfb318b7d0852678f7ade406ca' }, `
           .popper-content {
             display: none;
           }
@@ -1881,7 +1883,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '278b302602f6694c3d8897a11caffe8053396e14', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '512ccb791eaddb6d215f15257c4b09e0aad009c8' }))));
+          `), h("div", { key: '311f13edc07bc1aea0569fb6c92fbbc241704529', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '93e806d8db16cd7c1b29ce6b6bec784c8126ab67' }))));
     }
 }, [260, "custom-popper", {
         "placement": [1],

package/dist/module/customer-details.js

@@ -16,9 +16,11 @@ const CustomerDetailsSchema = create$3({
 });
 
 const CustomerDetails = /*@__PURE__*/ proxyCustomElement(class CustomerDetails extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.documentErrors = {};
         this.errors = {};
         this.documents = { customer_signature: [], customer_communication: [] };
@@ -41,7 +43,7 @@ const CustomerDetails = /*@__PURE__*/ proxyCustomElement(class CustomerDetails e
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: 'f5442efc59bb6a99a87f90feb5a4a147019af940' }, h("div", { key: 'd0f97e7ca943bfe8e4846ea84838ab08dc3658ab', class: "row gy-3" }, h("div", { key: 'da7f41d96c717f921010786f593c3776e2644738', class: "col-12" }, h("h2", { key: '0f7d56f400ec0f4250bbf7c8b2b736e084c17ab0', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: 'eca73b10ec43454be35d4ec6e09b410b7a509b46', class: "col-12" }, h("form-control-text", { key: '1b67e031f3ac24b43319b09a01a5e297095ecc84', label: "Full Name", name: "customer_name", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_name, inputHandler: this.inputHandler, errorText: this.errors.customer_name })), h("div", { key: '967326bb10e6d2a64b2f3f0bae99432f238e361c', class: "col-12" }, h("form-control-text", { key: 'fc7d83cc51728920d9f4849dd85f4f019bb50fe4', label: "Email", name: "customer_email_address", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.customer_email_address, inputHandler: this.inputHandler, errorText: this.errors.customer_email_address })), h("div", { key: '4e598f3e9bf118ddf22c4c160f0171c9789cd853', class: "col-12" }, h("form-control-textarea", { key: 'fe1c2e1a4c70ef463a31e890349a5b49f979e21b', label: "Billing Address", name: "customer_billing_address", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.customer_billing_address, inputHandler: this.inputHandler, errorText: this.errors.customer_billing_address })), h("div", { key: 'a4345bc3b39f913cc233baa21373a6d7d93d3cda', class: "col-12" }, h("form-control-file-v2", { key: '82cb1b948807d901845a23137b5d488c9edd53ae', label: "Customer Signature", name: "customer_signature", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.customer_signature })), h("div", { key: 'ffc589785e6114d604c2d98d3140de5487dc8af6', class: "col-12" }, h("form-control-file-v2", { key: '5b6b64927e4b90cc6dbb302fbc0d2067b70c6f4a', label: "Customer Communication", name: "customer_communication", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.customer_communication })))));
+        return (h("div", { key: 'e09402d1c3ca9bb8f3a243c22bec2e9d908d661f' }, h("div", { key: '67a1038f92a9a9711ca37d353af7a06b87cbe0a8', class: "row gy-3" }, h("div", { key: '1be2249539c434bf3faf847b4202ff2f421d15a3', class: "col-12" }, h("h2", { key: '17d8bc1b31dfa77f08500ff4029f572049d9e1ce', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: '3e218b39c8f5dab178cc8b23caf403e1a912694c', class: "col-12" }, h("form-control-text", { key: 'ab28a2176315c3ecd1ff984a599589a81375f4e0', label: "Full Name", name: "customer_name", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_name, inputHandler: this.inputHandler, errorText: this.errors.customer_name })), h("div", { key: 'e1739728748de575e39f29018cd1139d75232611', class: "col-12" }, h("form-control-text", { key: '9f2aec120b08ac793be93f9c990d81a74c9e57d2', label: "Email", name: "customer_email_address", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.customer_email_address, inputHandler: this.inputHandler, errorText: this.errors.customer_email_address })), h("div", { key: '9be7e4a85edfc9bc95e8ede96ebc81f4777f1cdb', class: "col-12" }, h("form-control-textarea", { key: '100e419cc2064509aaa03c76e2898fc7df85e950', label: "Billing Address", name: "customer_billing_address", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.customer_billing_address, inputHandler: this.inputHandler, errorText: this.errors.customer_billing_address })), h("div", { key: '94da95bb013738aefb17088203ee14e07f159ae0', class: "col-12" }, h("form-control-file-v2", { key: '1ab77a12a715fbb82c0bc1c9f9081e54fd3fef0e', label: "Customer Signature", name: "customer_signature", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.customer_signature })), h("div", { key: '88eed9387758b86332137fa64b4e3b3c5825d908', class: "col-12" }, h("form-control-file-v2", { key: '0b654ffcf253c639b07ffe03450a87550caaa75a', label: "Customer Communication", name: "customer_communication", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.customer_communication })))));
     }
 }, [256, "justifi-customer-details", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/details.js

@@ -2,12 +2,14 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { E as ErrorState } from './utils.js';
 
 const Details = /*@__PURE__*/ proxyCustomElement(class Details extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
-        return (h("div", { key: '3c1c4e729711c6676c176a5a04228ec7ebb7acfa' }, this.errorMessage ?
+        return (h("div", { key: '026afe404e83a58245d2c0d68b188a5b227933b4' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));

package/dist/module/dispute-management-core.js

@@ -21,9 +21,11 @@ import { d as defineCustomElement$2 } from './refund-policy.js';
 import { d as defineCustomElement$1 } from './shipping-details.js';
 
 const DisputeManagementCore = /*@__PURE__*/ proxyCustomElement(class DisputeManagementCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
         this.isLoading = true;
         this.showDisputeResponseForm = false;
@@ -68,7 +70,7 @@ const DisputeManagementCore = /*@__PURE__*/ proxyCustomElement(class DisputeMana
         });
     }
     render() {
-        return (h("div", { key: 'b5a802e8c418b3b7f3235f43260186084a6ee079' }, this.showDisputeResponseForm ? (h("justifi-dispute-response", { disputeId: this.disputeId, disputeResponse: this.dispute.dispute_response, authToken: this.authToken })) : (h("justifi-dispute-notification", { dispute: this.dispute, authToken: this.authToken, isLoading: this.isLoading }))));
+        return (h("div", { key: 'c85852cbd1169f371eb30ae06b6a2a564a15ece7' }, this.showDisputeResponseForm ? (h("justifi-dispute-response", { disputeId: this.disputeId, disputeResponse: this.dispute.dispute_response, authToken: this.authToken })) : (h("justifi-dispute-notification", { dispute: this.dispute, authToken: this.authToken, isLoading: this.isLoading }))));
     }
     static get watchers() { return {
         "getDispute": ["updateOnPropChange"]

package/dist/module/dispute-notification.js

@@ -11,9 +11,11 @@ import { m as makeSubmitDisputeResponse, D as DisputeService } from './dispute-r
 import { D as DisputeManagementClickActions } from './event-types3.js';
 
 const DisputeNotification = /*@__PURE__*/ proxyCustomElement(class DisputeNotification extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
@@ -43,7 +45,7 @@ const DisputeNotification = /*@__PURE__*/ proxyCustomElement(class DisputeNotifi
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h(StyledHost, { key: '90d2506d5bde2ea478fa3575fc162bb356b67fac' }, this.isLoading && (h("div", { key: '4877ae22d3d8e312640b122c9107b6bdd8f924cb', style: { marginBottom: '8px' } }, h(Skeleton, { key: '31fa0717949bbc6aa49db1c6ae0e324099ae1de2', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'ac5179232cb9ee33d3f3e16d9f93536ecfbf46a5', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: 'c22a5e3b257d01f92de7f6188fa0758861abc747', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: 'be331b1a5e2fa0baf46bc593ef7ce4f5872abcff', part: text }, h("h1", { key: '8094c16d3b375f28ffe314613f21ae25b63e59ef', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: 'd89ae665e1f9bd99c9338e2132c1dc56e5386696' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '2786733eac76628019993e13473d1f43c0c395ed', class: "h5" }, "Dispute details"), h("div", { key: '663c28c46136bd56889b6ad0b9bfce9e5adbb590', class: "d-table gap-2" }, h("div", { key: 'dc688fad875d1591dcb7f31d423b61a3df2ff954', class: "d-table-row gap-2" }, h("span", { key: '442db7a6e95524ca6b092794c7a4a4d987c9866e', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: '0a31de8692c9b00f43fcf3c0508e4d00a221d096', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_b = this.dispute) === null || _b === void 0 ? void 0 : _b.amount))), h("div", { key: '9fe0c1a3d3350c36fca190ae748dafe24d41b5fc', class: "d-table-row gap-2" }, h("span", { key: '12165cb6671519130a5f2e0d8938aaa55e7e3ead', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '4a37ca8a7d64b97142997bb50ec11d737ac6a882', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_c = this.dispute) === null || _c === void 0 ? void 0 : _c.reason)), h("div", { key: '4d9cf74a8ed26dd84e4ce7325d4b8703352362a4', class: "d-table-row gap-2" }, h("span", { key: '8c0eaa24ebec7703eb18384b0b1f2eae8a684b55', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '238813abf2ea0848e1fe817d5798b9b0d0b78ffc', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_d = this.dispute) === null || _d === void 0 ? void 0 : _d.id))), h("div", { key: 'd156a7e9bf0e7214ff2164fc09b12c0b8f1d2b36', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: '7822fd12dfc39bd2aced043956d012fd34cc1b01', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '05132b3a6d1fc3d136dc227008ea1999330cdb96', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: 'b04dd0c34f608b75ea3997a9c28ce948fa9dba5c' }, h("h1", { key: 'ac2a13373315703e86247b6707097af7cf2e6757', class: "h4" }, "This payment is disputed and under review"), h("p", { key: '203aed553e01bbaebe44bb370a1d088c149cda06' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_f = this.dispute) === null || _f === void 0 ? void 0 : _f.won) && (h("div", { key: '6325264f8ad7b6678825878ed59f03f90eee421a' }, h("h1", { key: '7b647ed77373884e0751de4fc39403211c249db6', class: "h4" }, "This payment was disputed"), h("p", { key: '2a5c1560d341af9b743234a058a1187f245a2ae8' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.lost) && (h("div", { key: 'a89e7f4d7e8926ed052023c7dbbbaf076a03ed9c' }, h("h1", { key: '534b560aa35dd43ba0eba668904ef70dc1a6954f', class: "h4" }, "This payment was disputed"), h("p", { key: '2381f2f6418b47dce67c498c56d5f3789add57dc' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
+        return (h(StyledHost, { key: '0f1028825a7a96a06e7219518ffed54bc0db1b2b' }, this.isLoading && (h("div", { key: 'f4b704182a5a7085827854634d38c56423cc2e1b', style: { marginBottom: '8px' } }, h(Skeleton, { key: 'b2062d8b683ab110c26fc30f1600c4500f668d87', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'b5d2afe1fdd2e5ee0ec60048a48778bcfa6c78d3', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: '1e87c8936b3f2e26e680786927c5a4609aca0b83', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: '49090493e3921353b7a830397795496bb234d112', part: text }, h("h1", { key: 'fd7b56a7cfeaa6820bf2cc121575314d075b5a83', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '72ba296695928baca8f7c5c3b1f858c596efedb2' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: 'cce733ff1bbca7a9530a442035cbae2995e018e7', class: "h5" }, "Dispute details"), h("div", { key: '28b7f081e345112d99c52d05f205734995617253', class: "d-table gap-2" }, h("div", { key: 'd9476d8d0adfa3c6eccad229e94cd3824a720c7d', class: "d-table-row gap-2" }, h("span", { key: '4d9e0714eee778c326ee1d70a32f79d90d3d4b09', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'b227edcf9b4b65b790d8aa98021d2662a12855bc', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_b = this.dispute) === null || _b === void 0 ? void 0 : _b.amount))), h("div", { key: 'b1b1cdaac5482f565a6f26af71c0b526b8c19f4e', class: "d-table-row gap-2" }, h("span", { key: '0a479a9de96cce6e42bec90a17affe2c93ced44f', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '5d5020dda571f4465e2a358880ad5f20bc6171ea', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_c = this.dispute) === null || _c === void 0 ? void 0 : _c.reason)), h("div", { key: 'a5f42c3fcbb5d14f8479d0a576d31a50f8fc6441', class: "d-table-row gap-2" }, h("span", { key: '280fca5a101eb0e823eb9ccc13c746ac7ed62069', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '4dfc0b9a295ffc804b708d3590358256009e5376', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_d = this.dispute) === null || _d === void 0 ? void 0 : _d.id))), h("div", { key: '654e7baccd08628bc90d050bad108011b49f9972', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: 'd0817cdb23bf33086c6ce5122f4ed5388027d96c', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '5446bef44a0ca747692d59fd5490409d00a9e285', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: '17fbc5902badc4230c5485b326f480180c844768' }, h("h1", { key: 'fefa0234306588d9e7f56733872bf8c9793f51dd', class: "h4" }, "This payment is disputed and under review"), h("p", { key: 'eaad72aa8d9f65ca296379a2800180878ec8a7e5' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_f = this.dispute) === null || _f === void 0 ? void 0 : _f.won) && (h("div", { key: 'ec1b0d728a7518f913c2a69976fa1f5fc8f76c74' }, h("h1", { key: '9d42fad15fbeee507e2f364c3a35f143ff7599e2', class: "h4" }, "This payment was disputed"), h("p", { key: '3b728a5544fe17a6c58c12f7e8eef290022945b6' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.lost) && (h("div", { key: '6d1813508a657265546fbef00bd1e8f46ffaf740' }, h("h1", { key: 'de981fc2e06e860f47146647975965a903a39b55', class: "h4" }, "This payment was disputed"), h("p", { key: '4e57ab86518bd678a3a5402b712d40d573b3a970' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
     }
 }, [257, "justifi-dispute-notification", {
         "dispute": [16],