@justifi/webcomponents 5.3.4 → 5.3.6

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

@@ -4,19 +4,23 @@ import { table, tableCell } from "../../styles/parts";
 import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { pagingDefaults } from "../../api";
 import { terminalOrdersTableCells, terminalOrdersTableColumns } from "./terminal-orders-table";
+import { TableClickActions } from "../../ui-components/table/event-types";
 export class TerminalOrdersListCore {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
             this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
         };
         this.handleClickNext = (afterCursor) => {
             this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
         };
         this.rowClickHandler = (e) => {
             const clickedOrderId = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedOrderId)
                 return;
-            console.log('clickedOrderId', clickedOrderId);
+            const orderData = this.terminalOrders.find((order) => order.id === clickedOrderId);
+            this.clickEvent.emit({ name: TableClickActions.row, data: orderData });
         };
         this.getTerminalOrders = undefined;
         this.columns = undefined;
@@ -38,8 +42,23 @@ export class TerminalOrdersListCore {
     }
     fetchData() {
         this.loading = true;
-        console.log('fetching terminal orders');
-        this.loading = false;
+        this.getTerminalOrders({
+            params: {},
+            onSuccess: async ({ terminalOrders, pagingInfo }) => {
+                this.terminalOrders = terminalOrders;
+                this.paging = pagingInfo;
+                this.terminalOrdersTable.collectionData = this.terminalOrders;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+            },
+            final: () => { this.loading = false; },
+        });
     }
     get entityId() {
         return this.terminalOrders.map((terminalOrder) => terminalOrder.id);
@@ -54,7 +73,7 @@ export class TerminalOrdersListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '0985e60932d09dafc25f5d98415a7dc0b56d64a8' }, h("div", { key: '390633346017eaced1704ea7b5c800aae0f9df57', class: "table-wrapper" }, h("table", { key: '56959798f3fab7ff46d410908f7cf0e889940a51', class: "table table-hover", part: table }, h("thead", { key: '25fab5c7217777cd10ef8515ce5745748d8cdb22', class: "table-head sticky-top" }, h("tr", { key: '6c5606a186e0a3bacda194cd348d92798d63b9e4', class: "table-light text-nowrap" }, this.terminalOrdersTable.columnData.map((column) => column))), h("tbody", { key: 'cff51b485040873e6bde770269d4aa4a161c4c82', class: "table-body" }, h(TableLoadingState, { key: 'f38917eb02c8f537496b2465e5b64da302e8c19a', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '2f7ee4c2c1a9d37134df4a955f92a33ef2ac6ca3', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: 'c9bbb80471f1ad7ef04199949cfd0583852a5a26', 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: 'c476e3245d5365d6facff461ea921c18c3001caf', class: "sticky-bottom" }, h("tr", { key: 'ae0d4344538d1f3ee7c2702c1475e730e1d25b8c', class: "table-light align-middle" }, h("td", { key: 'f5c8fa258bcc8d0853f9f419722d7e995f2a771b', part: tableCell, colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '2e73c5c292533441692ed97ee065448426c43f85', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        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 }) })))))))));
     }
     static get is() { return "terminal-orders-list-core"; }
     static get properties() {
@@ -110,6 +129,27 @@ export class TerminalOrdersListCore {
     }
     static get events() {
         return [{
+                "method": "clickEvent",
+                "name": "click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentClickEvent",
+                    "resolved": "ComponentClickEvent",
+                    "references": {
+                        "ComponentClickEvent": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentClickEvent"
+                        }
+                    }
+                }
+            }, {
                 "method": "errorEvent",
                 "name": "error-event",
                 "bubbles": true,
@@ -120,9 +160,15 @@ export class TerminalOrdersListCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
+                    "references": {
+                        "ComponentErrorEvent": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorEvent"
+                        }
+                    }
                 }
             }];
     }

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

@@ -2,37 +2,54 @@ import { h } from "@stencil/core";
 import { StyledHost } from "../../ui-components";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import { defaultColumnsKeys } from "./terminal-orders-table";
+import { makeGetTerminalOrders } from "../../actions/terminal/get-terminal-orders";
+import { TerminalOrderService } from "../../api/services/terminal_orders.service";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api";
+import JustifiAnalytics from "../../api/Analytics";
 export class TerminalOrdersList {
     constructor() {
+        this.handleErrorEvent = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.getTerminalOrders = undefined;
         this.errorMessage = null;
-        this.businessId = undefined;
+        this.accountId = undefined;
         this.authToken = undefined;
         this.apiOrigin = PROXY_API_ORIGIN;
         this.columns = defaultColumnsKeys;
     }
     componentWillLoad() {
         checkPkgVersion();
-        this.initializeGetTerminalOrders();
+        this.analytics = new JustifiAnalytics(this);
+        this.initializeGetData();
     }
-    initializeGetTerminalOrders() {
-        if (this.businessId && this.authToken) {
-            this.getTerminalOrders = () => {
-                console.log('getTerminalOrders');
-            };
+    initializeGetData() {
+        if (this.accountId && this.authToken) {
+            this.getTerminalOrders = makeGetTerminalOrders({
+                id: this.accountId,
+                authToken: this.authToken,
+                service: new TerminalOrderService(),
+                apiOrigin: this.apiOrigin
+            });
         }
         else {
-            this.errorMessage = 'Business ID and Auth Token are required';
+            this.errorMessage = 'Account ID and Auth Token are required';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: this.errorMessage,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     render() {
-        return (h(StyledHost, { key: '54ebb6b9b12b123caaa6d5190d0a1c6c2198d3e3' }, h("terminal-orders-list-core", { key: '99376fd9a6b5657d8777a4873f16b98a4bcf03cf', getTerminalOrders: this.getTerminalOrders, columns: this.columns })));
+        return (h(StyledHost, { key: '2a268ef2e2128e8a0ed23092c78caa7f59539c6f' }, h("terminal-orders-list-core", { key: 'a56b31da3f4672a7f63aaff473dbdcb985eed3fc', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminal-orders-list"; }
     static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
-            "businessId": {
+            "accountId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -46,7 +63,7 @@ export class TerminalOrdersList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "business-id",
+                "attribute": "account-id",
                 "reflect": false
             },
             "authToken": {
@@ -110,4 +127,28 @@ export class TerminalOrdersList {
             "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
+                    "references": {
+                        "ComponentErrorEvent": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorEvent"
+                        }
+                    }
+                }
+            }];
+    }
 }

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

@@ -1,11 +1,23 @@
 import { h } from "@stencil/core";
 import { getAlternateTableCellPart, tableHeadCell } from "../../styles/parts";
-export const defaultColumnsKeys = 'id,status';
+import { convertToLocal } from "../../utils/utils";
+import { MapTerminalOrderStatusToBadge } from "./terminal-order-status";
+export const defaultColumnsKeys = 'created_at,updated_at,order_status,quantity';
 export const terminalOrdersTableColumns = {
-    id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The ID of the terminal order" }, "ID")),
-    status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The status of the terminal order" }, "Status")),
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date and time the order was created" }, "Created At")),
+    updated_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date and time the order was last updated" }, "Updated At")),
+    order_status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of the order" }, "Order Status")),
+    business_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The business ID associated with the order" }, "Business ID")),
+    provider: () => (h("th", { part: tableHeadCell, scope: "col", title: "The provider associated with the order" }, "Provider")),
+    order_type: () => (h("th", { part: tableHeadCell, scope: "col", title: "The type of order" }, "Order Type")),
+    quantity: () => (h("th", { part: tableHeadCell, scope: "col", title: "The number of terminals associated with the order" }, "Order Quantity")),
 };
 export const terminalOrdersTableCells = {
-    id: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.id)),
-    status: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.status)),
+    created_at: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.created_at, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.created_at, { showTime: true })))),
+    updated_at: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.updated_at, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(terminalOrder.updated_at, { showTime: true })))),
+    order_status: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapTerminalOrderStatusToBadge(terminalOrder.order_status))),
+    business_id: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.business_id)),
+    provider: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.provider)),
+    order_type: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.order_type)),
+    quantity: (terminalOrder, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminalOrder.terminals.length)),
 };

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: '074b9925b7092b69d4073b86e926bc6e627ba8cd' }, h("div", { key: '195acd38db8ecc931e86e517a5e626ced44ce66f', class: "table-wrapper" }, h("table", { key: '6534aba9b68490de5a7bd03d9760021db02e3f61', class: "table table-hover", part: table }, h("thead", { key: 'bf8dc807e1b31ed1e8040f952b5bfc3cfa77116d', class: "table-head sticky-top" }, h("tr", { key: 'b6828dbb38504d1f410f4c1199ea12d03b66292a', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '2080463e7f6ac9995b30e38e52f1650f75983dab', class: "table-body" }, h(TableLoadingState, { key: '36b61e1fb8c23dea61aa3a41b2749f80dbfb34bb', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c2a11b7e3ebb37538522026854faf3f10e405271', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: 'a40dd753552ee8ad3fae2655a4e890e67a8c14f0', 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: '0af6b6aefe2160a36e773deabed1c6d006d0cde2', class: "sticky-bottom" }, h("tr", { key: '8576eee95c757c41d6b0a6838933e9c123f519d3', class: "table-light align-middle" }, h("td", { key: '87ca55905ecb734ddb059dce080256af6a7f1be1', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '08f29c2415998948e4dc020487fe10215bf10c3d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        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 }) })))))))));
     }
     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: '9e55f56855ebf7f0755c5750bfe4ae57bcc2a48e' }, h("table-filters-menu", { key: 'dae12779f49c3264cb3a5362cc4e4edc2aa6447c', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '9767d61b94a7de6bc290a1dc97e5ecdb7e75beb8', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'cab20a5aab288920f205835c4343b44502cc4a1e', class: "p-2" }, h("form-control-text", { key: '58600a426dded8a9efc05e444439c36e3eab5bc8', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '81f513ae03435ea2c97e43f460aab430ebd4a490', class: "p-2" }, h("form-control-select", { key: 'ee04592e4f117f7b58984932d10081a4383d7a65', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
+        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 }))))));
     }
     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: '1534781e6264057b7c780e6b44f4a7a66a561296' }, h("terminals-list-core", { key: '8c0fb664d5ebe4fedcf6e45046e931adffb9d381', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '1765197e56fd03442cc4d30a24d090b4dfd86405' }, h("terminals-list-core", { key: '4e880db7702649486b2cb8e743b0f7d7e78a72c0', 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/terminals-list/terminals-table.js

@@ -1,15 +1,17 @@
 import { h } from "@stencil/core";
 import { MapTerminalStatusToBadge } from "./terminals-status";
 import { getAlternateTableCellPart, tableHeadCell } from "../../styles/parts";
-export const defaultColumnsKeys = 'nickname,provider_id,status';
+export const defaultColumnsKeys = 'nickname,provider_serial_number,status';
 export const terminalTableColumns = {
     nickname: () => (h("th", { part: tableHeadCell, scope: "col", title: "The nickname associated with the terminal" }, "Nickname")),
-    provider_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The serial number / provider ID of the terminal" }, "Serial Number")),
+    provider_serial_number: () => (h("th", { part: tableHeadCell, scope: "col", title: "The serial number of the terminal" }, "Serial Number")),
+    provider_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The provider ID of the terminal" }, "Provider ID")),
     sub_account_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The sub account associated with the terminal" }, "Sub Account")),
     status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of each terminal" }, "Status")),
 };
 export const terminalTableCells = {
     nickname: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminal.nickname)),
+    provider_serial_number: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminal.provider_serial_number)),
     provider_id: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminal.provider_id)),
     sub_account_name: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminal.sub_account_name)),
     status: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapTerminalStatusToBadge(terminal.status))),

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: 'ac989aa84f6262ff1b72a88fc7c4ebb0e62175dc' }, h("form", { key: '482ebf3ca3ac67738fdd0243de8d29ad66754313' }, h("fieldset", { key: 'e563783b34d570bafd1788949a486454ce70ab4a' }, h("div", { key: 'a42f5625f5d0860153f4260aa9c5f76f4afcad06', class: "row gy-3" }, h("div", { key: 'f64bb331c9922be711bfdd9a50d76530773867c0', class: "col-12" }, h("justifi-payment-method-options", { key: 'dc23821a9130ee6435c92e20574a0bf056e1c29c', 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: '29ec96487c4a5d54c4883c4cfe4a6ee4a309042f', class: "col-12" }, h(Button, { key: 'fe116e392e79debf6a858c993ba11a21d417d998', 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: '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')))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/styles/parts.js

@@ -14,6 +14,7 @@ export const heading2 = `heading-2 ${heading}`;
 export const heading3 = `heading-3 ${heading}`;
 export const heading4 = `heading-4 ${heading}`;
 export const heading5 = `heading-5 ${heading}`;
+export const link = `link ${text}`;
 // Button
 export const button = `button ${text}`;
 export const buttonPrimary = `button-primary ${button}`;
@@ -79,6 +80,8 @@ export const listGroup = `list-group ${text} ${backgroundColor}`;
 export const listGroupItem = `list-group-item ${text} ${backgroundColor}`;
 // Skeleton
 export const skeleton = `skeleton`;
+// Image
+export const image = `image`;
 // Component specific
 // This allows specific sections of a component to be hidden, for example
 // ::part(billing-form) { display: none; }

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: '1b95226961006ba80bb96911078f7cde90f32def' }, h("style", { key: '3b20790da8600b3835e5874acab8cd49a741dbfa' }, `
+        return (h("div", { key: '4591c97abf65078bc67a82895364e4e3cf9e85d7' }, h("style", { key: 'bdedcb809a4197f8b40d2c37af00c8bb17028669' }, `
           .popper-content {
             display: none;
           }
@@ -89,7 +89,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '05d166976a3aa254c1d0722c272bd9b0adc24862', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '95d3a563a9d7a1598ec35c8042a9a1088070a4bc' }))));
+          `), h("div", { key: '555995bdc16a697f7b38ba9113b8973b7dae1bbe', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'b71f5d424096805ed2d64ee20f30d63a9044c39c' }))));
     }
     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: '8161ae3e7ce79824b21b97647b403646dd7d2db8' }, h("div", { key: 'e1aae62dd392cf208c342d727182a4b98dcabbbc', class: 'form-group d-flex flex-column' }, h("div", { key: '582178c2b18f6d535f692d2b1f16e71555bb6f2e', class: "form-check" }, h("input", { key: '531a98078cee60acc5c8838a3ea7ea43c84fe846', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: '8a12404a24a3b1c4cbec230444436c80faeba2d8', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '8cda3874473523f86dadc9e1e3dfb3e4448f3a6f', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '951395dc28c0af8d35aa8c8f38011204a82eb008', 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: '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 }))));
     }
     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: 'c1add6b2191a1b3263c12bcbf5d0be368df38dab' }, h("div", { key: '34be414bc3a4499a8fef8de45855ecc1e00edcd4', class: "form-group d-flex flex-column" }, h("div", { key: 'f5198a9aabd0e12c0f1597ac357a433a84ce56a6', class: "d-flex gap-2" }, h("label", { key: '084a1eb6ddfd7b728e0c5402c995b1f561e9cc7d', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '0328133482e9cc0f3082aa41c143fd21e95ee8ee', helpText: this.helpText })), h("input", { key: '59cbf8ccd7d2a08f38f07c73b1b457eb109d1571', 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: '39efc4cf0cf20cd611c775f1e47ace6b445eab99' }, h("div", { key: '82de246b4d67f3c1a234987c3d9259e8ed7fb3e5', class: "form-group d-flex flex-column" }, h("div", { key: '033c637f965aa750c6130504f70f7fabb9d1a9da', class: "d-flex gap-2" }, h("label", { key: 'ce384aeee225254eac66cfcb6fbe8b6b5677cd5e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a8195ae52a1904bcdaa0ee082b77164bb399e5bc', helpText: this.helpText })), h("input", { key: '07bb64ebf4727c892bc5e873d6b8327cb0e89430', 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: 'd71b3de2d560c4a44a3a00a7e5f28d9bfc5843b1', 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: '783b7b021819a5c26441a438be7b83dabb4cfce1', 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

@@ -1,4 +1,5 @@
 import { Host, h, } from "@stencil/core";
+import { FormControlErrorText } from "./form-helpers/form-control-error-text";
 export class FileInput {
     constructor() {
         this.files = undefined;
@@ -11,7 +12,7 @@ export class FileInput {
         this.disabled = undefined;
     }
     render() {
-        return (h(Host, { key: '68bfcee3ae8e8baa627c2e03731de655f7a29ef5', exportparts: "label,input,input-invalid" }, h("div", { key: 'a63ff9900d7612d933e35a0fd95335e8abc45ea7', class: "form-group d-flex flex-column" }, h("div", { key: '74124ffdbf2ac3c28299a78469f387c494140db5', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ec6c237392b1b520a5aab9c6f6a9cb328613e663', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '60f734ebac8d88e2e2775deb0433e2dfe3002402', helpText: this.helpText })), h("input", { key: '2859f4d46dcd5a666017fdb6ae0f10a266bdea4a', 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: 'c667c4882412d5d43b60beae55e3ebab2c43f07d', errorText: this.errorText, name: this.name }))));
+        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 }))));
     }
     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: '09e633d625a1f8f2233d80e8b999fcd7e4a16f62' }, h("div", { key: 'b788fd0963c0ab62d0f7e236fb47ea86430b522e', class: "form-group d-flex flex-column" }, h("div", { key: '1e7a11e13ec3c386c9f30b5cd38c3afa99c88da5', class: "d-flex align-items-start gap-2" }, h("label", { key: '45cd0d97ae44c32b4d1e0d87187ac1871511c319', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'd312e4f181dfb18c0b86048960ec0a333760f290', helpText: this.helpText })), h("input", { key: '73ff59959c75dc99cccddde819ebbeb6bc1de4ab', 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: '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: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            } }), h(FormControlErrorText, { key: 'cb9c8bd4f623ebd82bdbd9725805f6038b0e1f8c', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: '2b3f070c8793027a9c64b2572c21d150ba387979', 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: 'c7a92629b644f797bc0c199b66f2b3a7802e24af' }, h("div", { key: 'b21ec4bd76d52d6ebe23de04748b344529bd5e91', class: "form-group d-flex flex-column" }, h("label", { key: 'c1a4d2c44d19a81ea594c36c8ce537956e32f8be', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '3c7858f3b1bff3d304e2d6ef4613570307abb031', class: "input-group" }, h("span", { key: '57f667463d22682820a688ff4583429203d35c88', class: "input-group-text", part: text }, "$"), h("input", { key: '8027bd97c1e8974089b9438972e449c9fe00e984', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: '2b983d18e5544d78015ce9d9f15ac0fba9991193', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '1cbf33304b3243fed47f2d6cc5459010d9502347', 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: '6ba880560bf3e612b10cb8fa718dffa6aeb3cac5', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '4286ed22b5c36440dfeca603c3220978b22abdd9', 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: '84b2b9707b77df0865ca506c3c974f9974f698e3' }, h("div", { key: '6817ba99efccf056fa28535db39a672cdb18bc0a', class: "form-group d-flex flex-column" }, h("div", { key: '2f0f64dc35352659740292397f82f6490f32b6ee', class: "d-flex align-items-start gap-2" }, h("label", { key: 'f5eff8109b6403b2cdc53e6c0a23538ef3dcb817', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '633b66f6d99fea7688652fa6e5f11e0d68666f69', helpText: this.helpText })), h("input", { key: '3df0af7941cb957ddf3df89f3216a2d3187e1e9d', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        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: () => {
                 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: '9d634135126b399aea1071fd5cc53784728b01c1', 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: '08049568eafa338d602ae7ca8bfef0612b480f0e', 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: '8c60e7494ce6878f591699baa07e5a5d562090b4' }, h("div", { key: '49c2ebe33aa6317c5960ab8a1cc1d8998e06ff9e', class: 'form-group d-flex flex-column' }, h("label", { key: '9132628d047ad3c2b243e87b013b77f367aef274', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '25d4df4f8bc7eafde56f8b6aaf77eac3acd78035', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: '47d213b459ddfb9d9704d217f82e0d30d3166465', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '4835e71589d825d56d36ef99b00fdd877690a04d', 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: 'd03c05c82aec034fd0d7d72b3ccb00527bbf8559', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '6da5711c44b703bcb72257206c3b0b308890db47', 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: 'dd02a226957e079505a8149565e42883eb0c63e8', class: 'form-group d-flex flex-column' }, h("div", { key: '8951df4569607dc68808b57423566dd1d60caa0c', class: "form-check" }, h("input", { key: '7b2e93768b210191dbb3aa9cf81e2520ffaac5ff', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: 'fd413c400f607c07d704cfe56d7e304082027d5c', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '4e7cc2ac52d39092be5e46f1a2df1a7d31f380eb', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '420052233ae56f98712559707a4372644f915aec', 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: '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 })));
     }
     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: 'd84e000c15b64815eb0f8eb2e1e1f774fd786956' }, h("div", { key: 'fc751f6b2da9d20bee791e854a2bb7d3f9ce7456', class: "form-group d-flex flex-column" }, h("div", { key: '6853a85e1dced30edb8b84070d7dc16b65e47ce6', class: "d-flex align-items-start gap-2" }, h("label", { key: '5c020f8419308ceac4c00220ce9df8fac8ce1f0f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '81662d978c47c8d3e10342cb2b2a005af4ecf608', helpText: this.helpText })), h("input", { key: '14fd9610e3a92e0b6125ab41a5878268a7cc3157', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: 'be05bd72e34afa9c8b4dd42cb5eda4fb6407224d', 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: 'a885a023a35e3801365d97e22c54615b77d45863', 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: 'beabdb77220c0ad180cf1e0143521ce03fea1eb5' }, h("div", { key: '16e2375d19c75d34c7f1ad1eb1a3a5920fa4ba08', class: "form-group d-flex flex-column" }, h("label", { key: 'dbe6e6816c5b500363964c771654d772bb25de62', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: 'b7c5f64138c846756051bd4984152ad382f24dba', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: '65ef4b15eda7ac206e935aa13b8ed30000af23d8', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '3fa530e3c915efdb63776a0146356873cf8e1e6a', 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: '3bc58430816f0d63741d112a3604c862d7638dc4', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2343df1050ff0da2cab5296f1cbc6cbc0811f77d', 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: '7bfd14ae6eb04d3bccb6f95398213655bc5c1073' }, h("input", { key: 'a40b6c6b2fd4e217af572f2032b158cc0ad603d2', 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: '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' } })));
     }
     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: '871d71c6240e94e24f7ccc4c4ec8225b4123d865', class: "form-group d-flex flex-column" }, h("div", { key: '0a1d98cba0960599d29db3c269bb8b458cdfddc8', style: {
+        return (h(Host, { key: 'e818cf95e3137d0e831ca05cb1fefeed7d8ea487', class: "form-group d-flex flex-column" }, h("div", { key: '55d3af9ab22c267c4ee7d00fdcea3f4cb7339685', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: 'bfd2e61b544db648cada7a52b45809bebf5722a8', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '53e9f9a29e07edcdcbb00b023ba0f24d09d852ab', 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: '2adc709c4094c44181dd83906763b4809b3f168b', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, 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 => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -94,7 +94,7 @@ export class IframeInput {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: 'c54bafd097b1e3e896901252d3520bfdfe5c71b6', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: 'a9d8f075d0b827bab2e00053d3a7575557b14464', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {