@justifi/webcomponents 4.22.0 → 4.22.1

package/dist/cjs/terminals-table-99a7b87b.js

@@ -0,0 +1,32 @@
+'use strict';
+
+const index = require('./index-fb499e95.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: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The nickname associated with the terminal" }, "Nickname")),
+    provider_id: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The provider ID of the terminal" }, "Provider ID")),
+    sub_account_name: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the terminal" }, "Sub Account")),
+    status: () => (index.h("th", { part: "table-head-cell", scope: "col", title: "The current status of each terminal" }, "Status")),
+};
+const terminalTableCells = {
+    nickname: (value) => (index.h("td", null, value)),
+    provider_id: (value) => (index.h("td", null, value)),
+    sub_account_name: (value) => (index.h("td", null, value)),
+    status: (value) => (index.h("td", { innerHTML: MapTerminalStatusToBadge(value) })),
+};
+
+exports.defaultColumnsKeys = defaultColumnsKeys;
+exports.terminalTableCells = terminalTableCells;
+exports.terminalTableColumns = terminalTableColumns;

package/dist/collection/components/checkouts-list/checkouts-list-core.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { pagingDefaults } from "../../api";
 import { onFilterChange } from "../../ui-components/filters/utils";
 import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
-import { defaultColumnsKeys, checkoutTableColumns, checkoutTableCells } from "./checkouts-table";
+import { checkoutTableColumns, checkoutTableCells } from "./checkouts-table";
 import { Table } from "../../utils/table";
 export class CheckoutsListCore {
     constructor() {
@@ -32,9 +32,9 @@ export class CheckoutsListCore {
         };
         this.getCheckouts = undefined;
         this.getSubAccounts = undefined;
-        this.columns = defaultColumnsKeys;
+        this.columns = undefined;
         this.checkouts = [];
-        this.checkoutsTable = new Table([], this.columns, checkoutTableColumns, checkoutTableCells);
+        this.checkoutsTable = undefined;
         this.subAccounts = [];
         this.loading = true;
         this.errorMessage = undefined;
@@ -45,6 +45,7 @@ export class CheckoutsListCore {
         this.fetchCheckouts();
     }
     componentWillLoad() {
+        this.checkoutsTable = new Table(this.checkouts, this.columns, checkoutTableColumns, checkoutTableCells);
         if (this.getCheckouts && this.getSubAccounts) {
             this.fetchCheckouts();
         }
@@ -56,7 +57,7 @@ export class CheckoutsListCore {
             onSuccess: async ({ checkouts, pagingInfo }) => {
                 this.checkouts = checkouts;
                 this.paging = pagingInfo;
-                this.checkoutsTable = new Table(this.checkouts, this.columns, checkoutTableColumns, checkoutTableCells);
+                this.checkoutsTable.collectionData = this.checkouts;
                 const shouldFetchSubAccounts = this.checkoutsTable.columnKeys.includes('sub_account_name');
                 if (shouldFetchSubAccounts) {
                     await this.fetchSubAccounts();
@@ -118,7 +119,7 @@ export class CheckoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '2734f704620a60a5bedc46e3e41ab758af3fcb33' }, h("checkouts-list-filters", { key: '88ec654a9e15b976c47baee51ebed8c4bd8f11d7', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '929ce2e4dbee2b6aad94705b90b33527ef88f324', class: "table-wrapper" }, h("table", { key: '734d75f3f6d0189ce21560a89e9bc28628188798', class: "table table-hover" }, h("thead", { key: '6b1bba45aaa29b741cf3422902bf1d63cb89fe9a', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '54f3e19d0d8b1414e9c0df4a6b9cd59516eb0e2e', class: "table-light text-nowrap", part: "table-head-row" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: '7454d36c6595e8341c0405833a919c56cd09fa3d', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'b6fc81a9293727005f0a13afbf518e57efeb8469', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'ce449e05b1c0643f8a2157f44f2f2af16ee08f8c', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '89d0b6d1c4eb966fe0195cfe6e854a7cca10c7ed', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.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: 'ac6bb6d3cf02abc3f386a7d6bf92927f4a0ad244', class: "sticky-bottom" }, h("tr", { key: '352544ebda3e9a899fcb640b350fd60c55b97d17', class: "table-light align-middle" }, h("td", { key: '2dfc279e5e94bb1c0ea75670eb6584ff39a98f4a', part: "pagination-bar", colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'a8ba0fd21c0dd9be75662b62db78980a74d5fbc6', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: '8d2c1fd960b2b3a66f3a1bf648b75576ad2e8857' }, h("checkouts-list-filters", { key: '18ba9bf560499112f71a690da751c8e3c4d345a7', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '12cf6ee2912ac6a9518634ebd470dac5f7623aff', class: "table-wrapper" }, h("table", { key: '1ea2c118d7efb620dc1f39db55a510a8a473cb31', class: "table table-hover" }, h("thead", { key: '5e334a090be56c82b11ae7584bdf4014cc8743c7', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '233137a8b4e30bac28ded78010199bfecd0ac4e7', class: "table-light text-nowrap", part: "table-head-row" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: 'd4ed9d4bf3ac17d4dc7294b875734e02996c7444', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'a7afbb627c768139af4244da5c12fae493dceafb', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '802c43c8da770bca9a249a88d115901e9b14e102', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'f1cd197cf7d1d5d81868a5abfafa40df762ca3c8', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.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: 'f0c367854322c341515bc481159101e9659117c7', class: "sticky-bottom" }, h("tr", { key: '88bc665c23665eddc4c88d27acc8c8f1cb39e277', class: "table-light align-middle" }, h("td", { key: '8be265c9b43033cfd3e2c4b3f12ac6d6c104e53d', part: "pagination-bar", colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '6abdb6091b78e58ec71ac6bf66f278ed9b6542fb', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get is() { return "checkouts-list-core"; }
     static get properties() {
@@ -178,8 +179,7 @@ export class CheckoutsListCore {
                     "text": ""
                 },
                 "attribute": "columns",
-                "reflect": false,
-                "defaultValue": "defaultColumnsKeys"
+                "reflect": false
             }
         };
     }

package/dist/collection/components/checkouts-list/checkouts-list.js

@@ -8,6 +8,7 @@ import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/Component
 import { SubAccountService } from "../../api/services/subaccounts.service";
 import { makeGetSubAccounts } from "../../api/get-subaccounts";
 import { StyledHost, tableExportedParts } from "../../ui-components";
+import { defaultColumnsKeys } from "./checkouts-table";
 /**
   * @exportedPart label: Label for inputs
   * @exportedPart input: The input fields
@@ -42,7 +43,7 @@ export class CheckoutsList {
         this.accountId = undefined;
         this.authToken = undefined;
         this.apiOrigin = config.proxyApiOrigin;
-        this.columns = undefined;
+        this.columns = defaultColumnsKeys;
     }
     componentWillLoad() {
         checkPkgVersion();
@@ -88,7 +89,7 @@ export class CheckoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '42ff5c1cff57b185200aa0c31f4fdb44b3401c91', exportparts: tableExportedParts }, h("checkouts-list-core", { key: '55565a5f61c671bae9554c7d9ecab044c7bb987c', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '6e6faed5df0fcdc48018650867672c5d325d1934', exportparts: tableExportedParts }, h("checkouts-list-core", { key: '92ceb10f7bd76864629ed0990a7f34fab76ce517', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-checkouts-list"; }
     static get encapsulation() { return "shadow"; }
@@ -161,7 +162,8 @@ export class CheckoutsList {
                     "text": ""
                 },
                 "attribute": "columns",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "defaultColumnsKeys"
             }
         };
     }

package/dist/collection/components/terminals-list/terminals-list-core.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { pagingDefaults } from "../../api";
 import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { onFilterChange } from "../../ui-components/filters/utils";
-import { defaultColumnsKeys, terminalTableColumns, terminalTableCells } from "./terminals-table";
+import { terminalTableColumns, terminalTableCells } from "./terminals-table";
 import { Table } from "../../utils/table";
 export class TerminalsListCore {
     constructor() {
@@ -32,9 +32,9 @@ export class TerminalsListCore {
         };
         this.getTerminals = undefined;
         this.getSubAccounts = undefined;
-        this.columns = defaultColumnsKeys;
+        this.columns = undefined;
         this.terminals = [];
-        this.terminalsTable = new Table([], this.columns, terminalTableColumns, terminalTableCells);
+        this.terminalsTable = undefined;
         this.subAccounts = [];
         this.loading = true;
         this.errorMessage = undefined;
@@ -45,6 +45,7 @@ export class TerminalsListCore {
         this.fetchTerminals();
     }
     componentWillLoad() {
+        this.terminalsTable = new Table(this.terminals, this.columns, terminalTableColumns, terminalTableCells);
         if (this.getTerminals && this.getSubAccounts) {
             this.fetchTerminals();
         }
@@ -56,7 +57,7 @@ export class TerminalsListCore {
             onSuccess: async ({ terminals, pagingInfo }) => {
                 this.terminals = terminals;
                 this.paging = pagingInfo;
-                this.terminalsTable = new Table(this.terminals, this.columns, terminalTableColumns, terminalTableCells);
+                this.terminalsTable.collectionData = this.terminals;
                 const shouldFetchSubAccounts = this.terminalsTable.columnKeys.includes('sub_account_name');
                 if (shouldFetchSubAccounts) {
                     await this.fetchSubAccounts();
@@ -118,7 +119,7 @@ export class TerminalsListCore {
         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 })))))))));
+        return (h("div", { key: '7f8bc3f39c1250281c2f2ad6fe081fc71bb20e79' }, h("terminals-list-filters", { key: 'd1184427fc74d970bd69d56a00d0ef4b7672516b', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '582e37429a153cd17bf3c7ebb16e7330c774f986', class: "table-wrapper" }, h("table", { key: '1c03b2ddc8ca2da6b1f2147113f7832b3f27ec1d', class: "table table-hover" }, h("thead", { key: '811d48219cc04256f4a37854504252ff53392bd9', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'fafa54ac3abba993dcf38ca2e47f248031226041', class: "table-light text-nowrap", part: "table-head-row" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '8c9072bf6ebb7f720f1fad0faa47c72c8ed84dd2', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'abddb3ce09e39245c0455893f09e54cc631b26bf', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '166a461ee8aaf7405fc0a2b12cd17e1e1e9553f3', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '969bbfcce66b6bcee4dadabe465eaef37022d13b', 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: 'c63268c11facddaa44452c58743ad9c03f492898', class: "sticky-bottom" }, h("tr", { key: '0e247f8968ad4ed7e8c001354b1c29d5bf7976aa', class: "table-light align-middle" }, h("td", { key: '51c5157453d911f5bf370ba2ac6a556dd1592f24', part: "pagination-bar", colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '3a3ba65f31099125e9c01bc9c8c001c6437ed720', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get is() { return "terminals-list-core"; }
     static get properties() {
@@ -178,8 +179,7 @@ export class TerminalsListCore {
                     "text": ""
                 },
                 "attribute": "columns",
-                "reflect": false,
-                "defaultValue": "defaultColumnsKeys"
+                "reflect": false
             }
         };
     }

package/dist/collection/components/terminals-list/terminals-list.js

@@ -8,6 +8,7 @@ import { makeGetTerminals } from "./get-terminals";
 import { SubAccountService } from "../../api/services/subaccounts.service";
 import { makeGetSubAccounts } from "../../api/get-subaccounts";
 import { StyledHost, tableExportedParts } from "../../ui-components";
+import { defaultColumnsKeys } from "./terminals-table";
 /**
   * @exportedPart label: Label for inputs
   * @exportedPart input: The input fields
@@ -42,7 +43,7 @@ export class TerminalsList {
         this.accountId = undefined;
         this.authToken = undefined;
         this.apiOrigin = config.proxyApiOrigin;
-        this.columns = undefined;
+        this.columns = defaultColumnsKeys;
     }
     componentWillLoad() {
         checkPkgVersion();
@@ -88,7 +89,7 @@ export class TerminalsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'b150133d9e787d0a4f32d92d9fb26df50391e632', exportparts: tableExportedParts }, h("terminals-list-core", { key: '59302d93d0a308c34aacabf7e5a006099eaff2d6', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '8ffe95f21b5ef8c1c15fc0e22a9c824cff758ee6', exportparts: tableExportedParts }, h("terminals-list-core", { key: 'a550f1f85b84f6cc06bd93b5e5a9ec726b72b46c', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminals-list"; }
     static get encapsulation() { return "shadow"; }
@@ -161,7 +162,8 @@ export class TerminalsList {
                     "text": ""
                 },
                 "attribute": "columns",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "defaultColumnsKeys"
             }
         };
     }

package/dist/collection/utils/table.js

@@ -7,6 +7,9 @@ export class Table {
             return this.columnKeys.map((key) => this.tableCells[key](checkout[key]));
         });
     }
+    set collectionData(collection) {
+        this.collection = collection;
+    }
     constructor(collection, columns, tableColumns, tableCells) {
         this.columnKeys = columns.split(',');
         this.collection = collection;

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-11-26T20:10:08",
+  "timestamp": "2024-11-27T17:03:50",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.19.2",
@@ -186,7 +186,6 @@
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
-          "default": "defaultColumnsKeys",
           "values": [
             {
               "type": "string"
@@ -8962,6 +8961,7 @@
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
+          "default": "defaultColumnsKeys",
           "values": [
             {
               "type": "string"
@@ -15489,6 +15489,7 @@
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
+          "default": "defaultColumnsKeys",
           "values": [
             {
               "type": "string"
@@ -17454,7 +17455,6 @@
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
-          "default": "defaultColumnsKeys",
           "values": [
             {
               "type": "string"

package/dist/esm/{Analytics-777962a4.js → Analytics-a46c0c00.js}

@@ -1,4 +1,4 @@
-import { p as packageJson } from './package-5144835c.js';
+import { p as packageJson } from './package-6c5cc174.js';
 import { c as config } from './config-27764a9d.js';
 import { A as Api } from './Api-391d00e2.js';
 

package/dist/esm/{check-pkg-version-bac8fac0.js → check-pkg-version-ed46fa3b.js}

@@ -1,4 +1,4 @@
-import { p as packageJson } from './package-5144835c.js';
+import { p as packageJson } from './package-6c5cc174.js';
 
 const latestVersion = async (packageName) => {
     const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');

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

@@ -1,51 +1,13 @@
-import { h, r as registerInstance, c as createEvent } from './index-57431c24.js';
+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 './SubAccount-7f7e4c56.js';
 import { o as onFilterChange } from './utils-3a4d8f3a.js';
 import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './table-loading-state-356c7215.js';
-import { f as formatTime, a as formatDate, b as formatCurrency } from './utils-3daada24.js';
-import { T as Table } from './table-75364107.js';
-
-const MapCheckoutStatusToBadge = (status) => {
-    switch (status) {
-        case 'created':
-            return "<span class='badge bg-primary' title='The checkout has been created'>Created</span>";
-        case 'completed':
-            return "<span class='badge bg-success' title='The checkout has been completed'>Completed</span>";
-        case 'attempted':
-            return "<span class='badge bg-secondary' title='The checkout has been attempted'>Attempted</span>";
-        case 'expired':
-            return "<span class='badge bg-danger' title='The checkout has expired'>Expired</span>";
-    }
-};
-
-const defaultColumnsKeys = 'created_at,payment_amount,payment_description,payment_mode,status';
-const checkoutTableColumns = {
-    created_at: () => (h("th", { part: "table-head-cell", scope: "col", title: "The date each checkout occurred" }, "Processed On")),
-    payment_amount: () => (h("th", { part: "table-head-cell", scope: "col", title: "The dollar amount of each checkout" }, "Payment Amount")),
-    payment_description: () => (h("th", { part: "table-head-cell", scope: "col", title: "The description of each checkout" }, "Payment Description")),
-    sub_account_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the checkout" }, "Sub Account")),
-    payment_mode: () => (h("th", { part: "table-head-cell", scope: "col", title: "The payment mode of each checkout" }, "Payment Mode")),
-    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each checkout" }, "Status")),
-};
-const checkoutTableCells = {
-    created_at: (value) => (h("th", null,
-        h("div", { class: "fw-bold" },
-            formatDate(value),
-            " "),
-        h("div", { class: "fw-bold" },
-            formatTime(value),
-            " "))),
-    payment_amount: (value) => (h("td", null,
-        formatCurrency(value, true, true),
-        " ")),
-    payment_description: (value) => (h("td", null, value)),
-    sub_account_name: (value) => (h("td", null, value)),
-    payment_mode: (value) => (h("td", null, value)),
-    status: (value) => (h("td", { innerHTML: MapCheckoutStatusToBadge(value) })),
-};
+import { c as checkoutTableColumns, a as checkoutTableCells } from './checkouts-table-62c44909.js';
+import { T as Table } from './table-5da154e7.js';
+import './utils-3daada24.js';
 
 const CheckoutsListCore = class {
     constructor(hostRef) {
@@ -78,9 +40,9 @@ const CheckoutsListCore = class {
         };
         this.getCheckouts = undefined;
         this.getSubAccounts = undefined;
-        this.columns = defaultColumnsKeys;
+        this.columns = undefined;
         this.checkouts = [];
-        this.checkoutsTable = new Table([], this.columns, checkoutTableColumns, checkoutTableCells);
+        this.checkoutsTable = undefined;
         this.subAccounts = [];
         this.loading = true;
         this.errorMessage = undefined;
@@ -91,6 +53,7 @@ const CheckoutsListCore = class {
         this.fetchCheckouts();
     }
     componentWillLoad() {
+        this.checkoutsTable = new Table(this.checkouts, this.columns, checkoutTableColumns, checkoutTableCells);
         if (this.getCheckouts && this.getSubAccounts) {
             this.fetchCheckouts();
         }
@@ -102,7 +65,7 @@ const CheckoutsListCore = class {
             onSuccess: async ({ checkouts, pagingInfo }) => {
                 this.checkouts = checkouts;
                 this.paging = pagingInfo;
-                this.checkoutsTable = new Table(this.checkouts, this.columns, checkoutTableColumns, checkoutTableCells);
+                this.checkoutsTable.collectionData = this.checkouts;
                 const shouldFetchSubAccounts = this.checkoutsTable.columnKeys.includes('sub_account_name');
                 if (shouldFetchSubAccounts) {
                     await this.fetchSubAccounts();
@@ -164,7 +127,7 @@ const CheckoutsListCore = class {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '2734f704620a60a5bedc46e3e41ab758af3fcb33' }, h("checkouts-list-filters", { key: '88ec654a9e15b976c47baee51ebed8c4bd8f11d7', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '929ce2e4dbee2b6aad94705b90b33527ef88f324', class: "table-wrapper" }, h("table", { key: '734d75f3f6d0189ce21560a89e9bc28628188798', class: "table table-hover" }, h("thead", { key: '6b1bba45aaa29b741cf3422902bf1d63cb89fe9a', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '54f3e19d0d8b1414e9c0df4a6b9cd59516eb0e2e', class: "table-light text-nowrap", part: "table-head-row" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: '7454d36c6595e8341c0405833a919c56cd09fa3d', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'b6fc81a9293727005f0a13afbf518e57efeb8469', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'ce449e05b1c0643f8a2157f44f2f2af16ee08f8c', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '89d0b6d1c4eb966fe0195cfe6e854a7cca10c7ed', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.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: 'ac6bb6d3cf02abc3f386a7d6bf92927f4a0ad244', class: "sticky-bottom" }, h("tr", { key: '352544ebda3e9a899fcb640b350fd60c55b97d17', class: "table-light align-middle" }, h("td", { key: '2dfc279e5e94bb1c0ea75670eb6584ff39a98f4a', part: "pagination-bar", colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'a8ba0fd21c0dd9be75662b62db78980a74d5fbc6', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: '8d2c1fd960b2b3a66f3a1bf648b75576ad2e8857' }, h("checkouts-list-filters", { key: '18ba9bf560499112f71a690da751c8e3c4d345a7', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '12cf6ee2912ac6a9518634ebd470dac5f7623aff', class: "table-wrapper" }, h("table", { key: '1ea2c118d7efb620dc1f39db55a510a8a473cb31', class: "table table-hover" }, h("thead", { key: '5e334a090be56c82b11ae7584bdf4014cc8743c7', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '233137a8b4e30bac28ded78010199bfecd0ac4e7', class: "table-light text-nowrap", part: "table-head-row" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: 'd4ed9d4bf3ac17d4dc7294b875734e02996c7444', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'a7afbb627c768139af4244da5c12fae493dceafb', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '802c43c8da770bca9a249a88d115901e9b14e102', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'f1cd197cf7d1d5d81868a5abfafa40df762ca3c8', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.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: 'f0c367854322c341515bc481159101e9659117c7', class: "sticky-bottom" }, h("tr", { key: '88bc665c23665eddc4c88d27acc8c8f1cb39e277', class: "table-light align-middle" }, h("td", { key: '8be265c9b43033cfd3e2c4b3f12ac6d6c104e53d', part: "pagination-bar", colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '6abdb6091b78e58ec71ac6bf66f278ed9b6542fb', 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/checkouts-table-62c44909.js

@@ -0,0 +1,43 @@
+import { h } from './index-57431c24.js';
+import { f as formatTime, a as formatDate, b as formatCurrency } from './utils-3daada24.js';
+
+const MapCheckoutStatusToBadge = (status) => {
+    switch (status) {
+        case 'created':
+            return "<span class='badge bg-primary' title='The checkout has been created'>Created</span>";
+        case 'completed':
+            return "<span class='badge bg-success' title='The checkout has been completed'>Completed</span>";
+        case 'attempted':
+            return "<span class='badge bg-secondary' title='The checkout has been attempted'>Attempted</span>";
+        case 'expired':
+            return "<span class='badge bg-danger' title='The checkout has expired'>Expired</span>";
+    }
+};
+
+const defaultColumnsKeys = 'created_at,payment_amount,payment_description,payment_mode,status';
+const checkoutTableColumns = {
+    created_at: () => (h("th", { part: "table-head-cell", scope: "col", title: "The date each checkout occurred" }, "Processed On")),
+    payment_amount: () => (h("th", { part: "table-head-cell", scope: "col", title: "The dollar amount of each checkout" }, "Payment Amount")),
+    payment_description: () => (h("th", { part: "table-head-cell", scope: "col", title: "The description of each checkout" }, "Payment Description")),
+    sub_account_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the checkout" }, "Sub Account")),
+    payment_mode: () => (h("th", { part: "table-head-cell", scope: "col", title: "The payment mode of each checkout" }, "Payment Mode")),
+    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each checkout" }, "Status")),
+};
+const checkoutTableCells = {
+    created_at: (value) => (h("th", null,
+        h("div", { class: "fw-bold" },
+            formatDate(value),
+            " "),
+        h("div", { class: "fw-bold" },
+            formatTime(value),
+            " "))),
+    payment_amount: (value) => (h("td", null,
+        formatCurrency(value, true, true),
+        " ")),
+    payment_description: (value) => (h("td", null, value)),
+    sub_account_name: (value) => (h("td", null, value)),
+    payment_mode: (value) => (h("td", null, value)),
+    status: (value) => (h("td", { innerHTML: MapCheckoutStatusToBadge(value) })),
+};
+
+export { checkoutTableCells as a, checkoutTableColumns as c, defaultColumnsKeys as d };

package/dist/esm/justifi-bank-account-form.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
 import { c as config } from './config-27764a9d.js';
-import { J as JustifiAnalytics } from './Analytics-777962a4.js';
-import './package-5144835c.js';
+import { J as JustifiAnalytics } from './Analytics-a46c0c00.js';
+import './package-6c5cc174.js';
 import './Api-391d00e2.js';
 
 const BankAccountForm = class {

package/dist/esm/justifi-billing-form_2.entry.js

@@ -4,7 +4,7 @@ import { u as identityNameValidation, l as lineOneValidation, k as lineTwoValida
 import { S as StateOptions } from './state-options-a356fb11.js';
 import { n as numberOnlyHandler } from './utils-20cdf321.js';
 import { S as StyledHost } from './styled-host-e0ddb759.js';
-import { p as packageJson } from './package-5144835c.js';
+import { p as packageJson } from './package-6c5cc174.js';
 import { j as composeQueryParams } from './utils-3daada24.js';
 import './business-form-options-d790973e.js';
 import './Business-b73d5055.js';

package/dist/esm/justifi-business-details.entry.js

@@ -4,13 +4,13 @@ import { B as BusinessService } from './business.service-97a3da69.js';
 import { B as Business } from './Business-b73d5055.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-3ce7f437.js';
 import { g as getErrorMessage, a as getErrorCode } from './utils-b10dae27.js';
-import { J as JustifiAnalytics } from './Analytics-777962a4.js';
-import { c as checkPkgVersion } from './check-pkg-version-bac8fac0.js';
+import { J as JustifiAnalytics } from './Analytics-a46c0c00.js';
+import { c as checkPkgVersion } from './check-pkg-version-ed46fa3b.js';
 import './config-27764a9d.js';
 import './Api-391d00e2.js';
 import './helpers-96ea3464.js';
 import './state-options-a356fb11.js';
-import './package-5144835c.js';
+import './package-6c5cc174.js';
 
 const makeGetBusiness = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
     var _a;

package/dist/esm/justifi-business-form.entry.js

@@ -10,14 +10,14 @@ import './SubAccount-7f7e4c56.js';
 import { c as config } from './config-27764a9d.js';
 import { B as BusinessFormServerErrors, a as BusinessFormClickActions } from './business-form-types-8fd61b0e.js';
 import { B as Business } from './Business-b73d5055.js';
-import { J as JustifiAnalytics } from './Analytics-777962a4.js';
+import { J as JustifiAnalytics } from './Analytics-a46c0c00.js';
 import { S as StyledHost } from './styled-host-e0ddb759.js';
-import { c as checkPkgVersion } from './check-pkg-version-bac8fac0.js';
+import { c as checkPkgVersion } from './check-pkg-version-ed46fa3b.js';
 import './schema-validations-c1728516.js';
 import './state-options-a356fb11.js';
 import './business-form-options-d790973e.js';
 import './helpers-96ea3464.js';
-import './package-5144835c.js';
+import './package-6c5cc174.js';
 
 const businessFormSchema = create$3(Object.assign(Object.assign({}, businessCoreInfoSchema().fields), { legal_address: addressSchema(), additional_questions: additionalQuestionsSchema(), representative: identitySchema('representative') }));
 

package/dist/esm/justifi-card-form.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h } from './index-57431c24.js';
 import { c as config } from './config-27764a9d.js';
-import { J as JustifiAnalytics } from './Analytics-777962a4.js';
-import './package-5144835c.js';
+import { J as JustifiAnalytics } from './Analytics-a46c0c00.js';
+import './package-6c5cc174.js';
 import './Api-391d00e2.js';
 
 const CardForm = class {

package/dist/esm/justifi-checkout.entry.js

@@ -2,15 +2,15 @@ import { r as registerInstance, c as createEvent, h } from './index-57431c24.js'
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-3ce7f437.js';
 import { g as getErrorMessage, a as getErrorCode } from './utils-b10dae27.js';
 import { C as CheckoutService } from './checkout.service-ef1549c6.js';
-import { J as JustifiAnalytics } from './Analytics-777962a4.js';
-import { c as checkPkgVersion } from './check-pkg-version-bac8fac0.js';
+import { J as JustifiAnalytics } from './Analytics-a46c0c00.js';
+import { c as checkPkgVersion } from './check-pkg-version-ed46fa3b.js';
 import './config-27764a9d.js';
 import './Api-391d00e2.js';
 import './Checkout-0b4086f8.js';
 import './Pagination-afc8f96d.js';
 import './Payment-30790721.js';
 import './SubAccount-7f7e4c56.js';
-import './package-5144835c.js';
+import './package-6c5cc174.js';
 
 const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
     var _a;

package/dist/esm/justifi-checkouts-list.entry.js

@@ -5,15 +5,17 @@ import './Payment-30790721.js';
 import './SubAccount-7f7e4c56.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-3ce7f437.js';
 import { g as getErrorMessage, a as getErrorCode } from './utils-b10dae27.js';
-import { c as checkPkgVersion } from './check-pkg-version-bac8fac0.js';
+import { c as checkPkgVersion } from './check-pkg-version-ed46fa3b.js';
 import { c as config } from './config-27764a9d.js';
-import { J as JustifiAnalytics } from './Analytics-777962a4.js';
+import { J as JustifiAnalytics } from './Analytics-a46c0c00.js';
 import { C as CheckoutService } from './checkout.service-ef1549c6.js';
 import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts-16c8ce40.js';
 import { S as StyledHost } from './styled-host-e0ddb759.js';
 import { t as tableExportedParts } from './exported-parts-70e7a12b.js';
-import './package-5144835c.js';
+import { d as defaultColumnsKeys } from './checkouts-table-62c44909.js';
+import './package-6c5cc174.js';
 import './Api-391d00e2.js';
+import './utils-3daada24.js';
 
 const makeGetCheckouts = ({ accountId, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;
@@ -58,7 +60,7 @@ const CheckoutsList = class {
         this.accountId = undefined;
         this.authToken = undefined;
         this.apiOrigin = config.proxyApiOrigin;
-        this.columns = undefined;
+        this.columns = defaultColumnsKeys;
     }
     componentWillLoad() {
         checkPkgVersion();
@@ -104,7 +106,7 @@ const CheckoutsList = class {
         }
     }
     render() {
-        return (h(StyledHost, { key: '42ff5c1cff57b185200aa0c31f4fdb44b3401c91', exportparts: tableExportedParts }, h("checkouts-list-core", { key: '55565a5f61c671bae9554c7d9ecab044c7bb987c', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '6e6faed5df0fcdc48018650867672c5d325d1934', exportparts: tableExportedParts }, h("checkouts-list-core", { key: '92ceb10f7bd76864629ed0990a7f34fab76ce517', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/esm/justifi-gross-payment-chart.entry.js

@@ -4,9 +4,9 @@ import { A as Api } from './Api-391d00e2.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-3ce7f437.js';
 import { g as getErrorMessage, a as getErrorCode } from './utils-b10dae27.js';
 import { E as ErrorState } from './utils-218275b7.js';
-import { J as JustifiAnalytics } from './Analytics-777962a4.js';
-import { c as checkPkgVersion } from './check-pkg-version-bac8fac0.js';
-import './package-5144835c.js';
+import { J as JustifiAnalytics } from './Analytics-a46c0c00.js';
+import { c as checkPkgVersion } from './check-pkg-version-ed46fa3b.js';
+import './package-6c5cc174.js';
 
 class ReportsService {
     async fetchGrossVolumeChartData(accountId, authToken) {

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

@@ -7,11 +7,11 @@ import './SubAccount-7f7e4c56.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-3ce7f437.js';
 import { g as getErrorMessage, a as getErrorCode } from './utils-b10dae27.js';
 import { E as ErrorState } from './utils-218275b7.js';
-import { J as JustifiAnalytics } from './Analytics-777962a4.js';
-import { c as checkPkgVersion } from './check-pkg-version-bac8fac0.js';
+import { J as JustifiAnalytics } from './Analytics-a46c0c00.js';
+import { c as checkPkgVersion } from './check-pkg-version-ed46fa3b.js';
 import './Api-391d00e2.js';
 import './config-27764a9d.js';
-import './package-5144835c.js';
+import './package-6c5cc174.js';
 
 const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
     var _a;