@justifi/webcomponents 4.23.1 → 5.0.0-rc-1

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

@@ -1,34 +1,27 @@
 import { h } from "@stencil/core";
 import { pagingDefaults } from "../../api";
 import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
-import { onFilterChange } from "../../ui-components/filters/utils";
 import { paymentTableCells, paymentTableColumns } from "./payments-table";
 import { Table } from "../../utils/table";
+import { queryParams, onQueryParamsChange } from "./payments-list-params-state";
+import { table, tableCell } from "../../styles/parts";
+import { TableClickActions } from "../../ui-components/table/event-types";
 export class PaymentsListCore {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.after_cursor;
-            this.params = Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor });
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
         };
         this.handleClickNext = (afterCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.before_cursor;
-            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
         };
         this.rowClickHandler = (e) => {
             const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedPaymentID)
                 return;
-            this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
-        };
-        this.setParamsOnChange = (name, value) => {
-            let newParams = { [name]: value };
-            this.params = onFilterChange(newParams, this.params);
-        };
-        this.clearParams = () => {
-            this.errorMessage = '';
-            this.params = {};
+            const paymentData = this.payments.find((payment) => payment.id === clickedPaymentID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: paymentData });
         };
         this.getPayments = undefined;
         this.columns = undefined;
@@ -37,7 +30,7 @@ export class PaymentsListCore {
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
-        this.params = {};
+        this.pagingParams = {};
     }
     updateOnPropChange() {
         this.fetchData();
@@ -47,11 +40,18 @@ export class PaymentsListCore {
         if (this.getPayments) {
             this.fetchData();
         }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
     fetchData() {
         this.loading = true;
         this.getPayments({
-            params: this.params,
+            params: this.requestParams,
             onSuccess: ({ payments, pagingInfo }) => {
                 this.payments = payments;
                 this.paging = pagingInfo;
@@ -81,8 +81,12 @@ export class PaymentsListCore {
     get showRowData() {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
+    get requestParams() {
+        const combinedParams = Object.assign(Object.assign({}, queryParams), this.pagingParams);
+        return combinedParams;
+    }
     render() {
-        return (h("div", { key: 'f9ad62dd7a3b3112af2b9d9ca3165a68730ad838' }, h("payments-list-filters", { key: '25453b8b93c43d6f9629688771bba820306cef5c', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: 'ec2b2799972ae5baeaed5c8f9547f1445295965b', class: "table-wrapper" }, h("table", { key: '323a3de363600940aecd8234b9d4e801bd0f0b70', class: "table table-hover" }, h("thead", { key: '9505ebb231fdb87c6be5a1e4313d8fee2afb1a0b', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '995bd6b6f7ab40891cf4a9aa63cfb9adc92d596e', class: "table-light text-nowrap", part: "table-head-row" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: 'e85cd3ca47511afb2afdaf4cca9547b62d9ecb9e', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'a1f20762b14b9cf0f03f0b36ce6cdae8bdb8f3c9', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '1e1e89ec8a2cbf6abe7d2183f5e1499374a9f33f', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'bfdd4bf25ab283f015cecf72603ea1d7f8921ee3', 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: `table-row ${index % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (h("tfoot", { key: '0832e67b126a1cd7d8d936df635dc87023a683b0', class: "sticky-bottom" }, h("tr", { key: '2536f710f027d8fb0865c88b86a30111f012977e', class: "table-light align-middle" }, h("td", { key: '5f0c707ed1d855db83531297af9ace5d1212d35d', part: "pagination-bar", colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '01f751294ff54854be1434e15369153a5527414a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: '6d3aeab1a53d5a9f73ed770de5d936e290189a9e' }, h("div", { key: 'f9750011da7c0bf0e4bc5eb91fc5c54489798890', class: "table-wrapper" }, h("table", { key: '7361cc478802a1de5513bf92ea9ec7f105168d55', class: "table table-hover", part: table }, h("thead", { key: '239402e85ae6537f4fc605b06f9f747233aef37a', class: "table-head sticky-top" }, h("tr", { key: 'f3330dae27878b313848a057d1094e094bdd66f4', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '1441e8920b68c7cf759188694b1cbc65a2c37795', class: "table-body" }, h(TableLoadingState, { key: '55bf8e8b8c6c859ce363ce30fb6db75f328ebca1', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '20d7f82636bc4b1a54a56ca89f2444261e26c0d6', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '10c160fafc746dece6e3837aa43021e48d7f49b9', 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 }, data)))), this.paging && (h("tfoot", { key: '058476cc6c3369cf4700203c28f3d2c9c002656b', class: "sticky-bottom" }, h("tr", { key: '87c051940f9e49e64d661d12f5387ef5263091b4', class: "table-light align-middle" }, h("td", { key: '06fe26d1f9d57c6598fe71ebb9b48780a35fba5a', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'd23dedce32252f08d0a24eb4a474e9ee62ebd0e1', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {
@@ -133,13 +137,13 @@ export class PaymentsListCore {
             "loading": {},
             "errorMessage": {},
             "paging": {},
-            "params": {}
+            "pagingParams": {}
         };
     }
     static get events() {
         return [{
-                "method": "rowClicked",
-                "name": "payment-row-clicked",
+                "method": "clickEvent",
+                "name": "click-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -148,13 +152,13 @@ export class PaymentsListCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "Payment",
-                    "resolved": "Payment",
+                    "original": "ComponentClickEvent",
+                    "resolved": "ComponentClickEvent",
                     "references": {
-                        "Payment": {
+                        "ComponentClickEvent": {
                             "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::Payment"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentClickEvent"
                         }
                     }
                 }
@@ -169,13 +173,13 @@ export class PaymentsListCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }
@@ -183,7 +187,10 @@ export class PaymentsListCore {
     }
     static get watchers() {
         return [{
-                "propName": "params",
+                "propName": "queryParams",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "pagingParams",
                 "methodName": "updateOnPropChange"
             }, {
                 "propName": "getPayments",

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

@@ -1,15 +1,17 @@
 import { h } from "@stencil/core";
 import { debounce } from "lodash";
+import { queryParams, clearParams } from "./payments-list-params-state";
+import { StyledHost } from "../../ui-components";
 import { convertToLocal, convertToUTC } from "../../utils/utils";
 export class PaymentsListFilters {
     constructor() {
+        this.setParamsOnChange = (name, value) => {
+            queryParams[name] = value;
+        };
         this.handleDateInput = (name, value) => {
             const utcDate = convertToUTC(value, { setExactTime: true });
             this.setParamsOnChange(name, utcDate);
         };
-        this.params = {};
-        this.setParamsOnChange = undefined;
-        this.clearParams = undefined;
     }
     componentWillLoad() {
         // debounced input handler for text input
@@ -27,63 +29,8 @@ export class PaymentsListFilters {
         ];
     }
     render() {
-        return (h("table-filters-menu", { key: '64b3b8cc77a08a6aa58c89b99248380bf8d9ad0f', params: this.params, clearParams: this.clearParams }, h("div", { key: 'ce5c017776a3b066d688ee25b9c7ef567df66695', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '8cf5d22905c448b3ddb4496483e6b6788b0d19db', class: "p-2" }, h("form-control-text", { key: '7156ecff36896b91d5cd600488a0739ff8ed4d96', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.payment_id })), h("div", { key: 'e04ca45af970a4d0e4725b8e7a0ba63ef7a5f5e9', class: "p-2" }, h("form-control-text", { key: '006191433fd479f95539dcdb2f2d6de3ac6d9828', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: 'fb5b1dfe7964ed7b95b349285e6df6bd0d83746b', class: "p-2" }, h("form-control-select", { key: '9832248a99214d5121f6420879fe596dbe3bd3e9', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_status || '' })), h("div", { key: '138911f0f97f91910cda968208da26b3c9fd8303', class: "p-2" }, h("form-control-date", { key: 'd6a7a2ef2df3740af32edd6f454bbda154d5c3ef', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.params.created_after, { showInputDateTime: true }) || '', showTime: true })), h("div", { key: 'b4a808a46fd88c21e5e6f01381c1aaedc5ec9e39', class: "p-2" }, h("form-control-date", { key: 'a23eab0b41cb51786eaaecec6c91898ab70121ea', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.params.created_before, { showInputDateTime: true }) || '', showTime: true })))));
-    }
-    static get is() { return "payments-list-filters"; }
-    static get properties() {
-        return {
-            "params": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "PaymentsParams",
-                    "resolved": "PaymentsParams",
-                    "references": {
-                        "PaymentsParams": {
-                            "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::PaymentsParams"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "defaultValue": "{}"
-            },
-            "setParamsOnChange": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(name: string, value: string) => void",
-                    "resolved": "(name: string, value: string) => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                }
-            },
-            "clearParams": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "() => void",
-                    "resolved": "() => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                }
-            }
-        };
+        return (h(StyledHost, { key: '9cd31c52650516e81343bf13c3e18ed96258bc57' }, h("table-filters-menu", { key: 'eb1abd1876bd3bf52e04108e680c2b006338514c', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: '2787fa1c460d45a5d66efe5a2f3ef25333ec9201', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'f7f599337b113e9aad1c72fdb4dd88c3dec92a63', class: "p-2" }, h("form-control-text", { key: 'ee692c59649fcbe4ec0e7e5bef891d5145ac4d35', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: queryParams.payment_id })), h("div", { key: '1dce20fc5bb6a69e06e7960349e6f5623d5eef66', class: "p-2" }, h("form-control-text", { key: '2a84495e90b49bfa51912251d6c5804646248f7b', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: queryParams.terminal_id })), h("div", { key: 'bbd95d93ddb713a4ae90876b735e4f88ce6abfef', class: "p-2" }, h("form-control-select", { key: 'ce1b6ac3d27149b013c937e3bdb43257a6f16c86', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.payment_status || '' })), h("div", { key: 'ae3b27ef30ded613a255c688162a3ff561a5f5d3', class: "p-2" }, h("form-control-date", { key: 'eaefc349011d12e5f950ad12fea24507dee9516f', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_after, { showInputDateTime: true }) || '', showTime: true })), h("div", { key: 'f52daff95da491a911be96d8c0f3a6dc395a95c6', class: "p-2" }, h("form-control-date", { key: 'cb8d8b5a424c3a1ca36c52608d89948d88c54cb5', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_before, { showInputDateTime: true }) || '', showTime: true }))))));
     }
+    static get is() { return "justifi-payments-list-filters"; }
+    static get encapsulation() { return "shadow"; }
 }

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

@@ -0,0 +1,8 @@
+import { createStore } from "@stencil/store";
+const initialState = {};
+const paymentsListQueryParams = createStore(() => initialState);
+const { state: queryParams, on: onQueryParamsChange } = paymentsListQueryParams;
+const clearParams = () => {
+    paymentsListQueryParams.reset();
+};
+export { paymentsListQueryParams, queryParams, onQueryParamsChange, clearParams };

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

@@ -5,30 +5,8 @@ import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/Component
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import { config } from "../../../config";
-import { StyledHost, tableExportedParts } from "../../ui-components";
+import { StyledHost } from "../../ui-components";
 import { defaultColumnsKeys } from "./payments-table";
-/**
-  * @exportedPart label: Label for inputs
-  * @exportedPart input: The input fields
-  * @exportedPart input-invalid: Invalid state for inputs
-  * @exportedPart table-head: Table head
-  * @exportedPart table-head-row: Head row
-  * @exportedPart table-head-cell: Individual head cell
-  * @exportedPart table-body: Body of the table
-  * @exportedPart table-row: Row of the table
-  * @exportedPart table-cell: Individual cell of the table
-  * @exportedPart loading-state-cell: Row for loading state
-  * @exportedPart loading-state-spinner: Spinner element for loading state
-  * @exportedPart error-state: Row for Error state
-  * @exportedPart empty-state: Row for Emtpy state
-  * @exportedPart pagination-bar: Pagination bar
-  * @exportedPart arrow: Both paging buttons
-  * @exportedPart arrow-left: Previous page button
-  * @exportedPart arrow-right: Next page button
-  * @exportedPart button-disabled: Disabled state for paging buttons
-  * @exportedPart previous-button-text: Text for Previous button
-  * @exportedPart next-button-text: Text for Next button
-*/
 export class PaymentsList {
     constructor() {
         this.handleErrorEvent = (event) => {
@@ -72,7 +50,7 @@ export class PaymentsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '78b8e22426135db19223ca0ddc62aaf6f42a1080', exportparts: tableExportedParts }, h("payments-list-core", { key: '23c5aeeb9a6766de2ddb42f62a2163fa8f14ac81', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '35086c06a347cb7ee577366cd5674a2c50c4ffe5' }, h("payments-list-core", { key: 'bee1a7cf3e600a0060a62cf8151eea390dfd2cfa', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }
@@ -168,13 +146,13 @@ export class PaymentsList {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

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

@@ -1,22 +1,23 @@
 import { h } from "@stencil/core";
 import { MapPaymentStatusToBadge } from "./payments-status";
 import { formatCurrency, convertToLocal } from "../../utils/utils";
+import { getAlternateTableCellPart, tableHeadCell } from "../../styles/parts";
 export const defaultColumnsKeys = 'created_at,amount,status,payment_type,description,payers_name,last_four_digits';
 export const paymentTableColumns = {
-    created_at: () => (h("th", { part: "table-head-cell", scope: "col", title: "The date and time each payment was made" }, "Date")),
-    amount: () => (h("th", { part: "table-head-cell", scope: "col", title: "The dollar amount of each payment" }, "Amount")),
-    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each payment" }, "Status")),
-    payment_type: () => (h("th", { part: "table-head-cell", scope: "col", title: "The type of each payment" }, "Type")),
-    description: () => (h("th", { part: "table-head-cell", scope: "col", title: "The payment description, if you provided one" }, "Description")),
-    payers_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The name associated with the payment method" }, "Account Holder")),
-    last_four_digits: () => (h("th", { part: "table-head-cell", scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date and time each payment was made" }, "Date")),
+    amount: () => (h("th", { part: tableHeadCell, scope: "col", title: "The dollar amount of each payment" }, "Amount")),
+    status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of each payment" }, "Status")),
+    payment_type: () => (h("th", { part: tableHeadCell, scope: "col", title: "The type of each payment" }, "Type")),
+    description: () => (h("th", { part: tableHeadCell, scope: "col", title: "The payment description, if you provided one" }, "Description")),
+    payers_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The name associated with the payment method" }, "Account Holder")),
+    last_four_digits: () => (h("th", { part: tableHeadCell, scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
 };
 export const paymentTableCells = {
-    created_at: (value) => (h("td", { part: "table-cell" }, h("div", { class: "fw-bold" }, convertToLocal(value, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(value, { showTime: true })))),
-    amount: (value) => (h("td", { part: "table-cell" }, formatCurrency(value, true, true))),
-    status: (value) => (h("td", { part: "table-cell", innerHTML: MapPaymentStatusToBadge(value) })),
-    payment_type: (value) => (h("td", { part: "table-cell" }, value)),
-    description: (value) => (h("td", { part: "table-cell" }, value)),
-    payers_name: (value) => (h("td", { part: "table-cell" }, value)),
-    last_four_digits: (value) => (h("td", { part: "table-cell" }, value))
+    created_at: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(value, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(value, { showTime: true })))),
+    amount: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value, true, true))),
+    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapPaymentStatusToBadge(value) })),
+    payment_type: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    description: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    payers_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    last_four_digits: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value))
 };

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

@@ -1,8 +1,10 @@
 import { h } from "@stencil/core";
 import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../../ui-components/details/utils";
-import { StyledHost } from "../../ui-components";
+import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState } from "../../ui-components/details/utils";
+import { Button, StyledHost } from "../../ui-components";
 import { MapPayoutStatusToBadge } from "../payouts-list/payouts-status";
+import Spinner from "../../ui-components/spinner";
+import { badge } from "../../styles/parts";
 export class PayoutDetailsCore {
     constructor() {
         this.downloadCSV = () => {
@@ -53,7 +55,7 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '5bbb9c0cacc3bf2efe7a1e935e586944578f735f' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '93b7b7abde3b10e4e4d79526b02b8db0713c8fc6', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'ac86860de5b1861971b0a9b7e3b9c5d6240ccc2a', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '537d48671755958de63c4c5c9e8b9272bc507e6b', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cdac6a8d733ad1bd45b923f10350601b72b22e8f', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'a11a7d54baefaadd46be03d983f78754a3b4e7a2', title: "ID", value: this.payout.id }), h("div", { key: '71f41756d098d1863344f298549d32a3c0235e2c', class: "m-4" }, h("button", { key: '0bc57fc73b3e64da59e357d8882df4d9e1806af1', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'f1be7616f853affa6a32c1ce598c46efb34497cc', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'b483ced9513bb46fe249ab50192663de025fa3f7', sectionTitle: "Details" }), h("div", { key: '510a10f8730d3b0afd2422d349f5ac656d1059e1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0564098e173c62fa3b73bcb112b3b1e516bcb094', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '91900371ae342a2ff8c79952786e5f0a999113da', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'c0a216b12b91c56d2b3c2c7b678c2bd893fefe02', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'afaafd44d645f458cd4299f9c8f504388ff1df53', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: 'dbe4a06db4e8736c520db79cc45a37637ed02962', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '605964367e17fdbbd72763c818ba4dd42043f96f', sectionTitle: "Account" }), h("div", { key: '662a14b06e2fca1c305b9c8cbc3e724589117602', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '6b195d37ffb700b8ce2c7a095d196af52d92eb00', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '011fb64b10627221ef1495da127f929bc63dbab6', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '4130703cb2a6b567392819f997dd574a9e087df4', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '541d23f1645541e461280a0ddd449530df79aa76', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'b544a37bae800ce24bbf11cc9654ab6b4aabc0da', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '40d9206806dfba438fbf700b7767a03c449ee1a9', sectionTitle: 'Metadata' }), h("div", { key: '435aff888f41675e1a2bf8729fc1c859cafaa20b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '1c9f32bf899914aa052375e4be2e8f92134da196', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '00dce2f3bddb29647880b82a2055580346b7ff38' }, this.loading && h(Spinner, { key: 'de524e2f77fb4dd20f4fcb7dff41f256f3ee74b5' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c0b7449ff0e5773be97fb27485638acdce79b50a', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '1aa8719fb989c9993ac30803440d16ce3590038e', slot: "head-info", badge: h("span", { slot: 'badge', part: badge, innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '30c9240747e66e38056cd870e5703b4d027b3ea2', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2d93c5594c1451a3d566afe0431da34994ccc94a', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'd9116166e2c7f95e8a7e110146f492bf0329e01e', title: "ID", value: this.payout.id }), h("div", { key: '9b3c12058b396637632c3d46a24ed426a1bd518c', class: "m-4" }, h(Button, { key: 'eaf5339cb60b3ae759b0ca94ffb07f20f044feec', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '61372b0167f0a07231fd1cf69d61f156e42c3a0a', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '6113095a35b746b7b03e15af9e195fe7247148c0', sectionTitle: "Details" }), h("div", { key: 'dcdc2cf2c73516e603492aae6f81a12a2dd10d1f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '797cf1e1b4a0521ff01a8c985c260b998ad3d3e9', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'bd3162d95fa4a98e2db4e42a9de39c91ca209b45', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'adef2b9dcbad873f570530761cf887c9a4efa052', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '8c6ca766f17f9dd140fa0778fecd648a72244b92', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '4c4448677902c19011cf36b0d71d85eb54083bbf', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '7f4a0ed8518b957cbfcfb15e5ea62963e5ba5013', sectionTitle: "Account" }), h("div", { key: '3d878a54ddffb40e55610224fc97f182f4255e51', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'd9eb8870ca1b4bf0c04bcb2f3b4362ebf9712a88', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'f320a0fb646a5352173341083f384bd6d7a30a61', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '35cc07ec9ee8e3155606851eeb9864d9f6df6e05', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'ac0962b80347b619e4cc534781df397d9bc510e2', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '65db983d9504b912f12cefc7eea7a5bc8e9f3d73', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'bc94a109cf5e2c4dcd32972387a4b167b85d8ccc', sectionTitle: 'Metadata' }), h("div", { key: '1918677f3559ff779b3f1613ee9b2367110f4648', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2b5dd103cebe0960bdcc6a68f7389780e9d1029b', metadata: this.payout.metadata })))))));
     }
     static get is() { return "payout-details-core"; }
     static get properties() {
@@ -119,13 +121,13 @@ export class PayoutDetailsCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

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

@@ -115,13 +115,13 @@ export class PayoutDetails {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }

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

@@ -2,9 +2,11 @@ import { h } from "@stencil/core";
 import { pagingDefaults } from "../../api";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
-import { onFilterChange } from "../../ui-components/filters/utils";
 import { payoutTableCells, payoutTableColumns } from "./payouts-table";
 import { Table } from "../../utils/table";
+import { queryParams, onQueryParamsChange } from "./payouts-list-params-state";
+import { table, tableCell } from "../../styles/parts";
+import { TableClickActions } from "../../ui-components/table/event-types";
 export class PayoutsListCore {
     constructor() {
         this.downloadCSV = (payoutId) => {
@@ -20,28 +22,19 @@ export class PayoutsListCore {
             });
         };
         this.handleClickPrevious = (beforeCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.after_cursor;
-            this.params = Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor });
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
         };
         this.handleClickNext = (afterCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.before_cursor;
-            this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
         };
         this.rowClickHandler = (e) => {
             const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedPayoutID)
                 return;
-            this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));
-        };
-        this.setParamsOnChange = (name, value) => {
-            let newParams = { [name]: value };
-            this.params = onFilterChange(newParams, this.params);
-        };
-        this.clearParams = () => {
-            this.errorMessage = '';
-            this.params = {};
+            const payoutData = this.payouts.find((payout) => payout.id === clickedPayoutID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: payoutData });
         };
         this.getPayouts = undefined;
         this.getSubAccounts = undefined;
@@ -53,21 +46,28 @@ export class PayoutsListCore {
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
-        this.params = {};
+        this.pagingParams = {};
     }
     updateOnPropChange() {
-        this.fetchPayouts();
+        this.fetchData();
     }
     componentWillLoad() {
         this.payoutsTable = new Table(this.payouts, this.columns, payoutTableColumns, payoutTableCells(this.downloadCSV));
         if (this.getPayouts && this.getSubAccounts) {
-            this.fetchPayouts();
+            this.fetchData();
         }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
-    fetchPayouts() {
+    fetchData() {
         this.loading = true;
         this.getPayouts({
-            params: this.params,
+            params: this.requestParams,
             onSuccess: ({ payouts, pagingInfo }) => {
                 this.payouts = payouts;
                 this.paging = pagingInfo;
@@ -114,6 +114,10 @@ export class PayoutsListCore {
             },
         });
     }
+    get requestParams() {
+        const combinedParams = Object.assign(Object.assign({}, queryParams), this.pagingParams);
+        return combinedParams;
+    }
     get subAccountParams() {
         let accountIdNumbers = this.payouts.map((payout) => payout.account_id);
         let uniqueAccountIds = [...new Set(accountIdNumbers)];
@@ -133,7 +137,7 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '3768192e14155536f0fb53d2abc5f1e92b04cc01' }, h("payouts-list-filters", { key: '3fec8cfc6b9d68798148e9eea0725079d32e3406', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '291b7a53bb5657c87568169ebccc1dead39d10c9', class: "table-wrapper" }, h("table", { key: '624389fddf8b00dcaf70a75693b542b2f4af4982', class: "table table-hover" }, h("thead", { key: '1e28a2a6988eac106c40b8f029d9fa2118cbdb6d', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '1f05dd4c54fb350545cf6b1b3e86b80d96932585', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '3af09dc61461f31f61c2cfdf7896b7dfe9441450', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '715a3d0732e45810bdfdcbe5c7db8f29934a1a62', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '3aac2554828eac0c6b0645da5df811b5e5463235', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'cf2b312830b9f59550346085f00bc519e496b2b2', 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, part: `table-row ${index % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (h("tfoot", { key: '3d7389fb825a7eafcd456b3ae95b115a4218fea3', class: "sticky-bottom" }, h("tr", { key: '4c10aa64144a281d8303b04f013bfcc2390f4d04', class: "table-light align-middle" }, h("td", { key: '63614e636203a5f15beb26b4d19eed393b6ea481', part: "pagination-bar", colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '7708ac8b21d2db0ec9ade773dd46cd944374ede5', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: 'b32c27e9cd63eebde1bbce6634eeb8be1c804db8' }, h("div", { key: '842d7df46f21510c872e34234d70a3adef80ebd9', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: '3fb2afe1a78cbb39f896d1833a06c4c976e53292', class: "table table-hover", part: table }, h("thead", { key: '65e335052e013f6bd2ddd154b0772d813b03e02f', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '0d113369ff9e4a1933b8c0f699e03ab3812d30d4', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '64eea2dda7fe52844a39fe4a78840444959c9bf8', class: "table-body" }, h(TableLoadingState, { key: '3f3fb69c8105de8374e57e7279ad0d3e4e88f777', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'df74f8ea143edbfb57efee6952c7ddffc690db8e', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'd12c61e243397de8024c8fe13e518ae3328b5d95', 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: '23f8f411959eb2464a4f0d75830adedf5cc9d15b', class: "sticky-bottom" }, h("tr", { key: '63a62a4743ef38050ef9d6f2870fc74b5a011568', class: "table-light align-middle" }, h("td", { key: '23a7b62618db1dd52da8c43627f7d512c2f18bc1', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '3c401e3d08d930cc19c5a09e1b34c740f2dd833b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {
@@ -225,13 +229,13 @@ export class PayoutsListCore {
             "loading": {},
             "errorMessage": {},
             "paging": {},
-            "params": {}
+            "pagingParams": {}
         };
     }
     static get events() {
         return [{
-                "method": "rowClicked",
-                "name": "payout-row-clicked",
+                "method": "clickEvent",
+                "name": "click-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -240,13 +244,13 @@ export class PayoutsListCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "Payout",
-                    "resolved": "Payout",
+                    "original": "ComponentClickEvent",
+                    "resolved": "ComponentClickEvent",
                     "references": {
-                        "Payout": {
+                        "ComponentClickEvent": {
                             "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::Payout"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentClickEvent"
                         }
                     }
                 }
@@ -261,13 +265,13 @@ export class PayoutsListCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "ComponentError",
-                    "resolved": "ComponentError",
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
                     "references": {
-                        "ComponentError": {
+                        "ComponentErrorEvent": {
                             "location": "import",
-                            "path": "../../api/ComponentError",
-                            "id": "src/api/ComponentError.ts::ComponentError"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                         }
                     }
                 }
@@ -275,7 +279,10 @@ export class PayoutsListCore {
     }
     static get watchers() {
         return [{
-                "propName": "params",
+                "propName": "queryParams",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "pagingParams",
                 "methodName": "updateOnPropChange"
             }, {
                 "propName": "getPayouts",