@justifi/webcomponents 6.12.3 → 6.12.4

package/dist/module/justifi-terminal-orders-list-filters.js

@@ -8,7 +8,7 @@ import './event-types.js';
 import './justifi-radio-list-item2.js';
 import './config-state.js';
 import { e as convertToUTC, h as convertToLocal } from './utils2.js';
-import { T as TerminalOrderStatus, i as TerminalOrderType } from './Plaid.js';
+import { T as TerminalOrderStatus, h as TerminalOrderType } from './Plaid.js';
 import './Pagination.js';
 import './Business.js';
 import './ApplePay.js';
@@ -69,9 +69,9 @@ const JustifiTerminalOrdersListFilters$1 = /*@__PURE__*/ proxyCustomElement(clas
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'cc09bb58c13ab0b26d92eb164cf6bc43a3c96c63' }, h("table-filters-menu", { key: '08369c471d891184e36dd6c5aae8842e0df5c01a', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: 'addd8a1cf74ae9e80cc8e4374a36400204c81400', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'b74cf4d1d13a0a6250000c8f7f0845f4c907e488', class: "p-2" }, h("form-control-select", { key: 'b1b060b64f67695bb395488fa23dcbf6373b419b', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status || '', disabled: !!this.orderStatus, part: filterParam })), h("div", { key: 'a3c06691181d01d6a664016b4add0784b23ab06c', class: "p-2" }, h("form-control-select", { key: '376039e2f10fbcc9ed008611d4976cf6412c16a4', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type || '', disabled: !!this.orderType, part: filterParam })), h("div", { key: 'f03c94412b7861d255dfdef98a4c2fad14e96cfa', class: "p-2" }, h("form-control-date", { key: 'd7588c4ecda9480881e0f67e0418b1e475db188c', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: '76f0cee7430e846a479478c903d892ac05490787', class: "p-2" }, h("form-control-date", { key: 'ce0f99ebfa8a82111689ae6ee4cc1d8bd141d657', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: filterParam })), h("div", { key: '5c06fefb50c8c987a8e55623cba70a39cc64bbe1', class: "p-2" }, h("form-control-text", { key: '0a24516bbf665784e5c13a16b0b38be2bafb684b', name: "company_name", label: "Company Name", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.companyName || filterParams.company_name, disabled: !!this.companyName, part: filterParam }))))));
+        return (h(StyledHost, { key: '05cb917a4f8573a7b2296b7f5eab4d8196fd291b' }, h("table-filters-menu", { key: '2dbd9b8b18c77fab46e010a75150d9addb50f2e2', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: 'cde85cfbaf0a8964fec8559da8f49ec05117adcc', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '51f107f1b8fb27bf1efb05b1421b8623fbd759f0', class: "p-2" }, h("form-control-select", { key: '97b151015f75b866867921aaa7c8ad8fb299d68f', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status || '', disabled: !!this.orderStatus, part: filterParam })), h("div", { key: '0a25022bd038dbbb21ddc8ca10f69cee88824597', class: "p-2" }, h("form-control-select", { key: '0df794e038df12ee6707616b93c4d39dfe76d287', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type || '', disabled: !!this.orderType, part: filterParam })), h("div", { key: 'd108794b60a691b0071359082ce6e6a1fc04543d', class: "p-2" }, h("form-control-date", { key: 'f36c5dc32d48d7c0986fe95c2c496fcd32de189c', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: 'd1be3f6dc5ade503cb1a15089d491fa46391fa8b', class: "p-2" }, h("form-control-date", { key: '5dfe0ab05fb5f9297f2434aa26c83ad4831c3f73', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: filterParam })), h("div", { key: '13039fea471c09505187e8ea1bfbe67ced259572', class: "p-2" }, h("form-control-text", { key: 'b7b4307513b3f73c860138863da80ea372f2d726', name: "company_name", label: "Company Name", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.companyName || filterParams.company_name, disabled: !!this.companyName, part: filterParam }))))));
     }
 }, [257, "justifi-terminal-orders-list-filters", {
         "orderStatus": [1, "order-status"],

package/dist/module/justifi-terminal-orders-list.js

@@ -1,20 +1,92 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { S as StyledHost } from './styled-host.js';
 import './justifi-details2.js';
-import './event-types.js';
+import { T as Table, a as TableWrapper, b as TableComponent, c as TableHead, d as TableHeadRow, e as TableBody, f as TableLoadingState, g as TableEmptyState, h as TableErrorState, i as TableRow, j as TableFoot, k as TableFootRow, l as TableFootCell } from './table.js';
+import { T as TableClickActions } from './event-types.js';
 import './justifi-radio-list-item2.js';
 import { c as checkPkgVersion } from './check-pkg-version.js';
-import { d as defineCustomElement$2, a as defaultColumnsKeys } from './terminal-orders-list-core2.js';
+import { B as tableHeadCell, ah as getAlternateTableCellPart } from './parts.js';
+import { h as convertToLocal } from './utils2.js';
 import './config-state.js';
-import './dinero.js';
-import { r as TerminalOrder, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
-import './Pagination.js';
+import { h as TerminalOrderType, t as TerminalOrder, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
+import { p as pagingDefaults } from './Pagination.js';
 import './Business.js';
 import './ApplePay.js';
+import { B as Badge, a as BadgeVariant } from './badge.js';
+import './dinero.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils3.js';
 import { A as Api } from './Api.js';
 import { J as JustifiAnalytics } from './Analytics.js';
-import { d as defineCustomElement$3 } from './pagination-menu2.js';
+import { o as onQueryParamsChange, g as getRequestParams } from './terminal-orders-list-params-state.js';
+import { d as defineCustomElement$2 } from './pagination-menu2.js';
+
+const MapTerminalOrderStatusToBadge = (status) => {
+    const statusToBadgeProps = {
+        submitted: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'This order is submitted',
+            text: 'Submitted',
+        },
+        completed: {
+            variant: BadgeVariant.SUCCESS,
+            title: 'This order has been completed',
+            text: 'Completed',
+        },
+        created: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'This order is created',
+            text: 'Created',
+        },
+        in_progress: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'This order is in progress',
+            text: 'In Progress',
+        },
+        on_hold: {
+            variant: BadgeVariant.WARNING,
+            title: 'This order is on hold',
+            text: 'On Hold',
+        },
+        canceled: {
+            variant: BadgeVariant.DANGER,
+            title: 'This order is canceled',
+            text: 'Canceled',
+        }
+    };
+    const badgeProps = statusToBadgeProps[status];
+    return h(Badge, Object.assign({}, badgeProps));
+};
+
+const defaultColumnsKeys = 'created_at,updated_at,order_status,quantity';
+const terminalOrdersTableColumns = {
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date and time the order was created" }, "Created At")),
+    updated_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date and time the order was last updated" }, "Updated At")),
+    order_status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of the order" }, "Order Status")),
+    business_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The business ID associated with the order" }, "Business ID")),
+    company_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The business name associated with the order" }, "Business Name")),
+    provider: () => (h("th", { part: tableHeadCell, scope: "col", title: "The provider associated with the order" }, "Provider")),
+    order_type: () => (h("th", { part: tableHeadCell, scope: "col", title: "The type of order" }, "Order Type")),
+    quantity: () => (h("th", { part: tableHeadCell, scope: "col", title: "The number of terminals associated with the order" }, "Order Quantity")),
+};
+const terminalOrdersTableCells = {
+    created_at: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.created_at, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.created_at, { showTime: true })))),
+    updated_at: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.updated_at, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.updated_at, { showTime: true })))),
+    order_status: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapTerminalOrderStatusToBadge(terminalOrder.order_status))),
+    business_id: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.business_id)),
+    company_name: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.company_name)),
+    provider: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.provider)),
+    order_type: (terminalOrder, index) => {
+        let orderType;
+        if (terminalOrder.order_type === TerminalOrderType.boardingOnly) {
+            orderType = 'Boarding Only';
+        }
+        else if (terminalOrder.order_type === TerminalOrderType.boardingShipping) {
+            orderType = 'Boarding & Shipping';
+        }
+        return (h("td", { part: getAlternateTableCellPart(index) }, orderType));
+    },
+    quantity: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.terminals.length)),
+};
 
 const makeGetTerminalOrders = ({ id, authToken, service }) => async ({ params, onSuccess, onError, final }) => {
     var _a, _b;
@@ -64,30 +136,66 @@ const JustifiTerminalOrdersList$1 = /*@__PURE__*/ proxyCustomElement(class Justi
             this.__registerHost();
         }
         this.__attachShadow();
+        this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
-        this.errorMessage = null;
         this.columns = defaultColumnsKeys;
-        this.handleErrorEvent = (event) => {
-            this.errorMessage = event.detail.message;
-            this.errorEvent.emit(event.detail);
+        this.terminalOrders = [];
+        this.loading = true;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
+        this.handleClickPrevious = (beforeCursor) => {
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
+        };
+        this.handleClickNext = (afterCursor) => {
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
+        };
+        this.rowClickHandler = (e) => {
+            const clickedOrderId = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedOrderId)
+                return;
+            const orderData = this.terminalOrders.find((order) => order.id === clickedOrderId);
+            this.clickEvent.emit({ name: TableClickActions.row, data: orderData });
         };
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
+        this.terminalOrdersTable = new Table(this.terminalOrders, this.columns, terminalOrdersTableColumns, terminalOrdersTableCells);
         this.initializeGetData();
+        if (this.getTerminalOrders) {
+            this.fetchData();
+        }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    ;
+    authPropChanged() {
+        this.initializeGetData();
+        if (this.getTerminalOrders) {
+            this.fetchData();
+        }
+    }
+    pagingOrColumnsChanged() {
+        if (this.getTerminalOrders) {
+            this.fetchData();
+        }
+    }
     initializeGetData() {
         if (this.accountId && this.authToken) {
             this.getTerminalOrders = makeGetTerminalOrders({
                 id: this.accountId,
                 authToken: this.authToken,
-                service: new TerminalOrderService()
+                service: new TerminalOrderService(),
             });
         }
         else {
@@ -99,21 +207,80 @@ const JustifiTerminalOrdersList$1 = /*@__PURE__*/ proxyCustomElement(class Justi
             });
         }
     }
+    fetchData() {
+        if (!this.getTerminalOrders) {
+            return;
+        }
+        this.loading = true;
+        this.getTerminalOrders({
+            params: this.terminalOrderParams,
+            onSuccess: async ({ terminalOrders, pagingInfo }) => {
+                this.terminalOrders = terminalOrders;
+                this.paging = pagingInfo;
+                this.terminalOrdersTable.collectionData = this.terminalOrders;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+            },
+            final: () => {
+                this.loading = false;
+            },
+        });
+    }
+    get terminalOrderParams() {
+        const requestParams = getRequestParams();
+        const params = Object.assign(Object.assign({}, requestParams), this.pagingParams);
+        return params;
+    }
+    get entityId() {
+        return this.terminalOrders.map((terminalOrder) => terminalOrder.id);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.terminalOrdersTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
+    }
     render() {
-        return (h(StyledHost, { key: '65330929a53f4e5e07177541460ccce864edd3ec' }, h("terminal-orders-list-core", { key: '79d4bc028395ede9b9f2e2c12729cc20532ef251', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'e544fa99091ff8e0601388c4663f536304caef7c' }, h(TableWrapper, { key: 'df2a311d1052b284d458f29a87ea5a78db145406' }, h(TableComponent, { key: '9d3d6997f5fa8581fafa34e13a9981e75075ccc3' }, h(TableHead, { key: '30ee9315492e30913de3ef73db7c4e13e6a0d5bc' }, h(TableHeadRow, { key: 'f8fd993e7f19e3ac6b41e8eaff849a7ab66b2d41' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: '75ddd58ba3a713b8f38a6e40de06d26ed06d63a7' }, h(TableLoadingState, { key: '4509782ba93ff9d5d9057a23daa9720da4ec0f0e', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '8aed10b38ac78e9ce3e5c8f96c2eb143412f3661', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '94f11381660568de3181fe7c70335e7c264c9e44', 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: 'c980e0fc6b236973e6bdf4ab0a5beece872ed4e6' }, h(TableFootRow, { key: 'c6431bfb8e38839d48b2d7fb8d85a8c64981f057' }, h(TableFootCell, { key: '6c7fc01e316acfcee6e33b583b97b040ce88efaf', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '2ac492d001dc88663b575258a8828964b20d6d68', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
+    static get watchers() { return {
+        "accountId": ["authPropChanged"],
+        "authToken": ["authPropChanged"],
+        "pagingParams": ["pagingOrColumnsChanged"],
+        "columns": ["pagingOrColumnsChanged"]
+    }; }
 }, [257, "justifi-terminal-orders-list", {
         "accountId": [1, "account-id"],
         "authToken": [1, "auth-token"],
         "columns": [1],
-        "getTerminalOrders": [32],
-        "errorMessage": [32]
+        "terminalOrders": [32],
+        "terminalOrdersTable": [32],
+        "loading": [32],
+        "errorMessage": [32],
+        "paging": [32],
+        "pagingParams": [32],
+        "getTerminalOrders": [32]
+    }, undefined, {
+        "accountId": ["authPropChanged"],
+        "authToken": ["authPropChanged"],
+        "pagingParams": ["pagingOrColumnsChanged"],
+        "columns": ["pagingOrColumnsChanged"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-terminal-orders-list", "pagination-menu", "terminal-orders-list-core"];
+    const components = ["justifi-terminal-orders-list", "pagination-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-terminal-orders-list":
             if (!customElements.get(tagName)) {
@@ -121,11 +288,6 @@ function defineCustomElement$1() {
             }
             break;
         case "pagination-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "terminal-orders-list-core":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/justifi-terminals-list-filters.js

@@ -8,7 +8,7 @@ import './justifi-details2.js';
 import './event-types.js';
 import './justifi-radio-list-item2.js';
 import './config-state.js';
-import { j as ITerminalStatus } from './Plaid.js';
+import { i as ITerminalStatus } from './Plaid.js';
 import './Pagination.js';
 import './Business.js';
 import './ApplePay.js';
@@ -64,7 +64,7 @@ const JustifiTerminalsListFilters$1 = /*@__PURE__*/ proxyCustomElement(class Jus
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '77a3937540cd75a7cc51a90b1cd7c7c52ae870b2' }, h("table-filters-menu", { key: '4a725bfe0b79d0046eea2f7b3e3fe295b5384b94', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: '0cb6fcedf45371c68b8b37e8b832ca3e9b48789e', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '602fc95acdd62112bc53f858073e936f9bf5e48d', class: "p-2" }, h("form-control-text", { key: 'c4e8dc476d2d8d80f2367ab6f8a5e5db17a72f15', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: filterParam })), h("div", { key: 'e83b3b3ef5f1509286cabaee9faeb96cd7d9e15a', class: "p-2" }, h("form-control-text", { key: '2f6eb9224740f327ce5019d93d879c231df8b0ee', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: filterParam })), h("div", { key: '942179e72ce3b8fea5c2cd2dd28aeecd586bdb6c', class: "p-2" }, h("form-control-text", { key: 'adb7eaab71834c2c619a09f9053dd8374a8bdfcc', name: "provider_id", label: "Device ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.providerId || filterParams.provider_id, disabled: !!this.providerId, part: filterParam })), h("div", { key: 'c15d630d0c3500d26720db63cbf90098b837ee24', class: "p-2" }, h("form-control-text", { key: '93f4e6c1e5c8f7e853111e74e25946fd683c5a17', name: "serial_number", label: "Serial Number", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.serialNumber || filterParams.serial_number, disabled: !!this.serialNumber, part: filterParam })), h("div", { key: '6a269a0c2fb90fb4e00b05d4aeee3fff4ab4e967', class: "p-2" }, h("form-control-select", { key: 'f6d9e45354d5c3d8894fe442d0bef490bafb20de', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status || '', disabled: !!this.terminalStatus, part: filterParam })), h("div", { key: 'ea70b109bd231bd085bb2cb8388d8010e0c5aa79', class: "p-2" }, h("form-control-date", { key: '256cddfb0e68590bc8d8403aa8a033ad40d613fe', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter || filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: '1be9bf8d68c691f09d40db9c45d78ed923fb3d86', class: "p-2" }, h("form-control-date", { key: '79d48b277064373e3faf999ae8771a44b35de1cb', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore || filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: filterParam }))))));
+        return (h(StyledHost, { key: 'fbdb69bdc60f2c3c9caacf287229ee3d0644fcfb' }, h("table-filters-menu", { key: '7f6649444863079f885aff24d554077800b42021', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: '7277b0cf678494ca3c227abeb76a03e5bd80c522', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '06a3a26492844e37536f1d8d074af69078a70074', class: "p-2" }, h("form-control-text", { key: 'f37cc48a754dd0ef12405f3cbcfb10a9c099eb56', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: filterParam })), h("div", { key: '8a3638c23a774c566cfee5aba8b17ab9c7ec9419', class: "p-2" }, h("form-control-text", { key: '113ded1ef867fcdab00f8c048b56219d6c5fe51d', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: filterParam })), h("div", { key: '32dbef16165a0a762ad206eb5ce495b898770052', class: "p-2" }, h("form-control-text", { key: '0d5827915c2962d78975d7c648b874cd8346043d', name: "provider_id", label: "Device ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.providerId || filterParams.provider_id, disabled: !!this.providerId, part: filterParam })), h("div", { key: '01442ae3aeb6613caaadf3e7f92a910970b315da', class: "p-2" }, h("form-control-text", { key: '5b8ab5d31ef77609b8d5656a8e5a4e31c8b010a6', name: "serial_number", label: "Serial Number", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.serialNumber || filterParams.serial_number, disabled: !!this.serialNumber, part: filterParam })), h("div", { key: 'e6b5bae11d8e9e72fe48626ce3663b0c65186700', class: "p-2" }, h("form-control-select", { key: 'df256ff824ae41eb65c2276481d8d6b63d3bc5a5', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status || '', disabled: !!this.terminalStatus, part: filterParam })), h("div", { key: '452b838d823484cb79569fde263228c0b5ac1e04', class: "p-2" }, h("form-control-date", { key: 'cd6705ac2ffce5496382b5ded1973784f863ac4e', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter || filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: 'fd396d846e420a5f750ce371c04c883a7e478b44', class: "p-2" }, h("form-control-date", { key: '852c044ce6154fc5f4382a0dd55b287e4b6370ac', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore || filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: filterParam }))))));
     }
 }, [257, "justifi-terminals-list-filters", {
         "terminalId": [1, "terminal-id"],

package/dist/module/justifi-terminals-list.js

@@ -1,5 +1,5 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { s as Terminal, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
+import { r as Terminal, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
 import { J as JustifiAnalytics } from './Analytics.js';
 import { c as checkPkgVersion } from './check-pkg-version.js';
 import { T as TerminalService } from './terminal.service.js';
@@ -17,7 +17,7 @@ import { T as TableClickActions } from './event-types.js';
 import './justifi-radio-list-item2.js';
 import { B as Badge, a as BadgeVariant } from './badge.js';
 import { B as tableHeadCell, ah as getAlternateTableCellPart } from './parts.js';
-import { n as capitalFirstLetter } from './utils2.js';
+import { m as capitalFirstLetter } from './utils2.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './terminals-list-params-state.js';
 import { d as defineCustomElement$2 } from './pagination-menu2.js';
 
@@ -266,7 +266,7 @@ const JustifiTerminalsList$1 = /*@__PURE__*/ proxyCustomElement(class JustifiTer
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(StyledHost, { key: '3429d0dc6534dda4e9dc6417924040a53fd5a032' }, h(TableWrapper, { key: '00c6172e8bb77ed0824381785b17fdd556c942a1' }, h(TableComponent, { key: 'd0119d84743bb06d1e0562eee3124197d46f3b13' }, h(TableHead, { key: '9721788579474c7db31587f57ff1aa4159cae7c3' }, h(TableHeadRow, { key: 'e689b5546ad32ad75bcbedb0cf184b4a6adf1bf3' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: '220a3f509f17333888640b0034da30d9375c4100' }, h(TableLoadingState, { key: 'd444e883ddd69ef5b05754476e6ea66c598a2c5f', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a6ee22d5138114688ff2c8525e8b5ce8fb00a853', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: 'e151dba5915e622eb7a63ce7912fabe6924df7dd', 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: '91c0903d8c81817f82e7a8864a4188fac602af87' }, h(TableFootRow, { key: '322abe78babc127fccb9309c14c91b30a5d86700' }, h(TableFootCell, { key: 'e9843c61dd4eb031f514ff35f3354998dfaec59e', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: 'd6b0bdaa7459afb8cd164c540843e7a4d8376f53', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: '6388e9b0b7c6dcedc9f3db534d3a30d0a748929c' }, h(TableWrapper, { key: 'e11b994e16e657aaaa7c6f29197865d0d6bfd1ba' }, h(TableComponent, { key: '340980f75fef37841907835378d9c0ced1992b5c' }, h(TableHead, { key: 'fdd3d1569b6a3df9d5d31fb2cc602ab054529fc6' }, h(TableHeadRow, { key: '440d602ac5746635f92445c6216c807b9b13517e' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: 'ccef66a47be1cfca09f10d450fb7eeaf241a17e0' }, h(TableLoadingState, { key: 'aea6e2f33e07c717f50065c12211f9f2d9266bec', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '7c92ba6cd398bae23587a2e1771bba7b75dc680c', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '3155cf655f5b8e4290e8cabdcdbd534159f22ddd', 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: 'da9172d4bf4439456894b53a0cf13a82081909f0' }, h(TableFootRow, { key: 'e6c0847dc330a0e32228f2020d22bbaf0e4ad439' }, h(TableFootCell, { key: '6761f623d70d13b13e92ec73c9b936d5bf85dd70', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '4b490b5834be42664ebbc27b7c7a1b0c10bd433b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/module/justifi-tokenize-payment-method2.js

@@ -294,7 +294,7 @@ const JustifiTokenizePaymentMethod = /*@__PURE__*/ proxyCustomElement(class Just
             } }));
     }
     render() {
-        return (h(StyledHost, { key: 'e426ad2935cf88bd5af628da9154cdaccc5e6be2' }, h("form", { key: '571fcd140680840f5b68ee08b9cb7d9a5c6156ed' }, h("fieldset", { key: 'b394ce7a04e7d57ce2f4eb787252412409c3703d' }, h("div", { key: '1eb916974b71ead6dda1c54c36f0cb8f90433190', class: "row gy-3" }, h("div", { key: '8fb01d0e321fd265ede20f712779f66cf4404d78', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: '40f03fdb6df080a8d55b72a818b3eb42e56fd9f9', class: "col-12" }, h("internal-button", { key: 'b719a621d8a3592e8b4a193656672ab6dd799006', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+        return (h(StyledHost, { key: '2d4349f3e5ad632981cdeb14dbe4e483f79379da' }, h("form", { key: '754afee2c5229cf016bd8fc0cf81041cf37270a8' }, h("fieldset", { key: '01867151a09d384e1258ef7f62fbc88c526706cc' }, h("div", { key: '7ba453d4629a0c2ef583daddcb9cf02ac5eee265', class: "row gy-3" }, h("div", { key: '4148f2269c738a00f2684d69d4a83a4ab2424f2b', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'e67b09357571aadfb3d2712f55954506748b3826', class: "col-12" }, h("internal-button", { key: 'c2e805060ff7e9e97144533ffad3b4a02433e792', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/module/owner-form-inputs2.js

@@ -29,14 +29,14 @@ const OwnerFormInputs = /*@__PURE__*/ proxyCustomElement(class OwnerFormInputs e
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '212e1849ea4415835cb4f792cf5799b606ccd170', class: "row gy-3" }, h("div", { key: 'bc904468596d8a2b6cf82f9cca153d1db7fd9be3', class: "col-12 col-md-8" }, h("form-control-text", { key: '116f4a8124743a3bdd01489f7ac4964852d2f701', name: "name", label: "Full Name", defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'd1de51aa5d3760553012ddc586dc6068c456463f', class: "col-12 col-md-4" }, h("form-control-text", { key: '542bd69f56380823a8a2fcf0f95df56a4802e52a', name: "title", label: "Title", defaultValue: this.ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: 'f8230d52a4a685e358bf118d4f77849e8e23f58e', class: "col-12 col-md-6" }, h("form-control-text", { key: '0d41fa107ba89a5a6a1dfe2b97d42a86feef3eb0', name: "email", label: "Email Address", defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'c403d5cf82cc89de42a31f3478e5cda3c2309dac', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'bc0e1c91619857bcac7776e686534763898bdd79', name: "phone", label: "Phone Number", defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '43c3b72350a475defd393625a0d88e5720ab121c', class: "col-12 col-md-3" }, h("form-control-date", { key: '4f1bd966e4a28fdcfc3539cb51b97e73bf7bf242', name: "dob_full", label: "Birth Date", defaultValue: this.ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: '963e110d0f208730944fe7637ba0a3a9ada66a38', class: "col-12 col-md-3" }, h("form-control-number", { key: '182586a1b86d351cb5063c0ca0ee578959a93369', name: "ownership_percentage", label: "% of Ownership", defaultValue: (_a = this.ownerDefaultValue) === null || _a === void 0 ? void 0 : _a.ownership_percentage, errorText: this.errors.ownership_percentage, inputHandler: this.inputHandler })), h("div", { key: 'bf966123cd887a09b81e9e599118ee03cadabfe2', class: "col-12 col-md-6" }, (!((_b = this.ownerDefaultValue) === null || _b === void 0 ? void 0 : _b.ssn_last4) || this.isEditingIdentification) ? (h("form-control-number-masked", { name: "identification_number", label: countryLabels[this.country].idNumberLabel, defaultValue: this.isEditingIdentification ? '' : this.ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: IDENTITY_MASKS[this.country], helpText: countryLabels[this.country].identityHelpText })) : (h("div", null, h("label", { class: "form-label", part: label }, countryLabels[this.country].idNumberLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_c = this.ownerDefaultValue) === null || _c === void 0 ? void 0 : _c.ssn_last4}`, disabled: true }), h("button", { class: "btn btn-secondary", type: "button", part: buttonSecondary, onClick: () => {
+        return (h("div", { key: 'd2cd6a317c81991b6108751d7fafe6eb0f785572', class: "row gy-3" }, h("div", { key: '58b5f28247b266fb5928a4cc54992978a0382389', class: "col-12 col-md-8" }, h("form-control-text", { key: '8755d9f2c3e4f1753f33f06e96b060e3f1bfb7b8', name: "name", label: "Full Name", defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'c5930506a02c94b2752a50b1db5d375fe8e73791', class: "col-12 col-md-4" }, h("form-control-text", { key: 'f93c736bd2315bcc33971286303e0eb2c995b83d', name: "title", label: "Title", defaultValue: this.ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: '421d8dce34b3f45dc859aa37de740f1578817ba0', class: "col-12 col-md-6" }, h("form-control-text", { key: '183dcf682886be6c07a6e0f5ff6f3e8ebd5193bc', name: "email", label: "Email Address", defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '678bc220f7415da8cb83edf303919688cef75c29', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'f763d5b0596926c4044de25f181a8d562ef67d0f', name: "phone", label: "Phone Number", defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '958af034510d699ef84d7f22ff755ec088dbe4bc', class: "col-12 col-md-3" }, h("form-control-date", { key: '7a2d6f7dce48e5343296256eb407c638f3505bf6', name: "dob_full", label: "Birth Date", defaultValue: this.ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: '12c82f41a9d60ff5a52e64ea34d69fd24d3102bb', class: "col-12 col-md-3" }, h("form-control-number", { key: '035d4d0d2e036b1a86c2f179f39330b48de26005', name: "ownership_percentage", label: "% of Ownership", defaultValue: (_a = this.ownerDefaultValue) === null || _a === void 0 ? void 0 : _a.ownership_percentage, errorText: this.errors.ownership_percentage, inputHandler: this.inputHandler })), h("div", { key: '108cbb8692dc71b7d038315bf8be3b35efee0fa3', class: "col-12 col-md-6" }, (!((_b = this.ownerDefaultValue) === null || _b === void 0 ? void 0 : _b.ssn_last4) || this.isEditingIdentification) ? (h("form-control-number-masked", { name: "identification_number", label: countryLabels[this.country].idNumberLabel, defaultValue: this.isEditingIdentification ? '' : this.ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: IDENTITY_MASKS[this.country], helpText: countryLabels[this.country].identityHelpText })) : (h("div", null, h("label", { class: "form-label", part: label }, countryLabels[this.country].idNumberLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_c = this.ownerDefaultValue) === null || _c === void 0 ? void 0 : _c.ssn_last4}`, disabled: true }), h("button", { class: "btn btn-secondary", type: "button", part: buttonSecondary, onClick: () => {
                 this.isEditingIdentification = true;
                 // Clear last4 and current value to force validation
                 updateFormValues(this.formController, {
                     ssn_last4: null,
                     identification_number: ''
                 });
-            } }, "Change"))))), h("div", { key: 'da39a950fb0f4042d6047a88db4fb1cf7a7b9d07', class: "col-12" }, h("identity-address-form", { key: '7ef03a0303d6f62098b5c38d669648bd4557437f', errors: this.errors.address, defaultValues: this.ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))));
+            } }, "Change"))))), h("div", { key: '834b3ffaaec1e2dfec16b278b39e505782c0d785', class: "col-12" }, h("identity-address-form", { key: '7f6f356e116ce4bc1d9014dc7823b86b00af40b6', errors: this.errors.address, defaultValues: this.ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))));
     }
     ;
 }, [256, "owner-form-inputs", {