@justifi/webcomponents 5.7.6-rc-03 → 5.7.6-rc-04

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

@@ -38,16 +38,16 @@ export class PaymentDetailsCore {
         });
     }
     render() {
-        return (h(StyledHost, { key: '5acae57b23c12cd033e876b7064fa1da53527113' }, this.loading && h(PaymentDetailsLoading, { key: 'db42d6d60e76de571551a20e01bea700ed4e16f4' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '36e906b2df77fccb24603d1c7253d5b935e4465e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '49bc76fa5f5e58dc148d7037ff95271124498e5d', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPaymentStatusToBadge(this.payment.status), this.payment.expedited ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : null)), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '4f22b26195f8d122d8fe6e40a19bbbb4004abea4', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '416770f35ca9cda497bd78b94f45add5a9aa183c', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'd51a299c1fb98496301acba116fbc8bd02308f16', title: "ID", value: this.payment.id })), h("div", { key: '6e7bd343cbad8f74b698f83941255a5eba2a712c', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'c99dbf37a902826e4168820735a562632bf00fc1', sectionTitle: "Details" }), h("div", { key: '2d3e8d4483fa3043db2d3ee384723ef033b0fd77', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '4d9d3e926535cd2d90d5d9808383c34885b5f0bf', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '39d2a6c2cb0ee10a878fc80833e168d16ddb1420', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'b55e1317033cd5f1fe8778cec6764cc445fe30de', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: 'e08773e47e04eb24d78076a2012909e9cc9e66e2', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: 'd215a59f20ce0799cce191b7b1b8b9104adf31b2', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '7bdc91d6a9ea0ea6d1356e293be6b096cbe3fdd6', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'df04e3d0f29519fb0155d6c3dbe2789777eea4e8', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '94e55b409ebe4d29c92f49b0e17b4934c40cec17', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'b16820e416b57838fb9ee41ebb7968d2d87b0922', title: "Description", value: this.payment.description }), h(DetailItem, { key: 'f52579f2da829f16014a68e3f85f5544327e0da2', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'fb8174ebec4bff736f0d8ae9f25ec33592d083ba', sectionTitle: "Payment Method" }),
-            h("div", { key: '301ae61c63f3290f109fe87fbd306a9fe5b650b1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '90f7031b92d4c98fbf200acff5c69c8d7d3c6d59', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '06bc828cec434a7e25b16433569b95867feb509b', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '2ca0a51f91c7c8cfdc0ac9c5a4e7cb3e7af41e77', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '9b4e0f3c62d491a3ce31a72181e7eb2258e27571', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '3f987dfd88521e1f3c5ed87fdb561abba6b15ffe', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '543dad947d01344e9e5009110bddb5821a02937f' }, this.loading && h(PaymentDetailsLoading, { key: 'abcd6ef7e515e16de73c67899c7cbfc9b70ab33e' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'b483164e45760433b992e0e2963286b8b09ffa5b', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'b9683686f022496a692aa3110aa8a45fbc5e20a8', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPaymentStatusToBadge(this.payment.status), this.payment.expedited ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : null)), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: 'aee5d5a5094b6f28ca91768f367c722c36839503', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '2b6e98971b18a1eac443eb533a970eac31e10b00', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '1eb83f88d6f03498b5c727e12b6bb9843a39c484', title: "ID", value: this.payment.id })), h("div", { key: '65084d14a86e1083a04d3a5ec090836c127e9b2b', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'c39fb2358ffd27569eaa1d53f2b84436d8c3d13d', sectionTitle: "Details" }), h("div", { key: 'f553f918635184ce74a961adf048e0aef8e4095e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '10904bbe38efc40725407691278d5ef1e050c19a', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: 'd508f41ab412a26de5d77677083ac5caa5acdbc1', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'cbd6726b86287968734945591503e72fcf3c33d1', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '0c826a82c18fc6ddcceafaca8e7c2a365d66ed35', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '891a37d3c9a7ef23dca67f46a0c889d1be15d7ec', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '4072981c52ccf3c44e1539a7faa5c3b71a4d5bc0', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '268e56e5219ce1c32ccbd0fc8b8baea0c0bc3e14', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '6c168b8af36129c1463abb5f2297501c6748c53c', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'a8f5fffc9ba51dff3e7fbd792c94b0281f8c6bfe', title: "Description", value: this.payment.description }), h(DetailItem, { key: '420e914293457433d5b3ca2251c2732bbaf93124', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '2f8e24f28b11e7ce54013d69ea093c68c0aaa6eb', sectionTitle: "Payment Method" }),
+            h("div", { key: '49dc2c4227ae2ecacd633ec0e3f70ad084e1149b', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1a082c26a64699c83a9ef591a67c104c28d2f701', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'cf65c3bee1a9468a271a20568bf4a94e793134c9', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '20844b52ca50fcf86232b00d28dffbac9255500d', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'bbe9028644fd810993fbd41515377efafa42104a', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '0497fb5cd1dc27c3b6231c9f4a7a90280e91bd14', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '5d6a4499fe5fcb49090b3846737304378ed72e9d', sectionTitle: "Payment Method" }),
-            h("div", { key: 'cc4c4bdf5b4206e046263544dcc40b2647bd3d96', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '394957be1477b450529256420f47a2baf61ba0ad', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '40256eb7252cf350b8044b911413adeb969fc149', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '6753602b063fcd34b9e0db84438ba782e3eb858d', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '1f216f44c78cbe79416241c7e9616bc778f60ab8', title: "Account Owner", value: this.payment.payment_method.payersName }))
+            h(DetailSectionTitle, { key: '8d1bf178e46cbbc4f032921131596287ebbef3e9', sectionTitle: "Payment Method" }),
+            h("div", { key: '229f45908714278751ff15130055f9fee4c9d433', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '8f5bcea109acde4bdda0f075277ec8c452a33c05', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '5ab277a94c113f1b3abfa596dc82444d6e7fe6fc', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '3816609a36fa8bb3a6391fa00b92244a438de013', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'fc14e9b11c89f738df3318d1ef8919b07d57c027', title: "Account Owner", value: this.payment.payment_method.payersName }))
         ], this.payment.metadata && [
-            h(DetailSectionTitle, { key: 'de040eda2eb0ad1d5c7c08d20a22da56dc0c05aa', sectionTitle: 'Metadata' }),
-            h("div", { key: 'd4d990042524da1e655b40cad77af26642c1dc9f', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '5468b34050c9159503862f8e12391299c603e8e8', metadata: this.payment.metadata }))
+            h(DetailSectionTitle, { key: 'd89b23ef22f085b803b6b551ca6e0d4ba8d13d06', sectionTitle: 'Metadata' }),
+            h("div", { key: '116486645abcf17cf8641c2dc009982a506b0745', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '3f682166ca1acfc896281b85afb8e8514240b2dd', metadata: this.payment.metadata }))
         ])))));
     }
     static get is() { return "payment-details-core"; }

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: '664aa30267863d37af14dcced80f9a73ba43064f' }, h(TableWrapper, { key: 'eac72c7a0ed98734500e3e25d7d3f1ea6f07a73e' }, h(TableComponent, { key: 'c5d22e34a2d56d7b892cfd20aa495489b81efbc2' }, h(TableHead, { key: '79a87ca5015a964a5668388079179e3154e18d86' }, h(TableHeadRow, { key: 'deb2b85351c535fa535a68cc420e648ae2f2ff6c' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '73ee49890b3f3a2a827a73d59dd23b559092c8e4' }, h(TableLoadingState, { key: '1aee61900026ad4f668d5908180b28f5a507d6e2', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '4363869c2b1ee5444dda836115ba4770e3d198b1', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '5d77147db6ff290c487dd71b0b80f7a4e0513069', 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: 'a3b1aacaacbc430121ae1f39095f3df7cb280e14' }, h(TableFootRow, { key: '07746bb99d2a5fed2d129864c3062ecd011a6063' }, h(TableFootCell, { key: '991930e0f18211617d94b37701ddcb80a66d71f8', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '6d5f299334a406e7c286e60a0c895f3490ea4a3d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: '5c698480143316a0bde55f786e43c38078101fe2' }, h(TableWrapper, { key: '7aa76eeecda5074a4f80f845be5458caf2dfc3d2' }, h(TableComponent, { key: '901404b33447a3b2aad2c203d9a69dd418cc9e20' }, h(TableHead, { key: '78b100e8c6c53f0d92cd67eb5f74299d78f8f2bf' }, h(TableHeadRow, { key: 'd8bde261d1b1169757175660303917c3edac3ed2' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: 'c08217fd1645c8c3649c97180612cac7babd4a83' }, h(TableLoadingState, { key: 'e8005f54f42b00e11bef86371430d90f72a9e277', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '0b844b8669272a660f434a160643cca60008b9ab', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '600ab04c6d42513bbd8968c30d9419ced62ee4e1', 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: 'a30dcd95290c541609ecbc2ce8ace8d16e976c61' }, h(TableFootRow, { key: '03be11678b4e7bafeb9d4d5b71ca05f1a64cd622' }, h(TableFootCell, { key: '07d1b9c331d3d4826d205f9d7ecd77dfa8e38878', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '3037569e28276b7c88b7ac4f0ab72a2c3fe5d5b9', 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: '8717c3554e0d5c8a2cd20b3a5510691c57d9f89a' }, h(TableComponent, { key: 'f23e5222c49c9d2f74c47ee0ded1c79319bd662c' }, h(TableHead, { key: '1cc4cf3bb057247bb0f26efc8414f574685ea134' }, h(TableHeadRow, { key: 'cfb828ecbe828cdd096e1e00710443627c00e72a' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'da5eff4f32f2c47e700665a417f3d71605a287c3' }, h(TableLoadingState, { key: 'f5214c8760d679e47d50d1ac6883176abfd8aa91', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'cbc72d572081b54b42d5adcb4e86937bf6c10fde', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'ce954f66d360840e0c00d7acc77e8e8d43d93dd6', 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: 'b6794bb85eb48d3ca9fd284a538eecba052b4e41' }, h(TableFootRow, { key: '923942c6cc9e110a93e0ea63dc4a99296ed10d63' }, h(TableFootCell, { key: 'ad259631ffc9d9a567375c7d28f48d449ac40990', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'c06a9e46d23c851a9271bf893889cb3360475070', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '3d19bff21b3edbd06817f4e91110a6b53ad2b6aa' }, h(TableComponent, { key: '3f32495d49ad96a643bd11d21b140458bf26c3bd' }, h(TableHead, { key: 'db75917e259fb0fea5e1396d388aacac38fc768f' }, h(TableHeadRow, { key: '22de3e5cc40b0ece323e8fed97580c94598ccea0' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: '4fd97328884439dea3e036169753b39f9e7b6053' }, h(TableLoadingState, { key: 'c9bb14a64dc3243dacb39eb22ceeffad0abd49e3', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '68e583dc13ffc089067cc54c2be9ca7898efa116', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '14ac8451b9da3d5c39164620c69b8e0aab282145', 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: '55ddfb968541d296ea896ae14c80f1557185e920' }, h(TableFootRow, { key: 'a9ed770e075d1be82444266e842b2bf8ace67a7a' }, h(TableFootCell, { key: '6d82711cd658231009c7a3e66058c9895f9e431e', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '51c4436c22c62ed82d960011e8c799673cdbf2c9', 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: 'edb76af8b61fe98b719f5f88418410659789a586' }, h("table-filters-menu", { key: '00281883e331c0f1d1b8a8a8ebd09fff40859c52', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: '2ba0e2b794aafc6e775ec0699846e35292b687f0', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '371d156495fcb8495288f1dd4c119ff9bb32a32d', class: "p-2" }, h("form-control-text", { key: '1bf10f06973fe3ee7ab1c2c6871a7c79a12543b9', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: 'ed1f0667a905aac7ac70c612ae3f1666b8e052f3', class: "p-2" }, h("form-control-text", { key: '841a6cf1cd66f942470f0d6c93f78dfad6865fd7', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: '67be85f9eeb70c1adf1df71772f19e154c46f598', class: "p-2" }, h("form-control-select", { key: '403dc71eab722d8e4067b9a759e0795ba53bff9f', 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: '6d28b998413263d8b88f3fa425a7e30fd669d38e', class: "p-2" }, h("form-control-date", { key: '733b5e5e99a4a8ce670749a56fcd407583dba41b', 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: 'c8390389045dc56592e05d1ae7a2236575569df5', class: "p-2" }, h("form-control-date", { key: '718522151a88e3ffd9d3c1ceb3265767340ab60a', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: 'e3174a9f9310710297a74ee02d658a168af131eb' }, h("table-filters-menu", { key: '2336d8d7a05e259ce065d259357243f9a844e32a', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: '49ba13212d5ae28e55520a34592d61b3c7def2eb', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '427fdf6a569332a102b7e5bb475d4a71c0d36d5b', class: "p-2" }, h("form-control-text", { key: '10845be407149cc17c8c75e3b87c38ac6714dccf', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '447bc64b346db7ef5711703b22672518ef981e8a', class: "p-2" }, h("form-control-text", { key: '3620bae1b22ee69ed6688b20569b43d2cee52280', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: '4d064b2a739491084106daade8b3cfd4170752ee', class: "p-2" }, h("form-control-select", { key: '2c444d8c97fc0f676c91aec3da7d91d09997c5cc', 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: '0440ce666625e61b53844ef1a1a81a79fbeb5e36', class: "p-2" }, h("form-control-date", { key: '288c369557cbc4386093aedefec2963942820508', 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: 'ceebd4e7896ae0ee7395d0558650f9cff2810029', class: "p-2" }, h("form-control-date", { key: '2433bd25ca1dfaf7c5d284d367fcbe7c8730bc6c', 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: '9d29383ee2084a5498f6dadc2a710748f5c81c13' }, h("payments-list-core", { key: '1a9255d13b6b1c5b8def24c70eff364ab44957f0', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '9bdcd5443ceacad1dd33b4c2b47f65dca63eb196' }, h("payments-list-core", { key: 'b5d4907c84add674afe115baefff6ab75a6bc797', 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/payout-details/payout-details-core.js

@@ -52,9 +52,9 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'e05c4ce44c4c8f55c654b1bdf1cf6fe683cb9b81' }, this.loading && h(PayoutDetailsLoading, { key: 'e376fe6853e8d7f51c4341eed7b88706bf0f7b8a' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '2dd14bbe8176fbb2ea33bc10c626295d6dc1e4e1', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'dd564d982ac3efb2f095655cf4cb8418811caf02', 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: 'a1fd083db968de7d1b4f14a40bee168face1d783', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '1ab1aa48b5b685e0f6b01bd3199884cc4e7a41a0', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '7463594d15588fdb0f81c75d9951d8b15872ddec', title: "ID", value: this.payout.id }), h("div", { key: '8e6db2a97f3fbb3e6249dfaef88dbfdaad2067f1', class: "m-4" }, h(Button, { key: '3bfd46400ea58e57a83fc9872656113d69a77987', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '427a17dabc56f57f7c91d36916516d78fc3fadf8', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '08b15fa861e7d560df9e6025f79bf4b1c0ca861a', sectionTitle: "Details" }), h("div", { key: '77977c92b829ac50ffb5af03860ae1966116b703', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '32f2044cb92d6870e053eb92de901e040c15ec2e', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '52e3acbe2a733e1d6f28a509b9eefaaffd94ee7a', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '62ad6df7ed23c6f5f8babacb4bd4b22636f1b42b', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '318d56c8cec9f35070df658bc1bb2aefa2f4fe75', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '49b8c56d9e17c94ea48f693fe296ded03956f62e', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'a886b2c55ae3759319157ef962d976ca20e9f28c', sectionTitle: "Account" }), h("div", { key: '06f4475021fa8cd81dd42b7de5bf511275872d24', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '614a22ffb02c6b50381cad42b6ac96a08904bab7', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'fb5a846b307a56987d0f793a4ed340e2c883bc74', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '5cd13f1e3244b4e64dee2f68a1d85f1c4a3503a5', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '4b09718e6f39c440016e6ddca4d93bc73e10255a', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '3fd5b3572698f7e84de5d047277389fb521dbe54', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
-            h(DetailSectionTitle, { key: '556639af0cc42f631033ce58c29c34fe72acbec7', sectionTitle: 'Metadata' }),
-            h("div", { key: '5429777122823531e770ed074103385cf587d3ae', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'bfef600620b9a041678987fcf5abdb5b8dbc9672', metadata: this.payout.metadata }))
+        return (h(StyledHost, { key: 'a109088ffaa3437430299158bde07f695f6ed0a8' }, this.loading && h(PayoutDetailsLoading, { key: 'da2a9f3b35291bbd1abea3de3174b77ee58586f2' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'b97b623716beaa39a2d9d5d9dde554b461948fae', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '716414411ca5d8d5e30c7f52aa4d8a94c5dfb163', 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: '898b1578cbc0b90a6ebd305ffcf45c996ea36942', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'ab03a03ba80781aa760bed450944c35f0210216c', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'f65b10fd429d33391471cbacccc001d38943331c', title: "ID", value: this.payout.id }), h("div", { key: 'f0716854307a8208d486448c1e7e7c2e9f7bea9e', class: "m-4" }, h(Button, { key: 'b9b963854f14f508984eb70d37656226b334d882', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '70df708f9f7ddda9d21a58481b7937a567ff0179', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '24f60a66b848ba091a75fe7877c23b1c45a790ad', sectionTitle: "Details" }), h("div", { key: 'c97f709a9030081871ed6b8878b8d9d73cbdb51d', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '7782dfef517e23171d7b1d3023a019dc51731f7d', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'edcef38d00c9febe83acebd6c4c4e462ee8c117f', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '2ae0d6434310d6c726226e6e8199d58f531ead31', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'dfd06d7613a315366982cafad64214d41246bc18', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '0c3b97b7eb651863b5df30989d059e0cb9c94967', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '245a0a7a705d7bae8aa8c6b42513ce613d6b2238', sectionTitle: "Account" }), h("div", { key: '914381b1cd84b4ee90f994226054b9ca241707f7', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f62e176e6dd5d74dae815a2eccd25b96d1bedb17', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '893f89d10f01718d7dee7621e9d7572f8789084f', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '2531d9a01f8c016edbcf4687ea652fe57dcd6b54', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '107cadba8101d230777f7011e2444e31d9db4ca2', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '85919cc3b23f149a1a488e7dc2dea262df59938f', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: 'b54afae3f6a3310483988076c3f5548edf51e605', sectionTitle: 'Metadata' }),
+            h("div", { key: '0d25df6c414f619088441e9286f47a17920ac0bd', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '14aa74c5756f5bf83769d166ee6ee56317506747', metadata: this.payout.metadata }))
         ])))));
     }
     static get is() { return "payout-details-core"; }

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: 'ed5653473a599f6d6d80aa68730ed999398b0c76' }, h(TableWrapper, { key: 'b3d1d97363d8c5e798583604c7979ba1f9fa2752' }, h(TableComponent, { key: '477d9ff10b92d35b506ef8b78279bb04e4030549' }, h(TableHead, { key: 'c374d061a751b00ec3d7c95e8280653874fabe47' }, h(TableHeadRow, { key: '694753bbfdaaade6c5107100d7f99a4728a59c62' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '3e071619a0035b1aec9635ca2476eb279158cb59' }, h(TableLoadingState, { key: '16708244edda538a30bd63af865f9265c3850847', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '150b6e2956f73767d31321fee04d6151818337ce', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: 'cd5d9464b97567378e07ffd9be1083738d940dc8', 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: '83ed7fc0b0c6511de830a3a6880b1c1476a09306' }, h(TableFootRow, { key: '8d636efc57fee42f65165c6aefddab535d30e771' }, h(TableFootCell, { key: '2bed98f16b5b2769c6eb1c5ec8e65c90e1c6fc53', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '1ddeac174bc996e08af5e5e060bf8c3303d4c0dd', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: '5a763f027a36c6017a7147ee9c3120268f43cb54' }, h(TableWrapper, { key: 'e643902555cf3c155305dfdf6c8d0f69034f193e' }, h(TableComponent, { key: '5d3c8dc3dac3bb92bdb1f1b4ac43f4b7f3139b9d' }, h(TableHead, { key: '9e8619e07107e0dadad8808beb9d12237fb4d926' }, h(TableHeadRow, { key: 'a453b3c6673d340adc818ec0650a504efd7805d9' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '57c2a6a1b5670cc8d095dbac9e2d4aea3f800d98' }, h(TableLoadingState, { key: '543c94396578d7b0b3827e9f87e3469612da2be6', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '1463ab045fcd54c413223e329356a00c07601fac', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '6f871d83b2a7230b19e5b2a0841339bff8fbdc24', 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: '6b793c9a4fdf5fc8652adea2c7f50cd400584190' }, h(TableFootRow, { key: 'd7b7d83952a2c3912d4dd3c6d26907af1a6f09b5' }, h(TableFootCell, { key: '1ee540a539d1afdd8daada8cae209811408994ce', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '52af21d0813b3bcb371ed01a0b656d63f8f2fc5b', 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: '14a73ad4e8a841a731667d77a5be88d81a32a4e4' }, h(TableComponent, { key: 'aeb950f72b44547884da8d825604e36fd0d10945' }, h(TableHead, { key: 'e938550e08cc10f9f9bcf332c1ac187761849344' }, h(TableHeadRow, { key: '08e692828490e85cb7764a14a95a499d113136a1' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: '9127ceac1604c85476cd4803a7e7ad2646bc5bf0' }, h(TableLoadingState, { key: 'd0e58b5ec8b8aad83922f8863fa7c0ba7136aca3', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '6e0b794a28b8067ba88330b96090362f0454c894', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'c858aa45775a92fc0b9e76326cbd23d8054f5342', 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: '98bf326a59c4b32d06c6738f086a660116576aa8' }, h(TableFootRow, { key: '36a2b0e17a94f5e361d12d6bc0e9fd9aaebf41e8' }, h(TableFootCell, { key: '54daa1d4c6e86128d74a75142b13184d3ec74502', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '7199ea8e69d351cc07d014770c8b48f6d01d04e3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'eef5a9a859e8e36659052ff0f1b0ef1f4ac3e44e' }, h(TableComponent, { key: 'd20e57e7b2a4d6be3e264cb0236bd08e2528451f' }, h(TableHead, { key: '12052d8c0ed0eb32eb7a3a92d5a656de1cebf589' }, h(TableHeadRow, { key: '664433d91c5541b659668a78000e4b08679948d7' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'bc13cd29949d1a4c2ac3ae7d4116a74bff8be79b' }, h(TableLoadingState, { key: '702fd0736a903b0f580cfd55dcc8e2e1ce11a25b', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'fce7164d3b1916962fc86e259f3440dd7128d75f', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'f2c9c7d68cda017d27dd7914c7bda79579743f6a', 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: 'c33c55626523404dcd6660399ef3f44e5f315e84' }, h(TableFootRow, { key: 'b0835d4fcf91c861fa751601839bb34e7b90b88d' }, h(TableFootCell, { key: '26e365e2210561e207346b4477fdb0859d653cce', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '240c68c350d764a753aa3da63cfd24c70c36fdab', 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: '3d52e500043d280ba63e03095096c77fe253106e' }, h("table-filters-menu", { key: '4dd85f33336a26692bbcdac30cdde6f4f091213a', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: 'f093372ebbf5841a80cf8e05cd26c8f8c992db59', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'cc4ed47e4b8373bd787621dda6e9327581d359cb', class: "p-2" }, h("form-control-date", { key: '3f176b4fb1ec7efadf2ce38479695f9d9df2b5f1', 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: '5eabb3a72a3c223512ccf584cf5b7ee901594b30', class: "p-2" }, h("form-control-date", { key: '8ba7230275b3b89f75f1c9d5fa654c493d626940', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
+        return (h(StyledHost, { key: '02e69434ff35558c0ad9ac8478076df56cf35876' }, h("table-filters-menu", { key: '6e5c7f3d86bcf95bf910f1bdd5d83e19c89bb091', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: '68bedaa81dab9476a4a22e390c3937877e00f9cd', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'd949a6b3fcf31775856f3999514c1a4522caad51', class: "p-2" }, h("form-control-date", { key: '759dd3e02db4cc3984f03efb7d8e4ab2ab05b96b', 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: 'b52a229346b6d1f80e2fee56dfc120a43ee05254', class: "p-2" }, h("form-control-date", { key: 'a9994512753c3a457a3a3edd4c36e53ec83f8b58', 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: 'b01ebbd64e4f09083663f01429c3d19ca9790c4d' }, h("payouts-list-core", { key: 'ee137e4322ef9ccf567b4172b0b8831dc18b38eb', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: '1d530a07e25acb9e1d8882c6c2fce6dadbe54081' }, h("payouts-list-core", { key: '09cd63a2b0e2939fd60568de554441361434d983', 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: '85a1a02fb87d8582cb58716fceab3037f2b2db59' }, h(TableComponent, { key: '16d1f186acc00b28437ebb5608a69b6b69fa7914' }, h(TableHead, { key: 'dce803614dd4c1fd7844aeeb9539cfa32368b277' }, h(TableHeadRow, { key: 'f8c81e2b7e35064e8f2699366045fdf63d0b6a25' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: 'f1d27f78f5985b0e7b0e24bc370e787d08d7d441' }, h(TableLoadingState, { key: '036e603cd4ba2785b931f9c101c73bda204e0c3b', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '7b7e58eebc3644e05e989e6593cc0b995f52f3fc', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '2ba2fa702cc279cfb4bb6116aef5f99bcc6cdeea', 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: '8448f124fd6d5cb82983af8b163532e067d44e7f' }, h(TableFootRow, { key: '3172efc0062b99a291ef945c900321d4db112dda' }, h(TableFootCell, { key: '690c7414a1a3071a0d662c14ebe86b5f771da10a', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '8034a4c00f149c1b720db9c78b91e6ea635bd86e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'f0a8d6a0fbf50fd446e12aaf677bb87e5ab6d771' }, h(TableComponent, { key: 'abe837d8440b402d89c05fb9425c4962474bed16' }, h(TableHead, { key: '8d5a77322176b1f8ce12174d52de7216179df512' }, h(TableHeadRow, { key: 'd882935974e09bbfe58925b5692caf5af722e2d1' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: '8bb87433e04a6f8d2366e09bc05621ee8e6fa4be' }, h(TableLoadingState, { key: '82343c3b05bc069fd51dd734b4ee4871ca32fb86', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '88db6bbb3b92efd077c7d12cb0c0a204c05261f0', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: 'b2741cc5d3f4ab2cfa4a57ff7474afe59ebabedc', 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: '69f0a0dd95c7447b5849814418844343541e794d' }, h(TableFootRow, { key: 'caeb2dcb3ad46a840b2bb154e5fd0d509e468968' }, h(TableFootCell, { key: 'b13f5d5b8cd6340d4c63593f69c560622f38d25b', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '277fa5cdbee972968ccabc7ef396e412b638405b', 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: '24b9da56d6bef1aa545007f2dba95b1da7fa4f4d' }, h("table-filters-menu", { key: 'ac3c26800fff2176782cf8240916cfd7e9a20333', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: 'cf11a3bc06453a9970120d0ac05334754a51181b', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'e72c2e114463c57e0de6042f2b3c419359f416ab', class: "p-2" }, h("form-control-select", { key: 'b2a3d66f6c0bb9fcf1da45cddc0b9df78ffa5ef8', 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: '944a5f0ff5ff2fb87bee60da154b8dd03660e4f3', class: "p-2" }, h("form-control-select", { key: '992921c6f9ecf20587f814f87a44179db3fe49fd', 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: '5acb3775b09fd508cfc77bf4b309cf43ca71a47a', class: "p-2" }, h("form-control-date", { key: '2b712d2c2903f2d579ada15a0e27eb97cc38c2f9', 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: '66dae53f3fe0a6147570b15e6e85f7a821d7a322', class: "p-2" }, h("form-control-date", { key: '3715aab2b7637c67b1373bd0135a8a35c2b5a34c', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: '5b9798d42f48005e7422f1ed2c14372fb3837f2b' }, h("table-filters-menu", { key: '84cd025dd2f18a574cead52ab411105794c7c1c1', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: '6fee37e85fcd2064793436faaff217ae8fddb326', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'a69fa9c6f69f75bd200a5629843d268c02595498', class: "p-2" }, h("form-control-select", { key: '03ea6ad955f8a5b31011cf3f7446867b43349ae2', 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: '11b90f152086a43bfcb01f52c8566797884e081d', class: "p-2" }, h("form-control-select", { key: 'bc63d00ea926eafe0f3b02e8ea77e85c44e15cfc', 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: '0a7c63e637d8f016bf0e08a2c1bdea5a13c0dde1', class: "p-2" }, h("form-control-date", { key: '449666ba9aa6992999356cd7a153c3908787d80b', 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: '4c02f8c7a0b0eb9b330b1a001838e02a3c4bb007', class: "p-2" }, h("form-control-date", { key: 'faebed4ecb1316d06e54cb3204d03098d2eaf892', 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: 'e0fcbc2ccb76acdbcd7a18772d509995c81b1ae1' }, h("terminal-orders-list-core", { key: '21b108f554caa4343ecbd3bffa404c01442ef938', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'e51250fa0af34799ed165080e8d0e1feb31cf6d8' }, h("terminal-orders-list-core", { key: 'b8f7b20bc976805fa522d3f85fe1382f1326381c', 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: 'feaf37a5952ecbb6bd9c1bc1a0aa1239e809fa14' }, h(TableComponent, { key: '4f10f57069b2303cf4367cd43af6683385d48c93' }, h(TableHead, { key: '527818c903322fca90a9b30b48f46fdf9c51a4a1' }, h(TableHeadRow, { key: '4b5c0cf99b36e0224193efd5b013e6ca5f468133' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: '94f3573897fecf7c520ceb51bfd6cf68706f14c2' }, h(TableLoadingState, { key: '709fe7ac553832df64034f9b9acbe1a64004c99b', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '25c050dfaaf86a3792e276c27938a066b014f619', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '6aeca4b673c92d095e7d871ca5acb10f66df9b7e', 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: '89554de16c42f1016b7aa6173b6b89bf3e3159db' }, h(TableFootRow, { key: '97b8cbebcb3bc6152c2f1329a00ed6a44f785cbe' }, h(TableFootCell, { key: 'd299aa13feba175e46fd8ed9883232e9145ece52', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '01a3d9ee669d1865c167d2fc9a2ca9166b984a6c', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '8e70667b4226ce50b486c81ae6387657e4312703' }, h(TableComponent, { key: 'f5740b9bc51f388e8129521970044095839647f6' }, h(TableHead, { key: '8243e52f2836d2dfb58ad6df6ee852ceed57167a' }, h(TableHeadRow, { key: '8159fd34093bbfbd3f28fe30bd2b0c121a9e0b28' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: '5f2d3986717b561648ca7906d85fcffb48e9c098' }, h(TableLoadingState, { key: '968cbf12743cfdbb7bda18d20daeaee0174df069', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '660a04743c58130a6bf7963049db1dcb26843f65', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '662ca47669e44dd8ee32474e58d33e2b73b86efb', 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: 'f7edc58fc126bf3ca0fa3f7319b3c79bbb4e3024' }, h(TableFootRow, { key: 'ac0dfb2b66f8683c062ab14ea43742491daa705a' }, h(TableFootCell, { key: 'd6158f915b086daf88664c0dfccf8f1e50e6dee8', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: 'f85bd4c54bbe9cd13ebd70c164e35beb5c05c7b7', 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

@@ -35,7 +35,7 @@ export class TerminalsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'a5fe1671dd03e1290544f3deaf5aa01b5d937d9d' }, h("table-filters-menu", { key: 'f7a3d95c1b0ad0b52b96f990fd56fdbe64643493', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '92b0144a5ab7eee377e053e9b006af846ac43d64', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '3970a2e11f3be7953af299be4825166a829e9a0a', class: "p-2" }, h("form-control-text", { key: '0653692eaffdb14b092643a9f3c1b8e126c942db', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: 'c9d152d0a2d7e7b7fd7e72693a2248a020545a24', class: "p-2" }, h("form-control-text", { key: '785e7b382d9cadb72e242a379f2525b2da5140de', 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: 'f4f1e79eb81a72dd25bb4f4c14450ca82657f213', class: "p-2" }, h("form-control-select", { key: '52b390e42309e13e2f09df0681392bbf8e84aed8', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
+        return (h(StyledHost, { key: '81ef3685f99ca6e33c2facd2bf22f186e54f3250' }, h("table-filters-menu", { key: '97218ed4bf43e21bde0f3ac282d77f584bb042b3', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '2f1b8d3d55be6f3448c344a90ababc120723b453', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'ab5d8d959bb8541df3bba8e18775fc1ead7cac48', class: "p-2" }, h("form-control-text", { key: '26234bc40edef8e4cc3be2d83e8a9beeb8906eff', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '1cd238d705fc3222694e882a5848e4f5caadc254', class: "p-2" }, h("form-control-text", { key: 'a8d17bb259f0003207f16c328eebc0673e8c4377', 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: 'fd1a215f7350a74dedd1eabd2c9ea3daaf72bea5', class: "p-2" }, h("form-control-select", { key: 'a2e14787e232b5415d2d4258e56e8618fd7a43bc', 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"; }

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

@@ -61,7 +61,7 @@ export class TerminalsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '57a9be57de845dc3f905260445e245cf30458af8' }, h("terminals-list-core", { key: '00f79218e216fffc12ecfc3b158cd299ad054349', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'fe998292778d729620666188320650f3a25c5bda' }, h("terminals-list-core", { key: '94d37a1376da8694c78d6b6dfa20528d5c008e7f', 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/tokenize-payment-method/tokenize-payment-method.js

@@ -19,7 +19,7 @@ const ERROR_MESSAGES = {
 export class TokenizePaymentMethod {
     constructor() {
         this.isLoading = false;
-        this.saveNewPaymentMethodChecked = false;
+        this.computedHideSubmitButton = false;
         this.submitButtonText = 'Submit';
     }
     componentWillLoad() {
@@ -29,6 +29,7 @@ export class TokenizePaymentMethod {
     }
     connectedCallback() {
         this.setDefaultSelectedPaymentMethod();
+        this.setComputedHideSubmitButton();
     }
     disconnectedCallback() {
         var _a;
@@ -40,9 +41,6 @@ export class TokenizePaymentMethod {
     handleRadioClick(event) {
         this.selectedPaymentMethodId = event.detail;
     }
-    handleCheckboxChanged(event) {
-        this.saveNewPaymentMethodChecked = event.detail;
-    }
     async fillBillingForm(fields) {
         var _a;
         (_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
@@ -120,6 +118,27 @@ export class TokenizePaymentMethod {
             }
         }
     }
+    setComputedHideSubmitButton() {
+        // If hideSubmitButton prop is explicitly set, use that value
+        if (this.hideSubmitButton !== undefined) {
+            this.computedHideSubmitButton = this.hideSubmitButton;
+            return;
+        }
+        // Otherwise, auto-detect if component is slotted within modular-checkout
+        const isWithinModularCheckout = this.isSlottedWithinModularCheckout();
+        this.computedHideSubmitButton = isWithinModularCheckout;
+    }
+    isSlottedWithinModularCheckout() {
+        var _a;
+        let parent = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement;
+        while (parent) {
+            if (parent.tagName === 'JUSTIFI-MODULAR-CHECKOUT') {
+                return true;
+            }
+            parent = parent.parentElement;
+        }
+        return false;
+    }
     get availablePaymentMethods() {
         const methods = [];
         if (!this.disableCreditCard) {
@@ -195,8 +214,14 @@ export class TokenizePaymentMethod {
         }
     }
     buildPaymentMethodMetadata(billingFormFieldValues) {
-        return this.saveNewPaymentMethodChecked
-            ? Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupId }) : Object.assign({}, billingFormFieldValues);
+        return this.shouldSavePaymentMethod
+            ? Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupID }) : Object.assign({}, billingFormFieldValues);
+    }
+    get paymentMethodGroupID() {
+        return this.paymentMethodGroupId || checkoutStore.paymentMethodGroupId;
+    }
+    get shouldSavePaymentMethod() {
+        return !!(this.paymentMethodGroupId || checkoutStore.savePaymentMethod);
     }
     get shouldHideRadioInput() {
         const showCard = !this.disableCreditCard;
@@ -208,13 +233,13 @@ export class TokenizePaymentMethod {
         return (h("div", { class: "payment-method" }, h("justifi-radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
     }
     renderSelectedPaymentMethodForm(paymentMethodId) {
-        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID })));
     }
     renderPaymentMethodForm(paymentMethodId) {
         return paymentMethodId === PaymentMethodTypes.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: 'c3c12d1c58540f7fe794bc999e8cc8f47e9e1f8c' }, h("form", { key: 'aeb7843431a96feb79da49f1c28e0de6dc2d65c4' }, h("fieldset", { key: 'e890fbe8bb05bb6d74f8cabc9f4eb4feee4284ee' }, h("div", { key: '5abfab85b050239deea655dc777ff026b6627b8b', class: "row gy-3" }, h("div", { key: '9bb9dd865d6b2162d19a773ca232934da71bd792', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'aac644f69aa0e68632b850fc0f5c1442e26979e4', class: "col-12" }, h("justifi-button", { key: 'd2a35bd402b0d45dbcb48fefd44a624d4ab27a64', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton })))))));
+        return (h(StyledHost, { key: 'b8cf3e66f93bf1b1dd2c3116781ddf0168cbd4e7' }, h("form", { key: '70ad04762a32e930b6b96c2d8609577cd5d1e8d6' }, h("fieldset", { key: 'f7a7d53512b3d034999b18b666381c2df04f082b' }, h("div", { key: '6e5be958e583399ac733aefe4ddf935f5aec98df', class: "row gy-3" }, h("div", { key: '2d81034d2d95532a18bef58cdd1635b1d3b1d735', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'a791aac6520c187fd336012d97c976ece891edeb', class: "col-12" }, h("justifi-button", { key: '9ff1733b1811fea31b1e4dc41694db4eb40be14c', 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() {
@@ -362,7 +387,7 @@ export class TokenizePaymentMethod {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -381,7 +406,7 @@ export class TokenizePaymentMethod {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -397,7 +422,7 @@ export class TokenizePaymentMethod {
         return {
             "isLoading": {},
             "selectedPaymentMethodId": {},
-            "saveNewPaymentMethodChecked": {}
+            "computedHideSubmitButton": {}
         };
     }
     static get events() {
@@ -531,6 +556,7 @@ export class TokenizePaymentMethod {
             }
         };
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "disableCreditCard",
@@ -547,12 +573,6 @@ export class TokenizePaymentMethod {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "checkboxChanged",
-                "method": "handleCheckboxChanged",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }];
     }
 }

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

@@ -17,8 +17,9 @@ const initialState = {
     disablePaymentMethodGroup: false,
     paymentAmount: 0,
     paymentDescription: '',
-    paymentMethodGroupId: '',
+    paymentMethodGroupId: undefined,
     paymentMethods: [],
+    savePaymentMethod: false,
     selectedPaymentMethod: '',
     totalAmount: 0,
 };

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: '00471f914090d5f7c9c4493334e37bc669178f68' }, h("style", { key: 'e4c72e453b7cbfde820a72c93cbcedc3a1c6d3c7' }, `
+        return (h("div", { key: '609efa147a53d357ac11d1d97a2277a518c6ba53' }, h("style", { key: 'ae6f607f454e1038518bd6438b50704fbb5096ce' }, `
           .popper-content {
             display: none;
           }
@@ -88,7 +88,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '8677d950b63503711e50a2f3d5b14bd7085f319e', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '54c1259606ca9b91d60f175b1d9981d8871fdd50' }))));
+          `), h("div", { key: '4d6fc7f6990bd1f271402146c38d0dd175fad94b', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '509c63e0288098dca22d2d4830ce790271cde6eb' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-checkbox.js

@@ -31,10 +31,10 @@ export class CheckboxInput {
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: 'f574898ffe8a3d666d4b95721cf4f3f3866f8632' }, h("div", { key: '185ac07832d140b467162e2bdacb90ea0640d460', class: 'form-group d-flex flex-column' }, h("div", { key: 'c610e4c989b6c8529253ef73e39d4e58f0efd1e3', class: "form-check" }, h("input", { key: '7abfbfed27e3ad2c0a46a5f30b0681d54673c1fb', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '54f78efeb7d16825cfc08e98dcd37bad7b61f81b' }, h("div", { key: '83fef493e58c3a063cbbfe09700ba786b6242c4f', class: 'form-group d-flex flex-column' }, h("div", { key: '3c0ce3b7eb238a2ed5311f284b7f7422117e77bb', class: "form-check" }, h("input", { key: 'e071a738ff24cfec86f8f8c33c3cbae7261015ac', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), h("label", { key: '9c505e1d0926690eb32d2d9621d6c144cfe27f6a', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'fc7933d29f06ef533fe45025184d5c8cdd24cdd1', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '29879fd2d7c04a26eb999bb2f9991bc38515994b', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), h("label", { key: 'e73b59126ddfd1b4f7c510b6d18e48c66aa9417d', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'c69896d9f44b0d9bb12bad10f22f3da5c5a6de52', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '5a8e732e9cb5999ab72769f00f00a4a19def3471', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-date.js

@@ -42,10 +42,10 @@ export class DateInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '42d56dc5835b06508f48e7eb8b5dca063d32dd5f' }, h("div", { key: '9a111c9f90604df8c32f66d1f0bcb05ebca9bad5', class: "form-group d-flex flex-column" }, h("div", { key: 'bec15b51e5d0f03cd4a69abcc3f0ee727262479b', class: "d-flex gap-2" }, h("label", { key: 'b57723374131e145d8c1307d7b94a5240ead9b4b', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '2c03597da3e1db9fafd25a3835ee9b72dcb54a6d', helpText: this.helpText })), h("input", { key: 'b5e7e7b38fc6ba6c68cf1773e8ad68f09663a1cd', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '08bce3cf3be399f5cbc2b83885b42cbc38edb118' }, h("div", { key: '9d7537d093c98aad6ace2bf2e1dff221a94342ae', class: "form-group d-flex flex-column" }, h("div", { key: '4bb572f4060339595df10dd2b33799b926b6efd1', class: "d-flex gap-2" }, h("label", { key: '7ff86ee061e99220d836786304835edb087a513e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '22506780fb5306be2eea2c8b0982668a57b8ac64', helpText: this.helpText })), h("input", { key: 'a15de1023d46a919caf8f2d4b4bd2fd187c44bc7', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: '4ac80bbeaa886a8822b641f3643c6a36d1bbe111', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: '05011a1473a87a9a167a757d1f9387a3da3b9ebe', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-file-v2.js

@@ -2,7 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "./form-helpers/form-control-error-text";
 export class FileInput {
     render() {
-        return (h(Host, { key: '09a00c508e5f8a6760a10596caa60e39650ae3dc', exportparts: "label,input,input-invalid" }, h("div", { key: 'af053f126524dc7dc5f02d5f6ef871012097e1a4', class: "form-group d-flex flex-column" }, h("div", { key: 'e7cbe9ae561c54c14ef4bf1adb4405f93e52a0da', class: "d-flex align-items-start gap-2" }, h("label", { key: '84173f53d2d70e8f3728cd5ed69dff4fa86ee659', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a5f6fa27696c3cb673c5b10a7cf7049c2be1d113', helpText: this.helpText })), h("input", { key: '8f39d6dfaa711830059c04fcbb0b99600d269000', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: 'f9c61d2900f3a0776895c51d9f1aa42e6aabac4b', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '326085a82e5ba4a9dfd92d821bbc61ae1226abca', exportparts: "label,input,input-invalid" }, h("div", { key: 'eb08a1c5c9eba7c1589a4088c822d6c877d2ac8f', class: "form-group d-flex flex-column" }, h("div", { key: '214803f34627450d640573a746fff3d10aeb83c8', class: "d-flex align-items-start gap-2" }, h("label", { key: '4c352fd5c0388437bbda2d02b0d5fb7b93b031f4', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '5653524953f91a5de2f10aa1d60014fe47b1e9b9', helpText: this.helpText })), h("input", { key: 'a247246694d393078ff8e3fb391b6232c3ee66c5', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: 'e3b485d2b5968444f4f0af9c1e4b922f0da58283', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file-v2"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-file.js

@@ -37,10 +37,10 @@ export class FileInput {
         return part;
     }
     render() {
-        return (h(Host, { key: 'bbf3a7e4cd4dcd5cc0ccefe4ad405dccbe7e3e78' }, h("div", { key: '4cb2c56d8015d1bb78ab08c5499d00ddeb8dd738', class: "form-group d-flex flex-column" }, h("div", { key: 'f72a96162d320c2ec86b0668a0d174065cca15e1', class: "d-flex align-items-start gap-2" }, h("label", { key: 'b99571312c582e453b867888db7499ad5dad69c1', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '014c69076270156f8301ba329bbc779046282e69', helpText: this.helpText })), h("input", { key: '08a71546d4f2c2fc3df64d4f87ac1ffe2dcef6d4', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '8521437d1faf90d5f3b73f821485560d0ca517a2' }, h("div", { key: 'd803250512feba82aea03c8a8946b024aec2eeae', class: "form-group d-flex flex-column" }, h("div", { key: '8377b86ca9c4b1974a55380d7cc325d6b5149913', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ae69567c041aed85bdde3ea16f829aec96e4b25c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '78c0ab7de411ca18dcfade80f1bac72b4741fdf9', helpText: this.helpText })), h("input", { key: 'ed1d7c11db1478e0edb90be9d918e119feb478ba', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            } }), h(FormControlErrorText, { key: '67496c44c3db670d269394b2667c13776d9ae166', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: 'b31b790d9c3fc013df2d504be03fb75987779148', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-monetary.js

@@ -42,10 +42,10 @@ export class MonetaryInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '0842196a10a26630b99d9b10149edc52f9197d75' }, h("div", { key: '9195cd13c772720637f9f5c68c3d93ba0b7b2b03', class: "form-group d-flex flex-column" }, h("label", { key: '995e71be182068b0ef4629c4fd6d66539199be5d', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'b9d3a12f486d808bc9eeb4155ca0c7c8086cdd0b', name: this.name, helpText: this.helpText }), h("div", { key: '00a19cfca58d00169c831f3f138c7ebc4b5afd85', class: "input-group" }, h("span", { key: '36120c616e2eec08cdf4a29fdfc2cb472441bf2b', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: 'dff91515955e4bc2ceb60b48deaa27be8717d95b', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '4627cd58c4be09dc4650c52c22cba47134dad748' }, h("div", { key: '71b9039fd1046aacf6dc1e5ebbfc778dbea36f18', class: "form-group d-flex flex-column" }, h("label", { key: '53326d4fc12a7b0087a420f5c3396a42e1fc01dc', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '50e431a5aa3e83f6cff7d520bc5df4f372055541', name: this.name, helpText: this.helpText }), h("div", { key: 'e462e21706fd2cdac31f68e3a9dfc3319e002416', class: "input-group" }, h("span", { key: '2bfe95a64d5ba18f36256933f85bb710f47c233c', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '5ce586b7b9de9f082d29632a2abc4ee676ca3ef9', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: '52a89e9a6196eeff1fbc20c7474ce7016be16fe3', errorText: this.errorText, name: this.name }))));
+            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: '5ba05e5b423b1aa99bad6cd4e096b3ca40e1f528', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-number-masked.js

@@ -59,10 +59,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: '6cae1871670deff0c71ea486c0e152f3e2fde29b' }, h("div", { key: 'd19b5550c44f287f8a209b8e5494f8dfa684c83c', class: "form-group d-flex flex-column" }, h("div", { key: 'b47d25e856e615073680ca7138659fb5a744482b', class: "d-flex align-items-start gap-2" }, h("label", { key: 'a8487b47e04941ff3f03f4cf50cc8e6a3487a83d', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'c1742daada4cc36cabee18a31d64320b039c8b7c', helpText: this.helpText })), h("input", { key: 'f0502f8af26a5a1dede6e8ea3645119b7c29086e', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: '90e98aec90cbbfcb6b7aed010f45ec83336faf17' }, h("div", { key: '43185b809d29eee55e8d52538e4db9b58c07105e', class: "form-group d-flex flex-column" }, h("div", { key: 'c6eaeaae9643e86fb719b4c3c1fb91e5283611f9', class: "d-flex align-items-start gap-2" }, h("label", { key: 'f7aec8f74195a1837b27202b7f54891572ba4dc7', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '17d6bb8316b612de5276f9c492213a50400a672f', helpText: this.helpText })), h("input", { key: '6d5bc7033170be3cec7a0c63c4367839c6907588', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: 'f718537088c8b1fdb0b55a60fec35606e1d5e113', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: 'a826bbca2dfb515542bcc5485b2c31c8c6c6fc56', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {