@justifi/webcomponents 6.1.0-rc.3 → 6.1.1-rc.1

package/dist/collection/components/payment-details/payment-details.js

@@ -13,6 +13,12 @@ export class PaymentDetails {
             this.errorMessage = event.detail.message;
             this.errorEvent.emit(event.detail);
         };
+        this.handleRecordClickEvent = (event) => {
+            this.recordClickEvent.emit({
+                id: event.detail.id,
+                type: event.detail.type,
+            });
+        };
     }
     componentWillLoad() {
         checkPkgVersion();
@@ -48,7 +54,7 @@ export class PaymentDetails {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails, "onError-event": this.handleErrorEvent }));
+        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails, "onError-event": this.handleErrorEvent, "onRecord-click-event": this.handleRecordClickEvent, "enable-record-click": "true" }));
     }
     static get is() { return "justifi-payment-details"; }
     static get encapsulation() { return "shadow"; }
@@ -122,6 +128,27 @@ export class PaymentDetails {
                         }
                     }
                 }
+            }, {
+                "method": "recordClickEvent",
+                "name": "record-click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "RecordClickEvent",
+                    "resolved": "RecordClickEvent",
+                    "references": {
+                        "RecordClickEvent": {
+                            "location": "import",
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::RecordClickEvent"
+                        }
+                    }
+                }
             }];
     }
     static get watchers() {

package/dist/collection/components/payment-transactions-list/payment-transactions-list.js

@@ -91,7 +91,7 @@ export class PaymentTransactionsList {
         return !this.showEmptyState && !this.showErrorState && !this.isLoading;
     }
     render() {
-        return (h(StyledHost, { key: '6cc5f2b4912082a551a3b70e5ed4195dcc377849' }, h(TableWrapper, { key: '5cfd24668cb55784d13e8c8d7dc9fe0a43e4bc4a' }, h(TableComponent, { key: '32ad4a5ddda0f27f114e2e1f71bb4e7a6664e94e' }, h(TableHead, { key: 'ea55561dbcf19bc5a9e23045990dddcafc127a6e' }, h(TableHeadRow, { key: '3d7f488dc283c2a1ade1029863da769a78c5164c' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '038b3a0bb90c0f088e080ae87d966ad967a0d575' }, h(TableLoadingState, { key: 'f7716a4a9a19cfd6ec35a00a37f72ab3dac98c23', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '463a993922fb69facece2a878d9ea845450c0456', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '84869759e0d89316c7d1c29132bb3163738f267a', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'f46a1e7a318e6d3a5575397609cc8490c7835b2e' }, h(TableFootRow, { key: '7c5302050f562a64507f75fe5b72d8f474a35465' }, h(TableFootCell, { key: '69e4d5d2c3def6cdc394ce17f63571f3e952668a', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '933233e9f47b4dfc4008e946c14760c13bdfa4b7', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: 'a00f8b0ba0e96bba423c6933fc9eebd19f5f61cd' }, h(TableWrapper, { key: 'b1ad1863482835106c6ec1b5fe7c3f9bb294a316' }, h(TableComponent, { key: 'f20d05de3f0a4d60734bfb366ebaf11a5b9fa4d0' }, h(TableHead, { key: 'd4aa85002f25923d79670687d80090422e4f09a3' }, h(TableHeadRow, { key: '99dba50d00c0ab2ba4f140424ff534936fd15c9e' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '5526e3cffc2d43f6f6cbd755afbcffd3d036ebe9' }, h(TableLoadingState, { key: 'a5cf0dcf867feba1a1a8c4419e5f6c868510eb82', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '62f38aa3ea3758f6a113b2370c17670fa38fd322', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: 'a86ba5ae455119f12fa01a56c6826cc3a08d7c3b', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '302041a89f00caa4e440bad8bd5148f9b51b405e' }, h(TableFootRow, { key: 'c1071b23b4dc07c94674d0addabc8cdc7bc7ca3c' }, h(TableFootCell, { key: '2144fdc702e20c8c839b5d8c231bf1d3b16df234', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '71589bd15b0af2d1eb6bad533e294e480ba36ca3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-payment-transactions-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,7 +83,7 @@ export class PaymentsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '16623ffd64fb8c608f44daa44597f823ccd179a5' }, h(TableComponent, { key: '19933513ac4ae5f75a30e8a255ac0e53d1cb5c87' }, h(TableHead, { key: '4ca9504f2d3f98d1fe198c7524d1d80aae7ee169' }, h(TableHeadRow, { key: '497a03b10bf1fd4fbab5e132a26a4f59d0f0e947' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'd3b321c2647c28b672c92c7e6a35d1ecf5ef4ffe' }, h(TableLoadingState, { key: 'f203ce04080f5bc06eca7a1236b22b90281cf920', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '7d0db001613b7e1fcc23ffa93ae7f61f0d96814a', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '7dad16e0ed9131547334624ccfe378926771caa7', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'f20e35a27f36703aa6c81e71da2b990a36074335' }, h(TableFootRow, { key: '34d9bada6b39ff6f7ce8a12e13c8276e54358758' }, h(TableFootCell, { key: 'cf868546ef932a43c6b820afd8eeb7c31b87ba2f', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '206704c8b7990ed504c41113a188aa61d6d4c6a8', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '2cceca3ea193752152afb7514513422ad40165a8' }, h(TableComponent, { key: '61f651673b6cfa85380ca2806907facada8152e9' }, h(TableHead, { key: '5d65f625ba51588d5c1d288d31d2f52680645f2c' }, h(TableHeadRow, { key: '0a2c0158996f39964ae0f050632e47c40e7d10f5' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: '4c5e3252951cad51e705a6fb377a6d4b8f28869e' }, h(TableLoadingState, { key: '9159d22917307f9886d57c488218be65782dbeb2', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'dcb34a17de509c1856ff3507f7e10863b3b5fe09', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '5a4d81745f6764ed8860c1be74895c6f7cc7e7aa', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '095986da34b545b85c62c881c06e215410d26793' }, h(TableFootRow, { key: '5d592db903775c67b6f587477a0fa3713a7abd88' }, h(TableFootCell, { key: 'c23d9b7111b6f3dde3101f5fd49b297630948de5', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '37deefd8ffd902f9bd458b4fa0fe5c4ef4bdb87e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {

package/dist/collection/components/payments-list/payments-list-filters.js

@@ -43,8 +43,8 @@ export class PaymentsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '4764d9aea618aa059382add95cb7b9a6307688fe' }, h("table-filters-menu", { key: 'e557e4d94265a35d0bc24afb819fc11b68c64c72', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: 'd147fe90eaa9a351b8fd7bbc26c81140bdd2736f', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '55adb0f22e03ff1a4cb7adc796349785e2318b71', class: "p-2" }, h("form-control-text", { key: 'fb5037d0431b2df8a9a18a4a872599c10d893045', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '5500043157e0ebdde2e8781f9efef90e05d5adca', class: "p-2" }, h("form-control-text", { key: '116692d8ca95dd90c33cf6e3da6f2d1d6f3b0729', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: '3467ff316de211617b8b2549b41b7731ab12b44e', class: "p-2" }, h("form-control-select", { key: '0c60bb386acbd75ef0b9b743337d38801281bf07', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: '8eccc7f8bde0ec94ba75da04d13ef5c57bcdd287', class: "p-2" }, h("form-control-date", { key: 'f1f8efe669fc3cff55773589a5b86072e1e08b64', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: '7e99c77eb11a715be373b26a35967abc7047d362', class: "p-2" }, h("form-control-date", { key: '92df3e401316750a69beb42beadd958ea5fcc560', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: 'a7558557fc2568a6d2a1b440b421d534f62a6163' }, h("table-filters-menu", { key: '4e185e33a7835795b6858ec8419fc2ba8ab64a9d', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: '619b459dbd961cc2c5eb192f830f51f123f59604', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '53e8c53aa1f1aff0ecebc9ebb1f13bff2a053795', class: "p-2" }, h("form-control-text", { key: '04698a7742b278abbb720d4884f041509f5ac8ad', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '967ef74a4642cfd758801e5f942a20fd7375fbe3', class: "p-2" }, h("form-control-text", { key: '3ca21f2ca7b45bba64a1d6d734be9beaf00c14fe', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: 'a5ec7ca0881d8d1bf2f0efa2c84270d3cd68832f', class: "p-2" }, h("form-control-select", { key: 'fd2d57c06e46ee77493ccfdc81927caa41c4d867', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status || '', disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: 'b272738dc727933cb4f21405ae222973aadde76d', class: "p-2" }, h("form-control-date", { key: '3cfb486fc05e023a3eb9960de13e0bbf2d179d79', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: '008a9c18830cadcf0da9d971077e8efd6ca9a714', class: "p-2" }, h("form-control-date", { key: 'a8805f485e37268df0897c6d5eff19e9c2324542', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforePaymentsListFilterParam }))))));
     }
     static get is() { return "justifi-payments-list-filters"; }

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

@@ -46,7 +46,7 @@ export class PaymentsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '25843c991e12a0fde88d834ec92997567fd27f77' }, h("payments-list-core", { key: 'b06e45a3d24dcc2b44117d295bcc453bf20b3d46', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '0e82f9f2e71485299ef1bfe8dd9cf17ff79b9550' }, h("payments-list-core", { key: 'e1a808634458a378db3fb0021b786de65047e28c', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/payments-list/payments-status.js

@@ -1,5 +1,18 @@
 import { h } from "@stencil/core";
 import { Badge, BadgeVariant } from "../../ui-components/badge/badge";
+export var PaymentStatusBadge;
+(function (PaymentStatusBadge) {
+    PaymentStatusBadge["SUCCEEDED"] = "succeeded";
+    PaymentStatusBadge["AUTHORIZED"] = "authorized";
+    PaymentStatusBadge["PENDING"] = "pending";
+    PaymentStatusBadge["ACH_FAILED"] = "achFailed";
+    PaymentStatusBadge["FAILED"] = "failed";
+    PaymentStatusBadge["CANCELED"] = "canceled";
+    PaymentStatusBadge["DISPUTED"] = "disputed";
+    PaymentStatusBadge["DISPUTE_LOST"] = "dispute_lost";
+    PaymentStatusBadge["FULLY_REFUNDED"] = "fully_refunded";
+    PaymentStatusBadge["PARTIALLY_REFUNDED"] = "partially_refunded";
+})(PaymentStatusBadge || (PaymentStatusBadge = {}));
 export const MapPaymentStatusToBadge = (status) => {
     const statusToBadgeProps = {
         succeeded: {
@@ -33,10 +46,15 @@ export const MapPaymentStatusToBadge = (status) => {
             text: 'Canceled',
         },
         disputed: {
-            variant: BadgeVariant.SECONDARY,
+            variant: BadgeVariant.WARNING,
             title: 'The account holder disputed this payment. The amount has been returned and a fee assessed.',
             text: 'Disputed',
         },
+        dispute_lost: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'The cardholder has won the dispute.',
+            text: 'Dispute Lost',
+        },
         fully_refunded: {
             variant: BadgeVariant.SECONDARY,
             title: 'The full amount of this payment has been refunded',

package/dist/collection/components/payout-details/payout-details-core.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { formatDate, formatTime } from "../../utils/utils";
+import { capitalizeFirstLetter, formatDate, formatTime } from "../../utils/utils";
 import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState } from "../../ui-components/details/utils";
 import { Button, StyledHost } from "../../ui-components";
 import { MapPayoutStatusToBadge } from "../payouts-list/payouts-status";
@@ -7,6 +7,7 @@ import PayoutDetailsLoading from "./payout-details-loading";
 import { Badge, BadgeVariant } from "../../ui-components/badge/badge";
 export class PayoutDetailsCore {
     constructor() {
+        this.enableRecordClick = false;
         this.loading = true;
         this.errorMessage = null;
         this.downloadCSV = () => {
@@ -22,6 +23,12 @@ export class PayoutDetailsCore {
                 },
             });
         };
+        this.handleRecordClick = (id) => {
+            this.recordClickEvent.emit({
+                id,
+                type: 'account'
+            });
+        };
     }
     componentWillLoad() {
         if (this.getPayout) {
@@ -50,11 +57,16 @@ export class PayoutDetailsCore {
             },
         });
     }
+    formatMethod(deliveryMethod) {
+        if (deliveryMethod === "ach")
+            return "ACH";
+        return capitalizeFirstLetter(deliveryMethod);
+    }
     render() {
         var _a;
-        return (h(StyledHost, { key: '5568a561f38c1d899171163d23b029766adb0e8a' }, this.loading && h(PayoutDetailsLoading, { key: '1c17be181850fde8e996b526d76c0452e7353e16' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'd507119400ed8885a0b0f3061f54c82cd2d151ca', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '2d6192cc947a78b0566401b07b661b5116378798', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'd25b191987931a853b16d40b819c5e88ca3bba70', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'a669dae8e5699ca83326a799e07f5b9efb673850', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '2952d01e2d98ca87ad2a8f1349144dd8a0d6d87e', title: "ID", value: this.payout.id }), h("div", { key: '376886d0c0dfee789825f007f7bf17847a0e4f74', class: "m-4" }, h(Button, { key: '2ceae9f29c2b07efeba427a97a8ed79cac27c736', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'be5844790b248357d9d919830ee54f159f24268e', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '3a450675b1811d87cd61692f7a36443d56412e7b', sectionTitle: "Details" }), h("div", { key: 'c6fe4e20c5b7607cb7f7472a3f41245b1cccdf5c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'aaa0e5d6d2d764e5b4ee430a21d94891cea55dd6', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '92f7534cc1cd4463ff9f4187dec79520bc728d38', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'd25daac9ecd7de9b3e379fbc6baeaba5f7c7db96', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'a648fbfdae282870dd7471d8e6fe414ca3e225d6', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '4720bfeae9fcb545aaa84b373bdea0000ab803ae', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '54d6f97ad54c2018d873062d15c63143ad899c4f', sectionTitle: "Account" }), h("div", { key: 'f46ec5329dc9a5301345fbff79cb95eada27c7d7', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '4b0432e3b43a54591bbcd007372d63359738e7f0', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'c4f24ea424336b398b73268869e42aa5efaba22c', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'a7735eff20bcd14399af5da2a1f83b308a5a7d1d', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '8f111b1b61509802d2fe743ca1b7f6197e5fd50b', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '85dd7ec442ac9dafe7b87bf7b036088166acd7ab', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
-            h(DetailSectionTitle, { key: '42bd46da966657dafe6db564829b6ecf41c0195e', sectionTitle: 'Metadata' }),
-            h("div", { key: '41124e965bdc0d0429f16e7693894bfa6c62c9df', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '718b728f4aaab7092530ed52de11348b8e68a2f6', metadata: this.payout.metadata }))
+        return (h(StyledHost, { key: 'd81fd85bbfa1c54175b4055cfed2eb62c7db1735' }, this.loading && h(PayoutDetailsLoading, { key: '37fca566131507232afc04332989545f81f21ace' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '2135970df52759def666f17297f055b90fc61274', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '12d9f81cea53ea7f8636c3ed249f994f13ae1389', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'd3f061a66f4dd3bfee92e5de3b2ba8f245853c85', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '292267e98b0e12ef4fd365c0c972f9eccba0df09', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '0ca068bb4c8c2dea86feff59916b42871de799e7', title: "ID", value: this.payout.id }), h("div", { key: 'a97d286bf5eafce9cfbf81c6e7f62bb4e7b0849f', class: "m-4" }, h(Button, { key: '8a026a6f3819519815148115ffed876c18e37142', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '66520ccf02a84b4523552de31d43e2b5c75e16ae', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '27e9caef31af8e5d89141b5c0265e6ee9183809e', sectionTitle: "Details" }), h("div", { key: '2cb15bde0c567667978f482a55753c1355a359b9', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '5fe197ecc8f1aa79786a8da0092e7962095336a1', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '50d667f0b575e89b712832b3d70026c422119308', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '28f753d09ca0434ef6e913baa1c95e977657bdfe', title: "Payout Method", value: this.formatMethod(this.payout.delivery_method) }), h(DetailItem, { key: '84eb131bc5493293e75d0c5eb5cf69379769843d', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '0fd9fc497e076165b9e5a70b385fdde44d9290fb', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '29b8ef5d56c77bc44bf0809acf3bf7235a5f678d', sectionTitle: "Account" }), h("div", { key: '49104b277fe2c27a28326bc6e84aa76713f355a5', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '7e8f4b347227c73ebfb28a3846c994943dc22b14', title: "ID", value: this.payout.account_id, onClick: this.enableRecordClick ? () => this.handleRecordClick(this.payout.account_id) : undefined }), h(DetailItem, { key: '594d4853374fdacde8c38c9409abe593acf3d1d8', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '86198dd9f123775d687df6a7efa7b17fae6f7fc0', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'ff5840da92dc48469915698937c52be1be6573f3', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'dae3be8251b99e92c14d19151f7fcf43e7d79d2b', title: "Account Number", value: `**** ${this.payout.bank_account.account_number_last4}` })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: 'ab9280b8f08bfa10492d86d73d7fcc054602c23b', sectionTitle: 'Metadata' }),
+            h("div", { key: '91326afd6edbd573802684fa8518d6738cbcf4ff', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '7ac4be5f733114b2257eade5c315583b09643390', metadata: this.payout.metadata }))
         ])))));
     }
     static get is() { return "payout-details-core"; }
@@ -103,6 +115,26 @@ export class PayoutDetailsCore {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "enableRecordClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-record-click",
+                "defaultValue": "false"
             }
         };
     }
@@ -135,6 +167,27 @@ export class PayoutDetailsCore {
                         }
                     }
                 }
+            }, {
+                "method": "recordClickEvent",
+                "name": "record-click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "RecordClickEvent",
+                    "resolved": "RecordClickEvent",
+                    "references": {
+                        "RecordClickEvent": {
+                            "location": "import",
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::RecordClickEvent"
+                        }
+                    }
+                }
             }];
     }
     static get watchers() {

package/dist/collection/components/payout-details/payout-details.js

@@ -8,6 +8,7 @@ import { makeGetPayoutCSV } from "./get-payout-csv";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 export class PayoutDetails {
     constructor() {
+        this.enableRecordClick = false;
         this.errorMessage = null;
         this.handleErrorEvent = (event) => {
             this.errorMessage = event.detail.message;
@@ -52,7 +53,7 @@ export class PayoutDetails {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("payout-details-core", { getPayout: this.getPayout, getPayoutCSV: this.getPayoutCSV, "onError-event": this.handleErrorEvent }));
+        return (h("payout-details-core", { getPayout: this.getPayout, getPayoutCSV: this.getPayoutCSV, "onError-event": this.handleErrorEvent, enableRecordClick: this.enableRecordClick }));
     }
     static get is() { return "justifi-payout-details"; }
     static get encapsulation() { return "shadow"; }
@@ -95,6 +96,26 @@ export class PayoutDetails {
                 "setter": false,
                 "reflect": false,
                 "attribute": "auth-token"
+            },
+            "enableRecordClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-record-click",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/payout-transactions-list/payout-transactions-list.js

@@ -95,7 +95,7 @@ export class PayoutTransactionsList {
         return Object.assign({ payout_id: this.payoutId, limit: '15' }, this.pagingParams);
     }
     render() {
-        return (h(StyledHost, { key: '35037a26a2ad1df0d5580bc9cbdf678b68d75703' }, h(TableWrapper, { key: '98cccf52e705665e09aa1b203f745c93ab6fa0b9' }, h(TableComponent, { key: '7280cc3d85164c2b0433cf54e66f747d9bda8293' }, h(TableHead, { key: '180eb9f41e8dabc002ff69e5a6b6b36b46a6a6ce' }, h(TableHeadRow, { key: 'b1b9fa3bce94622657619b5652c27d2b2f4c75f1' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: 'ab53e54503eff3e104249160e043aa4050b9a2ed' }, h(TableLoadingState, { key: 'e178b2af718b595e9e3bb865f29b0db27d5a597b', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '4d17644347644ce12b168ec002e70ab49095eb70', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: 'c941389bfda963a3e607bed76d81d9d3d79e7ca3', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '87277e41a96e5f2bf20e71363c79bc7afbec948c' }, h(TableFootRow, { key: '43d1e1bc876e6f954592277dbd74e55252845172' }, h(TableFootCell, { key: 'a11739b6f62786e537a94519b145c6d416786e3c', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '80e172cce8cd3ffd76caaa9c8bc20fbfc7dc76f5', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: 'a0ff80867bc3c0bf198165229f693d7748ffc7a4' }, h(TableWrapper, { key: '779cc5602f6221e0f704484bf962b72b266d95f8' }, h(TableComponent, { key: '7b4b56e9712533ba2b50a875d282ef4bd5efdcaf' }, h(TableHead, { key: '8ecd93d56bdbdb1417b260dd013315b21958f363' }, h(TableHeadRow, { key: '9fa0fea238a9f76c71d5b8fc5443ca2c9e56b13b' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: 'f7d94388eddaf848e4868005e985a1158577c70f' }, h(TableLoadingState, { key: 'c83742e9e3ecbcdaba29f2aa121ec4c101a55632', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: 'fa0404328357e11527cff2c3eb15536ee458557b', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '71add0ef95310fd49e403d65c2a23ea8f73c71b6', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '073af8dce5dabb2db604ae50e6ace6a4ace18e6f' }, h(TableFootRow, { key: '3f3906a106b3c41311a0e1309aea779e865bf0f5' }, h(TableFootCell, { key: '85b46ef2a297aab3a450d49dd086ec6e7e1ab027', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '548131521a5fcf1562b286097635f5f62414a28c', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-payout-transactions-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -135,7 +135,7 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '59994e4906090071601b397325d5f7069b8d8a22' }, h(TableComponent, { key: 'ce036662e9f46e7694dbc10b943fc1214f75daa0' }, h(TableHead, { key: 'af54a1f5719de98f09e328c38656d2c0118e15c4' }, h(TableHeadRow, { key: '2820111563b25c714bf471d899e138b6a2b6a364' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: '133f14f906b44122d1bcfd24e03cda0056ace227' }, h(TableLoadingState, { key: 'b4332c9c89bbad2f06b2b69f533d3fcc70e6ec3d', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'd23e5d640e3fe1f38b6f437a96d0a5f6e7832c28', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'edf58fb04ebabdcb0678a551d7d87a236baba849', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '081f88093dda02c81346b9eda6c3105bc6c7c0f1' }, h(TableFootRow, { key: '1b579bb5c8feb1f388f3ad2c25543f5d8f6b154d' }, h(TableFootCell, { key: '6a6ac8031d15ed7e2fc158028bcc7b44901faca8', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'ef890187c152081d1daf8cc870a81d75db439128', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '44f6c2c3a44435f30c61220114797c5938e475a8' }, h(TableComponent, { key: '756c4ea4ad9c59bea1241af2502c03ced6ec3623' }, h(TableHead, { key: '2748d99edcaea098b111954178cf799811be445c' }, h(TableHeadRow, { key: 'c824617152c899cdff946f979ac71dbdb8002ffa' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: '4ae6368c8a634f0a1aa85117a2ead0dd66f9828c' }, h(TableLoadingState, { key: 'f6473742b82e604808474cf294aca1f09bcf820f', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '334eef7d28de693a0c5e4f413c72268acf00bc6d', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '6172568fd0282924413cbf28255d06f1651bcdbe', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '232dad4bfb95c707989633a1c0c198481aa3a5e1' }, h(TableFootRow, { key: '1bb1da49bef435aec118bc8c8eb5a96c0469f817' }, h(TableFootCell, { key: '481a46c6488f8652f6360725b45ec76baecc6ad4', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'd4fdb00ff58d674f77d99502d98c572562f516ea', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {

package/dist/collection/components/payouts-list/payouts-list-filters.js

@@ -26,8 +26,8 @@ export class PayoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '93d251d08587d0e4a39f5e0361f642fdb25e682e' }, h("table-filters-menu", { key: 'be80812190551197cfaf82c45a696bcbf8e1830d', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: '983f3ff96bcddbda7e1a39f2c19d7886b5bad4f2', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'cb352ea18d854ab8a77361e544cbbbecf69baa58', class: "p-2" }, h("form-control-date", { key: '1c628e9d5be7d4c43b2a316a4bccbf4ee41f8652', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: 'd0649f25048043fbd6d12aa658162c4dbd084d75', class: "p-2" }, h("form-control-date", { key: '80550ba47ecdb6743d29ab9fb8ca66567992f91e', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
+        return (h(StyledHost, { key: '41eeb0429b0228f59f50b82fa8433dedacf56aed' }, h("table-filters-menu", { key: '10b29c5ab84d582867e7d58dae927ffceb20bf63', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: '9f1a6b6409b06c3b8c44f513834f9ff4b8c97657', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '886691c037614a7623b78b0b4010fc539b7a0e94', class: "p-2" }, h("form-control-date", { key: 'b6553e03f27a2a65d241e679515cf1e1ecf3ebb8', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: '7609b6996b9e1dfab4c20bb68cde950cfea42442', class: "p-2" }, h("form-control-date", { key: '118337c44913278ccc71e833a8afdb1d61071592', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDate: true }), disabled: !!this.createdBefore, part: createdBeforePayoutsListFilterParam }))))));
     }
     static get is() { return "justifi-payouts-list-filters"; }

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

@@ -64,7 +64,7 @@ export class PayoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'fb38191d2ab5c59dee8261a9ca5116e574f721fd' }, h("payouts-list-core", { key: '8e24bf8753a52c1faa41ee60330f9da4372afdd0', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: 'fb8e3e21a4e5a0aa971a91eed4ef0b603dbd1b23' }, h("payouts-list-core", { key: 'c9fb97bd0d77d1989f346285cd5124121ad4ac83', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/terminal-orders-list/terminal-orders-list-core.js

@@ -81,7 +81,7 @@ export class TerminalOrdersListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '71743bd2440b3b00ecafe74ddf9a0f48a96dbe6c' }, h(TableComponent, { key: '942af2def8486e3ff6d9cb9244bd88061b48db90' }, h(TableHead, { key: '32bcb4a7c21292ab9742dc509b921bd2f3b5ff5e' }, h(TableHeadRow, { key: '978a80218e60edd29d8799130c98f4772b471586' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: 'ef5a80cbc4868cc75fdfc19d58a6cee8928546ef' }, h(TableLoadingState, { key: 'dd773a17e38a975dd3821a104bfad75d83ed907e', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '8a857149326cc110d2daf440875cd977b8f2e2d6', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '1c9dfccef7c8675539290f53d3b6c615261c713a', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '2ba8b5c118f45affadf0bdf6ec9d013d4ac98636' }, h(TableFootRow, { key: 'a756ee19c1f4c36975f65aec354a4480f5563ea4' }, h(TableFootCell, { key: '7549ac667748d24c2f581eb13a5e0cd65c17697b', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '98178188d80869e44ceade1e225655a1f2d62ceb', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'f642f35fa0bd514d42f94a2991ec00923159d788' }, h(TableComponent, { key: 'dc6a0488729a57c4792ae84a16c8a7d4c00e16cb' }, h(TableHead, { key: '04ebae008a9e7c29b1a5bd2efb948605857743f0' }, h(TableHeadRow, { key: '61931ebd8258c4a6e83692de4dd43cb3766cad0e' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: 'f8acfec2e54c75df0c5e0082ed14693f1f01169a' }, h(TableLoadingState, { key: '095f29bb7c56371397c07a22f40b17b673d7c8d1', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'fc77d1eb81ec891fbe6345e4fd23028d70c60331', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '5a6e8f297219dc45d96d5d7e17a8636ca1b50648', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '66b118f9daba0f6b8a12869d3348a06e7425f1f0' }, h(TableFootRow, { key: 'a3e149e674bb6f5a9114da1b917ddb7addf6effb' }, h(TableFootCell, { key: '34eedd1c6d8ff11935a5b411d821efd4eba1381f', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '1374d80bd8c0307afae2c226f3e07b9e1cf21878', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "terminal-orders-list-core"; }
     static get properties() {

package/dist/collection/components/terminal-orders-list/terminal-orders-list-filters.js

@@ -47,8 +47,8 @@ export class TerminalOrdersListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '920c99fe5fd7e8392cf4c7dffa2e1b36c7415e1f' }, h("table-filters-menu", { key: 'c01527296d2abc356b5d717280d631e385dd38ec', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: 'cb73d65ed0097c0112ba8a6990002d7043cffe9a', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '96baa82b72d585e081b33397c62d05538c11f7a0', class: "p-2" }, h("form-control-select", { key: '134efdeaf6d72e17a123ee33f07eeb7e7725bd8a', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status, disabled: !!this.orderStatus, part: orderStatusTerminalOrdersListFilterParam })), h("div", { key: 'be7eaa48c38e424133dd898536c43487517097c6', class: "p-2" }, h("form-control-select", { key: 'dd54b28b9f54e5dbd320e48ade099cda1cf37a1d', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type, disabled: !!this.orderType, part: orderTypeTerminalOrdersListFilterParam })), h("div", { key: 'cf26545dca2f274b54c987fb6ea3a280f527025a', class: "p-2" }, h("form-control-date", { key: 'b61c7f8bd814c5b7bd5baf63453fa1aa4247b8a8', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterTerminalOrdersListFilterParam })), h("div", { key: 'ddeb93a70d8d20e9c5d43fd5c8c8639c94174026', class: "p-2" }, h("form-control-date", { key: '8ebf3a23e3c2cfb178da6be69fa9e40caae65d0f', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: 'e4220781c3a7878607a3fd369f6aef680caf7e3b' }, h("table-filters-menu", { key: 'a6d807965b30875ac0fc3b2a1c2fc016816515c1', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: '2dc1aa039a17ec35556ca87f69583f678ff98154', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '5c8487d29210150eef9cda19aa08098b94562735', class: "p-2" }, h("form-control-select", { key: 'd18aaaf9c0a0c7b35e5526cc0d13e63fa759827d', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status || '', disabled: !!this.orderStatus, part: orderStatusTerminalOrdersListFilterParam })), h("div", { key: '9830ad536337ff56460a97f2af7b1d593b26a617', class: "p-2" }, h("form-control-select", { key: 'ab793e61dfb3839d733f86fe3a432f6625a80007', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type || '', disabled: !!this.orderType, part: orderTypeTerminalOrdersListFilterParam })), h("div", { key: 'fc0ba6a18cbfbefc9ed93db3badb1dac6c65aaed', class: "p-2" }, h("form-control-date", { key: 'c8b8dcafd434382b14b4fc53ce995689605d2b30', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterTerminalOrdersListFilterParam })), h("div", { key: '3d52eebcde6a0b866c2a10c78ec50ea28a216e41', class: "p-2" }, h("form-control-date", { key: '598cda521e3a1fbe6e68d219d0d49e013d0adb0a', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforeTerminalOrdersListFilterParam }))))));
     }
     static get is() { return "justifi-terminal-orders-list-filters"; }

package/dist/collection/components/terminal-orders-list/terminal-orders-list.js

@@ -43,7 +43,7 @@ export class TerminalOrdersList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '325e00fe580784e2898131a717a3e69ec3636e58' }, h("terminal-orders-list-core", { key: 'b4b577b99e07a2eafe8454ee96fba467c83fe1a4', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '2a1b18985b1775ef97f0ef03a122ecc42a66fe15' }, h("terminal-orders-list-core", { key: 'a5950f3c91a5bfb09202f2db5acd367635d7bd94', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminal-orders-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,7 +118,7 @@ export class TerminalsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'cfe1ede487eed5a2723af6bc3df664b8a00803f8' }, h(TableComponent, { key: '7e14a73b25a1bd8fc929625baac78ad73b97f25a' }, h(TableHead, { key: 'e0e0f0b02883ea5568f8f9cef7efea7084421a2c' }, h(TableHeadRow, { key: 'fce520af31336e6ea90c47bc277f76f7e78f6708' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: '59b20605909357d3bf5967c6e23041c07b1b5823' }, h(TableLoadingState, { key: 'c838ebc2443a857aa706d0bf495a19eb00b5af0d', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a2a8eaaa3e2cbb1d8e64dce0ca55a0741ee857d2', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '2d323895c034ae25d4e4b440f0cf98c4de20efdf', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'c9f5a05d1c661f7e0780ec161b0afa6a74d5cf8e' }, h(TableFootRow, { key: '888f97557066f6003e1b09acf47aa4a75f6ff59d' }, h(TableFootCell, { key: 'db634074f6a089b52f7df8ce55af6f8499e3ba72', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: 'a30886dd1354edd40d3818215e29ec57cf70c7c1', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'dd5f6ca2944a4c612c5a99e7e70b64240ff77890' }, h(TableComponent, { key: '05c34cdbf22ec62b04165259fc456b8f7f94e166' }, h(TableHead, { key: '9d55c62444326c96a8cf81f2237d6bd16ecef155' }, h(TableHeadRow, { key: 'a0f923fb4937dad46d37085f15b93097aa9453bb' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: 'bb82808aaf16e572b90e09f9666384907317c617' }, h(TableLoadingState, { key: 'a5fad3901302bd468c1e8e312eb3fadedee709c4', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'f954dda201865b55141e9288219729561fc22240', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '8fce08061353a7ed9d5f364489cce99fb934e36c', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'e62da6a0cfca1447dce0e65999ecaee501cb1060' }, h(TableFootRow, { key: '12e0ac4fb55a6cb9960a4bc69296addccc629b54' }, h(TableFootCell, { key: '4024dfbee9409a2b1e9d22272ba23ed16c0afbe8', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '201eb194b2f8c620b5a775d7e2077c8e33de8aa2', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "terminals-list-core"; }
     static get properties() {

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

@@ -30,12 +30,13 @@ export class TerminalsListFilters {
             { label: 'Connected', value: ITerminalStatus.connected },
             { label: 'Disconnected', value: ITerminalStatus.disconnected },
             { label: 'Unknown', value: ITerminalStatus.unknown },
-            { label: 'Pending Configuration', value: ITerminalStatus.pending_configuration }
+            { label: 'Pending Configuration', value: ITerminalStatus.pending_configuration },
+            { label: 'Archived', value: ITerminalStatus.archived }
         ];
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'f9a009c6ec8e94cf4d580c50d510df652fa33ace' }, h("table-filters-menu", { key: 'dd27ab9f7e639785f81cf2389cd3da7b8e2627b0', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '1b2db646f0a60ab318bbab4eb8d780c16f7917c6', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '835db982f4394cd1a61938f7985d07f051d78b71', class: "p-2" }, h("form-control-text", { key: 'af7f08f938c9234de1581874be87d1fa0b2b3e06', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '7ff0b5676765cd38512a4f3944d5719af4c4c5e6', class: "p-2" }, h("form-control-text", { key: '2b0984ac67813efb517c9c25ea011c339fc2dd23', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: terminalOrderIdTerminalsListFilterParam })), h("div", { key: '9e26d822f9a111ed8006d3e763543a739c48d196', class: "p-2" }, h("form-control-select", { key: 'ca90a2bd5914685ccd6e618593553fb0f1c654d9', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
+        return (h(StyledHost, { key: 'ff589964b6a6e9f98e1ce5c5538f6232d7f27b38' }, h("table-filters-menu", { key: 'b852fcce0b550540854a7126ba5071a22fa24d7e', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '2a9d87170758781716319130c15472c227753a1d', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'ff7361cf9423a78c4131884a5c39824fab07f859', class: "p-2" }, h("form-control-text", { key: 'c06940487feba178c67b343addedd3f8ed5f34ed', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: 'a6602193febe8240e611dbaf3476791c623e925e', class: "p-2" }, h("form-control-text", { key: 'ae327625b6fcf26ff02bd6bfae61af933cd9c771', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: terminalOrderIdTerminalsListFilterParam })), h("div", { key: '3cdc430a8e360df60ca2d14c36df61570f7a0733', class: "p-2" }, h("form-control-select", { key: '71c43207f34d39a7207197e4a3e907f84988c1c4', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status || '', disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
     }
     static get is() { return "justifi-terminals-list-filters"; }
     static get encapsulation() { return "shadow"; }
@@ -84,7 +85,7 @@ export class TerminalsListFilters {
                 "mutable": false,
                 "complexType": {
                     "original": "ITerminalStatus",
-                    "resolved": "ITerminalStatus.connected | ITerminalStatus.disconnected | ITerminalStatus.pending_configuration | ITerminalStatus.unknown",
+                    "resolved": "ITerminalStatus.archived | ITerminalStatus.connected | ITerminalStatus.disconnected | ITerminalStatus.pending_configuration | ITerminalStatus.unknown",
                     "references": {
                         "ITerminalStatus": {
                             "location": "import",

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

@@ -61,7 +61,7 @@ export class TerminalsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '8be2d4a6da1e9e5e5dd5d86f1ef62fc693f57590' }, h("terminals-list-core", { key: '69badecd6e85df42bd303637d0aa201868efa9b6', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '33ad31c8b8748897664c91d3fc6349d76f276e9e' }, h("terminals-list-core", { key: 'dd16f1dd45b0c0d1d2f14469e4cc6f418b977ab7', 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"; }

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

@@ -22,6 +22,11 @@ export const MapTerminalStatusToBadge = (status) => {
             title: 'This terminal is pending configuration',
             text: 'Pending configuration',
         },
+        archived: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'This terminal is archived',
+            text: 'Archived',
+        }
     };
     const badgeProps = statusToBadgeProps[status];
     return h(Badge, Object.assign({}, badgeProps));

package/dist/collection/components/tokenize-payment-method/tokenize-payment-method.js

@@ -247,7 +247,7 @@ export class TokenizePaymentMethod {
         return paymentMethodType === PAYMENT_METHODS.NEW_CARD ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
     }
     render() {
-        return (h(StyledHost, { key: '373ac317c7a4c4c808ca67e8bf63be28c5dd43b4' }, h("form", { key: 'da07764bca9a6af5baf6b3bf025c1abf9661e4b7' }, h("fieldset", { key: 'af277c0c07697969a2c83dcbac6017a596c22077' }, h("div", { key: '1dc0ea324a4ed69eceb240504f320f1c1dfcf6b3', class: "row gy-3" }, h("div", { key: 'feaaff69b06663e759864857f6d15eec2aa31819', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: '0dbee981688f541bfcf638c55698444f6a4eb9b4', class: "col-12" }, h("justifi-button", { key: '851dfb38a1a92c9990050dc17c55a693f3875afd', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+        return (h(StyledHost, { key: 'bf221d17739bf70c3f581f3b9791a725e76c3f35' }, h("form", { key: 'df117d42d4160f31df1fca5d6903967cc48ad573' }, h("fieldset", { key: '550e670feffb405c669d44c44eb9073f535c6cb6' }, h("div", { key: '8eff7d3ab19618da54161220b92641bf19bfa82d', class: "row gy-3" }, h("div", { key: 'bf9d19e92be74abf48ce65c97efb3f9df52d4c3c', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'eef1f4e1e03c2263efb51ae94085c5a3d73a9166', class: "col-12" }, h("justifi-button", { key: 'f0e5697e658236610da45c34e64a8cbb3f0f9d95', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get properties() {

package/dist/collection/store/checkout.store.js

@@ -7,6 +7,7 @@ const initialState = {
         address_postal_code: '',
     },
     bnplEnabled: false,
+    applePayEnabled: false,
     insuranceEnabled: false,
     bnplProviderApiVersion: '',
     bnplProviderCheckoutUrl: '',
@@ -61,6 +62,9 @@ export function getAvailablePaymentMethodTypes() {
     if (checkoutStore.bnplEnabled) {
         methods.push(PAYMENT_METHODS.SEZZLE);
     }
+    if (checkoutStore.applePayEnabled) {
+        methods.push(PAYMENT_METHODS.APPLE_PAY);
+    }
     if (checkoutStore.bankAccountVerification === true &&
         !checkoutStore.disableBankAccount) {
         methods.push(PAYMENT_METHODS.PLAID);

package/dist/collection/styles/parts.js

@@ -14,7 +14,7 @@ export const heading2 = `heading-2 ${heading}`;
 export const heading3 = `heading-3 ${heading}`;
 export const heading4 = `heading-4 ${heading}`;
 export const heading5 = `heading-5 ${heading}`;
-export const link = `link ${text}`;
+export const link = `link text ${fontFamily}`;
 // Button
 export const button = `button ${text}`;
 export const buttonPrimary = `button-primary ${button}`;

package/dist/collection/ui-components/apple-pay-button.js

@@ -33,12 +33,6 @@ export const ApplePayButton = (props) => {
         }
         return classes;
     };
-    const getButtonStyles = () => {
-        return {
-            width: props.width || "200px",
-            height: props.height || "48px",
-        };
-    };
     const handleClick = () => {
         if (!props.disabled &&
             !props.isProcessing &&
@@ -47,10 +41,14 @@ export const ApplePayButton = (props) => {
             props.clickHandler();
         }
     };
-    return (h("div", { class: 'apple-pay-button-container' }, h("button", Object.assign({ class: getApplePayButtonClass(), style: getButtonStyles(), onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Apple Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner()), h("style", null, `
+    return (h("div", { class: 'apple-pay-button-container' }, h("button", Object.assign({ class: getApplePayButtonClass(), style: {
+            width: props.width,
+            height: props.height,
+        }, onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Apple Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner()), h("style", null, `
           .apple-pay-button-container {
-            display: inline-block;
+            display: block;
             position: relative;
+            width: 100%;
           }
 
           /* Apple Pay CSS classes - these are the official Apple Pay button styles */

package/dist/collection/ui-components/custom-popper/custom-popper.js

@@ -80,7 +80,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '8f01710b6c352f39b35c5814cd6a876ab7e088c5' }, h("style", { key: 'e1885fe648eda95a8efa50a8f6cd46a09f59cc61' }, `
+        return (h("div", { key: '1cffb3170b4f1335737dcbb025250d69c20a94b0' }, h("style", { key: '9e325676460e77d3c887934f2f9c685690731eb5' }, `
           .popper-content {
             display: none;
           }
@@ -88,7 +88,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: 'b2d5d36d62207fceda79ad2d1d0d0680bee6a366', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '406218fe16ad4b65e3e80ca467c3c49a462dee18' }))));
+          `), h("div", { key: '4a519440ce0d71a71b99d64bae64be06d2ab9c2f', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '99aab485a231bd1f51ef0b5465e9e00e7c8178a6' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {