@justifi/webcomponents 4.23.1 → 5.0.0-rc-2

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

@@ -1,72 +1,20 @@
 import { h } from "@stencil/core";
+import { queryParams, clearParams } from "./payouts-list-params-state";
+import { StyledHost } from "../../ui-components";
 import { convertToLocal, convertToUTC } from "../../utils/utils";
 export class PayoutsListFilters {
     constructor() {
+        this.setParamsOnChange = (name, value) => {
+            queryParams[name] = value;
+        };
         this.handleDateInput = (name, value) => {
             const utcDate = convertToUTC(value, { setEndOfDay: true });
             this.setParamsOnChange(name, utcDate);
         };
-        this.params = undefined;
-        this.setParamsOnChange = undefined;
-        this.clearParams = undefined;
     }
     render() {
-        return (h("table-filters-menu", { key: '2f80b6ac3308af53f20f1c8c8fbc596937eeda1d', params: this.params, clearParams: this.clearParams }, h("div", { key: '6e0bf319268d1bcbbd81e922f0855eb1c497815f', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '8c29a63ea0c4836a0b002db9adc75ea69cdde988', class: "p-2" }, h("form-control-date", { key: '74399fdd150d71758f817454944ef34c9b443240', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.params.created_after, { showInputDate: true }) })), h("div", { key: 'e98911d5b92ed5a6642d8f59b23abbebf4f1f85b', class: "p-2" }, h("form-control-date", { key: '4f233e95aeae496357938c69f25336123fbf1f0f', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.params.created_before, { showInputDate: true }) })))));
-    }
-    static get is() { return "payouts-list-filters"; }
-    static get properties() {
-        return {
-            "params": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "PayoutsTableFilterParams",
-                    "resolved": "PayoutsTableFilterParams",
-                    "references": {
-                        "PayoutsTableFilterParams": {
-                            "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::PayoutsTableFilterParams"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                }
-            },
-            "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: 'dbeddac44642b50552902b1d072384d0e308bbcd' }, h("table-filters-menu", { key: '0a4fc98cf7cf7bb5748c9443fe0ad22676b2ec0a', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: '36e7cfd3b59458bfc4f34b25e14d39984d6f9b19', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '3670d1890feecaf9c0ad41278e3862606fa6576a', class: "p-2" }, h("form-control-date", { key: '8f0e4ef2e46b542f17504ef888839726067d3319', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_after, { showInputDate: true }) })), h("div", { key: '8f661de9cd9115e7ce10e92684cf98d66f9e3e5f', class: "p-2" }, h("form-control-date", { key: '60d03f6687f308c4cb4a39176bec248b204803e2', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_before, { showInputDate: true }) }))))));
     }
+    static get is() { return "justifi-payouts-list-filters"; }
+    static get encapsulation() { return "shadow"; }
 }

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

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

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

@@ -10,28 +10,6 @@ import { makeGetSubAccounts } from "../../api/get-subaccounts";
 import { SubAccountService } from "../../api/services/subaccounts.service";
 import { StyledHost, tableExportedParts } from "../../ui-components";
 import { defaultColumnsKeys } from "./payouts-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 PayoutsList {
     constructor() {
         this.handleOnError = (event) => {
@@ -93,7 +71,7 @@ export class PayoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '5f482e2ab5d1a022c9f54f13a8ab31860ff4b6ec', exportedparts: tableExportedParts }, h("payouts-list-core", { key: 'fe5decfcda48b54bbcded8c605d0f3a2576c35cb', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: '78316ffab976d4674ed157de643d0e579a503050', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '6d258120f1ab81723505f76db75f4d4289e072b4', 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"; }
@@ -191,13 +169,13 @@ export class PayoutsList {
                     "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-table.js

@@ -1,26 +1,27 @@
 import { h } from "@stencil/core";
 import { convertToLocal, formatCurrency } from "../../utils/utils";
 import { MapPayoutStatusToBadge } from "./payouts-status";
+import { getAlternateTableCellPart, tableHeadCell } from "../../styles/parts";
 export const defaultColumnsKeys = 'created_at,amount,status,payments_total,refunds_total,fees_total,other_total,csv';
 export const payoutTableColumns = {
-    created_at: () => (h("th", { part: "table-head-cell", scope: "col", title: "The date the payout was deposited" }, "Created")),
-    sub_account_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the payout" }, "Sub Account")),
-    payments_total: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total payments amount associated with the payout" }, "Payments")),
-    refunds_total: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total refunds amount associated with the payout" }, "Refunds")),
-    fees_total: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total fees amount associated with the payout" }, "Fees")),
-    other_total: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total other amount" }, "Other")),
-    amount: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total amount of the payout" }, "Amount")),
-    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The real-time status of each payout" }, "Status")),
-    csv: () => (h("th", { part: "table-head-cell", scope: "col", title: "Export CSV" })),
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date the payout was deposited" }, "Created")),
+    sub_account_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The sub account associated with the payout" }, "Sub Account")),
+    payments_total: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total payments amount associated with the payout" }, "Payments")),
+    refunds_total: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total refunds amount associated with the payout" }, "Refunds")),
+    fees_total: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total fees amount associated with the payout" }, "Fees")),
+    other_total: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total other amount" }, "Other")),
+    amount: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total amount of the payout" }, "Amount")),
+    status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The real-time status of each payout" }, "Status")),
+    csv: () => (h("th", { part: tableHeadCell, scope: "col", title: "Export CSV" })),
 };
 export const payoutTableCells = (downloadCSV) => ({
-    created_at: (value) => (h("td", { part: "table-cell" }, h("div", { class: "fw-bold" }, convertToLocal(value, { showDisplayDate: true }), " "))),
-    sub_account_name: (value) => (h("td", { part: "table-cell" }, value)),
-    payments_total: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
-    refunds_total: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
-    fees_total: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
-    other_total: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
-    amount: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
-    status: (value) => (h("td", { part: "table-cell", innerHTML: MapPayoutStatusToBadge(value) })),
-    csv: (value) => (h("td", { part: "table-cell" }, h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(value); } }, "CSV"))),
+    created_at: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(value, { showDisplayDate: true }), " "))),
+    sub_account_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
+    payments_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
+    refunds_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
+    fees_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
+    other_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
+    amount: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
+    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapPayoutStatusToBadge(value) })),
+    csv: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(value); } }, "CSV"))),
 });

package/dist/collection/components/refund-form/refund-form.js

@@ -75,20 +75,10 @@ export class RefundForm {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '63863f5db62aa514fdf76c673d33634d0ce091b5' }, h("h1", { key: '3cd25385bb1d14a041abde024db70f052b913479' }, "Refund"), this.refundInfoText && (h("div", { key: 'df4fdf161bdc6330db3d04fab06b023b19dd4be6', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '053bc242826eeb92456ad1869e11a0083c8a65f6', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: 'cec5c737d36aba8328e07871717aaa6107f3ff8d', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: 'f43a1ec8344b9a6222470bb59924743583d61699', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: 'bdb96e4a7b9aacd6d85d5736bcc3bfa9c7b949dc', class: "form-group" }, h("form-control-monetary", { key: '59c922da8305ea8069de82f94f287a9d4a885f08', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: '536874e5887e8085409bc6e2220de0029f986613', class: "form-group" }, h("form-control-text", { key: '25ad446fa05c176169b45b72b26fedfb759376b0', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '51a1334769beb7911e2bee6416f1e325e9b6e456', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '1fe584c4c1fcb7e4f36063774303ac17132debbf', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        return (h(StyledHost, { key: '22c804f185486d11df84075a97121bcac4eb98d5' }, h("h1", { key: '90bc4a8b5f1753d3e3009a401e5c9894d83e426e' }, "Refund"), this.refundInfoText && (h("div", { key: '6899f29d44b254dd4a84e348b9d9ec1013cb1785', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: 'f1860c566f76d09f222a62a71f29d48749504968', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '73c728b24bf46c9382e75753a9566179d12744fa', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: 'e36904b05ae389cb201e72f69845d1a5b034cb4d', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: 'deb53d2bde11025bc7b452097456c7cffbe5c16a', class: "form-group" }, h("form-control-monetary", { key: '0e5211a2ace4ddf86c2f2452e0596586904b594a', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: '68826918f7b2051830bd276fa79030a89a5808d1', class: "form-group" }, h("form-control-text", { key: 'd66b86e6d9d10b6d4853bfebacf758da23362531', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '8ef6f548f2b1a989b04d0a2817ca7a19d1e1dda6', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '1a9406e25864fac07c2a97d3b758aec48bffa2be', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
     }
     static get is() { return "justifi-refund-form"; }
     static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["refund-form.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["refund-form.css"]
-        };
-    }
     static get properties() {
         return {
             "authToken": {

package/dist/collection/components/refund-form/refund-form.stories.js

@@ -10,7 +10,7 @@ export default {
         refundInfoText: { control: 'text' },
     },
 };
-const RefundFormTemplate = ({ authToken, paymentId, amount, submitButtonText, withButton, refundInfoText, cssVariables, }) => {
+const RefundFormTemplate = ({ authToken, paymentId, amount, submitButtonText, withButton, refundInfoText, }) => {
     return `
     <div>
       <justifi-refund-form
@@ -26,10 +26,6 @@ const RefundFormTemplate = ({ authToken, paymentId, amount, submitButtonText, wi
         : ''}
     </div>
     <style>
-      :root {
-        ${cssVariables || ''}
-      }
-
       #custom-submit {
         color: #fff;
         background-color: #007bff;
@@ -101,7 +97,6 @@ Example.args = {
     submitButtonText: 'Submit',
     withButton: true,
     refundInfoText: '',
-    cssVariables: '',
 };
 export const Styled = RefundFormTemplate.bind({});
 Styled.args = {
@@ -111,58 +106,4 @@ Styled.args = {
     submitButtonText: 'Submit',
     withButton: true,
     refundInfoText: '',
-    cssVariables: `
-    --jfi-primary-color: #212529;
-    --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';
-    --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;
-    --jfi-layout-padding: 4px;
-    --jfi-layout-form-control-spacing-x: .5rem;
-    --jfi-layout-form-control-spacing-y: 1rem;
-    --jfi-form-label-font-weight: 700;
-    --jfi-form-label-font-family: Calibri, sans-serif;
-    --jfi-form-label-margin: 0 0 .5rem 0;
-    --jfi-form-control-background-color: #F4F4F6;
-    --jfi-form-control-background-color-hover: #EEEEF5;
-    --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);
-    --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);
-    --jfi-form-control-border-color-focus: #fccc32;
-    --jfi-form-control-border-color-error: #C12727;
-    --jfi-form-control-border-top-width: 0;
-    --jfi-form-control-border-left-width: 0;
-    --jfi-form-control-border-bottom-width: 1px;
-    --jfi-form-control-border-right-width: 0;
-    --jfi-form-control-border-radius: 4px 4px 0 0;
-    --jfi-form-control-border-style: solid;
-    --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    --jfi-form-control-box-shadow-focus: none;
-    --jfi-form-control-box-shadow-error-focus: none;
-    --jfi-form-control-border-style: solid;
-    --jfi-form-control-color: #212529;
-    --jfi-form-control-font-size: 1rem;
-    --jfi-form-control-font-weight: 400;
-    --jfi-form-control-line-height: 2;
-    --jfi-form-control-margin: 0;
-    --jfi-form-control-padding: .5rem .875rem;
-    --jfi-error-message-color: #C12727;
-    --jfi-error-message-margin: .25rem 0 0 0;
-    --jfi-error-message-font-size: .875rem;
-
-    --jfi-submit-button-color: white;
-    --jfi-submit-button-background-color: #3F3F47;
-    --jfi-submit-button-border-color: var(--jfi-primary-color);
-    --jfi-submit-button-padding: 0.375rem 0.75rem;
-    --jfi-submit-button-font-size: 1rem;
-    --jfi-submit-button-border-radius: 1px;
-    --jfi-submit-button-color-hover: white;
-    --jfi-submit-button-background-color-hover: var(--jfi-primary-color);
-    --jfi-submit-button-border-color-hover: var(--jfi-primary-color);
-    --jfi-submit-button-color-focus: white;
-    --jfi-submit-button-background-color-focus: var(--jfi-primary-color);
-    --jfi-submit-button-border-color-focus: var(--jfi-primary-color);
-    --jfi-submit-button-color-active: white;
-    --jfi-submit-button-background-color-active: var(--jfi-primary-color);
-    --jfi-submit-button-border-color-active: var(--jfi-primary-color);
-    --jfi-submit-button-width: 100%;
-    --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
-  `,
 };

package/dist/collection/components/terminals-list/terminals-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 { terminalTableColumns, terminalTableCells } from "./terminals-table";
 import { Table } from "../../utils/table";
+import { queryParams, onQueryParamsChange } from "./terminals-list-params-state";
+import { table, tableCell } from "../../styles/parts";
+import { TableClickActions } from "../../ui-components/table/event-types";
 export class TerminalsListCore {
     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 clickedTerminalID = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedTerminalID)
                 return;
-            this.rowClicked.emit(this.terminals.find((terminal) => terminal.id === clickedTerminalID));
-        };
-        this.setParamsOnChange = (name, value) => {
-            let newParams = { [name]: value };
-            this.params = onFilterChange(newParams, this.params);
-        };
-        this.clearParams = () => {
-            this.errorMessage = '';
-            this.params = {};
+            const terminalData = this.terminals.find((terminal) => terminal.id === clickedTerminalID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: terminalData });
         };
         this.getTerminals = undefined;
         this.getSubAccounts = undefined;
@@ -39,21 +32,28 @@ export class TerminalsListCore {
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
-        this.params = {};
+        this.pagingParams = {};
     }
     updateOnPropChange() {
-        this.fetchTerminals();
+        this.fetchData();
     }
     componentWillLoad() {
         this.terminalsTable = new Table(this.terminals, this.columns, terminalTableColumns, terminalTableCells);
         if (this.getTerminals && this.getSubAccounts) {
-            this.fetchTerminals();
+            this.fetchData();
         }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
-    fetchTerminals() {
+    fetchData() {
         this.loading = true;
         this.getTerminals({
-            params: this.params,
+            params: this.requestParams,
             onSuccess: async ({ terminals, pagingInfo }) => {
                 this.terminals = terminals;
                 this.paging = pagingInfo;
@@ -100,6 +100,10 @@ export class TerminalsListCore {
             },
         });
     }
+    get requestParams() {
+        const combinedParams = Object.assign(Object.assign({}, queryParams), this.pagingParams);
+        return combinedParams;
+    }
     get subAccountParams() {
         let accountIdNumbers = this.terminals.map((terminal) => terminal.account_id);
         let uniqueAccountIds = [...new Set(accountIdNumbers)];
@@ -119,7 +123,7 @@ export class TerminalsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'd022a41666a6483bcb405bfe477b7eba1e5ca5dd' }, h("terminals-list-filters", { key: 'cb0d38d4b51c5cb9482c1f567dce4462bf12a055', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '82cbf05382d9ecaf0d01c4e0b5f61618b1442690', class: "table-wrapper" }, h("table", { key: '5c8bd36b6523cf56542b016e3195188781b2cb03', class: "table table-hover" }, h("thead", { key: 'f35d86ae84f673437e0fc51ad3e26b1839153590', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '7727a4e30dddd62d6dc3c405c7ca505f91a71643', class: "table-light text-nowrap", part: "table-head-row" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '4e0ee2053a33622037e7961ec289036e52632e3f', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '96cb647d4f5c2e4a1ecb33be46b868e1318762ca', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '062aeeb69a149b2f15e49c81bb3bd16a6d5a5dfd', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '750a04c3ecb53271b3affced7e9245733c64bd57', 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, part: `table-row ${index % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (h("tfoot", { key: '19edc599b2ccd6212c03045b754fe251335fa665', class: "sticky-bottom" }, h("tr", { key: 'dd793c33355dd6b0448e327a62b3cc08a0d09bad', class: "table-light align-middle" }, h("td", { key: '0b142d2c1b658e1bb084741fa461d7f350c3449c', part: "pagination-bar", colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '757d9ba17e1a768aa0bcf573a2d02b455bac3df3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: 'a293f76edb152df4636282a1bdb64526743ba62b' }, h("div", { key: '91c87549f3da243bcbc5e8c3f30690b4f3568312', class: "table-wrapper" }, h("table", { key: 'b8666ef07d7cddecfd576520004cb9ae369816d0', class: "table table-hover", part: table }, h("thead", { key: '82f882e9c8ad8cb8b86fdd8054b2db202f31aee6', class: "table-head sticky-top" }, h("tr", { key: 'db96b27008b1cdfb394f7480d163ba98a564e654', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: 'afe168ca0facd25953f8e23c82ee40b37ff56418', class: "table-body" }, h(TableLoadingState, { key: 'fa4a276edaa35687efd922d987b51248670aad4c', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a7450b6fc3b6e659c46c57c4bb1e06c8102da809', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '89894e4c62d1ec4b4d10f1ca8fd50098e655dcf1', 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: 'ba93ff43a8562b4e77b48a0a026d75d9f84e5249', class: "sticky-bottom" }, h("tr", { key: 'bd75b89450eec1db55c7e92b2e79eab559605bba', class: "table-light align-middle" }, h("td", { key: 'b27b8a0bbe6c2d38393684752809d5e909948567', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '959649b1f3c8099c5b929543557823eccd3e9dd9', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "terminals-list-core"; }
     static get properties() {
@@ -191,13 +195,13 @@ export class TerminalsListCore {
             "loading": {},
             "errorMessage": {},
             "paging": {},
-            "params": {}
+            "pagingParams": {}
         };
     }
     static get events() {
         return [{
-                "method": "rowClicked",
-                "name": "terminal-row-clicked",
+                "method": "clickEvent",
+                "name": "click-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -206,13 +210,13 @@ export class TerminalsListCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "Terminal",
-                    "resolved": "Terminal",
+                    "original": "ComponentClickEvent",
+                    "resolved": "ComponentClickEvent",
                     "references": {
-                        "Terminal": {
+                        "ComponentClickEvent": {
                             "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::Terminal"
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentClickEvent"
                         }
                     }
                 }
@@ -227,13 +231,13 @@ export class TerminalsListCore {
                     "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"
                         }
                     }
                 }
@@ -241,7 +245,10 @@ export class TerminalsListCore {
     }
     static get watchers() {
         return [{
-                "propName": "params",
+                "propName": "queryParams",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "pagingParams",
                 "methodName": "updateOnPropChange"
             }, {
                 "propName": "getTerminals",

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

@@ -1,10 +1,12 @@
 import { h } from "@stencil/core";
 import { debounce } from "lodash";
+import { queryParams, clearParams } from "./terminals-list-params-state";
+import { StyledHost } from "../../ui-components";
 export class TerminalsListFilters {
     constructor() {
-        this.params = {};
-        this.setParamsOnChange = undefined;
-        this.clearParams = undefined;
+        this.setParamsOnChange = (name, value) => {
+            queryParams[name] = value;
+        };
     }
     componentWillLoad() {
         // debounced input handler for text input
@@ -19,63 +21,8 @@ export class TerminalsListFilters {
         ];
     }
     render() {
-        return (h("table-filters-menu", { key: '486847f69064b497b72521312d27097690eb19b2', params: this.params, clearParams: this.clearParams }, h("div", { key: '622e3572ff1cf85a60ffa30c4fa5d39780375abb', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '2cef9085c3d09e96907cdaa8330e8b8b80d8ceec', class: "p-2" }, h("form-control-text", { key: 'a3922b71cbdc93bbdddd519e44bad25379c6b5f4', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: '1027edf52dc1ceacc4779b29bda4b7d08c8a3c8c', class: "p-2" }, h("form-control-select", { key: 'e1f122b2868282a64dccc99b3e9d19fe7cc768fb', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.status || '' })))));
-    }
-    static get is() { return "terminals-list-filters"; }
-    static get properties() {
-        return {
-            "params": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "TerminalsTableFilterParams",
-                    "resolved": "TerminalsTableFilterParams",
-                    "references": {
-                        "TerminalsTableFilterParams": {
-                            "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::TerminalsTableFilterParams"
-                        }
-                    }
-                },
-                "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: '3a5ad7d48cab44e058b47416531e0b229521fa66' }, h("table-filters-menu", { key: 'f443919483a6de96285eb6ee06fc7a40d70dc8a4', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: '5858a235e31a41c6092df9f35773d03ca660fd4a', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '73cf6b38fb79063fe96cfb697fe537904237a0f2', class: "p-2" }, h("form-control-text", { key: 'e2383519f8b9e50c9c38c47ce5cf65023af8be55', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: queryParams.terminal_id })), h("div", { key: 'a6bdc258402f59aea76c0c2f1d25f22841a15302', class: "p-2" }, h("form-control-select", { key: 'acc06bbb87338b579794b930e9a0205ad7e9e65a', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.status || '' }))))));
     }
+    static get is() { return "justifi-terminals-list-filters"; }
+    static get encapsulation() { return "shadow"; }
 }

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

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