@justifi/webcomponents 6.10.4 → 6.12.0

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

@@ -0,0 +1,91 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as postalOnlySchema } from './billing-form-schema.js';
+import { w as billingForm } from './parts.js';
+import { F as FormController } from './form.js';
+import { c as checkoutStore, o as onChange } from './checkout.store.js';
+import { d as defineCustomElement$3 } from './custom-popper2.js';
+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(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    componentWillLoad() {
+        this.formController = new FormController(postalOnlySchema());
+        const fields = checkoutStore.billingFormFields;
+        if (fields && Object.keys(fields).some((k) => fields[k])) {
+            this.formController.setInitialValues(fields);
+        }
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+        this.unsubscribeFromStore = onChange('billingFormFields', (newValue) => {
+            this.formController.setInitialValues(newValue);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribeFromStore) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async validate() {
+        const isValid = await this.formController.validate();
+        const errors = this.formController.errors.getValue();
+        return { isValid, errors };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h("div", { key: '41a7f26e12bfa3da4e7926d8a535218a0580be14', part: billingForm }, h("form", { key: 'b48cf148ec6d16fd8e5859dfe96a3b9fd6d3036d' }, h("fieldset", { key: '88094544642af8fadb270dfafd838d450ad88cdd' }, this.legend && (h("legend", { key: '13c19557aa4c0c127305cc54f6346eeb74d4f750' }, this.legend)), h("div", { key: 'bbcf1a622720df2d21db718eaf823e4e33155070', class: "row gy-3" }, h("div", { key: '96b9d590fd68fd4f2a54760e58c0f2bc166a832b', class: "col-12" }, h("form-control-text", { key: '57050d0274782cb2ff5f1a9b13726a8319438a36', name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 })))))));
+    }
+}, [256, "card-billing-form-simple", {
+        "legend": [1025],
+        "formController": [32],
+        "billingInfo": [32],
+        "errors": [32],
+        "getValues": [64],
+        "validate": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["card-billing-form-simple", "custom-popper", "form-control-text", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "card-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CardBillingFormSimple);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { CardBillingFormSimple as C, defineCustomElement as d };

package/dist/module/card-form.js

@@ -1,87 +1,4 @@
-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 { d as generateTabId } from './utils2.js';
-import { d as defineCustomElement$2 } from './iframe-input2.js';
-
-const CardFormSkeleton = (props) => {
-    const { isReady } = 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" })))));
-};
-
-const CardForm$1 = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.isReady = false;
-    }
-    async componentWillLoad() {
-        await waitForConfig();
-        this.iframeOrigin = configState.iframeOrigin;
-        this.tabId = generateTabId();
-    }
-    componentDidRender() {
-        const elements = [
-            this.cardNumberIframeElement,
-            this.expirationMonthIframeElement,
-            this.expirationYearIframeElement,
-            this.cvvIframeElement,
-        ];
-        Promise.all(elements.map((element) => {
-            return new Promise((resolve) => {
-                element.addEventListener('iframeLoaded', () => { resolve(); });
-            });
-        })).then(() => {
-            this.isReady = true;
-        });
-    }
-    async validate() {
-        const cardNumberIsValid = await this.cardNumberIframeElement.validate();
-        const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
-        const expirationYearIsValid = await this.expirationYearIframeElement.validate();
-        const cvvIsValid = await this.cvvIframeElement.validate();
-        return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
-    }
-    async tokenize(clientId, paymentMethodMetadata, account) {
-        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
-    }
-    render() {
-        return (h(Host, { key: 'fd58409622904cfdbe1df9e7aa893cec0b469472' }, h(CardFormSkeleton, { key: '7bd4dbc17afc1641eafa5cc6c12349901a05b862', isReady: this.isReady }), h("div", { key: '1eb88b3443cb12f592a247335d5a6de2597bf10d', class: "container-fluid p-0", style: {
-                opacity: this.isReady ? '1' : '0',
-                height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '4b50883a1094343e1f039c8bafed2ecfb42be0e8', class: "mb-3" }, h("iframe-input", { key: '83930c6af6b6a7eb82bf66565fa2e9d16b3bfa59', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '33c8a34d012abc533d5b69baa3fddfcb3714be61', class: "d-flex align-items-start" }, h("div", { key: 'b37fedaab03b543789fb2909d0daa91d28d9b772', class: "flex-fill me-3" }, h("iframe-input", { key: 'd5fa7b25f4726e6896ee8fcf0a2ab882b1df5260', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '38798bb90f5457d3e5c3659c716fe38a79a2f2a0', class: "flex-fill me-3" }, h("iframe-input", { key: '44d57ddbe4221e1d0000a9db7a19d8878211cb50', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '233f99090baecc6097f2226d93a14d428571b03f', class: "flex-fill" }, h("iframe-input", { key: '0d353a3bc4c1ece3a5ff3aecc9aabf349d59bc90', 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]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["card-form", "iframe-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "card-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CardForm$1);
-            }
-            break;
-        case "iframe-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { C as CardForm$1, d as defineCustomElement$1 } from './card-form2.js';
 
 const CardForm = CardForm$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/card-form2.js

@@ -1,12 +1,8 @@
 import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 import { S as Skeleton } from './skeleton.js';
-import './details.js';
-import './event-types.js';
-import './justifi-radio-list-item2.js';
-import { S as StyledHost } from './styled-host.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
-import { d as generateTabId } from './utils2.js';
 import { w as waitForConfig, c as configState } from './config-state.js';
+import { d as generateTabId } from './utils2.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$2 } from './hidden-input2.js';
 import { d as defineCustomElement$1 } from './iframe-input2.js';
 
@@ -18,13 +14,12 @@ const CardFormSkeleton = (props) => {
     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 {
+const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLElement {
     constructor(registerHost) {
         super();
         if (registerHost !== false) {
             this.__registerHost();
         }
-        this.__attachShadow();
         this.isReady = false;
     }
     async componentWillLoad() {
@@ -32,7 +27,6 @@ const JustifiCardForm = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm e
         this.iframeOrigin = configState.iframeOrigin;
         this.tabId = generateTabId();
         checkPkgVersion();
-        this.analytics = new JustifiAnalytics(this);
     }
     componentDidRender() {
         const elements = [
@@ -49,10 +43,6 @@ const JustifiCardForm = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm e
             this.isReady = true;
         });
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
-    }
     async validate() {
         const cardNumberIsValid = await this.cardNumberIframeElement.validate();
         const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
@@ -61,15 +51,16 @@ const JustifiCardForm = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm e
         return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
     }
     async tokenize({ clientId, paymentMethodMetadata, account, }) {
-        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+        const result = await this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+        return result;
     }
     render() {
-        return (h(StyledHost, { key: 'e204cee1fc875392b8056baf58b7234a739fffce' }, h(CardFormSkeleton, { key: '3accfb88d66661ceaef39f765bb3fddfd0f98393', isReady: this.isReady }), h("hidden-input", { key: '0416ddca8b444cf8702f3fff52065bf647bd4b61' }), h("div", { key: '37c1d5014e5a6658bfd28e08e361ffaa6488f6d7', class: "container-fluid p-0", style: {
+        return (h("div", { key: 'd3cb1fca6595f60e5f5f122b73d3d6c11a826423' }, h(CardFormSkeleton, { key: 'f83dcbbc214d460bb21c015ec051436ed5cf6670', isReady: this.isReady }), h("hidden-input", { key: '5fad0d06303d0ddb55c30c2cd94014255f2a8cec' }), h("div", { key: '68440756a1aad69b5c95245e7a2a5feb16899dca', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'e2956855dfbcab38a782c22e93bd49252196baa8', class: "mb-3" }, h("iframe-input", { key: '55105f1eebab4b846e1b5c55448259368a412349', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '9464b1a500a84dcaa438a9ebdad756637d14cb24', class: "row" }, h("div", { key: 'adc51687629fb00d26c6627e95c0228f5a4dfd11', class: "col-4 align-content-end" }, h("iframe-input", { key: '52a0e5e198b6bfac00515ec220370e289674b613', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '1b09582711d838643db265b003ed18b18042713e', class: "col-4 align-content-end" }, h("iframe-input", { key: 'a1731a8dc02723398e1aae58b3812fccf62e6157', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '1e2c3205f2e0b28d036480d2c61934da5e7da620', class: "col-4 align-content-end" }, h("iframe-input", { key: 'b7b87360068434122f9b5a8935468240684b7a1d', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
+            } }, h("div", { key: 'b39eab56c79463935f1a1bb15cc867997f026e7b', class: "mb-3" }, h("iframe-input", { key: '25a2390a8c3c92d5e6eceafe6b821202ecb22d76', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '68766798d954a0b3d093ae13c3c2955f819da4f2', class: "row" }, h("div", { key: '05539f1ac8ebb0397574d55b4b76d7acdb7d2dca', class: "col-4 align-content-end" }, h("iframe-input", { key: '4c437a4384e6c301e18824d799784c1133e70ee3', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: 'b9a5b8b5dda1d8ab6305c9dc1ef9b655eb02fb3d', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c1a412c20e75d21c1084a4b93f22362c367c1907', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: 'abdfdbd7eb784871011397a7c5fdf371e3c6baf0', class: "col-4 align-content-end" }, h("iframe-input", { key: '08dff072e785846d7543018c194b4df6ce5b343e', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
-}, [257, "justifi-card-form", {
+}, [256, "card-form", {
         "isReady": [32],
         "iframeOrigin": [32],
         "tabId": [32],
@@ -80,11 +71,11 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-card-form", "hidden-input", "iframe-input"];
+    const components = ["card-form", "hidden-input", "iframe-input"];
     components.forEach(tagName => { switch (tagName) {
-        case "justifi-card-form":
+        case "card-form":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, JustifiCardForm);
+                customElements.define(tagName, CardForm);
             }
             break;
         case "hidden-input":
@@ -101,4 +92,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { JustifiCardForm as J, defineCustomElement as d };
+export { CardForm as C, defineCustomElement as d };

package/dist/module/check-pkg-version.js

@@ -0,0 +1,45 @@
+import { w as webcomponentsPackageJson } from './package.js';
+
+const JUSTIFI_VERSION_KEY = '__JUSTIFI_WC_VERSION__';
+const detectDuplicateVersion = () => {
+    if (typeof globalThis === 'undefined')
+        return;
+    const currentVersion = webcomponentsPackageJson.version;
+    const existingVersion = globalThis[JUSTIFI_VERSION_KEY];
+    if (existingVersion && existingVersion !== currentVersion) {
+        console.error(`@justifi/webcomponents: Multiple versions detected. ` +
+            `Version ${existingVersion} was loaded first and registered all components. ` +
+            `Version ${currentVersion} is also present but its components will NOT be used. ` +
+            `To fix this, add to your package.json:\n` +
+            `"pnpm": { "overrides": { "@justifi/webcomponents": "${currentVersion}" } }`);
+        return;
+    }
+    globalThis[JUSTIFI_VERSION_KEY] = currentVersion;
+};
+const latestVersion = async (packageName) => {
+    const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');
+    const json = await response.json();
+    return json.version;
+};
+const checkPkgVersion = async () => {
+    var _a, _b;
+    detectDuplicateVersion();
+    // Skip version check in test environments to avoid async logs after tests complete
+    if (typeof process !== 'undefined' &&
+        (((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test' || ((_b = process.env) === null || _b === void 0 ? void 0 : _b.JEST_WORKER_ID))) {
+        return;
+    }
+    const version = webcomponentsPackageJson.version;
+    const packageName = webcomponentsPackageJson.name;
+    const latest = await latestVersion(packageName);
+    // remove rc from version and everything that comes after -rc
+    const latestNotRC = latest.replace(/-rc.*/, '');
+    // checkif there's a major version difference
+    const versionParts = version.split('.');
+    const latestParts = latest.split('.');
+    if (versionParts[0] !== latestParts[0]) {
+        console.warn(`The package ${packageName} is out of date. The latest version is ${latestNotRC}. Please update.`);
+    }
+};
+
+export { checkPkgVersion as c };

package/dist/module/checkout.store.js

@@ -1,4 +1,4 @@
-import { c as createStore } from './index2.js';
+import { c as createStore } from './index3.js';
 import { P as PAYMENT_METHODS } from './ModularCheckout.js';
 
 const initialState = {
@@ -102,4 +102,4 @@ function onAnyChange(callback) {
     });
 }
 
-export { getCheckoutState as a, onChange as b, checkoutStore as c, getAvailablePaymentMethodTypes as g, onAnyChange as o };
+export { onAnyChange as a, getCheckoutState as b, checkoutStore as c, getAvailablePaymentMethodTypes as g, onChange as o };

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

@@ -5,13 +5,13 @@ import './Plaid.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Business.js';
 import './ApplePay.js';
-import './details.js';
+import './justifi-details2.js';
 import { T as Table, a as TableWrapper, b as TableComponent, c as TableHead, d as TableHeadRow, e as TableBody, f as TableLoadingState, g as TableEmptyState, h as TableErrorState, i as TableRow, j as TableFoot, k as TableFootRow, l as TableFootCell } from './table.js';
 import { T as TableClickActions } from './event-types.js';
 import './justifi-radio-list-item2.js';
-import { a as formatDate, b as formatTime } from './utils2.js';
+import { f as formatDate, a as formatTime } from './utils2.js';
 import { B as Badge, a as BadgeVariant } from './badge.js';
-import { w as tableHeadCell, al as getAlternateTableCellPart } from './parts.js';
+import { B as tableHeadCell, ah as getAlternateTableCellPart } from './parts.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './checkouts-list-params-state.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
@@ -179,7 +179,7 @@ const CheckoutsListCore = /*@__PURE__*/ proxyCustomElement(class CheckoutsListCo
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '54239d9ac3afe4d4594d523f9b84b5bf852190b7' }, h(TableComponent, { key: '0c466e435625f08326fc521690c055648a0d3a6e' }, h(TableHead, { key: '6ac0b1a9bf3d42eb5bac5910f341c84a75d15eaa' }, h(TableHeadRow, { key: '171cc43a933be88dcfe2385414d6368755a66a00' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '238b814cfb2e27fa0ae0aee319da04fb7a9da477' }, h(TableLoadingState, { key: '3e73b173a14edea582ee06caa248dd31bf7e8971', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'cd2ec244aa3663f4255f245727790c30c28438f7', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'e2f458e70836a01cca79aa6e43c7d8a89bfa593d', 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: '97d1c34429fba943a752e9ece7348dd19d742c68' }, h(TableFootRow, { key: '252e8f76070a8a6a531c710cf36117a04625271a' }, h(TableFootCell, { key: 'a3fcfa5e6a90cac15348a387f65fa5b7ed2517f8', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'e4fa2774647748fd12c3742b3dd078aee8fdf483', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '206c2b631670e6ccf7660273e890f2b0425cd9ec' }, h(TableComponent, { key: 'f67fc11b090798d876b48334a182f2aeb103aaf6' }, h(TableHead, { key: '8dd36bc8e6438541bb4e46a6410d3aeb079a6d7a' }, h(TableHeadRow, { key: '26282d45f866e26d466dfd65f5b941dd3a1007ca' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '6448768d21f47bfc4a6386ab503d9c59d437c9ca' }, h(TableLoadingState, { key: 'ae8d744bd47cccf76b672b965361231e1757c9f2', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'b68fa34426e974c9a06820fad2dbebb2065a99b3', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'c68c955243beeb25a1a2767e1ae6f749bfd6df6e', 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: 'abb611ae3404761e480462dd509cc604cb55da08' }, h(TableFootRow, { key: '016c2e323923a37c0e5fa00bf42b12104cc7f9b3' }, h(TableFootCell, { key: '29ad5c6edb3a80b6a1806511b6622ee2972fbb62', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '1263c60aa0b8d53a70dafce8602d75012f07567e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/module/checkouts-list-params-state.js

@@ -1,4 +1,4 @@
-import { c as createStore } from './index2.js';
+import { c as createStore } from './index3.js';
 
 const filterParamsInitialState = {};
 const propsParamsInitialState = {};

package/dist/module/config-state.js

@@ -1,4 +1,4 @@
-import { c as createStore } from './index2.js';
+import { c as createStore } from './index3.js';
 
 const initialState = {
     apiOrigin: "https://wc-proxy.justifi.ai",

package/dist/module/custom-popper2.js

@@ -1903,7 +1903,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '5f2a199c8ba46d671aecf3353d0a5e9f097ae624' }, h("style", { key: '16d49b4c455c3adc137f8084d0030198cc77addb' }, `
+        return (h("div", { key: 'eb1e7317215bc36f340ac0cd8b5826cc302c3693' }, h("style", { key: '1acdb1992e684a654d659e7472758e016b4b11d6' }, `
           .popper-content {
             display: none;
           }
@@ -1911,7 +1911,7 @@ const CustomPopper = /*@__PURE__*/ proxyCustomElement(class CustomPopper extends
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '6722fe951e327d7f9671df0c30a82c42887169f7', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '53f6a2dbcdf62bc4b958f3abcaa357ec86fad8cf' }))));
+          `), h("div", { key: '53ff89449687b84469c9cfbb83c7807b6e95e003', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'f8f516747c2ad6c2e32efefeaa33f319a202bba6' }))));
     }
     static get watchers() { return {
         "anchorRef": ["onAnchorRefChange"]

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

@@ -4,23 +4,23 @@ import { D as Dispute, d as DisputeStatus } from './Plaid.js';
 import { d as defineCustomElement$i } from './custom-popper2.js';
 import { d as defineCustomElement$h } from './form-control-date2.js';
 import { d as defineCustomElement$g } from './form-control-file-v22.js';
-import { d as defineCustomElement$f } from './form-control-help-text2.js';
+import { d as defineCustomElement$f } from './form-control-help-text3.js';
 import { d as defineCustomElement$e } from './form-control-text2.js';
 import { d as defineCustomElement$d } from './form-control-textarea2.js';
 import { d as defineCustomElement$c } from './form-control-tooltip2.js';
-import { d as defineCustomElement$b } from './additional-statement.js';
-import { d as defineCustomElement$a } from './cancellation-policy.js';
-import { d as defineCustomElement$9 } from './customer-details.js';
-import { d as defineCustomElement$8 } from './dispute-notification.js';
-import { d as defineCustomElement$7 } from './dispute-response.js';
+import { d as defineCustomElement$b } from './justifi-additional-statement2.js';
+import { d as defineCustomElement$a } from './justifi-cancellation-policy2.js';
+import { d as defineCustomElement$9 } from './justifi-customer-details2.js';
+import { d as defineCustomElement$8 } from './justifi-dispute-notification2.js';
+import { d as defineCustomElement$7 } from './justifi-dispute-response2.js';
 import { d as defineCustomElement$6 } from './dispute-response-core.js';
-import { d as defineCustomElement$5 } from './duplicate-charge.js';
-import { d as defineCustomElement$4 } from './electronic-evidence.js';
-import { d as defineCustomElement$3 } from './product-or-service.js';
-import { d as defineCustomElement$2 } from './refund-policy.js';
-import { d as defineCustomElement$1 } from './shipping-details.js';
+import { d as defineCustomElement$5 } from './justifi-duplicate-charge2.js';
+import { d as defineCustomElement$4 } from './justifi-electronic-evidence2.js';
+import { d as defineCustomElement$3 } from './justifi-product-or-service2.js';
+import { d as defineCustomElement$2 } from './justifi-refund-policy2.js';
+import { d as defineCustomElement$1 } from './justifi-shipping-details2.js';
 
-const DisputeManagementCore = /*@__PURE__*/ proxyCustomElement(class DisputeManagementCore extends HTMLElement {
+const JustifiDisputeManagementCore = /*@__PURE__*/ proxyCustomElement(class JustifiDisputeManagementCore extends HTMLElement {
     constructor(registerHost) {
         super();
         if (registerHost !== false) {
@@ -70,7 +70,7 @@ const DisputeManagementCore = /*@__PURE__*/ proxyCustomElement(class DisputeMana
         });
     }
     render() {
-        return (h("div", { key: '7e809ceb46aa6ae412d9dc554966cc181b77cc64' }, 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: 'cd1da1a29b989475098809875dc6b31538696106' }, 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"]
@@ -93,7 +93,7 @@ function defineCustomElement() {
     components.forEach(tagName => { switch (tagName) {
         case "justifi-dispute-management-core":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, DisputeManagementCore);
+                customElements.define(tagName, JustifiDisputeManagementCore);
             }
             break;
         case "custom-popper":
@@ -190,4 +190,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { DisputeManagementCore as D, defineCustomElement as d };
+export { JustifiDisputeManagementCore as J, defineCustomElement as d };

package/dist/module/dispute-response-actions.js

@@ -1,9 +1,9 @@
 import { A as Api } from './Api.js';
-import { a as ComponentErrorSeverity } from './Plaid.js';
+import { C as ComponentErrorSeverity } from './Plaid.js';
 import './Pagination.js';
 import './Business.js';
 import './ApplePay.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils3.js';
 
 const api = Api();
 class DisputeService {

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

@@ -5,20 +5,20 @@ import { B as Button } from './button.js';
 import { d as defineCustomElement$f } from './custom-popper2.js';
 import { d as defineCustomElement$e } from './form-control-date2.js';
 import { d as defineCustomElement$d } from './form-control-file-v22.js';
-import { d as defineCustomElement$c } from './form-control-help-text2.js';
+import { d as defineCustomElement$c } from './form-control-help-text3.js';
 import { d as defineCustomElement$b } from './form-control-text2.js';
 import { d as defineCustomElement$a } from './form-control-textarea2.js';
 import { d as defineCustomElement$9 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$8 } from './additional-statement.js';
-import { d as defineCustomElement$7 } from './cancellation-policy.js';
-import { d as defineCustomElement$6 } from './customer-details.js';
-import { d as defineCustomElement$5 } from './duplicate-charge.js';
-import { d as defineCustomElement$4 } from './electronic-evidence.js';
-import { d as defineCustomElement$3 } from './product-or-service.js';
-import { d as defineCustomElement$2 } from './refund-policy.js';
-import { d as defineCustomElement$1 } from './shipping-details.js';
+import { d as defineCustomElement$8 } from './justifi-additional-statement2.js';
+import { d as defineCustomElement$7 } from './justifi-cancellation-policy2.js';
+import { d as defineCustomElement$6 } from './justifi-customer-details2.js';
+import { d as defineCustomElement$5 } from './justifi-duplicate-charge2.js';
+import { d as defineCustomElement$4 } from './justifi-electronic-evidence2.js';
+import { d as defineCustomElement$3 } from './justifi-product-or-service2.js';
+import { d as defineCustomElement$2 } from './justifi-refund-policy2.js';
+import { d as defineCustomElement$1 } from './justifi-shipping-details2.js';
 
-const DisputeResponseCore = /*@__PURE__*/ proxyCustomElement(class DisputeResponseCore extends HTMLElement {
+const JustifiDisputeResponseCore = /*@__PURE__*/ proxyCustomElement(class JustifiDisputeResponseCore extends HTMLElement {
     constructor(registerHost) {
         super();
         if (registerHost !== false) {
@@ -180,7 +180,7 @@ const DisputeResponseCore = /*@__PURE__*/ proxyCustomElement(class DisputeRespon
         return this.currentStep === 0;
     }
     render() {
-        return (h("div", { key: '8b0f0f810ad0bbc57489862ae5159fae8cbad746', class: "row gy-3" }, h("div", { key: 'ca6e73df82123a344b4a28efae395e8b9c931258', class: "col-12" }, h("h1", { key: 'bb78dcfd69d0b747cf1b1865bf463518ae18b442', class: "h4", part: heading4 }, "Counter dispute")), h("div", { key: '7179e0a6fdb89024d613f897db2cf313255494fd', class: "col-12" }, this.currentStepComponent), h("div", { key: '9219e8b3213c494adef926077f35c298588053c0', class: "col-12" }, h("div", { key: '73c2fd1a8440c19f468610ec02a7cfa6eddecb7e', class: "d-flex gap-2 mt-4 justify-content-end" }, this.isFirstStep ? (h(Button, { variant: "secondary", onClick: () => this.onCancel(), disabled: this.isLoading, isLoading: this.isLoading }, "Cancel")) : (h(Button, { variant: "secondary", onClick: () => this.onBack(), disabled: this.isLoading, isLoading: this.isLoading }, "Back")), this.isLastStep ? (h(Button, { variant: "primary", onClick: () => this.onSubmit(), disabled: this.isLoading, isLoading: this.isLoading }, "Submit Counter Dispute")) : (h(Button, { variant: "primary", onClick: () => this.onNext(), disabled: this.isLoading, isLoading: this.isLoading }, "Next"))))));
+        return (h("div", { key: '6e6144583a9d91a9484e435520c99c0dd1a525cf', class: "row gy-3" }, h("div", { key: 'abebf9a30d2e972e5a0a30475c629382849f3ed9', class: "col-12" }, h("h1", { key: 'e12a989f411a995731ec8bc44b3aaa1476b24622', class: "h4", part: heading4 }, "Counter dispute")), h("div", { key: 'a7ad7c2043b98b18c540e81c54d8d1bfaac07b3d', class: "col-12" }, this.currentStepComponent), h("div", { key: 'afaaccf31baa88a8202beabe820891e374da882c', class: "col-12" }, h("div", { key: 'cd98ab52c18070aa01c3b5bed5a84c5daa0f6bf6', class: "d-flex gap-2 mt-4 justify-content-end" }, this.isFirstStep ? (h(Button, { variant: "secondary", onClick: () => this.onCancel(), disabled: this.isLoading, isLoading: this.isLoading }, "Cancel")) : (h(Button, { variant: "secondary", onClick: () => this.onBack(), disabled: this.isLoading, isLoading: this.isLoading }, "Back")), this.isLastStep ? (h(Button, { variant: "primary", onClick: () => this.onSubmit(), disabled: this.isLoading, isLoading: this.isLoading }, "Submit Counter Dispute")) : (h(Button, { variant: "primary", onClick: () => this.onNext(), disabled: this.isLoading, isLoading: this.isLoading }, "Next"))))));
     }
 }, [256, "justifi-dispute-response-core", {
         "updateDisputeResponse": [16],
@@ -201,7 +201,7 @@ function defineCustomElement() {
     components.forEach(tagName => { switch (tagName) {
         case "justifi-dispute-response-core":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, DisputeResponseCore);
+                customElements.define(tagName, JustifiDisputeResponseCore);
             }
             break;
         case "custom-popper":
@@ -283,4 +283,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { DisputeResponseCore as D, defineCustomElement as d };
+export { JustifiDisputeResponseCore as J, defineCustomElement as d };

package/dist/module/form-address-fields.d.ts

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

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

@@ -1,65 +1,6 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as CountryCode } from './Business.js';
-import { n as numberOnlyHandler } from './utils3.js';
-import { a as countryOptions, c as countryLabels } from './country-config.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';
+import { F as FormAddressFields$1, d as defineCustomElement$1 } from './form-address-fields2.js';
 
-const FormAddressFields = /*@__PURE__*/ proxyCustomElement(class FormAddressFields extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.country = CountryCode.USA;
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const labels = countryLabels[this.country];
-        const options = countryOptions[this.country];
-        return (h(Host, { key: '8dabbee93e0f319db333ada6c20af49ed6131b8d' }, h("div", { key: '4b308ca9fa92321e5f60f3e4d9ab1c4e60cbd703', class: "row gy-3" }, h("div", { key: '9c25eec2effd7caed70a3f02f6a780513fae930c', class: "col-12" }, h("form-control-text", { key: '6c2ae178c2122d1f6085906690adadf98cb0774b', name: "line1", label: "Street Address", inputHandler: this.inputHandler, defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, helpText: "No PO Boxes." })), h("div", { key: 'eba53a69fc4c869014ef8b7bf6ff9b1d8f5be566', class: "col-12" }, h("form-control-text", { key: '11c743ce2388173c41cb16f1865fe58b2015d6bb', name: "line2", label: "Address Line 2 (optional)", inputHandler: this.inputHandler, defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { key: '2025c9bb15286f5c3e4693b596372a7dff730ce8', class: "col-12" }, h("form-control-text", { key: '5e0e40fd028d12b88cb15a38906738320e30aeca', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city })), h("div", { key: '407eac6eee8ca33a6648f2d1a45003961353f877', class: "col-12 col-md-6" }, h("form-control-select", { key: 'c598b24e0dc594ae725a7473212a6ed36102ce49', name: "state", label: labels.stateLabel, options: options.stateOptions, inputHandler: this.inputHandler, defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state })), h("div", { key: '49861d791272c745f881d19016b93885ce59f724', class: "col-12 col-md-6" }, h("form-control-text", { key: '90b9db4630dd4fad7e86151f2a632cd62b8509f3', name: "postal_code", label: labels.postalLabel, inputHandler: this.inputHandler, defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: this.country === CountryCode.USA ? 5 : 7, keyDownHandler: this.country === CountryCode.USA ? numberOnlyHandler : undefined })))));
-    }
-}, [256, "justifi-form-address-fields", {
-        "country": [1],
-        "errors": [8],
-        "defaultValues": [8, "default-values"],
-        "inputHandler": [16]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-form-address-fields", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-form-address-fields":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, FormAddressFields);
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+const FormAddressFields = FormAddressFields$1;
+const defineCustomElement = defineCustomElement$1;
 
-export { FormAddressFields as F, defineCustomElement as d };
+export { FormAddressFields, defineCustomElement };