@justifi/webcomponents 4.18.0 → 4.19.0

package/dist/esm/pagination-menu.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, H as Host } from './index-57431c24.js';
+import { E as ExtendedPagingDefaults } from './Pagination-afc8f96d.js';
+
+const PaginationMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.paging = ExtendedPagingDefaults;
+        this.params = {};
+    }
+    render() {
+        return (h(Host, { key: '645df5028861aa714a814f908ccace8dcd0986f8', exportparts: `page-arrow,page-button,page-button-disabled,page-button-text` }, h("nav", { key: '6cb86ce01c625db9c31204f63258570f8a5d0a0f', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '7ffb5771a1c51553d64735721b937e53c699949d', class: "pagination m-0" }, h("li", { key: 'b439c2f7fe81ccdfa29670a6fc04715681ed5ab3', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: 'dc59152e834a3076f09304f6fcd0195058ebefec', href: "#", class: "page-link", onClick: (e) => {
+                e.preventDefault();
+                this.paging.handleClickPrevious(this.paging.start_cursor);
+            }, part: `page-button${this.paging.has_previous ? '' : ' page-button-disabled'}` }, h("span", { key: 'fc640fb9ae2ca672bfed89d23c5641cb346c673d', class: "me-1", part: "page-arrow" }, "\u00AB"), h("span", { key: 'fb6fcd31ebd4d194b37f53a071537133b8c4d369', part: "page-button-text" }, "Previous"))), h("li", { key: 'b10e12ec7bc4a89cd897e868ec7b303c62599cd3', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: '51f91eb7cfef91dcbcfd9f11522213308bf717b5', href: "#", class: "page-link", onClick: (e) => {
+                e.preventDefault();
+                this.paging.handleClickNext(this.paging.end_cursor);
+            }, part: `page-button${this.paging.has_next ? '' : ' page-button-disabled'}` }, h("span", { key: 'd89f50a44dead676d19b8862a92ba636947fe6b1', part: "page-button-text" }, "Next"), h("span", { key: 'f5dd2ddddef86931d935df56101f1fed8118e4f6', class: "ms-1", part: "page-arrow" }, "\u00BB")))))));
+    }
+};
+
+export { PaginationMenu as pagination_menu };

package/dist/esm/payment-details-core.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
-import { e as MapPaymentStatusToBadge, b as formatCurrency, f as formatDate, a as formatTime, s as snakeCaseToHumanReadable } from './utils-5f4c4faa.js';
-import { a as EntityHeadInfo, b as EntityHeadInfoItem, c as DetailSectionTitle, D as DetailItem, C as CodeBlock, E as ErrorState, L as LoadingState } from './utils-56719d07.js';
-import { S as StyledHost } from './styled-host-57aae7fa.js';
+import { M as MapPaymentStatusToBadge, f as formatCurrency, b as formatDate, c as formatTime, s as snakeCaseToHumanReadable } from './utils-3c1dd2fa.js';
+import { a as EntityHeadInfo, b as EntityHeadInfoItem, D as DetailSectionTitle, c as DetailItem, C as CodeBlock, E as ErrorState, L as LoadingState } from './utils-01413a95.js';
+import { S as StyledHost } from './styled-host-ab9da520.js';
 
 const PaymentDetailsCore = class {
     constructor(hostRef) {
@@ -41,14 +41,14 @@ const PaymentDetailsCore = class {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'b0a4e021ebaf00cf1750c7d40510aa9754bc622b' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '5b7858536120f8a1d3016f1f110f51e6b8605f3e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '93db7fd2d30fb1ef0099e58fd6d90e703f921c44', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '6c1b97d494b92618092710986ff6cbfb4c183cad', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '1ef1fe7899d47959bb3ce8dbe511222cc69185ef', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'd0a12d9abfc6d4c71249af65cef35902554cc3a7', title: "ID", value: this.payment.id })), h("div", { key: 'b12d205fb50d310525045261967a383e93458cb3', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'cdcae0f279389849946017963762c9a1294204ee', sectionTitle: "Details" }), h("div", { key: '91693665801878a7b87729412a10469dac21130d', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'c58427d3a5543caa9f83fe62dca71612c92a200e', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: 'd6a0b3df90839ad1fdd34058f3582482a9eb1b20', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '6c08a4a3bcc7d6bf726959b451e3231598d7e920', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: '4d2d8d897cd0d5a4be06b44741cf85366eebe9af', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: 'b3df303d6c12b1327b3f20245c3c50657eb422f8', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '6a535b4f0c91fb37077e09912e4fa3c1d333db48', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '982514de79780e97b0aa3f120d7fcc11b51301ac', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '967e82d6fe2bcf55110e6881811d38af9ea63c17', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'bee37b7e5b7c22f0ec596104097c1408284c5ac1', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'da950a7706cf51aa72eeff3faedfb00fa824075f', sectionTitle: "Payment Method" }),
-            h("div", { key: 'c8ab64e8f0021fcfe4ce5e7a9bac9d867e3aa650', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '70ebccad09e67f53b13673d1f2d19c6438053ac5', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '1cbdb8b281b70a600568d7b82499084695c6a48a', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'd9696130b92a28560d2a437996d53d3ba6df39ec', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'e93b235819d5b6386ea6f6283f21da7442fd4661', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '9ba28b4b099b775cc4f77cff13c74295b12fdfd4', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: 'aaaea4076938af5a74197256dba1093265f0e2d6' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '12f06fa05915380403e244cbed053d0c04bfa1d4', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '4d496def6abfc728e6f184fb0729ac648fb2deaf', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '78dcff13206646d594bdc80f6297d45dc9932694', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'dfa0de667ebd28efd217b6bdf548b9b1b728b57e', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'b449b180034f28504007a9c2fb0598607dc00efb', title: "ID", value: this.payment.id })), h("div", { key: '62af84e244e38b24b32f791d13f1b21b49942597', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '0ddb0366b4ab737c7b08a37764b8ce2f7ec4a1e9', sectionTitle: "Details" }), h("div", { key: 'cb699194db16cb8608834779f560e882f6f9da7c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '3b6eb4a8b782668951bba90be3b5d522f3f7c69b', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '7a59ab0b12a263c38c40a98acbff6492d370b28b', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'a9eaa5d1959425205c144dc2aa7c7fad77014290', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'd70c3a4bf48c9c69625d5f27f1095f9b0744a71e', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '28f526b1adcd475c2ae88a8bf09ae4aea7935df6', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '700f51d787f20f575e3e11aa72a8da29a9587c2a', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'ea72ecc9c2f5055d4b0f6b37cd16cb318f9a797c', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '9d66af2c0c0baef4e8b7b021daf0b4d6adb267d2', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '3f21501c1e08feeee1e7427a42faf1c5d1d9c84d', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'b7767b93e090c0195aca6c99b66b48d61b6134b3', sectionTitle: "Payment Method" }),
+            h("div", { key: 'a363c7a7e69932a8ffeddb5e0d53f7df13119a9a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'fb0e1f64fcec23e513590b3048593565685d8400', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'bc181b1b94039e1aad341a8e563ba923976c806b', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '88b21dd2368b88232cd0f464c381d4423fe3c774', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '040fd71315ead633f9c89e9a9dad906889759d77', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '35ebc74de2c5c8fafd95fc5b15ff4f2ca85220cc', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '4f046825e2eeef87ddb614b6eca623fca187b0d3', sectionTitle: "Payment Method" }),
-            h("div", { key: 'b8a01fdd5596adafa252b4fd67df2e30c2e34990', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dcd3c8418ebd465812c1dd1fb9b5559ce79e2855', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '86246e11c8c494beb3f2571650f8d78e33b8dbae', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'd3cd7eec7d55ae90d0fd4bc55fad73add0d6d88c', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '43d7a0b7e37172da32aff94fe01877a32491fba8', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: 'd59695a94c44c10615020313be585c0e69374e1c', sectionTitle: 'Metadata' }), h("div", { key: '984dd0d2d0bd5c816dd7098b4e8eebf19e2ebf70', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'b2d8cf824ae9aba9d714e688fddbf14a8fdd92d6', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: 'f10eef0b4e4067fb78dbff16719a6f266f4e6bab', sectionTitle: "Payment Method" }),
+            h("div", { key: '6c1ef713b5dcabba5b516f3cbbd088d098873303', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '8880fd0fb2b16ee6f177aba15d6f4485c95af252', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'baa70304d2972f69ce8a5d077a076b16f986745b', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'dcb63b9258bea698bf2d165c611dfa05cb320f30', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '806696c15aa5ef242c230d9c9aea642ddfdfd93d', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: '83289d8f2cf57a624678260555f00af4ea96a566', sectionTitle: 'Metadata' }), h("div", { key: '02e248b962e0c06f4d83bae75a5759b234fea36b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '5d81879c7815102219ed010dab9f573ad6b7985d', metadata: this.payment.metadata })))))));
     }
     static get watchers() { return {
         "getPaymentDetails": ["updateOnPropChange"]

package/dist/esm/payment-provisioning-actions-0635eff7.js

@@ -0,0 +1,178 @@
+import { C as ComponentErrorSeverity } from './ComponentError-3ce7f437.js';
+import { g as getErrorMessage, a as getErrorCode } from './utils-b10dae27.js';
+
+// Entity API Actions
+const makeGetBusiness = ({ authToken, businessId, service }) => async ({ onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.fetchBusiness(businessId, authToken);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+const makePatchBusiness = ({ authToken, businessId, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.patchBusiness(authToken, businessId, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+const makePostProvisioning = ({ authToken, businessId, product, service }) => async ({ onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.postProvisioning(authToken, businessId, product);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};
+// Identity API Actions
+const makeGetIdentity = ({ authToken, identityId, service }) => async ({ onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.fetchIdentity(identityId, authToken);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+const makePatchIdentity = ({ authToken, identityId, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.patchIdentity(authToken, identityId, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+const makePostIdentity = ({ authToken, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.postIdentity(authToken, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+
+export { makePostProvisioning as a, makePatchBusiness as b, makeGetIdentity as c, makePatchIdentity as d, makePostIdentity as e, makeGetBusiness as m };

package/dist/esm/{payment.service-c62d82d3.js → payment.service-3ca4a492.js}

@@ -1,6 +1,6 @@
 import { A as Api } from './Api-b09a2f6a.js';
 import './Pagination-afc8f96d.js';
-import './Payment-3e94da9c.js';
+import './Payment-6bf26fe2.js';
 import './Payout-dfe15b00.js';
 import { c as config } from './config-476c7241.js';
 

package/dist/esm/payments-list-core.entry.js

@@ -1,9 +1,11 @@
 import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
 import { p as pagingDefaults } from './Pagination-afc8f96d.js';
-import './Payment-3e94da9c.js';
+import './Payment-6bf26fe2.js';
 import './Payout-dfe15b00.js';
-import { f as formatDate, a as formatTime, b as formatCurrency, e as MapPaymentStatusToBadge } from './utils-5f4c4faa.js';
-import { S as StyledHost } from './styled-host-57aae7fa.js';
+import { b as formatDate, c as formatTime, f as formatCurrency, M as MapPaymentStatusToBadge } from './utils-3c1dd2fa.js';
+import { t as tableExportedParts } from './exported-parts-abd4c027.js';
+import { S as StyledHost } from './styled-host-ab9da520.js';
+import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './table-loading-state-356c7215.js';
 
 const PaymentsListCore = class {
     constructor(hostRef) {
@@ -13,12 +15,18 @@ const PaymentsListCore = class {
         this.handleClickPrevious = (beforeCursor) => {
             const newParams = Object.assign({}, this.params);
             delete newParams.after_cursor;
-            this.params = (Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor }));
+            this.params = Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor });
         };
         this.handleClickNext = (afterCursor) => {
             const newParams = Object.assign({}, this.params);
             delete newParams.before_cursor;
-            this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
+            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+        };
+        this.rowClickHandler = (e) => {
+            const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedPaymentID)
+                return;
+            this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
         };
         this.handleDateChange = (name, value) => {
             this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
@@ -30,14 +38,14 @@ const PaymentsListCore = class {
         this.paging = pagingDefaults;
         this.params = undefined;
     }
+    updateOnPropChange() {
+        this.fetchData();
+    }
     componentWillLoad() {
         if (this.getPayments) {
             this.fetchData();
         }
     }
-    updateOnPropChange() {
-        this.fetchData();
-    }
     fetchData() {
         this.loading = true;
         this.getPayments({
@@ -58,40 +66,61 @@ const PaymentsListCore = class {
             },
         });
     }
-    ;
+    get entityId() {
+        return this.payments.map((payment) => payment.id);
+    }
+    get columnData() {
+        return [
+            ['Made On', 'The date and time each payment was made'],
+            ['Amount', 'The dollar amount of each payment'],
+            ['Description', 'The payment description, if you provided one'],
+            ['Cardholder', 'The name associated with the payment method'],
+            ['Payment Method', 'The brand and last 4 digits of the payment method'],
+            ['Status', 'The current status of each payment'],
+            ['Payment ID', 'The unique identifier of each payment'],
+        ];
+    }
+    get rowData() {
+        return this.payments.map((payment) => [
+            {
+                type: 'head',
+                value: `
+          <div class='fw-bold'>${formatDate(payment.created_at)}</div>
+          <div class='fw-bold'>${formatTime(payment.created_at)}</div>
+        `,
+            },
+            formatCurrency(payment.amount),
+            payment.description,
+            payment.payment_method.payersName,
+            payment.payment_method.lastFourDigits,
+            {
+                type: 'inner',
+                value: MapPaymentStatusToBadge(payment.status),
+            },
+            payment.id,
+        ]);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState;
+    }
     render() {
-        return (h(StyledHost, { key: '84fde18eaf36e21f2b9107bc0527d3ca48d0bf49' }, h("div", { key: '57a7084b5b9fa143209131534119407ed22a6df9', class: "row gy-3 mb-4" }, h("div", { key: 'af0f206b7b2d330614e3c70dc32425a66637b47e', class: "col-2" }, h("form-control-date", { key: '277748b548069199308c2263dffb57bf5327cc1f', name: "created_after", label: "Start Date", inputHandler: this.handleDateChange })), h("div", { key: '8ec2b609f01fe8ab57572cfcefc2842e191579bc', class: "col-2" }, h("form-control-date", { key: 'b646dab8c653b31b2810083335f3e581e86e0344', name: "created_before", label: "End Date", inputHandler: this.handleDateChange }))), h("justifi-table", { key: '1f79a0d94391cdf9a86af65aeeccd9bf7d832af3', rowClickHandler: e => {
-                const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
-                if (!clickedPaymentID) {
-                    return;
+        var _a, _b;
+        return (h(StyledHost, { key: 'e4a4b64b2927a009f7ad4e9e2ebb4c020401423c', exportparts: tableExportedParts }, h("div", { key: '6ac1c84338b84972ca9b001ecd2b90134c99de6b', class: "row gy-3 mb-4" }, h("div", { key: '1d279ec66bc0755b876e29f06ac24d51baa77caa', class: "col-2" }, h("form-control-date", { key: '65b29c031021f3f782c9a4597167dc5e3a44e7da', name: "created_after", label: "Start Date", inputHandler: this.handleDateChange })), h("div", { key: 'a032497a94cc8108fda6efbb741069407e1a5afe', class: "col-2" }, h("form-control-date", { key: '5dd62ebdbf3836567a9ccb03dec850ebe675cb79', name: "created_before", label: "End Date", inputHandler: this.handleDateChange }))), h("div", { key: 'be4094afd3aec1d742d9d3245c2f6fc50cb95fa0', class: "table-wrapper" }, h("table", { key: 'ed493e35f2bddd59d1034dffe2bcd8b54a6390d6', class: "table table-hover" }, h("thead", { key: 'fae77bda1ffc35ac5414743ab51c2fe1dfbbc29e', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '5be3b1e9883d337046c386046565fb6ac3366324', class: "table-light text-nowrap", part: "table-head-row" }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0]))))), h("tbody", { key: 'ba950a1da1ec0dffd7bc8457cdb3ce65d0f8b69b', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '8d13d8f6b64377f560d06410c09d24293708b6a8', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c75d61977b26ca5d4aa3711bae1ce6e571b3e3b2', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '08e3f88116de5783f018a0c06d21d0d9cc4f5feb', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => {
+                let nestedHtml = dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type;
+                if (nestedHtml) {
+                    return h("td", { part: "table-cell", innerHTML: dataEntry.value });
+                }
+                else {
+                    return h("td", { part: "table-cell" }, dataEntry);
                 }
-                this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
-            }, entityId: this.payments.map((payment) => payment.id), columnData: [
-                ['Made On', 'The date and time each payment was made'],
-                ['Amount', 'The dollar amount of each payment'],
-                ['Description', 'The payment description, if you provided one'],
-                ['Cardholder', 'The name associated with the payment method'],
-                ['Payment Method', 'The brand and last 4 digits of the payment method'],
-                ['Status', 'The current status of each payment'],
-                ['Payment ID', 'The unique identifier of each payment']
-            ], rowData: this.payments.map((payment) => ([
-                {
-                    type: 'head',
-                    value: `
-                    <div class='fw-bold'>${formatDate(payment.created_at)}</div>
-                    <div class='fw-bold'>${formatTime(payment.created_at)}</div>
-                  `,
-                },
-                formatCurrency(payment.amount),
-                payment.description,
-                payment.payment_method.payersName,
-                payment.payment_method.lastFourDigits,
-                {
-                    type: 'inner',
-                    value: MapPaymentStatusToBadge(payment.status)
-                },
-                payment.id
-            ])), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
+            }))))), this.paging && (h("tfoot", { key: '728f671ab03923c90e11901a0d3aac4bc30e72a7', class: "sticky-bottom" }, h("tr", { key: 'd0df9b7c857287eec9568157ecf8f547a01f2fc5', class: "table-light align-middle" }, h("td", { key: 'e0de54912240b3e812f37ea675b2eef50d9545c4', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: 'f2d7846030a5aaa0c2311cad61f4d5865440a904', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get watchers() { return {
         "params": ["updateOnPropChange"],

package/dist/esm/payout-details-core.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
-import { g as MapPayoutStatusToBadge, b as formatCurrency, f as formatDate, a as formatTime } from './utils-5f4c4faa.js';
-import { a as EntityHeadInfo, b as EntityHeadInfoItem, c as DetailSectionTitle, D as DetailItem, C as CodeBlock, E as ErrorState, L as LoadingState } from './utils-56719d07.js';
-import { S as StyledHost } from './styled-host-57aae7fa.js';
+import { d as MapPayoutStatusToBadge, f as formatCurrency, b as formatDate, c as formatTime } from './utils-3c1dd2fa.js';
+import { a as EntityHeadInfo, b as EntityHeadInfoItem, D as DetailSectionTitle, c as DetailItem, C as CodeBlock, E as ErrorState, L as LoadingState } from './utils-01413a95.js';
+import { S as StyledHost } from './styled-host-ab9da520.js';
 
 const PayoutDetailsCore = class {
     constructor(hostRef) {
@@ -55,7 +55,7 @@ const PayoutDetailsCore = class {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'da7690d5e4b21e8cb32651080ef2c8df29440c1b' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '4d9a7636e345bc5dd88b910add3a340e22589c52', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '91d6eb90ec40052d858f4736a9c60d9c9a96d40d', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: 'be9f9b43c294b76326f1ce63af79217b8abf5b0d', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2c8fb8d4a4b8f1517028acc410bdb4adbafe67a4', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '4ca663f7bbfa9bdf8fa01fe0b40fc5f6dc65dfbb', title: "ID", value: this.payout.id }), h("div", { key: '44b484491b5ec470270b469de15076d6d55e61d0', class: "m-4" }, h("button", { key: 'ca8b6cb61b56caebbec1eeb01e6de638865219bd', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '2f959d7c549dc1f8e4df2e8d12ab9988255aba03', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '741717a3e056163ee88452998f2d6e5b7dc0ccc1', sectionTitle: "Details" }), h("div", { key: 'd456b3a372525a0eff6c724e507ff325951fa430', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'a27cf5fbc2851f74bb4813d0bd49718dfe2f7d8d', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '90f49509ff399a9c164a7aeaf7307077b59e8559', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '52ef8b50065db1a111b003e9ceadfa1cc4076b74', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'ee73a34d15af0cc677fc6d903706df3f10249bdf', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '229827b98fd76bd1dec1beeac0d99517d09dc677', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '1f4bb886e4a07b5054107aa00c2b98644e87859b', sectionTitle: "Account" }), h("div", { key: '78181a7ae216bf3b0013eee0494b4b149a2ec9c3', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '273cabd55194c104d1d421db53030601f5efa83c', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '1751e4b9d5453bc41fd3b29cf7e5d3955e375bb7', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '1d5489f81d96025bdf7d7391623ddcc1ff3a7978', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f17d8096799b7eeba7c550ad828f2ffa97b65f56', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'cf3c83de7f119738940951a9481253ed855c768e', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '458186b5bd7fb0aa954c283dee08e5090b164b27', sectionTitle: 'Metadata' }), h("div", { key: '90866a28028af6c7e46ab89c221016cd698299f2', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'ed25523342b6a751e48d2d7c11cef7e541b6ed3b', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: 'fdf7905cdc7696414b765d61d0f78c7193cbbc76' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'f79827c287d68484a87232ae956a1c15e3d7044d', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'dfa9c228f2cd1b0b2d14dc6ce44478ee8fc35d00', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '6b5907e3f7753d4e2f6ba59bfe509d97e2a4c1c0', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '63b7497217a00268190eaea1475639fc5e0b43ca', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'e26e56abbac3e12584c187f6f1b560b0f4b33a6f', title: "ID", value: this.payout.id }), h("div", { key: 'e84dd653fb1adc566b0afbfdfc87cce40ed47280', class: "m-4" }, h("button", { key: 'fac0022786dc03349a65dc54729dc2f508c9441f', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '9cf642b803c59146895b762eaff40f5026c9f94b', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '90ed8aafabf9eebb47da15c6c8b8d1f527d23557', sectionTitle: "Details" }), h("div", { key: '592b8489fa30441bbf11a52d3daf6a2debcc121f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0885f3ece509936d1e1bad64d4a998fbc487ee3a', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'b8a7da2bfeada94c8c7c080b516c1bc7fc26f414', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'd8928341e89161d4bafc2940f1aa738b345779dd', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '570bd2a2d44f094870e61debca61c2b5aa772679', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '2882865db185d1668103d819e62cf61edc711697', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'f9735ff73c650ad318d771df5c22c7d8834a09f6', sectionTitle: "Account" }), h("div", { key: 'd7d53fd77e704035a19dc15bc04ee06dfaa0c51a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '486ae1c4ae990928bf24cc687cb4456bbc6e18ea', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '528d7d6a299aa1019125f34fc903ea622d09de53', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'eafb132e84de81d41bd154aec55974d8496995dd', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '7f565f8dfacab4cf8edc7025d839dff1d8de2719', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '61338f5ed539d70b4caa08ffa200d8e47f52ebde', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'cea128826f004ece9e6c29c97c07e98a3d45706c', sectionTitle: 'Metadata' }), h("div", { key: 'bf884c3dafa50cd1b8e0d98711f0fe5fc9d60391', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2d92e2f8d6f032cbaff741da43ca97424b8decaf', metadata: this.payout.metadata })))))));
     }
     static get watchers() { return {
         "getPayout": ["getPayoutWatcher"]