@justifi/webcomponents 4.21.0 → 4.22.0

package/dist/esm/{package-4ab64620.js → package-5144835c.js}

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "4.21.0";
+const version = "4.22.0";
 const description = "JustiFi Web Components";
 const collection = "dist/collection/collection-manifest.json";
 const main = "dist/index.cjs.js";

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

@@ -1,7 +1,8 @@
 import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
-import { M as MapPaymentStatusToBadge, f as formatCurrency, b as formatDate, c as formatTime, s as snakeCaseToHumanReadable } from './utils-620f2d78.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 { b as formatCurrency, a as formatDate, f as formatTime, s as snakeCaseToHumanReadable } from './utils-3daada24.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-218275b7.js';
 import { S as StyledHost } from './styled-host-e0ddb759.js';
+import { M as MapPaymentStatusToBadge } from './payments-status-4937a170.js';
 
 const PaymentDetailsCore = class {
     constructor(hostRef) {
@@ -41,14 +42,14 @@ const PaymentDetailsCore = class {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '0c00d8b9511be884b5455156295adc5a16e90d68' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '84020bce088514c6922aa9f4c60fd36515b255f2', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'f86bc0807e905d95f92019a9f2e5431fa04f663d', 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: '44d62082ccbb3b99e97a4a43c697c4c9de643983', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '20cbf3475cdc79e8160b7bee05cb1d7492bdbd22', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'bd008154f65e9133aa1d370f84925c5c0b15200b', title: "ID", value: this.payment.id })), h("div", { key: 'eba9206b8b934c5bf61d039640b6729bb7d1e61e', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '5f69927701e6295f339e071ce529e94870122c1c', sectionTitle: "Details" }), h("div", { key: 'd4dba46b241ba5ed150246f1d8dafcd64a9bb019', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9fc3188f51f5ffb019f9253a62d962536a34d6cf', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '1c4e12cde8f7368f441d92cad4f3bcf1cc9e3d52', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '9dc3a4d6c5911b48122e584cfaafee1d5ec757a8', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'a5fcb34e1af863504c4b54b024f2960e73bd9148', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '2d7960988b5dfd90645c08399ceb658f33fb8e54', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '92ae117d22f20074494a606af6eaca5b2cf51330', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '65dccd244aaca65369e2402c41c34614f95bcdd7', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'b0b2516b604b1b60358b50a02094948200e472a1', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'd26d5d18b727831fa7d7f1cdc3dbcb5187170e9c', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: '415d1b2d0861d3eaaed37914fee27677d36d7f04', sectionTitle: "Payment Method" }),
-            h("div", { key: '56f0388177528afc4ab8acee6b1b884b93c6eaa1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '04aac1ae9748061527f58144593a1ebd35f4c697', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '7a3e672ba11d55e9cafbda06ba141e7d9d489280', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '03a1001268a22552cdf65e60a08fd45db21f471b', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'df62f6d86a93d7c32eabade0ce0be19439bee824', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'f80a25dfa9351a409483901d7e8b4fb298562c04', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '85c684ff2f417380042e5245e3e6546874a75e72' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'a1afa8ca107867f4d48a6069d8df08942e7cb4b2', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'c7e93e52c041808c816768cfd56c2e035410bea3', 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: '2dba396e28b3daa61b722ffe32d98c3065ed2e18', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '9c0417863d9b0ba186c7547d41b02372c9ab3d54', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '7a7e31453894d70671b0f001b30aa74c72380308', title: "ID", value: this.payment.id })), h("div", { key: 'd6b72faca6ce471ce914ff5184e6cc2419a2ef84', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'c794e7f7a4ac3fc3442fea20ba6aaf00ca1b52fd', sectionTitle: "Details" }), h("div", { key: '5f34cd707d0f7ca2ed3c0dbd2abc2fc1c5f9ee4c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f64631d74fb728487477e61d99f93b72ccf03b45', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '7e751f1c2e62ea45fbdb910b4bfb10f2c30e923a', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '1a536d5e027c98aeabd44cbb83f8f38322c37a95', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'a1739f90e3d8cc1724b556168c86e392d1ef84fa', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '0a1f7b910421fe8568c5bbb6a70732f392486370', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '6c45ac2b6e0e84fbdd9e9f6fa26764a351c2495f', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '6571a1faf8daf4079187ccf37603cdec6e7f7602', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '1b343529481cf7143855513e44428cf3188b8326', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'd0ff8578503733c6b580131aed9d3f284e7ab3e8', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'c0ec143f86d9c817380efa58cea2a48476df77d8', sectionTitle: "Payment Method" }),
+            h("div", { key: '278b6ef36cf15e9037b4ec94846fc8215b766f61', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dcbf3d1747b9e84cb10430ee595806381cac21bd', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '0c4f1701aa28272e93d2f13251da5261f90e83cc', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'f8f90a838143fde661a612c5d880ffc98eb468a2', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '37a455f5451973c3388dd8cf0841320564f9f034', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '156c2b789d28d1ae7b5e4c912c99f29681a2f7ef', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '87d0832646aa0b72c1bf999f0faf35165f12b61d', sectionTitle: "Payment Method" }),
-            h("div", { key: 'f92a4413b6f156bc4205a51c69d082623ab4fdc0', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '437ca707e081f3f6a8c199044f8b5c3a8d5c64ce', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'fb951661cc27c09858dbaa2819824fb67c026a3e', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '34ef47bb23fc7c490afa84fdad3923ec371f954a', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '0af5278b4449beb21e0c4e6af04f803e5b82dff7', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: '9412b62344613441a40a9cd328e30eef2a024f6c', sectionTitle: 'Metadata' }), h("div", { key: '8553e41975e932bcb132284d3dcae576a21fedb7', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '328e6815791d601ffe68af891ed46e0aff8d28c0', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: '4f5e2cc8141a336e4e9181cee653fda1bf38ecf7', sectionTitle: "Payment Method" }),
+            h("div", { key: '402ae401e93231e6369f9bb76ac48805d7d28f09', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ef33c8d86b6ae69ae94cce998ef9d120b20e66d1', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'db745f865358ab8f8537cc491d6d7ce021e7db29', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '9a15f1c0990145a0ebbbf4ebab04c7b8be3f447b', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'dad1476170af5c5cb51a7fbd9329bbe969c51e3e', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: 'fbfc61ca6adb02cca215e1dda51eca1de03023ea', sectionTitle: 'Metadata' }), h("div", { key: '7018390fa3a2304a936999a0c7ceb04d3bd7fed5', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '4ec963eedfb62ab1d038d3f50b4c7199e4954623', metadata: this.payment.metadata })))))));
     }
     static get watchers() { return {
         "getPaymentDetails": ["updateOnPropChange"]

package/dist/esm/{payment.service-f9c3e9d7.js → payment.service-2f67410b.js}

@@ -1,7 +1,8 @@
-import { A as Api } from './Api-c8abc2e0.js';
+import { A as Api } from './Api-391d00e2.js';
+import './Checkout-0b4086f8.js';
 import './Pagination-afc8f96d.js';
 import './Payment-30790721.js';
-import './Payout-dfe15b00.js';
+import './SubAccount-7f7e4c56.js';
 import { c as config } from './config-27764a9d.js';
 
 class PaymentService {

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

@@ -1,12 +1,12 @@
 import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
+import './Checkout-0b4086f8.js';
 import { p as pagingDefaults } from './Pagination-afc8f96d.js';
 import './Payment-30790721.js';
-import './Payout-dfe15b00.js';
-import { b as formatDate, c as formatTime, f as formatCurrency, M as MapPaymentStatusToBadge } from './utils-620f2d78.js';
-import { t as tableExportedParts } from './exported-parts-abd4c027.js';
-import { S as StyledHost } from './styled-host-e0ddb759.js';
+import './SubAccount-7f7e4c56.js';
+import { a as formatDate, f as formatTime, b as formatCurrency } from './utils-3daada24.js';
 import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './table-loading-state-356c7215.js';
 import { o as onFilterChange } from './utils-3a4d8f3a.js';
+import { M as MapPaymentStatusToBadge } from './payments-status-4937a170.js';
 
 const PaymentsListCore = class {
     constructor(hostRef) {
@@ -116,7 +116,7 @@ const PaymentsListCore = class {
     }
     render() {
         var _a, _b;
-        return (h(StyledHost, { key: 'c9b7ac6aadf6ff3e3c913ca3c35fb656665e79ec', exportparts: tableExportedParts }, h("payments-list-filters", { key: '36e602e9e8f607834f33a774fd171904592d28bb', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '8ec5781a7884f9e785bc02dcc1037148a7553d1f', class: "table-wrapper" }, h("table", { key: 'b6f23a3e7f3d33839f72f76eaf388dc4b665fa5d', class: "table table-hover" }, h("thead", { key: 'eddf66479fe049392aa839786785f6e422e34292', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '5753f6b0f1ff3c860019398dd2e37be00720eee0', 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: '509aadeae776e891e06b8a558ddbdffd61109bef', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '7cdbec5333849e8430ff437a58282e83674f3a9f', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'e57c861b6c2628a9d7f5f0349ec16ddf25319352', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'e904618285b0ed49cd49976f3feb7184aff5649a', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+        return (h("div", { key: 'e51632f2cff6529131bf09250374f5609b8bbbd2' }, h("payments-list-filters", { key: '335944968281577a826fe2aa2a3866b282c6528c', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: 'ebff773b76f1a4b68a00675fa3499b8de71b1fe2', class: "table-wrapper" }, h("table", { key: '88e00cb3e4a98aa456b8bfb8d2d444d407aadb55', class: "table table-hover" }, h("thead", { key: '8c0bda771073274164ab4299bfdee85d70b0ccd8', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '1d3774f8ecfa33cd68bd299d5d6f5f9364f557c4', 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: '9ef8a6b5e19edf824ca91c58ce901a83b12e5d86', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '6f41adae546948d437b09c73611df813160be2d1', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'd359e393f80cdf45d9746a5e4ee979079a11b870', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'd2d81ee9b5abcf732972afa56e6e2abc3c7c2e98', 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) {
@@ -125,7 +125,7 @@ const PaymentsListCore = class {
                 else {
                     return h("td", { part: "table-cell" }, dataEntry);
                 }
-            }))))), this.paging && (h("tfoot", { key: '5be3c247a0f19ccb4463ece1d7e2f973cd00162a', class: "sticky-bottom" }, h("tr", { key: '41714e1fca135c22a849983e71c1a93d7a6330e9', class: "table-light align-middle" }, h("td", { key: '8af7acb966f43f353c7590ab02525c9f3e01b379', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: 'e6ec8d634dfd8dca68e8a9e1fc41782046f2115a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+            }))))), this.paging && (h("tfoot", { key: '556eb5c90bf12c3d1b577fc74911e3318a95b87c', class: "sticky-bottom" }, h("tr", { key: 'e69f4f7a9510131a737460568a2e398908315848', class: "table-light align-middle" }, h("td", { key: '518a89afe7e7aaf02857ef9e7f0bad0fc0220eeb', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: '4510a747b96502d86615c90f8ba0d051b3f1cec8', 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/payments-list-filters.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, h } from './index-57431c24.js';
+import { l as lodash } from './lodash-faeb5a52.js';
+
+const PaymentsListFilters = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.params = {};
+        this.setParamsOnChange = undefined;
+        this.clearParams = undefined;
+    }
+    componentWillLoad() {
+        // debounced input handler for text input
+        this.debouncedSetParamsOnChange = lodash.exports.debounce(this.setParamsOnChange, 300);
+    }
+    get paymentStatusOptions() {
+        return [
+            { label: 'All', value: '' },
+            { label: 'Pending', value: 'pending' },
+            { label: 'Authorized', value: 'authorized' },
+            { label: 'Succeeded', value: 'succeeded' },
+            { label: 'Failed', value: 'failed' },
+            { label: 'Disputed', value: 'disputed' },
+            { label: 'Refunded', value: 'refunded' }
+        ];
+    }
+    render() {
+        return (h("table-filters-menu", { key: 'a155feec339f48d77b25f4036bb185125bc0a7ce', params: this.params, clearParams: this.clearParams }, h("div", { key: '57c1528bdd86374dd2c780ae0d6b4850e7a96bcd', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'fc61d1e3c37cb3d5914b517e72ec569094c0cc8f', class: "p-2" }, h("form-control-text", { key: '7a81ebac31e074b3bd499c275d5ef68fd02d4910', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.payment_id })), h("div", { key: '3926d05f92b0a16581f1dd66dcc1aee300d2bc98', class: "p-2" }, h("form-control-text", { key: '48b999c9543ca31146fb010d02074be69544fabc', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: '64d87e35e59931fc76ab9f4e1a6c486f839b9fbb', class: "p-2" }, h("form-control-select", { key: 'a3fe39cd40dccb2143139a127e1d37ef669acf63', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_status || '' })), h("div", { key: 'a522b9e4d8e9c4e3e3bf577deb4db56ffc13fc13', class: "p-2" }, h("form-control-date", { key: 'd2d277dc5f3bf4b80b4f09b60ed7f76bedaa46ab', name: "created_after", label: "Start Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_after, showTime: true, filterTimeZone: true })), h("div", { key: 'b6e15a8cfca24097432edd77fa339c09b72ce74c', class: "p-2" }, h("form-control-date", { key: '5c27469e525dba1111eaec6a8446bdacf34baee4', name: "created_before", label: "End Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_before, showTime: true, filterTimeZone: true })))));
+    }
+};
+
+export { PaymentsListFilters as payments_list_filters };

package/dist/esm/payments-status-4937a170.js

@@ -0,0 +1,24 @@
+const MapPaymentStatusToBadge = (status) => {
+    switch (status) {
+        case 'succeeded':
+            return "<span class='badge bg-success' title='This payment was successfully captured'>Succeeded</span>";
+        case 'authorized':
+            return "<span class='badge bg-primary' title='This card payment was authorized, but not captured. It could still succeed or fail.'>Authorized</span>";
+        case 'pending':
+            return "<span class='badge bg-primary' title='This ACH payment was processed, but the funds haven't settled. It could still succeed or fail.'>Pending</span>";
+        case 'achFailed':
+            return "<span class='badge bg-danger' title='The funds couldn't be collected for this ACH payment (in addition to the original payment, an ACH return and fee will appear in a payout)'>Failed</span>";
+        case 'failed':
+            return "<span class='badge bg-danger' title='This card payment didn't go through (it won't appear in a payout)'>Failed</span>";
+        case 'canceled':
+            return "<span class='badge bg-danger' title='This payment was canceled'>Canceled</span>";
+        case 'disputed':
+            return "<span class='badge bg-secondary' title='The account holder disputed this payment. The amount has been returned and a fee assessed.'>Disputed</span>";
+        case 'fully_refunded':
+            return "<span class='badge bg-secondary' title='The full amount of this payment has been refunded'>Fully Refunded</span>";
+        case 'partially_refunded':
+            return "<span class='badge bg-secondary' title='A portion of this payment has been refunded'>Partially Refunded</span>";
+    }
+};
+
+export { MapPaymentStatusToBadge as M };

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

@@ -1,7 +1,8 @@
 import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
-import { d as MapPayoutStatusToBadge, f as formatCurrency, b as formatDate, c as formatTime } from './utils-620f2d78.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 { b as formatCurrency, a as formatDate, f as formatTime } from './utils-3daada24.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-218275b7.js';
 import { S as StyledHost } from './styled-host-e0ddb759.js';
+import { M as MapPayoutStatusToBadge } from './payouts-status-cd58e525.js';
 
 const PayoutDetailsCore = class {
     constructor(hostRef) {
@@ -55,7 +56,7 @@ const PayoutDetailsCore = class {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'b538a72063f57deea45d1ce74c173156a499e08f' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '5ea45dac87ab9959a0d821c2d2cae5ee9cf0894b', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '372a13f727ec9d0d375b37ae029a5ab2df3d72d3', 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: '9afd1e327235bb0d3a48697ea01b68a5516789c2', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'f00add046d617c12540be0cfc4540808719e0e65', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '239849324e65aa9eea6070c4fca8d2a85c490bb1', title: "ID", value: this.payout.id }), h("div", { key: '0f2ea65e410f9e89499e60b14b91005d3e98838d', class: "m-4" }, h("button", { key: '09b9efcd24c0aa3364be75f2ec07055a381f100a', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'a8ff31263826356fb0c0ea7dbc3433e04e45d413', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '47923246812e7ef3828fc33914c3f01cb6a38b31', sectionTitle: "Details" }), h("div", { key: '37bf9c3a58e2a2678bb96b6aaca739e032ea61b9', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '772024dd509058d54e6da5d3a6450a163774fd36', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '2925020997b1da4e263ae44ef55605765407c386', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'e34388b87e09d4c94ca4463f3a5ede078f41d938', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '931e4fc84ad6932b40824cdbb8bf8909bacee2c7', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '38c1be3b0872d990dfafcdd796ed2a9be6a8bfa1', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '0057ad126e391f2f55307a3c6035c8feb1ca959b', sectionTitle: "Account" }), h("div", { key: '2d19e06db0a626313481f91a4602239634c846c7', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '147e30b77458b02cc0d996ba91e253dfa11e58a0', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '32f4ffcd4c44e3adc97e94da99aaafa0412fe258', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '293bbea794dd126fbaada4b263f2b85ed0d9fbb4', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '0dbb60bb773745657961d1a20a3621ba319436c0', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '5dbf5b3225b33cf7d6f838e0621eac4ace8351c9', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'e89cdd81cb5ef15d964c0a00a0bbb2f57fadc5d2', sectionTitle: 'Metadata' }), h("div", { key: '6c3da5b9aeaef544d28504708af32219164c37ca', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '0ad346c1bfb3639852b64fc3ab4906efad584f54', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '77668046c9b20d8e5fa2b1cf278925a8646052d7' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '975c61e183b809b42e96b1785a9c8c60ac397231', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '0258d3adf8c1f65c0f78446a3c5fa6c5a39fdde4', 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: 'd845cd2abc1d82cc62ea7116a405570b235bcde0', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '8ae3e1f22c0fb5fd76e1fdbecb91bc70be0ffe21', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '8d0405aa11c546ddc92b4e2e65c651a4aae2c82f', title: "ID", value: this.payout.id }), h("div", { key: 'a2b2b06a33009bb27c60aa0d2af74f0ec18db3d1', class: "m-4" }, h("button", { key: 'ae32f0567a4d4d533a322c20668b2a165fe71f4c', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '1519308f535b2f7dbc065f3320b60755c732f5e4', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'b4da3442d6e86f9a4d6b2a8ffd6ed40053294151', sectionTitle: "Details" }), h("div", { key: '1a83acdafddfda491141cc68b70fbf2c9d4df69c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ac81d5cb6b185a4e40c5a27bd75113657a86d087', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '9b327577694e255d466a6009de0d39d67a144063', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '8ac6c81f11caa365e6b530bedeb26a7682199538', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '1cd8424c8299f8f334bd08e85cbe81018dfd69c3', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '44f6cbf82e5f79d8fa532923233d6a5eedeef19c', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'fc4366a767fd89ab25939d1d3cef9e2372c6b7ba', sectionTitle: "Account" }), h("div", { key: '7ea8ccb28ef7cb32490e82cf8470c88de6275fcb', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9e50c25012fe1873ef4bf8dd65d9aa1f0b2f6252', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'be19c35d8766716abe7a94a43ff1360fb2bc8caf', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f3ceaa15d8e8c8de8a4b57d431049b5f1f12b7aa', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '25468ae8b033172207f130448926eda8333df841', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'c5b60f0bfa2cfdc826cc54670ab66af199c8babc', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '78392b7f27b6ceb3499c512f2174e3d4b4058f63', sectionTitle: 'Metadata' }), h("div", { key: '43c5439322874b89612f37ec41e906fda030dd3b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2929f26c8b7932862cbb735bc8644eabd9494e14', metadata: this.payout.metadata })))))));
     }
     static get watchers() { return {
         "getPayout": ["getPayoutWatcher"]

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

@@ -1,12 +1,12 @@
 import { h, r as registerInstance, c as createEvent } from './index-57431c24.js';
+import './Checkout-0b4086f8.js';
 import { p as pagingDefaults } from './Pagination-afc8f96d.js';
 import './Payment-30790721.js';
-import { a as PayoutStatuses, b as PayoutStatusesSafeNames } from './Payout-dfe15b00.js';
-import { b as formatDate, c as formatTime, f as formatCurrency } from './utils-620f2d78.js';
+import './SubAccount-7f7e4c56.js';
+import { a as formatDate, f as formatTime, b as formatCurrency } from './utils-3daada24.js';
 import { a as ComponentErrorCodes, C as ComponentErrorSeverity } from './ComponentError-3ce7f437.js';
-import { t as tableExportedParts } from './exported-parts-abd4c027.js';
-import { S as StyledHost } from './styled-host-e0ddb759.js';
 import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './table-loading-state-356c7215.js';
+import { M as MapPayoutStatusToBadge } from './payouts-status-cd58e525.js';
 
 const DownloadIcon = (props) => (h("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24' }, props),
     h("path", { d: 'M12 15.5l-5-5 1.41-1.41L12 12.67l3.59-3.58L17 10.5l-5 5z' }),
@@ -43,22 +43,6 @@ const PayoutsListCore = class {
             delete newParams.before_cursor;
             this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
         };
-        this.mapStatusToBadge = (status) => {
-            switch (status) {
-                case PayoutStatuses.scheduled:
-                    return `<span class="badge bg-primary" title='Batched and scheduled to be transferred'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.in_transit:
-                    return `<span class="badge bg-primary" title='Transfer to your bank account has been initiated'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.failed:
-                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.canceled:
-                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.forwarded:
-                    return `<span class="badge bg-secondary" title='The funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.paid:
-                    return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${PayoutStatusesSafeNames[status]}</span>`;
-            }
-        };
         this.rowClickHandler = (e) => {
             const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedPayoutID)
@@ -136,7 +120,7 @@ const PayoutsListCore = class {
             formatCurrency(payout.fees_total),
             formatCurrency(payout.other_total),
             formatCurrency(payout.amount),
-            { type: 'inner', value: this.mapStatusToBadge(payout.status) },
+            { type: 'inner', value: MapPayoutStatusToBadge(payout.status) },
             (h(DownloadIcon, { title: "Export CSV", onClick: () => this.downloadCSV(payout.id), style: { height: '24px', width: '24px', cursor: 'pointer' } })),
         ]);
     }
@@ -150,8 +134,8 @@ const PayoutsListCore = class {
         return !this.showEmptyState && !this.showErrorState;
     }
     render() {
-        return (h(StyledHost, { key: '832eff9b77800d6631c73559b61af3b8c5c1eb5b', exportedparts: tableExportedParts }, h("div", { key: 'b2a127643e0a48888c643f77d9235082502a2549', class: "row gy-3 mb-4" }, h("div", { key: '6b2ef796b48da76e816ed5090126bf6c891687ce', class: "col-2" }, h("form-control-date", { key: '52c7507bd47a665d8986cdde06a1e26f30a5f9e0', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: 'acb3307eec6b6d36b229d59683782bfbb2e65239', class: "col-2" }, h("form-control-date", { key: '294f40153e9eb61b53152763ff54e942620962a0', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '0d55a8fe0017a7fc3a3a675b11aeff9f0eb71cef', class: "table-wrapper" }, h("table", { key: 'c7fe79007a7ddb600117df904e376465abec406e', class: "table table-hover" }, h("thead", { key: '451a5f744c76a6b6beb2ad0cafd3677fd0f0b190', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'c7b58d5e0a96536df39673f8ac928c0809fe7f64', class: "table-light text-nowrap", part: "table-head-row" }, this.columnData.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, Array.isArray(column) ? column[0] : column))))), h("tbody", { key: '638cac393da61b6c73a7b287f5c9b13d0817390e', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'dd768838da9b29c4f1e251eb27ba2c5b467a4a7d', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '412fe6a904e37f095c5c7a0aeb2356b893cfef7b', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '144bf2bf71789a1a29b638291ec5ca16ab31b2fc', 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) => ((dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type) ? (h("td", { part: "table-cell", innerHTML: dataEntry.value })) : (h("td", { part: "table-cell" }, dataEntry)))))))), this.paging && (h("tfoot", { key: '0df80be6f5c3e2cd18fa27c0ec2e1cb560348908', class: "sticky-bottom" }, h("tr", { key: '0d25309ea10e119e07e6d5438b70dd5a83b22f2b', class: "table-light align-middle" }, h("td", { key: '25a111ea022692ea8502ddfdf92dd9811fde6024', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: '5cc20eba110ab7c974dc43c8d20e94f6cb17ec81', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: '536d8a921bb7b6517dc65afd307507668e74e92f' }, h("div", { key: '5d33c651af05927db51e7d855772ff1c60f71ef0', class: "row gy-3 mb-4" }, h("div", { key: '53f246db4d96ef4ac445c0b57d4da3471c9fdbdb', class: "col-2" }, h("form-control-date", { key: 'd6e711e3e92e53cff8e2ee4a8c4a3788584c0f77', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: '86ab746d1e7f9e11dfeca4cd185909d9d447fe85', class: "col-2" }, h("form-control-date", { key: '232edbf8284d14ed3659a199b144eb5596e22b88', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '10c720e38bd24ff9431d59a28ec46f62bd8c04a7', class: "table-wrapper" }, h("table", { key: 'fdbf0978c018315d5e67caf9273e59bf4e50205c', class: "table table-hover" }, h("thead", { key: 'f3fc1532a46f8b92eff8d385462fe8ba9448840b', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'fe552206bf026258b40031c10a030fb32f98879d', class: "table-light text-nowrap", part: "table-head-row" }, this.columnData.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, Array.isArray(column) ? column[0] : column))))), h("tbody", { key: '1247efd4d95cfb257d052acf9dbcac84203aaaaf', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '1107d1a965651133504db486d4d0b692fe9735e9', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '8435806053ae9d16a05cc031f33d3b97e4d02248', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '01213ac9d7f63e0eaa11c38f4aebe59aef3650d9', 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) => ((dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type) ? (h("td", { part: "table-cell", innerHTML: dataEntry.value })) : (h("td", { part: "table-cell" }, dataEntry)))))))), this.paging && (h("tfoot", { key: 'd2a1b0dd2340cf64816ad05c1c03f136b21df0a6', class: "sticky-bottom" }, h("tr", { key: 'abb87b7c026475da175a6bec772887bf3ac08933', class: "table-light align-middle" }, h("td", { key: '32070f512aebc77a42693a93e717d31ef9ed4509', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: '57ee656553f4afee96f5dbdac5866f103cde97eb', 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/payouts-status-cd58e525.js

@@ -0,0 +1,22 @@
+const MapPayoutStatusToBadge = (status) => {
+    switch (status) {
+        case 'canceled':
+            return "<span class='badge bg-danger' title='Transfer to your bank account failed'>Canceled</span>";
+        case 'failed':
+            return "<span class='badge bg-danger' title='Transfer to your bank account failed'>Failed</span>";
+        case 'forwarded':
+            return "<span class='badge bg-secondary' title='This payout initially failed; the funds have been forwarded to your next successful payout'>Forwarded</span>";
+        case 'in_transit':
+            return "<span class='badge bg-primary' title='Transfer to your bank account has been initiated'>In Transit</span>";
+        case 'paid':
+            return "<span class='badge bg-success' title='Successfully deposited into your bank account'>Paid</span>";
+        case 'pending':
+            return "<span class='badge bg-primary' title='Batched and scheduled to be transferred'>Pending</span>";
+        case 'scheduled':
+            return "<span class='badge bg-primary' title='Batched and scheduled to be transferred'>Scheduled</span>";
+        case 'withdrawn':
+            return "<span class='badge bg-success' title='Negative payout balance successfully withdrawn from your bank account'>Withdrawn</span>";
+    }
+};
+
+export { MapPayoutStatusToBadge as M };

package/dist/esm/{schema-validations-e725d701.js → schema-validations-c1728516.js}

@@ -1,4 +1,4 @@
-import { a as create$6, b as create$8 } from './index.esm-fc4f5c0c.js';
+import { a as create$6, b as create$8 } from './index.esm-ed37201b.js';
 import { S as StateOptions } from './state-options-a356fb11.js';
 import { b as businessClassificationOptions, a as businessServiceReceivedOptions, r as recurringPaymentsOptions, s as seasonalBusinessOptions, c as bankAccountTypeOptions } from './business-form-options-d790973e.js';
 

package/dist/esm/table-75364107.js

@@ -0,0 +1,18 @@
+class Table {
+    get columnData() {
+        return this.columnKeys.map((key) => this.tableColumns[key]());
+    }
+    get rowData() {
+        return this.collection.map((checkout) => {
+            return this.columnKeys.map((key) => this.tableCells[key](checkout[key]));
+        });
+    }
+    constructor(collection, columns, tableColumns, tableCells) {
+        this.columnKeys = columns.split(',');
+        this.collection = collection;
+        this.tableColumns = tableColumns;
+        this.tableCells = tableCells;
+    }
+}
+
+export { Table as T };

package/dist/esm/table-filters-menu.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, h } from './index-57431c24.js';
+import { B as Button } from './button-34e75e0f.js';
+import { h as hasFilters } from './utils-3a4d8f3a.js';
+
+const TableFiltersMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.anchorButton = undefined;
+        this.menu = undefined;
+        this.showClearButton = false;
+        this.params = undefined;
+        this.clearParams = undefined;
+    }
+    watchParamsHandler(newValue) {
+        this.showClearButton = hasFilters(newValue);
+    }
+    show() {
+        this.menu.classList.add('show');
+    }
+    hide() {
+        this.menu.classList.remove('show');
+    }
+    render() {
+        return (h("div", { key: 'de116fd5406fcc4feb36df24f8fc3162b39567e8', class: "d-flex gap-2" }, h("div", { key: '07c7d885acc4816d28e3c2653d5e4c9a7ea42108', class: "dropdown pb-3" }, h(Button, { key: '34cee2bf49991340c4291c5014d17bfa9c3593d8', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '19640a1ab19bdda14398c4a76392584c6bf1e6d9', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'a72ce2a8ab9fc317236128980bd4bc9be92faf2c', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '008b23e2dc775ec59247df27379780d1ccdd81eb' })))), h("div", { key: '5b60c0821e4cfe5395c6eca11957e18446039cd7' }, h(Button, { key: '56d032309bdff48f6501ae6be6344860d008f481', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+    }
+    static get watchers() { return {
+        "params": ["watchParamsHandler"]
+    }; }
+};
+
+export { TableFiltersMenu as table_filters_menu };

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

@@ -0,0 +1,162 @@
+import { h, r as registerInstance, c as createEvent } from './index-57431c24.js';
+import './Checkout-0b4086f8.js';
+import { p as pagingDefaults } from './Pagination-afc8f96d.js';
+import './Payment-30790721.js';
+import './SubAccount-7f7e4c56.js';
+import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './table-loading-state-356c7215.js';
+import { o as onFilterChange } from './utils-3a4d8f3a.js';
+import { T as Table } from './table-75364107.js';
+
+const MapTerminalStatusToBadge = (status) => {
+    switch (status) {
+        case 'connected':
+            return "<span class='badge bg-success' title='This terminal is connected.'>Connected</span>";
+        case 'disconnected':
+            return "<span class='badge bg-danger' title='This terminal is disconnected.'>Disconnected</span>";
+        case 'unknown':
+            return "<span class='badge bg-secondary' title='The status of this terminal is unknown'>Unknown</span>";
+    }
+};
+
+const defaultColumnsKeys = 'nickname,provider_id,status';
+const terminalTableColumns = {
+    nickname: () => (h("th", { part: "table-head-cell", scope: "col", title: "The nickname associated with the terminal" }, "Nickname")),
+    provider_id: () => (h("th", { part: "table-head-cell", scope: "col", title: "The provider ID of the terminal" }, "Provider ID")),
+    sub_account_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the terminal" }, "Sub Account")),
+    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each terminal" }, "Status")),
+};
+const terminalTableCells = {
+    nickname: (value) => (h("td", null, value)),
+    provider_id: (value) => (h("td", null, value)),
+    sub_account_name: (value) => (h("td", null, value)),
+    status: (value) => (h("td", { innerHTML: MapTerminalStatusToBadge(value) })),
+};
+
+const TerminalsListCore = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rowClicked = createEvent(this, "terminal-row-clicked", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.handleClickPrevious = (beforeCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.after_cursor;
+            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.rowClickHandler = (e) => {
+            const clickedTerminalID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedTerminalID)
+                return;
+            this.rowClicked.emit(this.terminals.find((terminal) => terminal.id === clickedTerminalID));
+        };
+        this.setParamsOnChange = (name, value) => {
+            let newParams = { [name]: value };
+            this.params = onFilterChange(newParams, this.params);
+        };
+        this.clearParams = () => {
+            this.errorMessage = '';
+            this.params = {};
+        };
+        this.getTerminals = undefined;
+        this.getSubAccounts = undefined;
+        this.columns = defaultColumnsKeys;
+        this.terminals = [];
+        this.terminalsTable = new Table([], this.columns, terminalTableColumns, terminalTableCells);
+        this.subAccounts = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = {};
+    }
+    updateOnPropChange() {
+        this.fetchTerminals();
+    }
+    componentWillLoad() {
+        if (this.getTerminals && this.getSubAccounts) {
+            this.fetchTerminals();
+        }
+    }
+    fetchTerminals() {
+        this.loading = true;
+        this.getTerminals({
+            params: this.params,
+            onSuccess: async ({ terminals, pagingInfo }) => {
+                this.terminals = terminals;
+                this.paging = pagingInfo;
+                this.terminalsTable = new Table(this.terminals, this.columns, terminalTableColumns, terminalTableCells);
+                const shouldFetchSubAccounts = this.terminalsTable.columnKeys.includes('sub_account_name');
+                if (shouldFetchSubAccounts) {
+                    await this.fetchSubAccounts();
+                }
+                else {
+                    this.loading = false;
+                }
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    async fetchSubAccounts() {
+        this.getSubAccounts({
+            params: this.subAccountParams,
+            onSuccess: ({ subAccounts }) => {
+                this.subAccounts = subAccounts;
+                this.terminals = this.terminals.map((terminal) => {
+                    var _a;
+                    terminal.sub_account_name = (_a = this.subAccounts.find((subAccount) => subAccount.id === terminal.account_id)) === null || _a === void 0 ? void 0 : _a.name;
+                    return terminal;
+                });
+                this.loading = false;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    get subAccountParams() {
+        let accountIdNumbers = this.terminals.map((terminal) => terminal.account_id);
+        let uniqueAccountIds = [...new Set(accountIdNumbers)];
+        let accountIdString = uniqueAccountIds.join(',');
+        return { sub_account_id: accountIdString };
+    }
+    get entityId() {
+        return this.terminals.map((terminal) => terminal.id);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.terminalsTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
+    }
+    render() {
+        return (h("div", { key: 'd6bd09387fc558286f09cc98e7b5423a57410440' }, h("terminals-list-filters", { key: '27f3b5ca45bad96695364e96f0c047db8465f061', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '693ef5e9383ad2d4433a79872d51a922f1bb0cbb', class: "table-wrapper" }, h("table", { key: 'd6779ca5094593e21ddee4f0b236b0fa94c7cfe5', class: "table table-hover" }, h("thead", { key: '5b7524c86b32d61d2b087c9ace5673276a6525e2', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '6f3f3f560f5eaa38a700aacf850c01ce7224c617', class: "table-light text-nowrap", part: "table-head-row" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: 'd65612fc80a216dbbce686e1e5cdd06bc7c934ad', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '9ffbafb5105380d685e9cad76b627afe96c8e724', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '692c6cb35da2c9057bbac4e5d8e7536017ef1694', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '5072ca0cb9f9ca3d77fc394c935cc1ae473b8864', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.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)))), this.paging && (h("tfoot", { key: 'b043af164be76a5bdbaf53e5a0563f48049925b0', class: "sticky-bottom" }, h("tr", { key: '2fed67d847e113c371213643c07a79208701c1e5', class: "table-light align-middle" }, h("td", { key: 'b3fac5af2d92a8ea93daefd24310ed5b45d32764', part: "pagination-bar", colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '4e5a82670a7aa1fee01b71fbc20b65824300a07f', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+    }
+    static get watchers() { return {
+        "params": ["updateOnPropChange"],
+        "getTerminals": ["updateOnPropChange"],
+        "getSubAccounts": ["updateOnPropChange"],
+        "columns": ["updateOnPropChange"]
+    }; }
+};
+
+export { TerminalsListCore as terminals_list_core };

package/dist/esm/terminals-list-filters.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h } from './index-57431c24.js';
+import { l as lodash } from './lodash-faeb5a52.js';
+
+const TerminalsListFilters = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.params = {};
+        this.setParamsOnChange = undefined;
+        this.clearParams = undefined;
+    }
+    componentWillLoad() {
+        // debounced input handler for text input
+        this.debouncedSetParamsOnChange = lodash.exports.debounce(this.setParamsOnChange, 300);
+    }
+    get terminalStatusOptions() {
+        return [
+            { label: 'All', value: '' },
+            { label: 'Connected', value: 'connected' },
+            { label: 'Disconnected', value: 'disconnected' },
+            { label: 'Unknown', value: 'unknown' },
+        ];
+    }
+    render() {
+        return (h("table-filters-menu", { key: '4bfd04cf078878811b2692ff166598deb22b7d92', params: this.params, clearParams: this.clearParams }, h("div", { key: '470d4eb34429c887d03beb0caedd8c9486d18900', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '34d34e8c90c36b7cab1fb3442cb04e58f9ebb334', class: "p-2" }, h("form-control-text", { key: '5234008261646f1a090686fc0d795a6e846c9e04', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: 'fdd089fa29bf030ed3825993ff4e50a9ecefa1dc', class: "p-2" }, h("form-control-select", { key: '0c078ec1ecffea26e0cec5633cb4748337a75643', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.status || '' })))));
+    }
+};
+
+export { TerminalsListFilters as terminals_list_filters };