@justifi/webcomponents 5.6.0 → 5.7.0

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

@@ -5,10 +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 = [];
@@ -16,7 +16,6 @@ export class PayoutTransactionsList {
         this.errorMessage = null;
         this.paging = pagingDefaults;
         this.pagingParams = {};
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.columns = defaultColumnsKeys;
         this.handleClickPrevious = (beforeCursor) => {
             this.pagingParams = { before_cursor: beforeCursor };
@@ -53,9 +52,9 @@ export class PayoutTransactionsList {
     initializeApi() {
         if (this.payoutId && this.authToken) {
             const getPayoutTransactions = makeGetPayoutTransactions({
+                accountId: configState.accountId,
                 authToken: this.authToken,
-                service: new PayoutService(),
-                apiOrigin: this.apiOrigin
+                service: new PayoutService()
             });
             getPayoutTransactions({
                 params: this.requestParams,
@@ -94,7 +93,7 @@ export class PayoutTransactionsList {
         return Object.assign({ payout_id: this.payoutId, limit: '15' }, this.pagingParams);
     }
     render() {
-        return (h(StyledHost, { key: '90a9bdb7acbaabba3e2d99936ab8ff4af752b89f' }, h("div", { key: '546c52c26422482ebc03c363e1b7251b00628612', class: "table-wrapper" }, h("table", { key: '8cafebb253b276b747be56ffdde3430eebd8165b', class: "table table-hover", part: table }, h("thead", { key: '1b701619c17d926a95ddfb7fbb84fe3a6fd7c9b9', class: "table-head sticky-top" }, h("tr", { key: '94b5d386d8eed15eb54761c450603e3edba05e28', class: "table-light text-nowrap" }, this.transactionsTable.columnData.map((column) => column))), h("tbody", { key: 'cf4057bac5a7b9b49448bc0cc6fe60b031e71428', class: "table-body" }, h(TableLoadingState, { key: '0336b83d2842ba8cc450e6169161c5a32b65d5ca', columnSpan: this.transactionsTable.columnData.length, isLoading: this.isLoading }), h(TableEmptyState, { key: 'ecb336f7cf73ae652eafa2068e916055c908b351', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnData.length }), h(TableErrorState, { key: 'fa99aae26090ced86423af1c1458b51880299260', 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: 'e1232dddefdbfaad0616841797235afd61422ec6', class: "sticky-bottom" }, h("tr", { key: 'f399c65e0d5c25206d2194841ba98e88d3fd7ebd', class: "table-light align-middle" }, h("td", { key: 'cb2e12c7d397c5c9be12ff2f3ad53bfba072f814', part: tableCell, colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'b485f5ba2817f9781f53d67b22ea3836caca448a', 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"; }
@@ -138,26 +137,6 @@ export class PayoutTransactionsList {
                 "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/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,13 +6,12 @@ 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 {
     constructor() {
         this.errorMessage = null;
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.columns = defaultColumnsKeys;
         this.handleOnError = (event) => {
             this.errorMessage = event.detail.message;
@@ -39,8 +38,7 @@ export class PayoutsList {
             const serviceParams = {
                 id: this.accountId,
                 authToken: this.authToken,
-                service: new PayoutService(),
-                apiOrigin: this.apiOrigin
+                service: new PayoutService()
             };
             this.getPayouts = makeGetPayouts(serviceParams);
             this.getPayoutCSV = makeGetPayoutCSV(serviceParams);
@@ -59,13 +57,12 @@ export class PayoutsList {
             this.getSubAccounts = makeGetSubAccounts({
                 accountId: this.accountId,
                 authToken: this.authToken,
-                service: new SubAccountService(),
-                apiOrigin: this.apiOrigin
+                service: new SubAccountService()
             });
         }
     }
     render() {
-        return (h(StyledHost, { key: '8a0fe80740cef6d17900927487aab83287c4ed3f', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '72d7494e2d0f44d4bfec9b2a7bad700c80aae948', 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"; }
@@ -109,26 +106,6 @@ export class PayoutsList {
                 "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/refund-payment/refund-payment.js

@@ -20,7 +20,6 @@ export class RefundPayment {
         this.paymentLoading = true;
         this.refundLoading = false;
         this.hideSubmitButton = false;
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.inputHandler = (name, value) => {
             this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
         };
@@ -61,8 +60,7 @@ export class RefundPayment {
             const getPayment = makeGetPaymentDetails({
                 id: this.paymentId,
                 authToken: this.authToken,
-                service: new PaymentService(),
-                apiOrigin: this.apiOrigin
+                service: new PaymentService()
             });
             getPayment({
                 onSuccess: ({ payment }) => {
@@ -93,8 +91,7 @@ export class RefundPayment {
             authToken: this.authToken,
             accountId: this.accountId,
             paymentId: this.paymentId,
-            service: new RefundService(),
-            apiOrigin: this.apiOrigin
+            service: new RefundService()
         });
         const values = this.formController.values.getValue();
         this.refundLoading = true;
@@ -204,26 +201,6 @@ export class RefundPayment {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "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/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/terminal-orders-list/terminal-orders-list.js

@@ -9,7 +9,6 @@ import JustifiAnalytics from "../../api/Analytics";
 export class TerminalOrdersList {
     constructor() {
         this.errorMessage = null;
-        this.apiOrigin = PROXY_API_ORIGIN;
         this.columns = defaultColumnsKeys;
         this.handleErrorEvent = (event) => {
             this.errorMessage = event.detail.message;
@@ -26,8 +25,7 @@ export class TerminalOrdersList {
             this.getTerminalOrders = makeGetTerminalOrders({
                 id: this.accountId,
                 authToken: this.authToken,
-                service: new TerminalOrderService(),
-                apiOrigin: this.apiOrigin
+                service: new TerminalOrderService()
             });
         }
         else {
@@ -40,7 +38,7 @@ export class TerminalOrdersList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '46b01f30e476ae5e3892b96d804305c8e099b4c2' }, h("terminal-orders-list-core", { key: '4a0d1079a9afbf328c3dd382ca5e2180b5679da0', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '4ebe88697536863b62a8bd63fac96eb5f93668d0' }, h("terminal-orders-list-core", { key: '6735068496d16cdd4df169708c93534bea78433a', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminal-orders-list"; }
     static get encapsulation() { return "shadow"; }
@@ -84,26 +82,6 @@ export class TerminalOrdersList {
                 "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/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/terminals-list/terminals-list.js

@@ -11,7 +11,6 @@ import { makeGetSubAccounts } from "../../actions/sub-account/get-subaccounts";
 export class TerminalsList {
     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 TerminalsList {
             this.getTerminals = makeGetTerminals({
                 id: this.accountId,
                 authToken: this.authToken,
-                service: new TerminalService(),
-                apiOrigin: this.apiOrigin
+                service: new TerminalService()
             });
         }
         else {
@@ -56,13 +54,12 @@ export class TerminalsList {
             this.getSubAccounts = makeGetSubAccounts({
                 accountId: this.accountId,
                 authToken: this.authToken,
-                service: new SubAccountService(),
-                apiOrigin: this.apiOrigin
+                service: new SubAccountService()
             });
         }
     }
     render() {
-        return (h(StyledHost, { key: '34f129e35a2bdff9c28c811711d78f04408098ee' }, h("terminals-list-core", { key: '3d0fd5b47e5f4170403dc489168db3dad48dfe2e', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'f80199e30923fb9a50f66570087d41c5390e20a1' }, h("terminals-list-core", { key: 'ab3ed9809c1c629b3dd8ac5039294fd23b8c16a8', 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"; }
@@ -106,26 +103,6 @@ export class TerminalsList {
                 "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/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

@@ -53,13 +53,26 @@ export const tooltipInner = `tooltip-inner ${text}`;
 export const card = `card ${text} ${backgroundColor}`;
 // Table
 export const table = `table ${text} ${backgroundColor}`;
+export const tableRow = `table-row ${text} ${backgroundColor}`;
 export const tableCell = `table-cell ${text} ${backgroundColor}`;
-export const tableHeadCell = `table-head-cell ${tableCell} ${text} ${backgroundColor}`;
-export const tableCellEven = `table-cell-even ${tableCell} ${text} ${backgroundColor}`;
-export const tableCellOdd = `table-cell-odd ${tableCell} ${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 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
@@ -74,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';

package/dist/collection/ui-components/pagination-menu/pagination-menu.js

@@ -1,19 +1,19 @@
 import { h, Host } from "@stencil/core";
 import { ExtendedPagingDefaults } from "../../api/Pagination";
-import { buttonDisabled, buttonLink, } from "../../styles/parts";
+import { paginationButton, paginationButtonDisabled, paginationButtonIconNext, paginationButtonIconPrevious, paginationButtonText } from "../../styles/parts";
 export class PaginationMenu {
     constructor() {
         this.paging = ExtendedPagingDefaults;
         this.params = {};
     }
     render() {
-        return (h(Host, { key: '7a4cfcfa7d9329e8d4026cd6bdc15c3251f004d6' }, h("nav", { key: '203b5ffeb3f4a167aa9448ac6075fd7a1ac15ef7', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: 'e302f939560131ade67b0f9d4135fa04ff485d09', class: "pagination m-0" }, h("li", { key: 'b3e2ba7b66e5de597a3233ee036d4d1ef2930689', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("a", { key: '1f358b34fbaa7f140c1ee15ef6ee8d6f9b87407f', href: "#", class: "page-link", onClick: (e) => {
+        return (h(Host, { key: '7b821154b627026ef8624af6e4759e2176004676' }, h("nav", { key: '7990aee285d0cc3e6f83cb59bb216439e5364df5', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '02c68163934ce1aabf4abd607cc28e549e20ebe1', class: "pagination m-0" }, h("li", { key: 'aab661ae85fc61eecd230d058f135483796769c0', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("button", { key: 'ef42a41831a9890186c333418b161877761674e1', class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickPrevious(this.paging.start_cursor);
-            }, part: this.paging.has_previous ? buttonLink : buttonDisabled }, h("span", { key: 'daffe0c0ffb7265cd769bbf27fef42c37e86300d', class: "me-1" }, "\u00AB"), h("span", { key: '2c42b74352aa7a79ac6bc231cdd828b7a62f5083' }, "Previous"))), h("li", { key: '2707ab481b124351479dbc5e4b270a60f8e0cb9e', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("a", { key: 'f97ea7a812ba9b0066cd5e75ab45bff152708b63', href: "#", class: "page-link", onClick: (e) => {
+            }, part: this.paging.has_previous ? paginationButton : paginationButtonDisabled }, h("span", { key: 'a898a92687e4a5fec37d9dab4208430260a9f274', class: "me-1", part: paginationButtonIconPrevious }, "\u00AB"), h("span", { key: 'ecc2eeedc064d405ad178b9a98ed088e12f1b2fb', part: paginationButtonText }, "Previous"))), h("li", { key: '56569cd9f9803ead8b1180e2f982a98d7009be1f', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("button", { key: 'c39d389ab89609e8ce11b3dd81eb5c4a50d3521f', class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickNext(this.paging.end_cursor);
-            }, part: this.paging.has_next ? buttonLink : buttonDisabled }, h("span", { key: 'a850314028161b5a04618ffc5515603ea7203a0a' }, "Next"), h("span", { key: '643097228302500411ca0c4a932d8067074a15d2', class: "ms-1" }, "\u00BB")))))));
+            }, part: this.paging.has_next ? paginationButton : paginationButtonDisabled }, h("span", { key: '6a01458a048a524931b03df6a964fa4a0ac403ac', part: paginationButtonText }, "Next"), h("span", { key: 'f4cb3d084647c00dff30b99f751180564463443f', class: "ms-1", part: paginationButtonIconNext }, "\u00BB")))))));
     }
     static get is() { return "pagination-menu"; }
     static get properties() {

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

@@ -0,0 +1,5 @@
+export * from './table';
+export * from './table-empty-state';
+export * from './table-error-state';
+export * from './table-loading-state';
+export * from './event-types';

package/dist/collection/ui-components/{table-empty-state.js → table/table-empty-state.js}

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { tableEmpty } from "../styles/parts";
+import { tableEmpty } from "../../styles/parts";
 export const TableEmptyState = (props) => {
     const { columnSpan, isEmpty } = props;
     if (!columnSpan || !isEmpty) {

package/dist/collection/ui-components/{table-error-state.js → table/table-error-state.js}

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { tableError } from "../styles/parts";
+import { tableError } from "../../styles/parts";
 export const TableErrorState = (props) => {
     const { columnSpan, errorMessage } = props;
     if (!columnSpan || !errorMessage) {

package/dist/collection/ui-components/{table-loading-state.js → table/table-loading-state.js}

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import Spinner from "./spinner";
-import { tableCell } from "../styles/parts";
+import Spinner from "../spinner";
+import { tableCell } from "../../styles/parts";
 export const TableLoadingState = (props) => {
     const { columnSpan, isLoading } = props;
     if (!columnSpan || !isLoading) {

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

@@ -0,0 +1,29 @@
+import { h } from "@stencil/core";
+import { table, tableRow, tableFoot, tableFootRow, tableFootCell, tableHead, tableHeadRow } from "../../styles/parts";
+export const TableWrapper = (props, children) => {
+    return (h("div", Object.assign({ class: "table-wrapper", part: "table-wrapper" }, props), children));
+};
+export const TableComponent = (props, children) => {
+    return (h("table", Object.assign({ class: "table table-hover", part: table }, props), children));
+};
+export const TableBody = (props, children) => {
+    return (h("tbody", Object.assign({ class: "table-body" }, props), children));
+};
+export const TableRow = (props, children) => {
+    return (h("tr", Object.assign({ part: tableRow }, props), children));
+};
+export const TableHead = (props, children) => {
+    return (h("thead", Object.assign({ class: "table-head sticky-top", part: tableHead }, props), children));
+};
+export const TableHeadRow = (props, children) => {
+    return (h("tr", Object.assign({ class: "table-light text-nowrap", part: tableHeadRow }, props), children));
+};
+export const TableFoot = (props, children) => {
+    return (h("tfoot", Object.assign({ class: "sticky-bottom", part: tableFoot }, props), children));
+};
+export const TableFootRow = (props, children) => {
+    return (h("tr", Object.assign({ class: "table-light align-middle", part: tableFootRow }, props), children));
+};
+export const TableFootCell = (props, children) => {
+    return (h("td", Object.assign({ part: tableFootCell }, props), children));
+};