@justifi/webcomponents 5.2.0 → 5.3.0

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

@@ -3,7 +3,7 @@ import { pagingDefaults } from "../../api";
 import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { paymentTableCells, paymentTableColumns } from "./payments-table";
 import { Table } from "../../utils/table";
-import { queryParams, onQueryParamsChange } from "./payments-list-params-state";
+import { getRequestParams, onQueryParamsChange } from "./payments-list-params-state";
 import { table, tableCell } from "../../styles/parts";
 import { TableClickActions } from "../../ui-components/table/event-types";
 export class PaymentsListCore {
@@ -51,12 +51,11 @@ export class PaymentsListCore {
     fetchData() {
         this.loading = true;
         this.getPayments({
-            params: this.requestParams,
+            params: this.params,
             onSuccess: ({ payments, pagingInfo }) => {
                 this.payments = payments;
                 this.paging = pagingInfo;
                 this.paymentsTable.collectionData = this.payments;
-                this.loading = false;
             },
             onError: ({ error, code, severity }) => {
                 this.errorMessage = error;
@@ -65,8 +64,10 @@ export class PaymentsListCore {
                     message: error,
                     severity,
                 });
-                this.loading = false;
             },
+            final: () => {
+                this.loading = false;
+            }
         });
     }
     get entityId() {
@@ -81,12 +82,13 @@ 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;
+    get params() {
+        const requestParams = getRequestParams();
+        const params = Object.assign(Object.assign({}, requestParams), this.pagingParams);
+        return params;
     }
     render() {
-        return (h("div", { key: '6ae0c491d9ba248e878f65915448b715ae1c3381' }, h("div", { key: '3e2a5fe63f83d7a45c44486bc7dc7e2493b29520', class: "table-wrapper" }, h("table", { key: '3523e917bd342db707671ce9069a17618b20d1f8', class: "table table-hover", part: table }, h("thead", { key: 'e3436965637929742b7b827627504f8b4776cd7c', class: "table-head sticky-top" }, h("tr", { key: 'edf671796c2a0ad5b1fc9d6e3c3c0210f841946d', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '1cc99781f6a96dd3597fa32c31e2dff6861cc945', class: "table-body" }, h(TableLoadingState, { key: '0b1e2a89902ca170252139807512d2d91f2260f0', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '1857d904b79a0a5b9276846a6b0afd5fe54b72f0', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'da42e70686ca49cef71bce6fd596bd18f1f1f365', 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: 'e6dd57881b2643442d61c01a5308529ba1e24dc0', class: "sticky-bottom" }, h("tr", { key: '6dfb87ce0ba57057505e961825bb54bbe5d29910', class: "table-light align-middle" }, h("td", { key: 'a47bd709a0296308c7348cda14bf1d2958f10feb', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '0db007e310d5ca49bd05b5dbc7673cc2276b9ce3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: 'a3a996622a365ecf9960a36f249dcd3a8cea3106' }, h("div", { key: '79b86ae4a59b6c50ff72ee1dddb7d9660220e003', class: "table-wrapper" }, h("table", { key: '0f0904d5db86c1e7e3141e991bb20dade2bfb46b', class: "table table-hover", part: table }, h("thead", { key: 'a5895f88cea8962b31aed180b24fc8a287664d56', class: "table-head sticky-top" }, h("tr", { key: 'e883f164efc6a77eea64482974d4e667d264110d', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: 'bbb65c479ca06b02d711d510516432db815b3fac', class: "table-body" }, h(TableLoadingState, { key: 'a212a7fc190e5bede2ff98e7dad737260b94fc9c', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '41543e33097fbcc753ab11fad1214b6dd06c4f78', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '06862d555775195430f95fa3efc41d301444cc4e', 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: '7453d140f8f9ca941be9cf5b9dad4491ace10095', class: "sticky-bottom" }, h("tr", { key: '5299d703ca1c741687e1340b98876cabc4c3636d', class: "table-light align-middle" }, h("td", { key: '96f9f447db74126b92f3f3f657d4253617c0b85b', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '19a8da89dfc77c2d97b3b726f9a27a72825eafe3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {
@@ -187,9 +189,6 @@ export class PaymentsListCore {
     }
     static get watchers() {
         return [{
-                "propName": "queryParams",
-                "methodName": "updateOnPropChange"
-            }, {
                 "propName": "pagingParams",
                 "methodName": "updateOnPropChange"
             }, {

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

@@ -1,21 +1,39 @@
 import { h } from "@stencil/core";
 import { debounce } from "lodash";
-import { queryParams, clearParams } from "./payments-list-params-state";
+import { filterParams, propsParams, clearParams } from "./payments-list-params-state";
 import { StyledHost } from "../../ui-components";
 import { convertToLocal, convertToUTC } from "../../utils/utils";
+import { createdAfterPaymentsListFilterParam, createdBeforePaymentsListFilterParam, filterMenu, paymentIdPaymentsListFilterParam, paymentStatusPaymentsListFilterParam, terminalIdPaymentsListFilterParam } from "../../styles/parts";
 export class PaymentsListFilters {
     constructor() {
         this.setParamsOnChange = (name, value) => {
-            queryParams[name] = value;
+            filterParams[name] = value;
         };
         this.handleDateInput = (name, value) => {
             const utcDate = convertToUTC(value, { setExactTime: true });
             this.setParamsOnChange(name, utcDate);
         };
+        this.paymentId = undefined;
+        this.terminalId = undefined;
+        this.paymentStatus = undefined;
+        this.createdAfter = undefined;
+        this.createdBefore = undefined;
     }
     componentWillLoad() {
         // debounced input handler for text input
         this.debouncedSetParamsOnChange = debounce(this.setParamsOnChange, 300);
+        const propsToSet = {
+            payment_id: this.paymentId,
+            terminal_id: this.terminalId,
+            payment_status: this.paymentStatus,
+            created_after: this.createdAfter,
+            created_before: this.createdBefore
+        };
+        Object.entries(propsToSet).forEach(([key, value]) => {
+            if (value) {
+                propsParams[key] = value;
+            }
+        });
     }
     get paymentStatusOptions() {
         return [
@@ -29,8 +47,100 @@ export class PaymentsListFilters {
         ];
     }
     render() {
-        return (h(StyledHost, { key: '39f88bdcf7c8823d42d4432ff41bfaa0e70b0811' }, h("table-filters-menu", { key: '67f2b375b47bd9cf037a02df48b6ca270259e3b6', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: 'bb8cd6c205b604c41ff0277c9778006ce9006259', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '6c54760335d154182895247250cc1dfa2efbf9d3', class: "p-2" }, h("form-control-text", { key: '1d72daa5c87ba8c9463da01af7552f5762d4f29b', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: queryParams.payment_id })), h("div", { key: '077585c3359b16be1833134898fa90c4367129fe', class: "p-2" }, h("form-control-text", { key: 'c62b51170db0aa184f4ed68fbc312d4a0bda5d2b', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: queryParams.terminal_id })), h("div", { key: '324cd4f6775118ef87d5bd6d0ff62300e3526dbd', class: "p-2" }, h("form-control-select", { key: '0ddbe138adf0cdb450ee91e450d3613d7114e849', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.payment_status || '' })), h("div", { key: '0e6f54d6b839aa99d6d7a572fb18b240caa12c3c', class: "p-2" }, h("form-control-date", { key: 'f8799a7d8da64e55f920da09f847d54218a6cd45', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_after, { showInputDateTime: true }) || '', showTime: true })), h("div", { key: 'febd10712014933c97faf3846c83a528885418e3', class: "p-2" }, h("form-control-date", { key: '5d6b095267cae0226346c289a4b2ca8f838230ac', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_before, { showInputDateTime: true }) || '', showTime: true }))))));
+        const filterMenuParams = Object.assign({}, filterParams);
+        return (h(StyledHost, { key: '0ed766c07d1884c8be31d648c1258a3c13cc2bad' }, h("table-filters-menu", { key: '138ad8717e5b7c36549814eb2b8698111bb1b993', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: '14f16a66adae6ad88429ca23cbd8c7465c3d0ed9', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '15e64e68179f9efb5a9354bb794d8989aa7d76f7', class: "p-2" }, h("form-control-text", { key: '7f825919f6904f1c8367d2039f5d441f38e492d9', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: 'a68d6dd57535f9f104aa2d8db153b4df48d83a65', class: "p-2" }, h("form-control-text", { key: '6cfbadec9bcabe92d1f2de95e6b64290f7a838ef', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: '36d32e33c65e0793d5aa980df3a5f57c549ce8b3', class: "p-2" }, h("form-control-select", { key: '41194790a53ebaccdd83d95386180aabd76742f8', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: '43639c4c930b0d13d6bc5a49275bcb8a6b9a2a5a', class: "p-2" }, h("form-control-date", { key: 'f6d5ae2d3694def7cfb39721d1a76a6e96007eb2', 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: createdAfterPaymentsListFilterParam })), h("div", { key: '2c0587296cd94fbc480602ab853cb7179e948f62', class: "p-2" }, h("form-control-date", { key: 'b68302ce611cce52dd14c327fb25f6433b307d14', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforePaymentsListFilterParam }))))));
     }
     static get is() { return "justifi-payments-list-filters"; }
     static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "paymentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "payment-id",
+                "reflect": false
+            },
+            "terminalId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "terminal-id",
+                "reflect": false
+            },
+            "paymentStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "payment-status",
+                "reflect": false
+            },
+            "createdAfter": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "created-after",
+                "reflect": false
+            },
+            "createdBefore": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "created-before",
+                "reflect": false
+            }
+        };
+    }
 }

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

@@ -1,8 +1,14 @@
 import { createStore } from "@stencil/store";
-const initialState = {};
-const paymentsListQueryParams = createStore(() => initialState);
-const { state: queryParams, on: onQueryParamsChange } = paymentsListQueryParams;
+const filterParamsInitialState = {};
+const propsParamsInitialState = {};
+const filterParamsStore = createStore(() => filterParamsInitialState);
+const { state: filterParams, on: onQueryParamsChange } = filterParamsStore;
+const propsParamsStore = createStore(() => propsParamsInitialState);
+const { state: propsParams } = propsParamsStore;
+const getRequestParams = () => {
+    return Object.assign(Object.assign({}, filterParams), propsParams);
+};
 const clearParams = () => {
-    paymentsListQueryParams.reset();
+    filterParamsStore.reset();
 };
-export { paymentsListQueryParams, queryParams, onQueryParamsChange, clearParams };
+export { filterParams, propsParams, onQueryParamsChange, clearParams, getRequestParams };

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

@@ -50,7 +50,7 @@ export class PaymentsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'a7d58ebf91eea679073919566cd786f8df8ebec0' }, h("payments-list-core", { key: '652e313667f05d7e6a1e94ca7acc34ba137dde98', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '17c610d9339435e5aa7dc6735a0b4cde7e64753a' }, h("payments-list-core", { key: 'be8ddb8088e17c8966f32705f27c48a7f58fd3f1', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'ace7565dae883381e2668214e01cc949470f4a6a' }, this.loading && h(PayoutDetailsLoading, { key: '9412e6135da55bddc2964b87065f212bdb1399eb' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'df9b5bf40cc35a5366e9b1ed296b0e289a9f182c', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '64575c2f0be0beaf72094c0dfe9a343fdcd25c88', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'c95da0d064416dd0fbdff948c92dcd2b116e1da5', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '765da16cba8659fecc6a4c11b2856f8b1edc3a32', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'ff60105de95f6ef897618a5e7cef2fb39257b9c5', title: "ID", value: this.payout.id }), h("div", { key: '8444116278f29220fe7260d6849ed7db2296d4b4', class: "m-4" }, h(Button, { key: '686e61a3ea27b62024e3544c32542e9ca710c96f', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '5d70b7fcd4ac63002659ffc08c3c18e4b18e3f46', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '8d17ae90696880259707d0500873127c7f134339', sectionTitle: "Details" }), h("div", { key: '80111eb713f6b643a415aaf66accfdb9e279fe03', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'a7c7809a862b315960fd3f7aa5c73c45efb55512', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'b9b03681675854eb3f0d1445f45b1e20a648ded4', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'fa34b24385e0638d7ccd8ceb7382a1f113f0c966', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '6acc6435f7f8b277abd35a8ac90e01556aaab18e', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '560cedeb5230503e74e90bb3e531aed21d317f6c', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '42e2d36cb570acad67366e65316a22dac8f4d4fc', sectionTitle: "Account" }), h("div", { key: 'f2eebf080a48ba0d818363c09269689e201ed5fc', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '6064911935f9e3ef75db3ec7707dd3a182c98c5c', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'eb44916f2659dfc6d81f4e995b3f34527d15e6c2', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '0dbf8e17dfbc1ff1cd70be1d67a6907b91478a98', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '2b377f8749d66f6fd58f5a8437c1e21fbb774706', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '886cc82be28c9cd86200adf78a61846fece1cf40', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'ec5c8ab11778eff8b89be26f85c7172d38b5d4b3', sectionTitle: 'Metadata' }), h("div", { key: '9c72eeee6fb33e536c8425ba1dd6d4a0c8b066ce', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '85ea6096635c9bb6c8fc0b5298dd4cbb6411392c', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '4549ec693037f9a88ce74520fd227022d4a2db43' }, this.loading && h(PayoutDetailsLoading, { key: '36017a6e0faef41b11d79605177e215e614a3aa1' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c85f8ade3faf633fe0901d9500eb3353ca37bb2b', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'cd855de095506f7002e2e1c0188250b227927a17', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'acfb6cf5f22e321fa20af3b17a8efb2fad959b84', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'a5a642616006a55cd7c1b0a6782b4400fceb930c', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '239d10bb38e0f583ce9f40182ebd06d0a0ea7435', title: "ID", value: this.payout.id }), h("div", { key: '6863a35b9f6d5490ede7ee6fa82987691615b3e2', class: "m-4" }, h(Button, { key: '1760a4e1666aa8d8de5997c29c3c127a4e36f4b5', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '32adb626ca04e368ef4b194f198ebffd3b04222e', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '9e4ad804af83027bcf5a3c338bda5e70e97cc892', sectionTitle: "Details" }), h("div", { key: 'c927105a44b2da4c54d1a37ae67284f0674551c9', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'e1870dc67a0d4868670d8be56c918e78b50f905d', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '5fc96b304fc547112cd73eb4fb2630dd428830e7', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'da6ef701996e84cd8e6a07d78a25a5e9a79b9ea8', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '9e64e4d9dcfcb061bcaa7cece2420ebf345b8000', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '4a86a9dd33c22d08f05ec2728478a787a00a8322', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'db556a34c5d00c4d3e92c1cf4d01387bff3ee51d', sectionTitle: "Account" }), h("div", { key: '650b29a42b66a5c6472175c2908e3e3bedacf5d3', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dc66788666c8171a88712615b3b9972c3b4b0d3f', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '203f2cf47a4ef904cec14e1c513f4e7debd8fce8', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'de0b55071cf0303666f6f586de3c409684cb6a7d', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'c844ae5678df1b9181e7ecc75d96b166b75afe64', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '0d53d6165128f2783bb2d2a16fe736fa89b3f897', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '32578f8453ceb9f8196c393b6d729bbf9e287e04', sectionTitle: 'Metadata' }), h("div", { key: 'fdacbd0d6ce9c91557043a797d41a82e88d8ad61', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '97ec42b9a84d270166a634e15cf8c3aa4d9ff532', metadata: this.payout.metadata })))))));
     }
     static get is() { return "payout-details-core"; }
     static get properties() {

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

@@ -137,7 +137,7 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'c546790efb9cc49a78063b3761a9c92038acedd5' }, h("div", { key: '60cc337e0c1c4eb7eb59599cdd0520e4031d1ce9', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: 'e7188291031c23dd5bb7f843b4adebb2c5f2675e', class: "table table-hover", part: table }, h("thead", { key: 'eb3a3b5af4016ae73da8af381e778fe433e683c6', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '9352fcc352a8ea33aa1d49844e092f89a9863ce9', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: 'c924a2a65215845c119f3339b7905a6d7c3cc1fa', class: "table-body" }, h(TableLoadingState, { key: '1d811e44a1319a102a0c56a62c56dda13eb6463e', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '4dacb3d2cf264c1c367a465cb04221be6b2f1e21', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'b294b854e12adcf39c32aaaa34b260775c5195b3', 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: '668400d517551fa89af74f655befc11a091a0de0', class: "sticky-bottom" }, h("tr", { key: 'b59f6342dccf4c34cbdbddcce7cb4e1c12116fe1', class: "table-light align-middle" }, h("td", { key: '022afdd48ae81ec33f85c90e045d197f0e2f90ec', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'a7e7a1ccdc238af532608626b25123fcd93a6206', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '80d7b9e09153270375ef79961996ed56f0ee6ba2' }, h("div", { key: 'bb769ab3fc09acea181a231f98f5aa99be24e675', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: 'b008fd21153c738b85e1a37c2e43932e13b8f58d', class: "table table-hover", part: table }, h("thead", { key: 'f4c7146142cc714f24dccddda4404d5534e068b5', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'bfd485e191f11725681a1055b049c7c11eda7858', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '77797d4d7ebfed8206fb5b693d973c8fb539f1b8', class: "table-body" }, h(TableLoadingState, { key: 'd8c55ac393e2952b9cde96b8fcb45cf88978d90b', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '4122715eaa2363e9a21a3dec18a935bc98ac530e', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '5017f0eca302fe6c80d62d8e9af73b68d04db658', 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: 'da997bb2d356800bdc918415a60c03d09ab0d158', class: "sticky-bottom" }, h("tr", { key: '22a61b245c6aeb630bb3887525d826d5b3589c7c', class: "table-light align-middle" }, h("td", { key: 'f378c94db17592855e94066113bc064d0f936d45', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '32f8c9fc1a401a5f7f40669d56be3f703a3fdd40', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {

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

@@ -13,7 +13,7 @@ export class PayoutsListFilters {
         };
     }
     render() {
-        return (h(StyledHost, { key: '6cbfeb85a953944c4e3d5a793ba5ef01541d6a38' }, h("table-filters-menu", { key: '08acac404fa3d3cdf0a12d8c1db26bdba741196c', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: 'fed242f0aa7a90027c54ac614938c94417f1f092', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '052f23dbc74cec6ad5d26122a8b51dc4f0e5abad', class: "p-2" }, h("form-control-date", { key: '19bbb0f862ac86820ed8422a1df87475b24a07de', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_after, { showInputDate: true }) })), h("div", { key: '890b7ddad9586c2f60263e2da55dd30017925715', class: "p-2" }, h("form-control-date", { key: '0d6f1434667344b9845d3a71a22b6dd9425ac6ce', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_before, { showInputDate: true }) }))))));
+        return (h(StyledHost, { key: 'f9ee0c87b7b241ade995fc9bbec00fa6f38c4207' }, h("table-filters-menu", { key: '2811b3d4673191dd3e1f2e1546389841d6f3dec2', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: '6f0584fbaed4fd931da456ee7a68ad25843e84d3', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '60dba9253fa74815d2af5d9d6993d4941530da6d', class: "p-2" }, h("form-control-date", { key: '453826549a4f379eca9c4ffc9d57f18f078af347', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_after, { showInputDate: true }) })), h("div", { key: '646566a69b9d4a82c24151e6773eaa381c1c4970', class: "p-2" }, h("form-control-date", { key: '14a62f94d8b27d88306ed58cbfcbb0b377e57587', 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.js

@@ -71,7 +71,7 @@ export class PayoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '568c562b7d0bf5cc3ea4f0bc8d0bc0e468480954', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '9aea9e2fa1083617471a127ca34c3d2e6989f445', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: '7e8c3bf1df6c6cdffdc7205f84d4b451b331f6db', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '9ba8af8a562107b8fdc5bece521187ab70b90669', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class RefundForm {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'a337107e01f347769c24535d875ae75e7cfff526' }, h("h1", { key: '254b014414fffc6e3af12d22c50528915ea4d698' }, "Refund"), this.refundInfoText && (h("div", { key: 'c8eee08dfdd58a87add1a8bbf6b76521db955d32', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '8374d6e0854c35e41429b588ef373c7ed2e2368d', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '0c4412de09f5538e3f125e9413b75b416c10f820', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '5c51fdc06f7c57851e4db6f797a830602cb31b33', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '1b1e09d20d0b191491cdbcea601762c6c967d56b', class: "form-group" }, h("form-control-monetary", { key: 'f90e440f11213dfe4ae84675bf8ca22dc67b0e12', 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: 'd61ef9b10a1ef128afaee01f91c70fb621f50cb0', class: "form-group" }, h("form-control-text", { key: 'bbe2fc33746f333cbc35fa25b2852219e2dbfbef', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '5ca8e922e08881739b403bd9cc4ab21719793961', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '2d971109b53c27779bcf11cd38d3b1b073ecd65d', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        return (h(StyledHost, { key: '21bb5742fac6f75a96b334e2806906e9d9d3a215' }, h("h1", { key: '74c81b6918611e8506bcec7ad28080437a435d35' }, "Refund"), this.refundInfoText && (h("div", { key: '1cd42cd6bf063fe52b35c9adeccbba366147a8a0', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '338b9ffd53bc98da86a0c96eceb4057c235cc524', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: 'e8335bcee9ce21198a2104913b5f084e897807d4', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '6efdd00f3a96bafb713e2d9f23a77a9cfd88dc21', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '55680d454a42549b8c442f1897455cc6c0f4e973', class: "form-group" }, h("form-control-monetary", { key: 'c38894006ce18238f1fd7738feea4ca3c710930d', 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: 'fe803d97c9b90bdb87fa99dd454859a365901688', class: "form-group" }, h("form-control-text", { key: '08a129a72043547fb57ee99a1b3326dbfb03b871', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '08ba9b480faf93f81d5f1396bc42469735fdf46d', class: "form-group d-flex flex-row-reverse" }, h("button", { key: 'a07f1a85156ef80e87e9d0b5e615c1c08eebd7d2', 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"; }

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

@@ -123,7 +123,7 @@ export class TerminalsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '6d26b39501a43d464cdf017f18a277f761f7091e' }, h("div", { key: '1742f9eec4c84c80563d9e52829cda195f6d0f35', class: "table-wrapper" }, h("table", { key: 'c286d9fe9e0e42631f281820f4d01bf3a0530a37', class: "table table-hover", part: table }, h("thead", { key: '313503778cc7867e9c1276b8ac65d06367efa9b8', class: "table-head sticky-top" }, h("tr", { key: 'fbc26ae3d1ac4600c03c171c3e77624e66fa7915', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '458b4d6639c232a169a37e1920c5765f461fc5ed', class: "table-body" }, h(TableLoadingState, { key: 'ceeef6c53322679adff07b9bb336d9597dd573c7', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a1ef7bd86fd98c0320539a4c146d41de07901145', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '5f6cbd7d7e2d09ebb38677f1b141ccbdbac70a9f', 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: 'cc1e06c683ad4bb83e80bd960342773cb3c78cd7', class: "sticky-bottom" }, h("tr", { key: 'e83f5fa8207affced7c4cd507aab27ba48e7df52', class: "table-light align-middle" }, h("td", { key: 'f1b6214fc5455ca39cdf2369636b07ad18b54d3d', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '5ef057eef49aaa9081b9de5ea8c48e996fa5e35a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: 'a80b76fc1f535c9d1fea371b7655a2baa373e53c' }, h("div", { key: '3c6fb067ed034fd09c767e5f1b7ffa7ab2b0b6c2', class: "table-wrapper" }, h("table", { key: 'e24cff12e153db046b1565011bbae3db133609f9', class: "table table-hover", part: table }, h("thead", { key: 'd91e948a4b0a6da3bc67ea489bf6deb828ccb9e5', class: "table-head sticky-top" }, h("tr", { key: '7e629ab6636fceb70dd75e1163094cd44d1f525d', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '760ed57f2a669d3a6cd54953c9d5259cb6518a60', class: "table-body" }, h(TableLoadingState, { key: '4cb50cce3d9644904fffd1969de19647c6eabc11', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '84ea8077a878aa6b94c1bd2eb1c9393ffc41b983', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '94cb9745f2951383625833a783d4d2bf8e88b1b2', 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: '0e111df52934ff81bddd77a15d720c44f53e3096', class: "sticky-bottom" }, h("tr", { key: '0abc10194bb09342ecefb62b7a981c3809542a99', class: "table-light align-middle" }, h("td", { key: '828f58c6054dd437cb597696d5bdaf33069e69cf', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: 'd9f4db3f7c580fda067afff8919a695776c8f502', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "terminals-list-core"; }
     static get properties() {

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

@@ -21,7 +21,7 @@ export class TerminalsListFilters {
         ];
     }
     render() {
-        return (h(StyledHost, { key: 'ab88bb5f5cf8f00a875a8c42cacb9649482a8758' }, h("table-filters-menu", { key: 'a214db5a19018dd6df144ef014cf8ea17f6e5efe', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: '359432076455e6b25bfd30179bd1c66e13cacd52', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '5747e19b82b667d6d3381fd02767d4a27dd82c44', class: "p-2" }, h("form-control-text", { key: 'bc20c285338bf9d1d5c8633bc658c39ccadfeb40', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: queryParams.terminal_id })), h("div", { key: 'fed89678f531c8d3041fdcbc4f77eb81e5387018', class: "p-2" }, h("form-control-select", { key: '5958ccdebe430ce930d1258fa825aeebb6e9065a', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.status || '' }))))));
+        return (h(StyledHost, { key: 'f1af204ada5efea668078a7f311dead116050f92' }, h("table-filters-menu", { key: 'f7d13437f2ca0733694d8a676bde72e9b26e49e6', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: 'eb1539830b47437e8dd713a580fa3b2aa1e1bb9b', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'cbd11d34040889eb4fdceee8c1d0fa64c0b62bab', class: "p-2" }, h("form-control-text", { key: '4cfdef309714ef532970db63f7d372bf59b0b0d3', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: queryParams.terminal_id })), h("div", { key: 'd740dfff6b6c920be52bff5c17ba00fa592a083c', class: "p-2" }, h("form-control-select", { key: 'dcc2f6d5a73674bb4e7810da5cb7694074ab7d6b', 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.js

@@ -67,7 +67,7 @@ export class TerminalsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '50ee7da4209367703551642456e6df1b38c20cb7' }, h("terminals-list-core", { key: 'e445dbf65c53397757f60d844bd50cafa8d32556', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '79168b27873e1b6e7d6bfded80b646d2a95292e0' }, h("terminals-list-core", { key: '2dfbc1d923cb83cc10039b4344629db17f754fbc', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminals-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tokenize-payment-method/tokenize-payment-method.js

@@ -50,7 +50,7 @@ export class TokenizePaymentMethod {
         this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     render() {
-        return (h(StyledHost, { key: 'c8c9318c6bbde09a0d56ded9c7333958c5595574' }, h("form", { key: '1c36ac872c58b1a560a658f0b5a0cab9284d3969' }, h("fieldset", { key: 'c43c95a5debbb5a58db162c1f34e0845a2ab76f2' }, h("div", { key: 'c6bc1f6148395e6cfc9185919b0bd81716c1ac99', class: "row gy-3" }, h("div", { key: '887ae3e3bf713ee79b24ae1b4cd12156502d6143', class: "col-12" }, h("justifi-payment-method-options", { key: '06c89583f5d1dee641c90145d129f7192911d00e', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: '04e0ee27d0978a68d44c71c6f7767d685449ed1d', class: "col-12" }, h(Button, { key: '3e43eb8295cc7eba0e2914d94a337f724cd52b57', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText || 'Submit')))))));
+        return (h(StyledHost, { key: 'bfeaea9cc19470d95c3c3b01d8a2f1d0686719f0' }, h("form", { key: '055830971e13041ddc826d104deaf082765736aa' }, h("fieldset", { key: '0cca44190920ef7d526bd3ddcdf72b0d1a7d82e7' }, h("div", { key: 'cb12a4423b5ddcffcc5fb4b3905f6ad37cf23c15', class: "row gy-3" }, h("div", { key: '6d1e36bb81d64d81f4440f3c1687b03a0383fbbb', class: "col-12" }, h("justifi-payment-method-options", { key: '312ad9fe09f65c2f5ec1d0c2bbe74bcf0f24aafb', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: 'ce18adbc0b9f868a3bff49a9f2d994b83be66b4c', class: "col-12" }, h(Button, { key: '1610a24c4ffb1a6e6ddd6eea1720b553c67a20f7', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText || 'Submit')))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/styles/parts.js

@@ -81,3 +81,12 @@ export const skeleton = `skeleton`;
 // ::part(billing-form) { display: none; }
 export const billingForm = `billing-form`;
 export const checkoutSummary = `checkout-summary`;
+// Filters
+export const filterMenu = `filter-menu`;
+export const paymentsListFilterMenu = `${filterMenu} payments-list-filter-menu`;
+export const paymentsListFilterParam = `payments-list-filter-param`;
+export const paymentIdPaymentsListFilterParam = `${paymentsListFilterParam} payment-id-payments-list-filter-param`;
+export const terminalIdPaymentsListFilterParam = `${paymentsListFilterParam} terminal-id-payments-list-filter-param`;
+export const paymentStatusPaymentsListFilterParam = `${paymentsListFilterParam} payment-status-payments-list-filter-param`;
+export const createdAfterPaymentsListFilterParam = `${paymentsListFilterParam} created-after-payments-list-filter-param`;
+export const createdBeforePaymentsListFilterParam = `${paymentsListFilterParam} created-before-payments-list-filter-param`;

package/dist/collection/ui-components/custom-popper/custom-popper.js

@@ -81,7 +81,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '277df43099c0dd77e7dc69927ef51d2457cec263' }, h("style", { key: 'b0bce6ba8275da36f98a9a12abd541fc0ae423f9' }, `
+        return (h("div", { key: 'd59371a35f7215a7e93678b3e8ed37a7900ae294' }, h("style", { key: '70630b46ad7933447a8ed41d3dc7f304600be42a' }, `
           .popper-content {
             display: none;
           }
@@ -89,7 +89,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '23b70bc63642a5a3ec4e67da2d698f4ce70325dd', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'c7fdc0e2e03def596ca1eb4a4cb813a93f8cea21' }))));
+          `), h("div", { key: '94b22314d2bcf4ac41ab3239758b2421945de604', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '5c6af2fbf398b3377323f1a78b394ef5eb702463' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

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

@@ -23,7 +23,7 @@ export class TableFiltersMenu {
         this.showClearButton = hasFilters(this.params);
     }
     render() {
-        return (h("div", { key: 'ee398b42698ce14cd7d7ac914fe05ecf827adb90', class: "d-flex gap-2" }, h("div", { key: 'd097692b7b7dba1da5b141fccf472a454f008988', class: "dropdown pb-3" }, h(Button, { key: 'bfdc5605e6f771b5492ebecb3a9e857e561c9351', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '7974738ccf48f25886eb22838744e8761a8aab89', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '0f099e12ea159a912874894cdb5533f7bb64a356', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '525abf57ddb5a3ab0606037f0538f08ddf6a370b' })))), h("div", { key: '5381355037c7703a4c89015cd0a5ee34e652e221' }, h(Button, { key: 'e304b0f033a95757a9682257c2e4ff6793cd7cdd', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'd45f459f317d7a5c10083e4d6c7a1855e606ccff', class: "d-flex gap-2" }, h("div", { key: 'cd9625444bf3e4a084508a52f2f4ee52ec108602', class: "dropdown pb-3" }, h(Button, { key: '328dfff010a31a5e49a6a893bd9a8b49ebc44a6a', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '591b15ad81d875d9f0249978394281ee134dd63f', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'dbab8762dddfaa425e13d8f6ca9993ee1811a404', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: 'b4c174ce6d565e7cadcd3ce62af69eaaeac5054c' })))), h("div", { key: '1daabbe4fa3551640c075ee20e39b2c9363bf59a' }, h(Button, { key: 'b09b43e46ad9b40797efd06ede82044c8a6e25df', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get is() { return "table-filters-menu"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-checkbox.js

@@ -38,10 +38,10 @@ export class CheckboxInput {
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: '37c483442db30fe4662377c80798f60a220d005a' }, h("div", { key: 'b09832323b1d686404e362bb77281aec21fc581b', class: 'form-group d-flex flex-column' }, h("div", { key: '2064b9de15f1ca74a3d8132813f9108755a69dbf', class: "form-check" }, h("input", { key: '57218b62428c57d2c6beb65635d2cd51debb656c', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '6ea0ca6e03a956c5c11e6b6b67802a8344e6f3d8' }, h("div", { key: '87a7a3e9d34992d992464b8d6fe8ba712ff32865', class: 'form-group d-flex flex-column' }, h("div", { key: 'e3da6c3971c74163e914f53c9b5a480dbac2759b', class: "form-check" }, h("input", { key: '01af0856f7e2ad919790a7ec8896cb06e3329452', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), h("label", { key: '16a1122c4783eb07b00af9fb9449d626f978eeb4', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'e6d817bfbcecab7ebdc0537a19aa8e965239de5d', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '026032f91f2f011c1dbaa37be3c571e0fb707cbe', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), h("label", { key: '069d3ee70d0cc1c48092407055e8666a1156e7c6', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'bbc6d2e5fdef899236c07738bfa15b51b02c6912', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '456e4ad15ab35e4b68102abfcd058e2d16ac0232', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-date.js

@@ -50,10 +50,10 @@ export class DateInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '079e8e9be2b4003c29926a3f29794fdcb655e873' }, h("div", { key: 'ccdbde4bb2a14d719a232309cb8df0ddd55d6677', class: "form-group d-flex flex-column" }, h("div", { key: '2dcd3e2cbeef153d1c3c6a3b55f9e68a4ae73e47', class: "d-flex gap-2" }, h("label", { key: '8154626fc1f1bd3cbc85aed221dd1a8ad2bc1ec3', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a15f0872945e62061707e78070507069599db962', helpText: this.helpText })), h("input", { key: 'a63d12eba9bb0065a48f3087133447d408de4e55', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'a2e8ffbb23d128699730acd686fc06ce0ade5270' }, h("div", { key: 'd43b72838047707022bd3527b610eec234af6cd9', class: "form-group d-flex flex-column" }, h("div", { key: '416954342c2113ff1f4fc77cf714852e0bb66527', class: "d-flex gap-2" }, h("label", { key: 'e0c366b390fbb3ef8d183b5ca71935b8274a0b22', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e4aa76ce751db6fa45a8f11f8026e68102f484f4', helpText: this.helpText })), h("input", { key: '4022e4c857527cffb19b747815acad73c81025d4', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: 'b7cdabdf444c9e07dda46f376e3f6372164dfeae', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: '31c0122e9737c704b087dbb2a4791fd7965be3c7', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-file-v2.js

@@ -11,7 +11,7 @@ export class FileInput {
         this.disabled = undefined;
     }
     render() {
-        return (h(Host, { key: '744d405a20702d024f33fc8bc5aa6cbc97c45260', exportparts: "label,input,input-invalid" }, h("div", { key: 'e20fde11ba0bb73f99d9ab7fe7e5a23b30a81ea3', class: "form-group d-flex flex-column" }, h("div", { key: 'fff2a256c667f26cb9cf3dc8a2420276a779a5c4', class: "d-flex align-items-start gap-2" }, h("label", { key: 'c9df617c17f646c6f48a904e3b96327ff55a6c13', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '4095bdb2e3393821fbf0e05592abe64d9c43ca7b', helpText: this.helpText })), h("input", { key: '0f7b7296cbcc68df6e6eb77056928175417e6ecd', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit() }), h("form-control-error-text", { key: '57398436dad7e92bfb362cdfeb73e4f7d939c51c', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '421617186e463989ce9534004e9b59df81f223ed', exportparts: "label,input,input-invalid" }, h("div", { key: 'f3ac5c496a289e0211a249396546e9d6a1840b28', class: "form-group d-flex flex-column" }, h("div", { key: '8f732b62f40a4351462804a6753e235153679cb9', class: "d-flex align-items-start gap-2" }, h("label", { key: 'b8cebb65d6d238253c8710785745cd82419fe9cf', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '10abec154ebc5960a0f72cb2608dbc7b8ea08378', helpText: this.helpText })), h("input", { key: '3df4d0b69f18f4c266a9af0260ec9c7b422d5c7b', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit() }), h("form-control-error-text", { key: 'd657e89c7c9780db8e1c610383054c082fa77822', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file-v2"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-file.js

@@ -47,10 +47,10 @@ export class FileInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '442808bae357a7ce08299e5fdfb8ee0751567248' }, h("div", { key: 'ad7608679fa7db4868d6314e423022d2999075ec', class: "form-group d-flex flex-column" }, h("div", { key: 'b92dbbe308de82fcdd32e339a91806560c7ea3bd', class: "d-flex align-items-start gap-2" }, h("label", { key: '385e6dedc7f455bb8cb0af0f839301c4341bb5f8', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'c08c2d34a2c6b4bc0dd5bc8e873f04521f5f9f84', helpText: this.helpText })), h("input", { key: 'adfeb0d7f02959c6cbb1335b1e9a8b00050f4f3d', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '4950c97a276963d0b666313b5eb2047cd05ffe0f' }, h("div", { key: 'f09de9c091824da6e385e9129c007ea3ddefea7a', class: "form-group d-flex flex-column" }, h("div", { key: 'c853c5997df0a9a3b0789712abcbf25c1bc50884', class: "d-flex align-items-start gap-2" }, h("label", { key: 'e5c17b93898fdf7e2244f3a5549fdd3ddcc2bab8', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '131ac4f66a6bae82f53473f36448780090f28a71', helpText: this.helpText })), h("input", { key: 'cf8374ebefcbe18b73d853c96b703652869ea0af', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            } }), h(FormControlErrorText, { key: '7576a09ef2336bf4645816e8e3530acb3e8e4d9d', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: 'd5ac4a7e8b5f70fd0cb63e9358bb372a3167ab5e', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-monetary.js

@@ -63,10 +63,10 @@ export class MonetaryInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '17e5fecec611300d6f55ceed3aa0dbaadc198af2' }, h("div", { key: 'a351e02c9b118dd52c2f16f7fc12328194905923', class: "form-group d-flex flex-column" }, h("label", { key: '94f503e4e1bb020ab2b7822229d45fefef5dd7e1', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '2a3c6de082a5b91500061dd9af6f3e941445ad92', class: "input-group" }, h("span", { key: '88b07cbae192b290ffdfdef2f4c4c07bdfac1f8b', class: "input-group-text", part: text }, "$"), h("input", { key: '7de1c2fcf4ad3ab3b42a370d871d62242f262f7b', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '467e85f7211d67d6daabfcc8a3531b7ba2a15cb4' }, h("div", { key: '5566df3c8d8f9507acc27a7e47d9c79528928e8f', class: "form-group d-flex flex-column" }, h("label", { key: '5cee3c6dcc1d4e41184d4ad7185b8a8c50f9175a', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: 'e111a7617526080c1d9e2051ff7476a768c8681e', class: "input-group" }, h("span", { key: '359a79709cad258033ee44ca6c4c320be1a85ce4', class: "input-group-text", part: text }, "$"), h("input", { key: '32dda535adca1021e46badb63d8ba064c936bd2f', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h(FormControlHelpText, { key: 'fb35421f1d48819e88130a0f78e22d12d2d34642', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'c5fbe9b975039e658031bc56db89ae6f6ce34006', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h(FormControlHelpText, { key: '560b1ef9506257d411d9d08e4a984195f1c3b948', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '7f4243a3d36cdd86129dca92e925e82917825d12', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-number-masked.js

@@ -67,10 +67,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: '89db4bb1cfd29493cdd96c8c6e3c94e5af49a897' }, h("div", { key: '22210b1d7377890dbf784e8e38b4d34add828f75', class: "form-group d-flex flex-column" }, h("div", { key: '649c0ffdb254257d0d3ac9dbf5daa8d655e7bcae', class: "d-flex align-items-start gap-2" }, h("label", { key: 'c03d8b29747866564c7a708db4701cd0ea547402', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ad3e013f5beab24849b62363d4f0436cfb1e4e69', helpText: this.helpText })), h("input", { key: 'abb8c2383c02a91763784fad05c31271387d7b82', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: 'b99a11bcbe47c9cd1ec7f52ff081b56c7c56fa9a' }, h("div", { key: '2d549b26a4d88b4653a9433de7e0ab6b07aa8f8a', class: "form-group d-flex flex-column" }, h("div", { key: 'a923b55bc2d2bd9d0097ffa452fe46816870aa18', class: "d-flex align-items-start gap-2" }, h("label", { key: 'af645e990ec448bad5d1b8fe2b6b415fb062c129', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3bbeaa5fff2964e1f635aab612e1f9b8fa1929d7', helpText: this.helpText })), h("input", { key: 'f1fe3e4749703f7658164e9bb31c500db9699cbf', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '835e3d30d0f2b6e9aa463c259b9ca5e514fd19e9', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '9574288a9424638ee0f72731848813863dffe718', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-number.js

@@ -43,10 +43,10 @@ export class NumberInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '84a9fa872fcd778c9b54d528de7ac170ea2f6173' }, h("div", { key: '263566ddbbbd5c064348bc57c1991302e933971a', class: 'form-group d-flex flex-column' }, h("label", { key: '0401bdc8bb45d6e0367afd51a36582c9556443f6', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'bac419a78477547420a8e1821fe02e46d7bfb12d', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '020f9486c87d1ab1f4ecbba08ef8febf889dfbe4' }, h("div", { key: '81d7f8149f287e21c0b41c351defdd528e892218', class: 'form-group d-flex flex-column' }, h("label", { key: 'c2f0799869b0bd31494b85d6cf5db9d0faffbee9', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'ddad27d6112be528bc94ef3f567674ea36453b59', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '0cd70acee81da1c14fed139a1f0550aaadbb2671', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '2a71ab292360e2d360a7e698f1a8031562ad5119', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '5a9fc892d50613e7a436e1425f8b90df7e110328', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '9cc21eab8ed0579a31fe4aae543e1ae521127725', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-radio.js

@@ -34,10 +34,10 @@ export class RadioInput {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: '6206191dcbd3f85e135a207890eec541329e6289', class: 'form-group d-flex flex-column' }, h("div", { key: 'ddaf426f9b4e21d1dd889550bf77c5a1c0e42897', class: "form-check" }, h("input", { key: '6ff61e0fb656b63363268bd6c4ab2602689aab8b', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '51d99ae29bb26e36a3f2540e6ebbbe0e99a49889', class: 'form-group d-flex flex-column' }, h("div", { key: '0ac89070efef01fe3ee76144f2177db9a55497ef', class: "form-check" }, h("input", { key: 'ef109f542471bb8599590614fce2dec13c932572', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: '9459bcab30351fc5ed57b9b83739732e75db92f3', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '3823895bb1b7e93c7610cab4f360b5a6c43874d9', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'bdcbb99da7ed76888807c57f70962480144d8e52', errorText: this.errorText, name: this.name })));
+            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: 'aa2a71abec10a6f01961a539f0890f162dfeb10c', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '67e5b9fb761adef49988f62f72018fe838c7b0df', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'e1b4b9c055869524f4b97da177389322fde6736a', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {