@justifi/webcomponents 5.3.6 → 5.4.0

package/dist/collection/components/terminal-orders-list/terminal-orders-list-core.js

@@ -5,6 +5,7 @@ import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-co
 import { pagingDefaults } from "../../api";
 import { terminalOrdersTableCells, terminalOrdersTableColumns } from "./terminal-orders-table";
 import { TableClickActions } from "../../ui-components/table/event-types";
+import { getRequestParams, onQueryParamsChange } from "./terminal-orders-list-params-state";
 export class TerminalOrdersListCore {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
@@ -39,11 +40,18 @@ export class TerminalOrdersListCore {
         if (this.getTerminalOrders) {
             this.fetchData();
         }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
     fetchData() {
         this.loading = true;
         this.getTerminalOrders({
-            params: {},
+            params: this.terminalOrderParams,
             onSuccess: async ({ terminalOrders, pagingInfo }) => {
                 this.terminalOrders = terminalOrders;
                 this.paging = pagingInfo;
@@ -60,6 +68,11 @@ export class TerminalOrdersListCore {
             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);
     }
@@ -73,7 +86,7 @@ export class TerminalOrdersListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'ceeaed5590e1586fdbb568ae3e3efd0b9569bfe2' }, h("div", { key: '1324282d71ced0bc43e73722f0286ce35141d122', class: "table-wrapper" }, h("table", { key: '15648ceb92e0a0461809e8a64539935c6b095515', class: "table table-hover", part: table }, h("thead", { key: '15aff763ff1b972c8f578ae927459afdbd6544f9', class: "table-head sticky-top" }, h("tr", { key: '912564fcbdc5e827beacd09832fe0bb69408aee2', class: "table-light text-nowrap" }, this.terminalOrdersTable.columnData.map((column) => column))), h("tbody", { key: '2aa023da48163f637eabf32ed662e722e1ea0129', class: "table-body" }, h(TableLoadingState, { key: 'db59bd7cdbd9d955a7310134ffa7133a1aecac61', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '7396924a0bb453d13c709ff692c09a5d42a29389', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '7d53ab680cd832c4b8b58297b9aa7e4d35c28fd1', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'b4a1ca8efb71e67a5d41cebbf45367abe53a8943', class: "sticky-bottom" }, h("tr", { key: 'b3b2e69b93316738593fc6e30101266dc30a5af9', class: "table-light align-middle" }, h("td", { key: '5a2782c37a1606b34b1055088eb943dc2f93cce8', part: tableCell, colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '015d4d7aef4ab85b5dd3dac7563520d498747c04', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '07a7b40585feb4644ddcf1a8c202460c79c8b045' }, h("div", { key: 'e03fc01808d22ce86bfdfaa2086f8492f45ee64e', class: "table-wrapper" }, h("table", { key: '0c54da0a4526466e487ad5093cb6c426c4cfb81a', class: "table table-hover", part: table }, h("thead", { key: 'b4495bd1eb73750104667cb7b74061dca4bb6257', class: "table-head sticky-top" }, h("tr", { key: '8df705836f557da6c08b33094eecb0505f8d3ec8', class: "table-light text-nowrap" }, this.terminalOrdersTable.columnData.map((column) => column))), h("tbody", { key: '47b008d75931b177e1acd3bc073f6015dfb17498', class: "table-body" }, h(TableLoadingState, { key: '7f2e4e329ec342db4aac981e514e28245cdbc992', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'f4a17608ce889a890f5dd1bf689e6ae24ad28ca9', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: 'e57677d193f4eff27793d684607572631dc97d8a', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '7c427d0b2db99df57ebd097ef8671566f6239d50', class: "sticky-bottom" }, h("tr", { key: 'b5d8bf7d6d43119f8f31a2ea0e0966e8f0888889', class: "table-light align-middle" }, h("td", { key: 'f36bd4d815ca6be5c69a264c90b0ce6696bc6664', part: tableCell, colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '25f4964ec46220bbceac9f763e668f77bac79299', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "terminal-orders-list-core"; }
     static get properties() {

package/dist/collection/components/terminal-orders-list/terminal-orders-list-filters.js

@@ -0,0 +1,141 @@
+import { h } from "@stencil/core";
+import { filterParams, propsParams, clearParams } from "./terminal-orders-list-params-state";
+import { StyledHost } from "../../ui-components";
+import { TerminalOrderStatus, TerminalOrderType } from "../../api";
+import { convertToLocal, convertToUTC } from "../../utils/utils";
+import { terminalOrdersListFilterMenu, orderStatusTerminalOrdersListFilterParam, orderTypeTerminalOrdersListFilterParam, createdAfterTerminalOrdersListFilterParam, createdBeforeTerminalOrdersListFilterParam } from "../../styles/parts";
+export class TerminalOrdersListFilters {
+    constructor() {
+        this.setParamsOnChange = (name, value) => {
+            filterParams[name] = value;
+        };
+        this.handleDateInput = (name, value) => {
+            const utcDate = convertToUTC(value, { setExactTime: true });
+            this.setParamsOnChange(name, utcDate);
+        };
+        this.orderStatus = undefined;
+        this.orderType = undefined;
+        this.createdAfter = undefined;
+        this.createdBefore = undefined;
+    }
+    componentWillLoad() {
+        const propsToSet = {
+            order_status: this.orderStatus,
+            order_type: this.orderType,
+            created_after: this.createdAfter,
+            created_before: this.createdBefore
+        };
+        Object.entries(propsToSet).forEach(([key, value]) => {
+            if (value) {
+                propsParams[key] = value;
+            }
+        });
+    }
+    get terminalOrderStatusOptions() {
+        return [
+            { label: 'All', value: '' },
+            { label: 'Created', value: TerminalOrderStatus.created },
+            { label: 'Completed', value: TerminalOrderStatus.completed },
+            { label: 'Submitted', value: TerminalOrderStatus.submitted },
+        ];
+    }
+    get terminalOrderTypeOptions() {
+        return [
+            { label: 'All', value: '' },
+            { label: 'Boarding Only', value: TerminalOrderType.boardingOnly },
+            { label: 'Boarding Shipping', value: TerminalOrderType.boardingShipping },
+        ];
+    }
+    render() {
+        const filterMenuParams = Object.assign({}, filterParams);
+        return (h(StyledHost, { key: '9f84e2a68bbf745714bd972e6f8510eb5c864248' }, h("table-filters-menu", { key: 'f78bfdd9940b62f74cc96969946df75274e8580c', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: 'e16d37583700f39e1ab513fb362555677aa77bbf', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '81e9b0f98cec6fb803b17ce10a1a79d61f302988', class: "p-2" }, h("form-control-select", { key: 'c5749e4b06a3c4af835e03384434d0fed054c22b', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status, disabled: !!this.orderStatus, part: orderStatusTerminalOrdersListFilterParam })), h("div", { key: 'e2367532d8147a1fc184eadce40f61894cd701cd', class: "p-2" }, h("form-control-select", { key: 'f8145506abf6879b4a21d9ae49d43061e5f6daef', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type, disabled: !!this.orderType, part: orderTypeTerminalOrdersListFilterParam })), h("div", { key: '61b3da75c15121adc65c37443f0d251c2bf0af45', class: "p-2" }, h("form-control-date", { key: 'eb8afbbb5b2148fb12705fc0b577290b9f5ac881', 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: createdAfterTerminalOrdersListFilterParam })), h("div", { key: '968131100100709c91fdd1c6d2916910bb5d34b2', class: "p-2" }, h("form-control-date", { key: 'd1f34c4297a80dd7c9f3e301d798c99db82a7b80', 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: createdBeforeTerminalOrdersListFilterParam }))))));
+    }
+    static get is() { return "justifi-terminal-orders-list-filters"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "orderStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TerminalOrderStatus",
+                    "resolved": "TerminalOrderStatus.completed | TerminalOrderStatus.created | TerminalOrderStatus.submitted",
+                    "references": {
+                        "TerminalOrderStatus": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::TerminalOrderStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "order-status",
+                "reflect": false
+            },
+            "orderType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TerminalOrderType",
+                    "resolved": "TerminalOrderType.boardingOnly | TerminalOrderType.boardingShipping",
+                    "references": {
+                        "TerminalOrderType": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::TerminalOrderType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "order-type",
+                "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/terminal-orders-list/terminal-orders-list-params-state.js

@@ -0,0 +1,14 @@
+import { createStore } from "@stencil/store";
+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 = () => {
+    filterParamsStore.reset();
+};
+export { filterParams, propsParams, onQueryParamsChange, clearParams, getRequestParams };

package/dist/collection/components/terminal-orders-list/terminal-orders-list.js

@@ -43,7 +43,7 @@ export class TerminalOrdersList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '2a268ef2e2128e8a0ed23092c78caa7f59539c6f' }, h("terminal-orders-list-core", { key: 'a56b31da3f4672a7f63aaff473dbdcb985eed3fc', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '1975f9c01aa35624f1b7f0fc5b444a9b688fb01a' }, h("terminal-orders-list-core", { key: '5488661e4526af1e3db008e56baf5289c46737e6', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminal-orders-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -124,7 +124,7 @@ export class TerminalsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '8831cfa38f962ba4dcf8903eca44931a800a9285' }, h("div", { key: '01d26a4aff98204ccc0fd4db8beb2cc2b021e386', class: "table-wrapper" }, h("table", { key: '036d4a14c61db9b406157425504112dabf4b04bd', class: "table table-hover", part: table }, h("thead", { key: '3782f1b66e447836d93e8b3cc28c09e4fe466ac7', class: "table-head sticky-top" }, h("tr", { key: '3842ccaaadbc3acf0c6caf8e8407aad17d91cae4', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: 'e9f5f7ef0eca1da8ba7e684ba937f7357c8b341a', class: "table-body" }, h(TableLoadingState, { key: '2902cbb3cfa87cdc2ae242ef2cd1001b9b491503', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'f596f3498b67dd40d3a93cd6dfa091cbc67a4cc1', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: 'e6e67b174a7d8ca353990ae85decbe89539ea504', 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: '353ba88161fe40528c8ef21271b0ec1a23237264', class: "sticky-bottom" }, h("tr", { key: '6f16d82697452ef4bc1aafa27bb5076e1bb1af54', class: "table-light align-middle" }, h("td", { key: 'bec74cc91feea7eef3bdcd290c2d2e77f6852ad1', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: 'a7667abca02d28a40ef4c58d8b869b48f9746105', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: 'b43bce610d87129e9f509a0b62e2c8ca25187c1b' }, h("div", { key: '8a29d235532fbea5e8de8196ba11776dbd697b7e', class: "table-wrapper" }, h("table", { key: 'f52c104f03c014510c8b796d6fdaaf56d0f17cc4', class: "table table-hover", part: table }, h("thead", { key: 'c3690cf84b2208e5bf91ce781876bc42a468f96c', class: "table-head sticky-top" }, h("tr", { key: '419b8dd4d311efe4435c4ca3a15f62985d4300f3', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '5c9ef7f9d6d53b2f63c907f35cd7e6afeb44481b', class: "table-body" }, h(TableLoadingState, { key: '6b24dda78bd4c17751e8956127ff9394c720edf5', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '76d3646c7ba043f091947d5fdd536d4ac7df6902', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '0b418d8ca3268176b47aee6b80712d75181c8d9c', 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: 'a46a3632e5610dd29f919d9c7b969cb1c07f67ac', class: "sticky-bottom" }, h("tr", { key: '7ef9b68abdae3cb542ecce0c261746413f1e6321', class: "table-light align-middle" }, h("td", { key: '72b477d84f6e58a5e457647e581de87ebc8f53c0', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: 'de9635642f0ea24da62b8dd2c50e05c4a2c87f37', 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

@@ -35,7 +35,7 @@ export class TerminalsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '2fc002da23470b942ac8885ba0ee205478a3e975' }, h("table-filters-menu", { key: '8591f53c5e105d26955940ae7e0be64b084f31ec', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: 'e2f0de98ac031d768529654d3b8a5ba43e62269b', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'a62823375c9f3b214f5ceff4163468fa91136cf6', class: "p-2" }, h("form-control-text", { key: '8a314678ce052a5f59e2c590d73df72a46caf0db', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '8462f83b1ba4f76044567f7c8da4fb84a8b932f7', class: "p-2" }, h("form-control-select", { key: '40cc106e9a37f76d4e072ede96b0633e5fb7c1e9', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
+        return (h(StyledHost, { key: 'b731afdb3ffb0c9bc35c5e04177b0db9bc5b9a69' }, h("table-filters-menu", { key: '8ee2d6e6f4e12e03a8236b35aae3132f5a72c204', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: 'a8b6adb28c43a2f528554ee9ae582001bddcaac5', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '08cc61200740cb6fac0b123bd2005942ea9d6c3f', class: "p-2" }, h("form-control-text", { key: 'd0f572c893e3d44256d482e791b93588422bcf86', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: 'a498de1139b122bad5416267ecc949debc43491d', class: "p-2" }, h("form-control-select", { key: '6235e893b62882e993e798b9a3cc1fafc84f215c', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
     }
     static get is() { return "justifi-terminals-list-filters"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,7 +66,7 @@ export class TerminalsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '1765197e56fd03442cc4d30a24d090b4dfd86405' }, h("terminals-list-core", { key: '4e880db7702649486b2cb8e743b0f7d7e78a72c0', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '9ad0d637bd745ee2296142c426d539f90cf403a5' }, h("terminals-list-core", { key: '26b420a410976adea74b8545d367b5f9df7178d3', 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

@@ -52,7 +52,7 @@ export class TokenizePaymentMethod {
         this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     render() {
-        return (h(StyledHost, { key: '34b41a932b7388b76084e74f834fae1dc1bde307' }, h("form", { key: 'b2dfd8c275f5ab8998c9560279e285e87f993771' }, h("fieldset", { key: 'bf6690ee43aae5418a3d979080e20e548afbd83a' }, h("div", { key: '0e66b6f3d55178f74ebd2e854597c68df598f38d', class: "row gy-3" }, h("div", { key: '970b07bf9242730d83dfb9498184e3e587609b68', class: "col-12" }, h("justifi-payment-method-options", { key: '0e11e6d59d9297da681956aa987d55df6e809a5b', 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, iframeOrigin: this.iframeOrigin })), h("div", { key: 'a1380b7f8e78db5219047b48c0dede19734f7b50', class: "col-12" }, h(Button, { key: 'febf460cb8114c52d1c63a1c259e75e80a5ed5f2', 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: 'b4c878459fb1601d429140d80ce02b898d6ca2ed' }, h("form", { key: '11917b591a4116e5711c0afd3e68b6599d064cae' }, h("fieldset", { key: 'b3c4ad0c42a424091a433e9aa8375108831e6c47' }, h("div", { key: 'bee2fa3c6c5de31d25cb102185fc977a5436a53b', class: "row gy-3" }, h("div", { key: 'fb32aa9f47716077a3dad2bfd7bfc950200014ba', class: "col-12" }, h("justifi-payment-method-options", { key: 'dca7ac67609a13e1b14bdc042eb131a07305e0d8', 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, iframeOrigin: this.iframeOrigin })), h("div", { key: '2218cb2eac22fd6187da4d205fc2437a980fa2a5', class: "col-12" }, h(Button, { key: '1299a5a10261b375cfec1b2599cc6de7f606bad9', 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

@@ -112,3 +112,10 @@ export const terminalsListFilterMenu = `${filterMenu} terminals-list-filter-menu
 export const terminalsListFilterParam = `terminals-list-filter-param`;
 export const terminalIdTerminalsListFilterParam = `${terminalsListFilterParam} terminal-id-terminals-list-filter-param`;
 export const terminalStatusTerminalsListFilterParam = `${terminalsListFilterParam} terminal-status-terminals-list-filter-param`;
+// Terminal Orders List Filters
+export const terminalOrdersListFilterMenu = `${filterMenu} terminal-orders-list-filter-menu`;
+export const terminalOrdersListFilterParam = `terminal-orders-list-filter-param`;
+export const orderStatusTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} order-status-terminal-orders-list-filter-param`;
+export const orderTypeTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} order-type-terminal-orders-list-filter-param`;
+export const createdAfterTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} created-after-terminal-orders-list-filter-param`;
+export const createdBeforeTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} created-before-terminal-orders-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: '4591c97abf65078bc67a82895364e4e3cf9e85d7' }, h("style", { key: 'bdedcb809a4197f8b40d2c37af00c8bb17028669' }, `
+        return (h("div", { key: '0da182c59e8285f0ab76d2f667218c378a402518' }, h("style", { key: 'a5cec35dd7cbe6474627f22837703e53711c104b' }, `
           .popper-content {
             display: none;
           }
@@ -89,7 +89,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '555995bdc16a697f7b38ba9113b8973b7dae1bbe', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'b71f5d424096805ed2d64ee20f30d63a9044c39c' }))));
+          `), h("div", { key: '657fcfafffda783f7b57af10256fb45c7c8720c9', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '4cf71afd1ef0e9a24a7d56c118e420d27de31e26' }))));
     }
     static get is() { return "custom-popper"; }
     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: 'd146f375ba008939c5e363b3efba27348d0bf257' }, h("div", { key: 'f4933418e2e9a5dcfbc787de2b677c1bcfa44b5e', class: 'form-group d-flex flex-column' }, h("div", { key: 'd62db927ea6b2f5be2bd1072218fda5bd2f433b6', class: "form-check" }, h("input", { key: 'a9e5db3a7f3db488315f30a0fda045eebb22ddc2', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '36192fe5f4e99ccc8cb77b6a0058d68427b6dc79' }, h("div", { key: '3fd77dbca4264579b0e4293bc537dea99a9e325b', class: 'form-group d-flex flex-column' }, h("div", { key: '737b2076e66604ce3fc1b141deb1909a8ac2be27', class: "form-check" }, h("input", { key: '3d606b0c14eda0ffba58bd844b75e3ca23f0a611', 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: '4cf2646f1be3744b7163e7c36a9dce11c99f95f6', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '875972d4db5afbc3b4043ca81f788701ce50dc31', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '94f31bd03af9ff027d75c3fab81dfc28aaae8ea8', 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: '2a8af56e9bee18f4252ea436ae76d65128ee1648', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '013c9b143992a088692de81b623bffb6b4e5f06f', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '0b6814622ff6d0a61d251aea399600ead731ad1a', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {

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

@@ -12,7 +12,7 @@ export class FileInput {
         this.disabled = undefined;
     }
     render() {
-        return (h(Host, { key: '1350700239259ba82c0271b647d65771d7a7b8ff', exportparts: "label,input,input-invalid" }, h("div", { key: '5ffc38612a1323b6035679c338ba7fb5318abb82', class: "form-group d-flex flex-column" }, h("div", { key: 'f0bbea8568d6f30f78cc0f308685a1ac3478080c', class: "d-flex align-items-start gap-2" }, h("label", { key: '8e9202023854b1c882681666b1dd151790a9a970', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '1c984e6b3e1bdf4489dc40b5180c18ef21394d42', helpText: this.helpText })), h("input", { key: '9b848f2342852e6ad2fecd9d4c1fc183201c1233', 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(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: '80d3c4169b17ecb18dbe72127fef7a20ad4a8401', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '4dff12fa7d0cb33919c39db34bbc0957fdd5653f', exportparts: "label,input,input-invalid" }, h("div", { key: 'ae39b30919625c00463cbbd5bf5172a93b7bd9f1', class: "form-group d-flex flex-column" }, h("div", { key: 'f0d20dd0d0c3bed154c220722598dfe41dc4cc45', class: "d-flex align-items-start gap-2" }, h("label", { key: '768f21bee9cf3e87caacd08ebd7506d01550f206', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ee446659b7b9503678c16f14a49d564ca8caf27a', helpText: this.helpText })), h("input", { key: 'c7eee6e890f87be8a3af204fcdb1cd5d032e5419', 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(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: '5a87d616b1b4be16b32b69d315f07b05d8d060bc', 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: '459b414fc9afaa62d0160d32fecd5c63df91ec8a' }, h("div", { key: '7ad619feb3c181f49c56a36613e0379f39811ce8', class: "form-group d-flex flex-column" }, h("div", { key: '0314577aa1bd7b28405960156b80800c6fcbc560', class: "d-flex align-items-start gap-2" }, h("label", { key: '0745c59386189944bc564aa20c86a7f6e5be384d', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e8fed0f244df3f854a1e9f8c1e0bab6f73371c4c', helpText: this.helpText })), h("input", { key: 'd03436b3841e8be14852fb156698441806658bf6', 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: 'ffd39ec9c5c98ba6d51f30fe3f0877807b9218a2' }, h("div", { key: '8d95c947132661088128a20350cb8823eb50aaa1', class: "form-group d-flex flex-column" }, h("div", { key: 'c494f917ca23d99c6dafded70156a62610764223', class: "d-flex align-items-start gap-2" }, h("label", { key: '8a6ba2787312c3a6e1e531bc05e4459aaecb6229', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '5b68e00507d2211fcc481f007c701179eb4bed78', helpText: this.helpText })), h("input", { key: 'd75a0df1951b215b60cee837b102f1b0522cc810', 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: '2b3f070c8793027a9c64b2572c21d150ba387979', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: '10231eb3448127011aca32c2e653d7974ab27e2e', 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: '7a28909977bd09fa7103d059880f122bc3afc747' }, h("div", { key: 'd5dae0fca0467655a3428dea5317aed87ade7dd5', class: "form-group d-flex flex-column" }, h("label", { key: '215c09684a5f6b18a3de2224db0ce305dcb5fc61', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '3be76b68f6138b3cb2ae0f27fc1e8ce04a85c05c', class: "input-group" }, h("span", { key: '6fb0aa890cbdf552569ca36e87fa24ca26c227f5', class: "input-group-text", part: text }, "$"), h("input", { key: '1a0e63153996d721de870de3afb8f0302a900756', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '8389bbed996b97a2e4c7536a3f31f8b4873651e4' }, h("div", { key: '0cc9d812e034c7017ea49fdb91bcd399ac3112cc', class: "form-group d-flex flex-column" }, h("label", { key: '04bf1b6ab410d6236a8d2ea47364c844a557f3fc', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: 'bc77863e0a0dc4472c62d98fbca50da4b683b14d', class: "input-group" }, h("span", { key: '28e7f0f65529fab762846711cf681b105546a04d', class: "input-group-text", part: text }, "$"), h("input", { key: 'edfac6a9f10b1914299a6f42497ebb26659717d3', 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: '6ba880560bf3e612b10cb8fa718dffa6aeb3cac5', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '4286ed22b5c36440dfeca603c3220978b22abdd9', 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: '9c28f25c98432c07678698e53b219d17d3d847a7', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '8cd3f89e1efd87fd0209cb5e6cd525b916de073a', 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: 'b1294e37ae6b189ce0be808644b37ad2d8ef98a1' }, h("div", { key: '8eaf122e331606a8a2c59e29b06cf5538dbaca2d', class: "form-group d-flex flex-column" }, h("div", { key: '8d6e75f18ba9e30f5c5d65eabf9ceda339b95e27', class: "d-flex align-items-start gap-2" }, h("label", { key: '865e5c6da0b5bdf17044f8f1735b7716c8f42abd', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'fae223b57ae6742df71af2dc50cfd761167e6ec9', helpText: this.helpText })), h("input", { key: '57fd46683614a161d133bedad973b8b7b63181ac', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: '33803369123a612e3a59159eca88fa851cc4bdda' }, h("div", { key: '4ec22ee1c45e050bb3c82465620f4195f0ee9f78', class: "form-group d-flex flex-column" }, h("div", { key: '54f8150c131f9e1d591e893ff850014f986ca4ce', class: "d-flex align-items-start gap-2" }, h("label", { key: '10adc8be977ddc13488f86e62d43e15cc27e8061', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'db05a1e10871fcb9cf7bf425963b57a802e8258b', helpText: this.helpText })), h("input", { key: '05e6000baf931e6bd51eb44a149613bdad453080', 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: '08049568eafa338d602ae7ca8bfef0612b480f0e', 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: '82ec36209485f448694614454cbddfffa1acca9e', 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: '2384acdb57de4385cc807c1c8de78460018168b7' }, h("div", { key: 'abcba3127958fcd7a01b0a3f16cc20072e5fbc3f', class: 'form-group d-flex flex-column' }, h("label", { key: '5bee8f69bfbcdb66e4f9b80b1bfccdcfd22f6a9a', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '1d232c2c0b07af9faaacb1fcc926e8c7838f6769', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'bd8c24f0c1209334fde787d8dc7402e75ea1d91b' }, h("div", { key: 'd49ef47d17045ab070005a04a9edc5b11ba1b879', class: 'form-group d-flex flex-column' }, h("label", { key: '49bfca8efbaa753dae1f862f5490ab8943c6a9fd', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '3b4ef4300374a4cdd37f85e2155fcc26d357fdca', 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: 'd03c05c82aec034fd0d7d72b3ccb00527bbf8559', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '6da5711c44b703bcb72257206c3b0b308890db47', 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: '4bdb8dc58c7143ccdbcd50568784b62217459ba9', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '0e5a0df13a356fe03dc389fc4bf6eba9000597fc', 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: 'e82324f1559f95c0de0b7ccfea3e0d24cf7b111f', class: 'form-group d-flex flex-column' }, h("div", { key: 'aa98c0018d8e29075fba54ee97a8890a478d8008', class: "form-check" }, h("input", { key: 'ca3f39c4882bc580992d99382b577131b2ebf8d2', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '6ac053e94a211ac008c55ae97f3e1b22d76a9557', class: 'form-group d-flex flex-column' }, h("div", { key: 'fe44896b709219947f63d47ea3c8318bd7649bc0', class: "form-check" }, h("input", { key: 'c56759dc4c85da7cbb2e62b6a7eb2648cd42c278', 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: 'b54b032ae6fcb6220f113a5959a4faa5869d2085', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '97508e5f8e25714f661bf3f5633a144fedf116a6', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '7ea160cc96a71a87fa77d6d0a3012340b6dc8a3f', 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: '97949ce6465290e528e21575d3fbd4785c3568a7', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: 'd521e8eae3d7602f59934373c36dab803fcdefd3', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2851bc02a7fbb665086e54f2fade679c357d34e6', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {

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

@@ -45,10 +45,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '58d3e4003254d47d57421a2b98c4c3c4ae1ad7d7' }, h("div", { key: 'ef490c45923857d072b54511d28289231843d6d4', class: "form-group d-flex flex-column" }, h("div", { key: '4554059b6543dee11f4baf897161a0403067d9fc', class: "d-flex align-items-start gap-2" }, h("label", { key: 'c9aac34dbea8460850416432b26c341de0fd709f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '9c71653212fc53843f7ef0ab99c7b4458a0c54cc', helpText: this.helpText })), h("input", { key: 'c014ebd061185484c91229bbe0b0dc89e66c7b03', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'fde1ad44fc7048a5387f1b4cbaef5e33a4c835e9' }, h("div", { key: '6b91df1b992a5505b490fff460d21f4a9d12a816', class: "form-group d-flex flex-column" }, h("div", { key: '2605c7cbe333c8b68f861c44ca72e4b0cbd647c8', class: "d-flex align-items-start gap-2" }, h("label", { key: '603202cacc1ae6ea0210e6600791f7a9c9e87777', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a3024f26b2ab58737422f644714cc2ee36933ac0', helpText: this.helpText })), h("input", { key: '46c19900a311b88b41c25533d6a6d4cbbb727be5', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: 'a885a023a35e3801365d97e22c54615b77d45863', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '1f4d9ba0fe5df28d0c576b5501df94350eeddeee', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {

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

@@ -47,10 +47,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'b9f052bd19ff3dffb1bf486eaa988aa081383f05' }, h("div", { key: 'bc3d6526bfba0d4f38c68d715ff8bc460665ffc7', class: "form-group d-flex flex-column" }, h("label", { key: '264321d3052d3204bac5426e5db2e30819ac953b', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: 'b5edc70861405d2ee6fb6624e0b95238c3bed284', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '4c7cefde1aa87f6300e8a8addc4526924a289430' }, h("div", { key: '650f5d14e0238bc8189935ddaf11dab193b8b0c9', class: "form-group d-flex flex-column" }, h("label", { key: '5a1b3d23c4362344ca440cea94a51a50645e3b12', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '20b1055d4d6ebe28014c039ed007aa807a314ff9', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '3bc58430816f0d63741d112a3604c862d7638dc4', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2343df1050ff0da2cab5296f1cbc6cbc0811f77d', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: 'f5e16b2e1db3865366ae00188eef913b5639c3ca', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'f0c3f58e74bf08be61216813ae55be1a7e334fdf', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-textarea"; }
     static get properties() {

package/dist/collection/ui-components/form/hidden-input.js

@@ -73,7 +73,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '5e5df7c2342492db0a92b0ec65f618561a2208fe' }, h("input", { key: '5dde25325cec14f6d96701243e58efca141d4b5e', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
+        return (h(Host, { key: 'd159a6bed8e3d1ea974ce2abab1d6fd1ff233c86' }, h("input", { key: '68142d8e2cace690b0f3940730d67d6b0b95c046', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
     }
     static get is() { return "hidden-input"; }
     static get states() {

package/dist/collection/ui-components/form/iframe-input.js

@@ -81,10 +81,10 @@ export class IframeInput {
         return params;
     }
     render() {
-        return (h(Host, { key: 'e818cf95e3137d0e831ca05cb1fefeed7d8ea487', class: "form-group d-flex flex-column" }, h("div", { key: '55d3af9ab22c267c4ee7d00fdcea3f4cb7339685', style: {
+        return (h(Host, { key: '04753fb11bc73c5d62986e8a8da30290ad9ed57a', class: "form-group d-flex flex-column" }, h("div", { key: '3c8e8df43e94ec2a4d7749a31fd05b913f0c3018', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '9999761a3925081bf9ebcbc3a229306fcf9902ae', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '979c124113a08e50bbc8983549e98451823d0aaa', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '3fc09b6a212b3d0f63f2d7cc9f0037be5afd6d58', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '3604c232c38a73c555d1a0e7f574a7608a490862', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '019c7844dcc29bc0ec39c3db999df25dabd06750', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '1898018d792bc1d17bb8894d0c038e98ac8065a7', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -94,7 +94,7 @@ export class IframeInput {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: 'a9d8f075d0b827bab2e00053d3a7575557b14464', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '525d1fca8fdccc481aea9cbb6e8040b2c06b53ea', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {