@justifi/webcomponents 5.6.1 → 5.7.0

package/dist/collection/components/checkout/payment-method-options.js

@@ -51,13 +51,13 @@ export class PaymentMethodOptions {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2cf31e17412eb30afabe6749b86b7d1a6f308114' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '506450161ed363330132c2bfa99a6a7729e94778' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
             const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
             if (newCard || newBankAccount) {
-                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, "show-card": this.showCard, "show-ach": this.showAch, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, iframeOrigin: this.iframeOrigin, ref: (el) => {
+                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, "show-card": this.showCard, "show-ach": this.showAch, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
                         }
@@ -333,25 +333,6 @@ export class PaymentMethodOptions {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "iframeOrigin": {
-                "type": "string",
-                "attribute": "iframe-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
             }
         };
     }

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

@@ -4,8 +4,7 @@ import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-co
 import { checkoutTableColumns, checkoutTableCells } from "./checkouts-table";
 import { Table } from "../../utils/table";
 import { getRequestParams, onQueryParamsChange } from "./checkouts-list-params-state";
-import { table, tableCell } from "../../styles/parts";
-import { TableClickActions } from "../../ui-components/table/event-types";
+import { TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions } from "../../ui-components";
 export class CheckoutsListCore {
     constructor() {
         this.checkouts = [];
@@ -119,7 +118,7 @@ export class CheckoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '0dd82ae052b98ada5c277a6472c43992d43485a5', class: "table-wrapper" }, h("table", { key: 'd8bc8f4a0fe8cb778397529704d86815876e831c', class: "table table-hover", part: table }, h("thead", { key: 'b38366e22402d695e20bb713a0c4e38d06e5043f', class: "table-head sticky-top" }, h("tr", { key: '8a82e88f24aaa6bec09de27ec439083572cf617c', class: "table-light text-nowrap" }, this.checkoutsTable.columnData.map((column) => column))), h("tbody", { key: 'fc09f4d4263d588fc1002657f6f535097069c16b', class: "table-body" }, h(TableLoadingState, { key: 'beb188a8b7e19eb8516c84727b365e38fb9f07b2', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '5b8945e459c72cb21da62a1ad24f5a409b442137', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '39b99e63e8759221589be8053a88b74d37d78013', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '8effcd26c82977391f8487b80fabe954694338f8', class: "sticky-bottom" }, h("tr", { key: 'cc95a3c59060b0cbc44a39a66c8061912f4c995f', class: "table-light align-middle" }, h("td", { key: '54850b1384a006b4a0a70d465bfac1c94698be9a', part: tableCell, colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'b3f5da967dbd19bf1018fea9a926885ed0f40865', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '79f36b8dd358285868187892962f5e2138942fe8' }, h(TableComponent, { key: 'e48c644e425ac45ab27b92548bc49af35b599245' }, h(TableHead, { key: '6d47b68c0a74f0eff3146dfc4720b0cc0f6fc24d' }, h(TableHeadRow, { key: 'a3660ae82b53ba7dead2e577fd8d573426935dc6' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '08fbd465bae0afa3de8d472c84e0410150509673' }, h(TableLoadingState, { key: 'ba7d778f9fc029166d6228fe9b1a8f1598a68c5a', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '312b176371526658852b74ae228524695f5c1947', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'a24680fb1d681397a3cb266ec34ab5c9310dfa64', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.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: '503ffd707d958a353a18a6f06d1280a0cb01c741' }, h(TableFootRow, { key: '250fcfc3961881ab460221e5e0160d5b6d35e5c3' }, h(TableFootCell, { key: '2631d54b49bbee1502e5412cd9303d7d67746525', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'd7bb27501b62a1089090b06c82b2a2c328a2e0b6', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "checkouts-list-core"; }
     static get properties() {

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

@@ -11,7 +11,6 @@ import { defaultColumnsKeys } from "./checkouts-table";
 export class CheckoutsList {
     constructor() {
         this.errorMessage = null;
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.columns = defaultColumnsKeys;
         this.handleErrorEvent = (event) => {
             this.errorMessage = event.detail.message;
@@ -38,8 +37,7 @@ export class CheckoutsList {
             this.getCheckouts = makeGetCheckouts({
                 accountId: this.accountId,
                 authToken: this.authToken,
-                service: new CheckoutService(),
-                apiOrigin: this.apiOrigin,
+                service: new CheckoutService()
             });
         }
         else {
@@ -61,7 +59,7 @@ export class CheckoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '4cf97b877324bc48ec5bcdae0f342d2b1fb0daca' }, h("checkouts-list-core", { key: '395f0b1ad4a6bdcaaaa8dc095fae6cad164bbdad', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '086d85512b11a65ac2d8960f515e373093d4bd96' }, h("checkouts-list-core", { key: 'abe06be934ac5f13ec98425f29c6b6b7c0ff4456', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-checkouts-list"; }
     static get encapsulation() { return "shadow"; }
@@ -105,26 +103,6 @@ export class CheckoutsList {
                 "setter": false,
                 "reflect": false
             },
-            "apiOrigin": {
-                "type": "string",
-                "attribute": "api-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "PROXY_API_ORIGIN"
-            },
             "columns": {
                 "type": "string",
                 "attribute": "columns",

package/dist/collection/components/config-provider/config-provider.js

@@ -2,13 +2,13 @@ import { setConfigState } from "./config-state";
 export class ConfigProvider {
     constructor() {
         this.apiOrigin = PROXY_API_ORIGIN;
-        this.iFrameOrigin = IFRAME_ORIGIN;
+        this.iframeOrigin = IFRAME_ORIGIN;
         this.accountId = '';
     }
     componentWillLoad() {
         setConfigState({
             apiOrigin: this.apiOrigin,
-            iFrameOrigin: this.iFrameOrigin,
+            iframeOrigin: this.iframeOrigin,
             accountId: this.accountId
         });
     }
@@ -38,9 +38,9 @@ export class ConfigProvider {
                 "reflect": false,
                 "defaultValue": "PROXY_API_ORIGIN"
             },
-            "iFrameOrigin": {
+            "iframeOrigin": {
                 "type": "string",
-                "attribute": "i-frame-origin",
+                "attribute": "iframe-origin",
                 "mutable": false,
                 "complexType": {
                     "original": "string",

package/dist/collection/components/config-provider/config-state.js

@@ -1,7 +1,7 @@
 import { createStore } from "@stencil/store";
 const initialState = {
     apiOrigin: PROXY_API_ORIGIN,
-    iFrameOrigin: IFRAME_ORIGIN,
+    iframeOrigin: IFRAME_ORIGIN,
     accountId: '',
 };
 const configStore = createStore(() => initialState);

package/dist/collection/components/dispute-management/dispute-management.js

@@ -6,7 +6,6 @@ import { makeGetDispute } from "../../actions/dispute/dispute-actions";
 import { DisputeService } from "../../api/services/dispute.service";
 export class DisputeManagement {
     constructor() {
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.errorMessage = null;
         this.handleErrorEvent = event => {
             this.errorMessage = event.detail.message;
@@ -30,8 +29,7 @@ export class DisputeManagement {
             this.getDispute = makeGetDispute({
                 id: this.disputeId,
                 authToken: this.authToken,
-                service: new DisputeService(),
-                apiOrigin: this.apiOrigin,
+                service: new DisputeService()
             });
         }
         else {
@@ -44,7 +42,7 @@ export class DisputeManagement {
         }
     }
     render() {
-        return (h("justifi-dispute-management-core", { key: 'ae0e4a208d6250c4da7033e1d8bf8c33ec041c36', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (h("justifi-dispute-management-core", { key: '12e281244496ede936b191dbc5b4069404d931e9', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
     }
     static get is() { return "justifi-dispute-management"; }
     static get properties() {
@@ -86,26 +84,6 @@ export class DisputeManagement {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "apiOrigin": {
-                "type": "string",
-                "attribute": "api-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "PROXY_API_ORIGIN"
             }
         };
     }

package/dist/collection/components/dispute-management/dispute-response/dispute-response-actions.js

@@ -1,9 +1,9 @@
 import { ComponentErrorSeverity } from "../../../api/ComponentError";
 import { getErrorCode, getErrorMessage } from "../../../api/services/utils";
-export const makeGetDisputeResponse = ({ id, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError }) => {
+export const makeGetDisputeResponse = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
     var _a;
     try {
-        const response = await service.fetchDisputeResponse(id, authToken, params, apiOrigin);
+        const response = await service.fetchDisputeResponse(id, authToken, params);
         if (!response.error) {
             const pagingInfo = Object.assign({}, response.page_info);
             const disputeResponse = response.data;

package/dist/collection/{ui-components → components}/filters/table-filters-menu.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { Button } from "../button";
+import { Button } from "../../ui-components/button";
 import { hasFilters } from "./utils";
-import { dropdownMenu } from "../../styles/parts";
+import { dropdownMenu, dropdownMenuButton } from "../../styles/parts";
 export class TableFiltersMenu {
     constructor() {
         this.showClearButton = false;
@@ -19,7 +19,7 @@ export class TableFiltersMenu {
         this.showClearButton = hasFilters(this.params);
     }
     render() {
-        return (h("div", { key: 'b55be2aa2f9d4677989da12bb114f620a9ec2e45', class: "d-flex gap-2" }, h("div", { key: 'dffb2be68ead3abb60a8740869e48bb48bbf558c', class: "dropdown pb-3" }, h(Button, { key: '2e7b2d3afc80963abfe9c8c2690a61b911a1b747', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '9e2b1b988bc5440f18d26c5b8402f5e30e73cdad', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '573161a7515d1b16665138ba739133379b9b6850', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '9597e79f125e1e41c343fa3d2d583b5cf7ab9c31' })))), h("div", { key: '67ed29ac8e10f3ae1380514ae1a1e1e8aed7d9b6' }, h(Button, { key: '9b3dc6176c11226e82ecb1f9f88705ad40bf6e32', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: '73b213c0381a163e3ccd4b4df158daf8dc128d83', class: "d-flex gap-2" }, h("div", { key: '817823777638fc8501bb7230d0b061c110e4f82b', class: "dropdown pb-3" }, h("button", { key: '6ad7b2c32bfc44b836071db2706e86d649c5ccb3', type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", part: dropdownMenuButton, "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '124ac66fe0be636f74009bdd07e392fa82fd943e', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'b1421bdd7f7318012dcbd280eab4d8aeabbfee8c', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '7a251b4a2b2840f435d07605a6333b86180ab88e' })))), h("div", { key: '2badf2863bb80ef70508347049becdd0aec5196e' }, h(Button, { key: 'ee90184cb3aa0e7c4ff8d69cf299aef4fda114bd', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get is() { return "table-filters-menu"; }
     static get properties() {

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

@@ -44,7 +44,10 @@ export class PaymentDetailsCore {
         ], this.payment.payment_method.bank_account && [
             h(DetailSectionTitle, { key: '84dae904db3c22ff5ed03abaeb57d3b0736d1fbb', sectionTitle: "Payment Method" }),
             h("div", { key: '400801019a53feec0478273866fffa5683b408aa', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ca7bb52e4275659b18daacfa6367de2f32617e70', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '4885d2b5f05b6a713d61074271c7a95b23604dca', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '604ec4efe78a12a1c36d8416c9fdec70351a6dad', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '1ef77a81232e19d1063af9e863f5c9ada183715f', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: '1d0a45dd7b7f44b2bad75db9ddb7886b9fc36c9c', sectionTitle: 'Metadata' }), h("div", { key: '364dfb72b9585b672a510b11ecf794c8293ac88d', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '1b9254f2f5f81959ea4e190a3a84129d8c54eccd', metadata: this.payment.metadata })))))));
+        ], this.payment.metadata && [
+            h(DetailSectionTitle, { key: '703ee104edf87c55034c38bb9fe0de6907980a0e', sectionTitle: 'Metadata' }),
+            h("div", { key: 'c10b66a975c6a221f86226893e13cbf57bf0d8dd', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'e73dfd81f110ec7c275fd37d1ecc71bbc22580b5', metadata: this.payment.metadata }))
+        ])))));
     }
     static get is() { return "payment-details-core"; }
     static get properties() {

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

@@ -5,10 +5,9 @@ import { checkPkgVersion } from "../../utils/check-pkg-version";
 import { makeGetPaymentTransactions } from "../../actions/payment/get-payment-transactions";
 import { PaymentService } from "../../api/services/payment.service";
 import { Table } from "../../utils/table";
-import { TableClickActions } from "../../ui-components/table/event-types";
-import { table, tableCell } from "../../styles/parts";
 import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { defaultColumnsKeys, paymentTransactionTableCells, paymentTransactionTableColumns } from "./payment-transactions-table";
+import { TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions } from "../../ui-components";
 export class PaymentTransactionsList {
     constructor() {
         this.balanceTransactions = [];
@@ -90,7 +89,7 @@ export class PaymentTransactionsList {
         return !this.showEmptyState && !this.showErrorState && !this.isLoading;
     }
     render() {
-        return (h(StyledHost, { key: 'c35e2e5941204aa9ccdfe2be612f98c5a230852a' }, h("div", { key: 'bcf166a44ba15828edcc888ee96b1633853286a2', class: "table-wrapper" }, h("table", { key: '8ae29b54461e6f2eeefc1da4f659e86db774b913', class: "table table-hover", part: table }, h("thead", { key: '4a7983d92e9bc30e63c18c223996d8251e99438c', class: "table-head sticky-top" }, h("tr", { key: '797a5512b07112c04fe37b8898610091b3fbcb74', class: "table-light text-nowrap" }, this.transactionsTable.columnData.map((column) => column))), h("tbody", { key: '09d90ccec9a0dbf5a2b5caffa7715a96fd98097d', class: "table-body" }, h(TableLoadingState, { key: '2d350db554deb86c9122cded434c8947f4028042', columnSpan: this.transactionsTable.columnData.length, isLoading: this.isLoading }), h(TableEmptyState, { key: 'd2f8bd08c44fe66712b167b430b6e08b2dc989c7', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnData.length }), h(TableErrorState, { key: '2cb1f0c85805c77d445bd7da333761dc11a982c4', columnSpan: this.transactionsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '76b887121f8e8c48b59f4657a9353d32b3f60511', class: "sticky-bottom" }, h("tr", { key: '99670a6602b8145d2208a29333c358ae2da91153', class: "table-light align-middle" }, h("td", { key: 'c2cfed937f3e34bd4fed9a258b1158827b7d04b7', part: tableCell, colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '65659d1f4c5893cc427fb05e4b9255d3c54fb41d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: '95b1793a1b1dd1f30857a2da18884569bb37673a' }, h(TableWrapper, { key: '213c53810f28609c5166c4b7865a4b923db64148' }, h(TableComponent, { key: 'c4c9ad468955900dd3dadf55bf74961b347db725' }, h(TableHead, { key: '0aaa96e09c54865f5bbe74abf236db20a69c0df9' }, h(TableHeadRow, { key: '69258a4be5ddba8c3db1f2e801c7101a51efadd2' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '961a12de0888c9ab76ae708f1694955cadc05ffb' }, h(TableLoadingState, { key: 'd5d5b788698eb28ff2dcccf902694fb166f7e805', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '311f9238c5ed98e1801cd482967814e2d1b98547', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '86c6728fb2a4ff6a1de0032cda9a5e6fdfb2a19c', 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: '4fe703ff7a69a534424fde0154203a0f1f0a2240' }, h(TableFootRow, { key: 'b6dafac49888c3745461a18723b74f46d1353478' }, h(TableFootCell, { key: '1906f0ab8f62c94cb976a37eb12ffb479ccb8333', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '114ec152e59ddd485f465774a7f8f656d618083a', 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

@@ -4,8 +4,7 @@ import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-co
 import { paymentTableCells, paymentTableColumns } from "./payments-table";
 import { Table } from "../../utils/table";
 import { getRequestParams, onQueryParamsChange } from "./payments-list-params-state";
-import { table, tableCell, tableRow } from "../../styles/parts";
-import { TableClickActions } from "../../ui-components/table/event-types";
+import { TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions } from "../../ui-components";
 export class PaymentsListCore {
     constructor() {
         this.payments = [];
@@ -84,7 +83,7 @@ export class PaymentsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'c5059d5f79a3f7ee8e4f767b6e0ea995b9310ed8', class: "table-wrapper" }, h("table", { key: '70c674711138bfbcea97eeef623cc5fe74b01f10', class: "table table-hover", part: table }, h("thead", { key: 'd9c0f2d115f3606043a09c3b9a9bb07ef65cf653', class: "table-head sticky-top" }, h("tr", { key: 'd353ca63c91658b7e20a1fd0a6c5114342b555cb', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: 'b308dae6d730f9e8867740a1a5cc189a1e8d5751', class: "table-body" }, h(TableLoadingState, { key: 'ee4f0145a926360889a879681fc80c3214b692d4', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '692e612e61e6ec6e564c58545c7074fe8af102e1', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'cdf875aec8002d601982af282e03fabb3c615eca', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: tableRow }, data)))), this.paging && (h("tfoot", { key: '27d3953bdc88315c2c6ab1ec859ca5e9472c4c80', class: "sticky-bottom" }, h("tr", { key: 'dc56e6376491035fd17f25b09fd0af872ba1bc47', class: "table-light align-middle" }, h("td", { key: 'b8d133f8ab2f4494ef0f3f3f531f14e742ac1b47', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'b38882f42b1d517d5755510142fd6030803030c2', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '1317635730164f2193e9556589c1c8584b70cfbb' }, h(TableComponent, { key: '98f458d904f17105aa7f6fde313487fa1af08034' }, h(TableHead, { key: 'a70f53dc6484a001d51f2c937e9696ad4ea68d2c' }, h(TableHeadRow, { key: '93a807d6627175ff4030fc4de8e067809486b274' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: '4051081286f20f72d3e34f2484ada5413327b608' }, h(TableLoadingState, { key: 'e94bc4c5d2d4f2a24ee8ec906aa936ad0d497b84', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'be3fe38c674d7a587f77d91c4133d39359954135', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '55bb4161c9677940b78badbbc2a621e29404e213', 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: '23e336810c59ab014b4a11fa5f9f087db2de9fa1' }, h(TableFootRow, { key: '848eb4d2cfd643472de22f6cd86d9a7121acdca6' }, h(TableFootCell, { key: 'b0c325d98775e1784173d45375018d94f8fc71cc', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'b61510a421ed0fcf54ff3b3318bc8b80db18c6b1', 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/payout-details/payout-details-core.js

@@ -51,7 +51,10 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '62711161d74a4d4e76ea5dba50cdf658722ba3a5' }, this.loading && h(PayoutDetailsLoading, { key: '170bf58456fb93c687a9e5b71e364ed6d54ec965' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'eafc4215df8ecba2f3e767e91df54a67c48e0e69', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '849a324f0d5f545e502c1632a5af30da3f6caf74', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'ae0b4f158d3baf397880061f6fe25916ca870ac6', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2e2f16f8c1e2f5b34fe986a311be4ae084d385ab', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '724abe3799d1a1c8f9a54130af715a2057218510', title: "ID", value: this.payout.id }), h("div", { key: '7ac70b4b6eee073384e223b01304d0ad0aaf0a64', class: "m-4" }, h(Button, { key: 'fc78f5a3b14e58aa3861592e81bc60c155d520e3', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '9ebede365566df145b3412b24d255e1b90740541', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '71cfc2676e1ac51b44de391547589fafb5189266', sectionTitle: "Details" }), h("div", { key: 'cba9946a2406c577d3b190cfbfe4b1eeaa27001e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1af9837addfc6fd3829fac3df8376958b7dbfbc7', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'f54690ff4578b7383feadd6420b14df1c79d398b', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '5013c67ee0ac8bd9495209fb5854a36665317d84', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '41cd7f0989ff44be01d78475e03486b2fb158911', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '6f047db81aae911ed4553fecda7baacdc5ff9209', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'b342e899b13489045a82051e563ff56c027107e8', sectionTitle: "Account" }), h("div", { key: '709be895334d0a4963ceeb762ac6e66a5a603d07', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1e14ae8f0b329038ee2aea938be0ab4c1d2c35c9', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '54ef8f31b5dd0698d50efe617db9fbdb8a2088eb', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '3cbe4043e92bc3d2a07d2970473b06bd92e56f33', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '482efcf4498b79cf724a50dd0d3ba0f38d02576d', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '7b3b961659e263e83268e178991627d04a2fcd46', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '49b355b672f7fabe75798931e7e36bb1ccfe7370', sectionTitle: 'Metadata' }), h("div", { key: '66669969009dda1eacc194a4ad035836e5fd83c7', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '5700a8404cb548fd4c2a62fde70e56bd78ea8ac6', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '62711161d74a4d4e76ea5dba50cdf658722ba3a5' }, this.loading && h(PayoutDetailsLoading, { key: '170bf58456fb93c687a9e5b71e364ed6d54ec965' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'eafc4215df8ecba2f3e767e91df54a67c48e0e69', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '849a324f0d5f545e502c1632a5af30da3f6caf74', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'ae0b4f158d3baf397880061f6fe25916ca870ac6', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2e2f16f8c1e2f5b34fe986a311be4ae084d385ab', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '724abe3799d1a1c8f9a54130af715a2057218510', title: "ID", value: this.payout.id }), h("div", { key: '7ac70b4b6eee073384e223b01304d0ad0aaf0a64', class: "m-4" }, h(Button, { key: 'fc78f5a3b14e58aa3861592e81bc60c155d520e3', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '9ebede365566df145b3412b24d255e1b90740541', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '71cfc2676e1ac51b44de391547589fafb5189266', sectionTitle: "Details" }), h("div", { key: 'cba9946a2406c577d3b190cfbfe4b1eeaa27001e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1af9837addfc6fd3829fac3df8376958b7dbfbc7', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'f54690ff4578b7383feadd6420b14df1c79d398b', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '5013c67ee0ac8bd9495209fb5854a36665317d84', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '41cd7f0989ff44be01d78475e03486b2fb158911', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '6f047db81aae911ed4553fecda7baacdc5ff9209', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'b342e899b13489045a82051e563ff56c027107e8', sectionTitle: "Account" }), h("div", { key: '709be895334d0a4963ceeb762ac6e66a5a603d07', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1e14ae8f0b329038ee2aea938be0ab4c1d2c35c9', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '54ef8f31b5dd0698d50efe617db9fbdb8a2088eb', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '3cbe4043e92bc3d2a07d2970473b06bd92e56f33', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '482efcf4498b79cf724a50dd0d3ba0f38d02576d', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '7b3b961659e263e83268e178991627d04a2fcd46', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: 'ea5e5e83e0889ee8b542fba2ddaedc7c0adcf15a', sectionTitle: 'Metadata' }),
+            h("div", { key: '52ed0e8f84b2a22e9846040877850b336db53a2a', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '50e37d3e2a27191b6e4899fcef64f9bd39241c9e', metadata: this.payout.metadata }))
+        ])))));
     }
     static get is() { return "payout-details-core"; }
     static get properties() {

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

@@ -5,11 +5,10 @@ import { checkPkgVersion } from "../../utils/check-pkg-version";
 import { makeGetPayoutTransactions } from "../../actions/payout/get-payout-transactions";
 import { PayoutService } from "../../api/services/payout.service";
 import { Table } from "../../utils/table";
-import { TableClickActions } from "../../ui-components/table/event-types";
-import { table, tableCell } from "../../styles/parts";
 import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { defaultColumnsKeys, payoutTransactionTableCells, payoutTransactionTableColumns } from "./payout-transactions-table";
 import { configState } from "../config-provider/config-state";
+import { TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions } from "../../ui-components";
 export class PayoutTransactionsList {
     constructor() {
         this.balanceTransactions = [];
@@ -94,7 +93,7 @@ export class PayoutTransactionsList {
         return Object.assign({ payout_id: this.payoutId, limit: '15' }, this.pagingParams);
     }
     render() {
-        return (h(StyledHost, { key: '11760c372ccd854fd247a931ac9a31f80e779908' }, h("div", { key: 'cb45e596e6ac53d5567b7afb8c3c34c11d838fbe', class: "table-wrapper" }, h("table", { key: '449b9e901af31d8ae76e4543e7011f7a9596d8ab', class: "table table-hover", part: table }, h("thead", { key: 'c04b7c762ecbb0b25a8375661f3a51d37ff96f24', class: "table-head sticky-top" }, h("tr", { key: 'b81f0b41584f6322f8faec27c61a749d0a60fbf7', class: "table-light text-nowrap" }, this.transactionsTable.columnData.map((column) => column))), h("tbody", { key: '83947c4b2c28ebd29477cb776dfe193ea090e35d', class: "table-body" }, h(TableLoadingState, { key: '94519e994722bcf30b20ba503858ed3c1ecc33dc', columnSpan: this.transactionsTable.columnData.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '2331c2748f53ba9906ed9228d89097bfd024b600', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnData.length }), h(TableErrorState, { key: '9e0a5bfbbccb0ad02a9ed70edc3bb6d6108b9ad7', columnSpan: this.transactionsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '0591033f666cddb7cadec2d8da2d61d8ad66fad6', class: "sticky-bottom" }, h("tr", { key: '26c47ed9b3d37553ba43c0e8fc37c4666a8baef9', class: "table-light align-middle" }, h("td", { key: '25ee92e4f38dc8853a5a3cfcfe4d2829ea51788a', part: tableCell, colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '4a26779c713b7bb7833822c98596482c1c06b767', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: 'c15333a496ff4f29710524031b91f979fc1040a8' }, h(TableWrapper, { key: '5dda158bb634fedd8be112998c38c5ec1b72b66b' }, h(TableComponent, { key: 'f544eb0dedb71c839acf940495eae56b011beef8' }, h(TableHead, { key: '8f2a6b42184729bbc28267fc4972b4fc30707ecf' }, h(TableHeadRow, { key: '856542645f4a044e50f0ac7b5dafb16d34c17402' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: 'ea02584be772897876cfbf5118d41a9a05ed334f' }, h(TableLoadingState, { key: 'c1decf54fc792f923bf7eee49dd64d8af9dd6ee8', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '55472bc004d891746153ce7ed8b3e900a9d9da94', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '6a3d87df445734a7c13fd96e8dc067e2df1ae0b0', 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: 'e5654630577e32efeb5243543fd53232827ab824' }, h(TableFootRow, { key: '331ad45703f29590dd1b03370ff431bde665e76d' }, h(TableFootCell, { key: '3c16d50d90c6c491d028a2ccbeaedab439338e77', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '8334f555005446837984ff51dc2b89ea5d7a0cd3', 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

@@ -5,8 +5,7 @@ import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-co
 import { payoutTableCells, payoutTableColumns } from "./payouts-table";
 import { Table } from "../../utils/table";
 import { getRequestParams, onQueryParamsChange } from "./payouts-list-params-state";
-import { table, tableCell } from "../../styles/parts";
-import { TableClickActions } from "../../ui-components/table/event-types";
+import { TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions } from "../../ui-components";
 export class PayoutsListCore {
     constructor() {
         this.payouts = [];
@@ -136,7 +135,7 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '7269ad62dd229e55dac396c718469b5e2b923458', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: '52ab8f9384d328d8d1094573545c7e1e112f58c0', class: "table table-hover", part: table }, h("thead", { key: '4fde6f2d3c152d04c35967c1e63ed5520e6c5b64', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '4665781ce140f86394a20a454de94a4ecf19871f', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '4e673dda87af1a204abba225de77864dd8e60cf6', class: "table-body" }, h(TableLoadingState, { key: 'b54e1e43c91b51d0364bf88198d6070569557ebb', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '45a64238e45671ff3d1a0c636d3ff7afe29dc93d', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '37d9fa23b47e7b77dbd90bbe6759b0c8763cc490', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '04875b5b8414a20e53035c4356d5c6d6e2da1389', class: "sticky-bottom" }, h("tr", { key: '6fd4b360e4449f441b33028e06a1595395cc15e4', class: "table-light align-middle" }, h("td", { key: '3830e46c5e838830c163023f4d904db74421f0e0', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'a3f9cdf107672f067a23c8c3d15b14422606d221', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '6a72c56b790f6d3bd656cadc3afa67b5ff9146a8' }, h(TableComponent, { key: '73a4df2c71493966d9dff59b1cb04ed2bc28de45' }, h(TableHead, { key: '238aad9fdc7dbbe23106527238a60bc66c071c89' }, h(TableHeadRow, { key: '57766da075cc1ca3ad2ef1ddd108c9868903a379' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: '287780d557ef70e52077fc4f29391010e16e801e' }, h(TableLoadingState, { key: 'e9a8e8170b426cc17792d2775098e43421a377dd', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'fa12703948e45d8fe9011d449a7e23933ceee245', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '1287c1be18f6cf84f93747799e0a9c9e46de0fb8', 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: '7f0c3b90cabe0db5859c80cbfc8e2fe0ea39346d' }, h(TableFootRow, { key: '9b702aadc9f9380f14ebe749ff67f8ea3ef62b1d' }, h(TableFootCell, { key: 'a8436f6401847c87b0a009005bb0abeff1498aad', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '1121deb974ad2cd9b11152fbd7b539e91730f0ef', 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.js

@@ -6,7 +6,7 @@ import { PayoutService } from "../../api/services/payout.service";
 import { makeGetPayouts } from "../../actions/payout/get-payouts";
 import { makeGetPayoutCSV } from "../payout-details/get-payout-csv";
 import { SubAccountService } from "../../api/services/subaccounts.service";
-import { StyledHost, tableExportedParts } from "../../ui-components";
+import { StyledHost } from "../../ui-components";
 import { defaultColumnsKeys } from "./payouts-table";
 import { makeGetSubAccounts } from "../../actions/sub-account/get-subaccounts";
 export class PayoutsList {
@@ -62,7 +62,7 @@ export class PayoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'f20034e64b3c1f39cdedd38762ac30a70d92bde1', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '3bee62765d06af00577ca338c4f8dd33eb6cfb1c', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: '7ce900caa8b472726cd7e100560359f2990798d9' }, h("payouts-list-core", { key: '4e5c40e2cfda6fcc5e2a5963eb432f500f76a8f9', 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

@@ -1,11 +1,10 @@
 import { h } from "@stencil/core";
 import { Table } from "../../utils/table";
-import { table, tableCell } from "../../styles/parts";
 import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { pagingDefaults } from "../../api";
 import { terminalOrdersTableCells, terminalOrdersTableColumns } from "./terminal-orders-table";
-import { TableClickActions } from "../../ui-components/table/event-types";
 import { getRequestParams, onQueryParamsChange } from "./terminal-orders-list-params-state";
+import { TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions } from "../../ui-components";
 export class TerminalOrdersListCore {
     constructor() {
         this.terminalOrders = [];
@@ -82,7 +81,7 @@ export class TerminalOrdersListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '0ae3bd80e00bf8df8f966503bb9e66ebe906a014', class: "table-wrapper" }, h("table", { key: '3f258156e4fa1e7c20ecd594e4965cf1db12db29', class: "table table-hover", part: table }, h("thead", { key: '4a79db4aa98fb270de205ca1b42b648b8f2326eb', class: "table-head sticky-top" }, h("tr", { key: '530320d6061afb4c342a52203257a0f1bc567223', class: "table-light text-nowrap" }, this.terminalOrdersTable.columnData.map((column) => column))), h("tbody", { key: '855f54afcb88a51b25fa6ffb55f8ac12df59ede3', class: "table-body" }, h(TableLoadingState, { key: '4d9eef8945c60c4bf0b2f839244e2077cabce5f4', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '3aa523d3e14151dc076e35a7a7818ae39e9f194f', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: 'f00598602f310205f050b96e3d7419327e7d3ca4', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '523b5e2a99aa51e509295aa7dd743951bfd88bf0', class: "sticky-bottom" }, h("tr", { key: 'b568e6dff207cce3f0960f86cd8086ff20a9cc6c', class: "table-light align-middle" }, h("td", { key: 'deff80464cc797e10343fe3a4746131e341294c1', part: tableCell, colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: 'd730b13b813bb6880b81a5ba39f6573e16e76bfb', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '762e52792b40b09a4c57d19d26b5320e704f713a' }, h(TableComponent, { key: '1562301b758030aba8fe9581c62adf9b74275bcd' }, h(TableHead, { key: '1dd7c7609faf3fb39946f05d1751611f63538b8d' }, h(TableHeadRow, { key: 'd37d994e00a6bbe8b93b562a93f123c67a3341c9' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: 'bd8ec9049642251c7f51c0525a07ef88a9a51335' }, h(TableLoadingState, { key: 'a2ff1894e1300d39ee84f190d531339e6086b68c', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '7e7df0ac99415c5d550479c274bd8bb88d8f5b58', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '954a6ee4143461c71624c39d09b41575e39f92da', 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: 'd8d06e88358f2c07edd2abcb568c99705a3b384d' }, h(TableFootRow, { key: 'c02b4ab02901238f7e1e71178baa4f3f0ff0ee7e' }, h(TableFootCell, { key: 'f29db1ea1799cac1e459495e9029b9c12bfd559f', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '5a196810a73ffad57a2ee6556c6e2ad66f1079b0', 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/terminals-list/terminals-list-core.js

@@ -4,8 +4,7 @@ import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-co
 import { terminalTableColumns, terminalTableCells } from "./terminals-table";
 import { Table } from "../../utils/table";
 import { getRequestParams, onQueryParamsChange } from "./terminals-list-params-state";
-import { table, tableCell } from "../../styles/parts";
-import { TableClickActions } from "../../ui-components/table/event-types";
+import { TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions } from "../../ui-components";
 export class TerminalsListCore {
     constructor() {
         this.terminals = [];
@@ -119,7 +118,7 @@ export class TerminalsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '0bcf251e9a5000e43e78f34311f6be77cf68e352', class: "table-wrapper" }, h("table", { key: '08e48373265fbfe456950b58feda77a941a37acd', class: "table table-hover", part: table }, h("thead", { key: '28f35a8208b90658051434268eeff8a16c30b2f9', class: "table-head sticky-top" }, h("tr", { key: '586c256ee022c9d48e620bb16bad356ea77e73f7', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: 'c2e0488fa871b882e1d05e330048cbdc1d416d12', class: "table-body" }, h(TableLoadingState, { key: '9cd99869854f038b973893335a9d04b0e57cb3c4', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'be37cded55782881d44b426db5a9616c00a06ac8', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '2b9cc41992f95b5af083b9bed92ddbab15de8198', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'e72060a2ccf7a0e49b1e64bb7eb0b1ea35b67b38', class: "sticky-bottom" }, h("tr", { key: '9a87f6051212ae8b1e40d4c89be69e9babebe25d', class: "table-light align-middle" }, h("td", { key: 'e485c478dbff6d9ba48febec69f337582fdd7910', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '2ef9119930e7111384533258d9d132f6879e3099', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'e61c1a1c4c657391af256fa488187571914d270c' }, h(TableComponent, { key: '2878c1bd7a728f970d4818daf1543834672f6e48' }, h(TableHead, { key: 'b300dd224e6295e7d7ad38d2ff36ff2254ea652c' }, h(TableHeadRow, { key: '489ec5bc765f02611b8ccaa5d627c339963b07af' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: '0df4d9e27af46c419999fa7a2865ff19c8458dfb' }, h(TableLoadingState, { key: '0b78007d46a6191e47c3805c6c3a69ad17a20a7c', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '8f5763d3fb5dfdd774be0836833eb0bba9891d98', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: 'c9ecd51037ba42b721fe7f9daf6c290c6a14ccc0', 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: '061d7606ab562de30d46f1e207eda3efae3a2f6c' }, h(TableFootRow, { key: 'e4c4751c3233b8f714fc3f809f108b0a6c6d8637' }, h(TableFootCell, { key: '16faad50eb6148f2bafac404961925b419e9d6f8', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '574f2e32ba7e10adac4e8e19c295b7ad5fd0da11', 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/tokenize-payment-method/tokenize-payment-method.js

@@ -6,7 +6,6 @@ import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api";
 export class TokenizePaymentMethod {
     constructor() {
         this.submitButtonText = 'Submit';
-        this.iframeOrigin = IFRAME_ORIGIN;
         this.isLoading = false;
     }
     componentWillLoad() {
@@ -49,7 +48,7 @@ export class TokenizePaymentMethod {
         return { isValid };
     }
     render() {
-        return (h(StyledHost, { key: 'f44aae1794754d47dab2ab0d51eee101e98e49a7' }, h("form", { key: '4bc04f95b0ea7746641ff758b1e9d33615cc483e' }, h("fieldset", { key: 'ec59af9ca4b4941aa0910157e483e4810b147862' }, h("div", { key: '8aca0e9d3839440d3935baa7daae786948449153', class: "row gy-3" }, h("div", { key: 'b0a6b46e4669778bea417f70772780837b2fdcb6', class: "col-12" }, h("justifi-payment-method-options", { key: '4c5d3ad184904f872e8b147ff8b8be9c61877657', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, authToken: this.authToken, "account-id": this.accountId, iframeOrigin: this.iframeOrigin })), h("div", { key: 'bd06291750591b0d8604aa9e42b89f74d942de39', class: "col-12" }, h(Button, { key: '19b60fc4248f8ae5942afffdb0a06258d7647330', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText)))))));
+        return (h(StyledHost, { key: '793d33a01aea2b2fc0fb450f4cafdb7e9415a368' }, h("form", { key: '39eadbabf4dcdd4c833ddad8660b05be0c104e72' }, h("fieldset", { key: '513803de33328198b00331be2030f51461831fa4' }, h("div", { key: '8546fcdd07ec1e9838bf280e31eaa213c14fcea6', class: "row gy-3" }, h("div", { key: '073430ef8c08858e692728b4afc0bbc9a4a20957', class: "col-12" }, h("justifi-payment-method-options", { key: '096d12f54fcaab8242d1bcff21f2027f3bff6bb8', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: 'dd257cd855231e9cd9ded138373d254cef484d6b', class: "col-12" }, h(Button, { key: '667161dfcb944ca6b62182cf0386be7e8a5fad1f', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText)))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get encapsulation() { return "shadow"; }
@@ -226,26 +225,6 @@ export class TokenizePaymentMethod {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "iframeOrigin": {
-                "type": "string",
-                "attribute": "iframe-origin",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "IFRAME_ORIGIN"
             }
         };
     }

package/dist/collection/styles/parts.js

@@ -55,18 +55,24 @@ export const card = `card ${text} ${backgroundColor}`;
 export const table = `table ${text} ${backgroundColor}`;
 export const tableRow = `table-row ${text} ${backgroundColor}`;
 export const tableCell = `table-cell ${text} ${backgroundColor}`;
+export const tableHead = `table-head`;
+export const tableHeadRow = `table-head-row ${text} ${backgroundColor}`;
 export const tableHeadCell = `table-head-cell ${tableCell}`;
+export const tableFoot = `table-foot`;
+export const tableFootRow = `table-foot-row ${text} ${backgroundColor}`;
+export const tableFootCell = `table-foot-cell ${tableCell}`;
 export const tableCellEven = `table-cell-even ${tableCell}`;
 export const tableCellOdd = `table-cell-odd ${tableCell}`;
 export const getAlternateTableCellPart = (index) => index % 2 ? tableCellEven : tableCellOdd;
 export const tableEmpty = `table-empty ${text} ${backgroundColor}`;
 export const tableError = `table-error ${text} ${backgroundColor}`;
 // Pagination
-export const paginationItem = `pagination-item ${text} ${backgroundColor}`;
-export const paginationItemText = `pagination-item-text ${text}`;
-export const paginationItemIcon = `pagination-item-icon ${text}`;
-export const paginationItemIconNext = `pagination-item-icon-next ${paginationItemIcon}`;
-export const paginationItemIconPrevious = `pagination-item-icon-previous ${paginationItemIcon}`;
+export const paginationButton = `pagination-button ${button}`;
+export const paginationButtonDisabled = `pagination-button-disabled ${buttonDisabled}`;
+export const paginationButtonText = `pagination-button-text ${text}`;
+export const paginationButtonIcon = `pagination-button-icon ${text}`;
+export const paginationButtonIconNext = `pagination-button-icon-next ${paginationButtonIcon}`;
+export const paginationButtonIconPrevious = `pagination-button-icon-previous ${paginationButtonIcon}`;
 // Loading spinner
 export const loadingSpinner = `loading-spinner`;
 // Badge
@@ -81,6 +87,7 @@ export const badgeLight = `${badge} badge-light`;
 export const badgeDark = `${badge} badge-dark`;
 // Dropdown-menu
 export const dropdownMenu = `dropdown-menu ${text}`;
+export const dropdownMenuButton = `dropdown-menu-button ${buttonPrimary}`;
 // Radio List Item
 export const radioListItem = `radio-list-item ${text}`;
 // Bootstrap list-group

package/dist/collection/ui-components/index.js

@@ -1,10 +1,6 @@
 export * from './button';
 export * from './button-spinner';
 export * from './styled-host/styled-host';
-export * from './table/exported-parts';
-export * from './table-empty-state';
-export * from './table-error-state';
-export * from './table-loading-state';
 export * from './skeleton';
 export * from './headers/header-1';
 export * from './headers/header-2';
@@ -12,3 +8,4 @@ export * from './headers/header-3';
 export * from './form/form-helpers/form-control-help-text';
 export * from './form/form-helpers/form-control-error-text';
 export * from './details/details';
+export * from './table';