@justifi/webcomponents 6.12.3 → 6.12.4

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

@@ -1,36 +1,76 @@
 import { h } from "@stencil/core";
 import { StyledHost } from "../../ui-components";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
-import { defaultColumnsKeys } from "./terminal-orders-table";
+import { defaultColumnsKeys, terminalOrdersTableCells, terminalOrdersTableColumns, } 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";
+import { Table } from "../../utils/table";
+import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { pagingDefaults } from "../../api";
+import { getRequestParams, onQueryParamsChange } from "./terminal-orders-list-params-state";
+import { TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions, } from "../../ui-components";
 export class JustifiTerminalOrdersList {
     constructor() {
-        this.errorMessage = null;
         this.columns = defaultColumnsKeys;
-        this.handleErrorEvent = (event) => {
-            this.errorMessage = event.detail.message;
-            this.errorEvent.emit(event.detail);
+        this.terminalOrders = [];
+        this.loading = true;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
+        this.handleClickPrevious = (beforeCursor) => {
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
+        };
+        this.handleClickNext = (afterCursor) => {
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
+        };
+        this.rowClickHandler = (e) => {
+            const clickedOrderId = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedOrderId)
+                return;
+            const orderData = this.terminalOrders.find((order) => order.id === clickedOrderId);
+            this.clickEvent.emit({ name: TableClickActions.row, data: orderData });
         };
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
+        this.terminalOrdersTable = new Table(this.terminalOrders, this.columns, terminalOrdersTableColumns, terminalOrdersTableCells);
         this.initializeGetData();
+        if (this.getTerminalOrders) {
+            this.fetchData();
+        }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    ;
+    authPropChanged() {
+        this.initializeGetData();
+        if (this.getTerminalOrders) {
+            this.fetchData();
+        }
+    }
+    pagingOrColumnsChanged() {
+        if (this.getTerminalOrders) {
+            this.fetchData();
+        }
+    }
     initializeGetData() {
         if (this.accountId && this.authToken) {
             this.getTerminalOrders = makeGetTerminalOrders({
                 id: this.accountId,
                 authToken: this.authToken,
-                service: new TerminalOrderService()
+                service: new TerminalOrderService(),
             });
         }
         else {
@@ -42,8 +82,51 @@ export class JustifiTerminalOrdersList {
             });
         }
     }
+    fetchData() {
+        if (!this.getTerminalOrders) {
+            return;
+        }
+        this.loading = true;
+        this.getTerminalOrders({
+            params: this.terminalOrderParams,
+            onSuccess: async ({ terminalOrders, pagingInfo }) => {
+                this.terminalOrders = terminalOrders;
+                this.paging = pagingInfo;
+                this.terminalOrdersTable.collectionData = this.terminalOrders;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+            },
+            final: () => {
+                this.loading = false;
+            },
+        });
+    }
+    get terminalOrderParams() {
+        const requestParams = getRequestParams();
+        const params = Object.assign(Object.assign({}, requestParams), this.pagingParams);
+        return params;
+    }
+    get entityId() {
+        return this.terminalOrders.map((terminalOrder) => terminalOrder.id);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.terminalOrdersTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
+    }
     render() {
-        return (h(StyledHost, { key: '65330929a53f4e5e07177541460ccce864edd3ec' }, h("terminal-orders-list-core", { key: '79d4bc028395ede9b9f2e2c12729cc20532ef251', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'e544fa99091ff8e0601388c4663f536304caef7c' }, h(TableWrapper, { key: 'df2a311d1052b284d458f29a87ea5a78db145406' }, h(TableComponent, { key: '9d3d6997f5fa8581fafa34e13a9981e75075ccc3' }, h(TableHead, { key: '30ee9315492e30913de3ef73db7c4e13e6a0d5bc' }, h(TableHeadRow, { key: 'f8fd993e7f19e3ac6b41e8eaff849a7ab66b2d41' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: '75ddd58ba3a713b8f38a6e40de06d26ed06d63a7' }, h(TableLoadingState, { key: '4509782ba93ff9d5d9057a23daa9720da4ec0f0e', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '8aed10b38ac78e9ce3e5c8f96c2eb143412f3661', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '94f11381660568de3181fe7c70335e7c264c9e44', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.terminalOrdersTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'c980e0fc6b236973e6bdf4ab0a5beece872ed4e6' }, h(TableFootRow, { key: 'c6431bfb8e38839d48b2d7fb8d85a8c64981f057' }, h(TableFootCell, { key: '6c7fc01e316acfcee6e33b583b97b040ce88efaf', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '2ac492d001dc88663b575258a8828964b20d6d68', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-terminal-orders-list"; }
     static get encapsulation() { return "shadow"; }
@@ -111,12 +194,38 @@ export class JustifiTerminalOrdersList {
     }
     static get states() {
         return {
-            "getTerminalOrders": {},
-            "errorMessage": {}
+            "terminalOrders": {},
+            "terminalOrdersTable": {},
+            "loading": {},
+            "errorMessage": {},
+            "paging": {},
+            "pagingParams": {},
+            "getTerminalOrders": {}
         };
     }
     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,
@@ -139,4 +248,19 @@ export class JustifiTerminalOrdersList {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "accountId",
+                "methodName": "authPropChanged"
+            }, {
+                "propName": "authToken",
+                "methodName": "authPropChanged"
+            }, {
+                "propName": "pagingParams",
+                "methodName": "pagingOrColumnsChanged"
+            }, {
+                "propName": "columns",
+                "methodName": "pagingOrColumnsChanged"
+            }];
+    }
 }

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

@@ -45,7 +45,7 @@ export class JustifiTerminalsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '77a3937540cd75a7cc51a90b1cd7c7c52ae870b2' }, h("table-filters-menu", { key: '4a725bfe0b79d0046eea2f7b3e3fe295b5384b94', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: '0cb6fcedf45371c68b8b37e8b832ca3e9b48789e', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '602fc95acdd62112bc53f858073e936f9bf5e48d', class: "p-2" }, h("form-control-text", { key: 'c4e8dc476d2d8d80f2367ab6f8a5e5db17a72f15', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: filterParam })), h("div", { key: 'e83b3b3ef5f1509286cabaee9faeb96cd7d9e15a', class: "p-2" }, h("form-control-text", { key: '2f6eb9224740f327ce5019d93d879c231df8b0ee', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: filterParam })), h("div", { key: '942179e72ce3b8fea5c2cd2dd28aeecd586bdb6c', class: "p-2" }, h("form-control-text", { key: 'adb7eaab71834c2c619a09f9053dd8374a8bdfcc', name: "provider_id", label: "Device ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.providerId || filterParams.provider_id, disabled: !!this.providerId, part: filterParam })), h("div", { key: 'c15d630d0c3500d26720db63cbf90098b837ee24', class: "p-2" }, h("form-control-text", { key: '93f4e6c1e5c8f7e853111e74e25946fd683c5a17', name: "serial_number", label: "Serial Number", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.serialNumber || filterParams.serial_number, disabled: !!this.serialNumber, part: filterParam })), h("div", { key: '6a269a0c2fb90fb4e00b05d4aeee3fff4ab4e967', class: "p-2" }, h("form-control-select", { key: 'f6d9e45354d5c3d8894fe442d0bef490bafb20de', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status || '', disabled: !!this.terminalStatus, part: filterParam })), h("div", { key: 'ea70b109bd231bd085bb2cb8388d8010e0c5aa79', class: "p-2" }, h("form-control-date", { key: '256cddfb0e68590bc8d8403aa8a033ad40d613fe', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter || filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: '1be9bf8d68c691f09d40db9c45d78ed923fb3d86', class: "p-2" }, h("form-control-date", { key: '79d48b277064373e3faf999ae8771a44b35de1cb', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore || filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: filterParam }))))));
+        return (h(StyledHost, { key: 'fbdb69bdc60f2c3c9caacf287229ee3d0644fcfb' }, h("table-filters-menu", { key: '7f6649444863079f885aff24d554077800b42021', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: '7277b0cf678494ca3c227abeb76a03e5bd80c522', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '06a3a26492844e37536f1d8d074af69078a70074', class: "p-2" }, h("form-control-text", { key: 'f37cc48a754dd0ef12405f3cbcfb10a9c099eb56', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: filterParam })), h("div", { key: '8a3638c23a774c566cfee5aba8b17ab9c7ec9419', class: "p-2" }, h("form-control-text", { key: '113ded1ef867fcdab00f8c048b56219d6c5fe51d', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: filterParam })), h("div", { key: '32dbef16165a0a762ad206eb5ce495b898770052', class: "p-2" }, h("form-control-text", { key: '0d5827915c2962d78975d7c648b874cd8346043d', name: "provider_id", label: "Device ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.providerId || filterParams.provider_id, disabled: !!this.providerId, part: filterParam })), h("div", { key: '01442ae3aeb6613caaadf3e7f92a910970b315da', class: "p-2" }, h("form-control-text", { key: '5b8ab5d31ef77609b8d5656a8e5a4e31c8b010a6', name: "serial_number", label: "Serial Number", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.serialNumber || filterParams.serial_number, disabled: !!this.serialNumber, part: filterParam })), h("div", { key: 'e6b5bae11d8e9e72fe48626ce3663b0c65186700', class: "p-2" }, h("form-control-select", { key: 'df256ff824ae41eb65c2276481d8d6b63d3bc5a5', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status || '', disabled: !!this.terminalStatus, part: filterParam })), h("div", { key: '452b838d823484cb79569fde263228c0b5ac1e04', class: "p-2" }, h("form-control-date", { key: 'cd6705ac2ffce5496382b5ded1973784f863ac4e', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter || filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: 'fd396d846e420a5f750ce371c04c883a7e478b44', class: "p-2" }, h("form-control-date", { key: '852c044ce6154fc5f4382a0dd55b287e4b6370ac', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore || filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: filterParam }))))));
     }
     static get is() { return "justifi-terminals-list-filters"; }
     static get encapsulation() { return "shadow"; }

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

@@ -168,7 +168,7 @@ export class JustifiTerminalsList {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(StyledHost, { key: '3429d0dc6534dda4e9dc6417924040a53fd5a032' }, h(TableWrapper, { key: '00c6172e8bb77ed0824381785b17fdd556c942a1' }, h(TableComponent, { key: 'd0119d84743bb06d1e0562eee3124197d46f3b13' }, h(TableHead, { key: '9721788579474c7db31587f57ff1aa4159cae7c3' }, h(TableHeadRow, { key: 'e689b5546ad32ad75bcbedb0cf184b4a6adf1bf3' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: '220a3f509f17333888640b0034da30d9375c4100' }, h(TableLoadingState, { key: 'd444e883ddd69ef5b05754476e6ea66c598a2c5f', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a6ee22d5138114688ff2c8525e8b5ce8fb00a853', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: 'e151dba5915e622eb7a63ce7912fabe6924df7dd', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '91c0903d8c81817f82e7a8864a4188fac602af87' }, h(TableFootRow, { key: '322abe78babc127fccb9309c14c91b30a5d86700' }, h(TableFootCell, { key: 'e9843c61dd4eb031f514ff35f3354998dfaec59e', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: 'd6b0bdaa7459afb8cd164c540843e7a4d8376f53', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: '6388e9b0b7c6dcedc9f3db534d3a30d0a748929c' }, h(TableWrapper, { key: 'e11b994e16e657aaaa7c6f29197865d0d6bfd1ba' }, h(TableComponent, { key: '340980f75fef37841907835378d9c0ced1992b5c' }, h(TableHead, { key: 'fdd3d1569b6a3df9d5d31fb2cc602ab054529fc6' }, h(TableHeadRow, { key: '440d602ac5746635f92445c6216c807b9b13517e' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: 'ccef66a47be1cfca09f10d450fb7eeaf241a17e0' }, h(TableLoadingState, { key: 'aea6e2f33e07c717f50065c12211f9f2d9266bec', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '7c92ba6cd398bae23587a2e1771bba7b75dc680c', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '3155cf655f5b8e4290e8cabdcdbd534159f22ddd', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'da9172d4bf4439456894b53a0cf13a82081909f0' }, h(TableFootRow, { key: 'e6c0847dc330a0e32228f2020d22bbaf0e4ad439' }, h(TableFootCell, { key: '6761f623d70d13b13e92ec73c9b936d5bf85dd70', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '4b490b5834be42664ebbc27b7c7a1b0c10bd433b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-terminals-list"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -108,7 +108,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '7a5bab9f568f74c4cc7635a5844ca9a48c506521' }, h("style", { key: '9d073f9cc6b46141f05def0a5fa51d61ce2ec1b0' }, `
+        return (h("div", { key: 'eb1e7317215bc36f340ac0cd8b5826cc302c3693' }, h("style", { key: '1acdb1992e684a654d659e7472758e016b4b11d6' }, `
           .popper-content {
             display: none;
           }
@@ -116,7 +116,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '7cea0b75df433ed9b5a8e46b015814a954f47c99', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '6a6f628864ce86989413f80b8a39f7fe089d6633' }))));
+          `), h("div", { key: '53ff89449687b84469c9cfbb83c7807b6e95e003', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'f8f516747c2ad6c2e32efefeaa33f319a202bba6' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

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

@@ -42,10 +42,10 @@ export class FormControlDate {
         return part;
     }
     render() {
-        return (h(Host, { key: 'ec545098abff465066e8e483fb80b13efdfb1c0c' }, h("div", { key: '62ab3c2b55228781b45cc08cec73dddaf079e02c', class: "form-group d-flex flex-column" }, h("div", { key: 'c4a79de5aedf7db3356f1003755861d5aba8e51b', class: "d-flex gap-2" }, h("label", { key: 'f64d2f776aa848961ad74496c52bb61d744e50f0', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '50de1c1138f91f01ad982a5823779e5a067389be', helpText: this.helpText })), h("input", { key: 'bb7e14c9e6e952902c15667124032d5ca93df3e8', 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: 'c17bdb1266aea8cf2d50c1ef75e4a059d743ab2c' }, h("div", { key: 'e33d45227ed65daca2f75563fd2dd51f45126313', class: "form-group d-flex flex-column" }, h("div", { key: 'f02592b5c5a9c6346b5a0cacc08f45b971fcd370', class: "d-flex gap-2" }, h("label", { key: '30c32d5e351df78b68ea249b5626c9ee247569d4', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '250d51c080fbd42a421f23d9a2b23735f6491773', helpText: this.helpText })), h("input", { key: 'f401b594d91d353f1d1fff7e431f9b010fc86fc9', 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: '2916afe69a7066713ea1da31fecb3ab8679a6170', 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: '5be9326874e8370b54399ec78f46dd16a62272cf', 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

@@ -7,7 +7,7 @@ export class FormControlFileV2 {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '148ab38c0f84c68412db6bb87e2cb4d986809aaa', exportparts: "label,input,input-invalid" }, h("div", { key: '11426b2eee53e37090e0b0d2cda9e3823b777072', class: "form-group d-flex flex-column" }, h("div", { key: 'c241b74d833248d3a94466490e5111cea7a587f6', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ff5322a7dc7344374b28a04ccfc89051aa4f2e49', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a134a3772f580da33b497686ffb321863e65acc2', helpText: this.helpText })), h("input", { key: 'f06a4e02a08c336a9048c6e45cb588e7d9f06082', 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: 'c374ee239d34ba99de7146dbe10fdee38c63ddc5', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '5df12f5dc87f1c7d5b18676a9d4a7b257719b2fa', exportparts: "label,input,input-invalid" }, h("div", { key: '57b02e11bd44c405635a2f6253637b288bafdd41', class: "form-group d-flex flex-column" }, h("div", { key: 'd62f4ae4183e33af3105d76d0180ebe0f54983e5', class: "d-flex align-items-start gap-2" }, h("label", { key: '82d8b58d0147f4fc6302c3852a44a73d9fcf34e0', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ec4e21a9d4105b751b099378ce49c55a95ef36b2', helpText: this.helpText })), h("input", { key: '332527088f01b11bb06af38c73f39d3040d925b7', 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: 'd7caedcf4b1263e3c133310312374bc6d61b82c2', 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

@@ -40,10 +40,10 @@ export class FormControlFile {
         return part;
     }
     render() {
-        return (h(Host, { key: '6029c84182825326d6bbd77aca89907f569bd508' }, h("div", { key: '1c32a3ee26adb61444af0ab39d8783cb5ec17f0a', class: "form-group d-flex flex-column" }, h("div", { key: '5018405df5c3275e6c5b2e225898e30ceaa74ca5', class: "d-flex align-items-start gap-2" }, h("label", { key: '769a3e84e5439e600bc579bfa8b7091f8105b3c4', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '6559a3b53cf6456f0b9f4b5eed34a377ec9af4b8', helpText: this.helpText })), h("input", { key: 'b1f15be1f9a3e38f65fa6475d6454ebbfdf9f612', 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: '1f5c8bdc73c664cf40acb4f5b61db454bbda36a0' }, h("div", { key: '77f0007875132d26dd8df91dfb53386da9e15ce4', class: "form-group d-flex flex-column" }, h("div", { key: 'a6885165580120dbaffaedf60edf2e2cc9883a9f', class: "d-flex align-items-start gap-2" }, h("label", { key: '489b6d49a60f8339722537084f64746e5625297d', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'fc581e32bfb8935e79648c0a670bcb26bf225fe4', helpText: this.helpText })), h("input", { key: '34ddfe0796848feadcd6249ed861c5fa623840d4', 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: 'c90a103f4e21948b70643a1f35fd7321f51cf21a', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: '4a0c1869b8b19a01273d8f1ca3f3cd92134ddb58', 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

@@ -42,10 +42,10 @@ export class FormControlMonetary {
         return input;
     }
     render() {
-        return (h(Host, { key: 'c7bc247268fb901619a61bef645c35bb55eb54bf' }, h("div", { key: '3678d077e1fe03b30c0584d51b535984b31872d2', class: "form-group d-flex flex-column" }, h("label", { key: '4912bb7c5b7647349b34c495b7e2278b08dc0232', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '3aa152cdb7a2f72a739aeb431a4f2dcc389876a4', name: this.name, helpText: this.helpText }), h("div", { key: 'ad6d1c9275979ee19dc7d25cb9a3af00f8e6a493', class: "input-group" }, h("span", { key: '9a3293856bbb270b7d518a3129f492c18de94b60', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '1b301b983948cbe6de420bf5bc06ef8eb743b246', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'c91bf2d63e4cd717dfc472f5b16dac9c3e9fdd69' }, h("div", { key: '8f1eaae0f9dfbcc97adf788a5b955824dc68dbd2', class: "form-group d-flex flex-column" }, h("label", { key: '1965936a9e14612fdb8aec07e0def943e1e1344a', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'dd517aee7a39c71c1fe98b6c53a4528c9d3826d5', name: this.name, helpText: this.helpText }), h("div", { key: 'bb62ed9e6c9db38f39581d7f86483a242330c295', class: "input-group" }, h("span", { key: '5a358beea95c1eed695b8ca5e5f9a7a82b0864b1', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '5c37a1edb6a229634536c2c7ad4cb4c2cfff211b', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: '8f8951afec2c5759c629316c693d9b07ef58a677', errorText: this.errorText, name: this.name }))));
+            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: '5cb05fe585766d5f037c33d86485a6002894c781', 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

@@ -63,10 +63,10 @@ export class FormControlNumberMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: '8c681e45fa4ffa5445924351746c22dcc7212ffc' }, h("div", { key: 'c230d74e6d157a2b24320c4835b7df49073ad248', class: "form-group d-flex flex-column" }, h("div", { key: '6631779b46041f18b8560deeb7c35840ef11f36d', class: "d-flex align-items-start gap-2" }, h("label", { key: '460d8c3ab569ebdffb6535e1ac4f605f2046eb90', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '2d0db8687a64eb18e1205f354972368b2d3eb165', helpText: this.helpText })), h("input", { key: '4d50027e92a8657f2eb28bd5ee5a1737b2c37e4f', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: 'c70d3fcce4d3e1e120008b03a708bb3d1038777b' }, h("div", { key: 'fc3c3cf5637121a7c6f662649a1b3910ec503afa', class: "form-group d-flex flex-column" }, h("div", { key: 'c06e87a0d72942e421c37ab406b7f71d4e7f2c54', class: "d-flex align-items-start gap-2" }, h("label", { key: 'eedeec0161e3085cd65ea08b3fb4517ff62c6ffc', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '9fb05bd91836ca51750f30a714a7940493bfad8b', helpText: this.helpText })), h("input", { key: 'ef12caf83b42b0de0c33ece690bdd927b9b9a02c', 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: '10460438e09a6b16eaf8040aa48aab245967341c', 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: '8791f48bed5d6508b7cccad7bba8da7d65f96ffc', 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

@@ -37,10 +37,10 @@ export class FormControlNumber {
         return input;
     }
     render() {
-        return (h(Host, { key: 'd2463dd8a7f976628a67b94401e833ed1c53d777' }, h("div", { key: '2b77b2fa81d256a4fa52c85efce570cac62a4e31', class: 'form-group d-flex flex-column' }, h("label", { key: 'baf3c9be24dd987907c234dd53e886ac6e3fc459', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '9f456e006e074480dda19fa6433f19beb35e35bc', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '07b767b8c9091079f121d1df2b552c7d406f47b1' }, h("div", { key: '1c6c234435bb5571d3bbf5123f6f47cf51b095d6', class: 'form-group d-flex flex-column' }, h("label", { key: '883c05703351e32c7e12dbf7d984f888825606e3', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '9b841736efd2971cf93c1167ec1fd1c1d5045ec9', 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: '82100020ced402e13591f6624e45f5f85aa6980f', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'd41b38f4908ada125ff2344d23c837780ae057ba', 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: '26133a236b3c8b2cc14dce1c1244f3b1a9163605', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'e69f03f593e1632fada2d1f6dd56aaf5612a2da7', 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

@@ -29,10 +29,10 @@ export class FormControlRadio {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: '8237875c1a682811ded25055266f441c6edc6776', class: 'form-group d-flex flex-column' }, h("div", { key: '310fe7054d414089f3a1e4c457c07e33cb2d55ff', class: "form-check" }, h("input", { key: '5894a2e071758c9d647c25724a31b8a6f849353e', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '155f8db94cbc78a33daeaace0ea6b9e403d6856d', class: 'form-group d-flex flex-column' }, h("div", { key: 'f2c34e5513e584a68c6117775124eeb40d8a4de3', class: "form-check" }, h("input", { key: '50114b7a8428cc78b963442cf92eda6d0146f824', 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: '148b64863e27ad053a2e284f3c17ab994beeca55', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: 'd46e307063145956af0b181fa8f18ecc9ebbc518', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '06e5867c703104a9c2d136305a663179c5bcb0f6', 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: '759a69de65a6fc043494d394a118c55b1e948e75', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '18ca0f0b27657d1a159b9eb4839290969f349d7e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'e4bffdf3cd4596a3b42fb6098be620005d68296e', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {

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

@@ -35,10 +35,10 @@ export class FormControlSelect {
     }
     render() {
         var _a;
-        return (h(Host, { key: '31deda6555e213e2afbae0906cfb7a942c6d52a9' }, h("div", { key: '6cc5ad387f405a00f337a2e9bffb374e8b02751d', class: "form-group d-flex flex-column" }, h("div", { key: '2602f3996d6450675ee2afd16e42f0ed12263c41', class: "d-flex align-items-start gap-2" }, h("label", { key: '58d4402bcecb935c649210033af8c48f4918b362', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'c6f0ce5a90eff2754f63ef80a3643ef1be6e03d4', helpText: this.helpText })), h("select", { key: 'b278191e41ecda0ac460d922aa9177a35083c735', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '9499d7c542341eabf4e5571dec7c9083d13b7666' }, h("div", { key: 'c9967fd597028fcac9582ac39121c9a445330712', class: "form-group d-flex flex-column" }, h("div", { key: '213e629f9364a9e2a2796cfca0c008fd7bf1e212', class: "d-flex align-items-start gap-2" }, h("label", { key: 'c9d68b3dcc00ca877a80a8464478fd9ac38bd40c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e655af202b042934dba8ce2a003af3bef9a74df9', helpText: this.helpText })), h("select", { key: '4b4e4ccb7cc36b1ce5f48d0b11c5e036256267b9', ref: el => (this.selectElement = 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-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: 'c4aa47085a89b71072b1ad843b530d4638863515', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: 'a9ea85db5af5a500e50c87ba83c5e64a43c422fa', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

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

@@ -36,10 +36,10 @@ export class FormControlText {
         return input;
     }
     render() {
-        return (h(Host, { key: '2a0ba77bb026d969c6ccbcda741bfffdb26ec0ed' }, h("div", { key: 'c677eec476c7f71c6dc1fb9d45b07d5d8b54c86e', class: "form-group d-flex flex-column" }, h("div", { key: 'b250029592dab00db0d136427e3ea250a903f8a8', class: "d-flex align-items-start gap-2" }, h("label", { key: '8a1565f47b23d1ce158954e56d5a96918e99ed06', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '84d6bd6d4a2e8221c63ec70bd0700cb0a458cd5f', helpText: this.helpText })), h("input", { key: 'e15c9156385333b661300c6b64181f897caddc1d', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '4ab9e7a2c6312b568de8a8ee429ef02f3f792173' }, h("div", { key: 'e273e0bc062be883505fe3047d41a741eaf23a44', class: "form-group d-flex flex-column" }, h("div", { key: 'a7496dd4f6b5549f26752ca2de35a34c5261e439', class: "d-flex align-items-start gap-2" }, h("label", { key: '97480c49cb0fcd3c75d123c6033df4880755baf0', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e2a53e4e15be4f9f739a79afeaf28c3671c14a4d', helpText: this.helpText })), h("input", { key: '1571553d763734454026b2c4feaa88a9535f2057', 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: '64056c304681aa44d97de20ff35415e52d0f7190', 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: '44f7c7847a2255ff3ddd83f542ff6690d1aed798', 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

@@ -42,10 +42,10 @@ export class FormControlTextarea {
         return input;
     }
     render() {
-        return (h(Host, { key: '99c79a6c8020a98a663caf25a510310a46daed8c' }, h("div", { key: '5cb37c1a3ecffdfa606805e72efe41825997296e', class: "form-group d-flex flex-column" }, h("label", { key: 'f354efb1e47e496e36ae91dc8584cfd7a803eb5e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '53d089f2377dc20fb1d8e07c5d2d8697a6a17b33', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '1e73c7219f321b73bc6001cde222b33ba79a7338' }, h("div", { key: 'dc682efd7a21e80ed1936cf69a186d3fab258de8', class: "form-group d-flex flex-column" }, h("label", { key: '526bcc6604b03b79737e4211c6d7a282cbd71979', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '4dab395c565c7180631042f99ac3b91382df4ca1', 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: '96e451654599a09a9a86db0928c083d36a7964e1', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '7d6b01f7f482643f91e9e4d83c59847e3a4f2f35', 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: 'dc851b2b46a3be03c65121a7e1f957f6c6d20c1b', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '3f09a6b275b4218aff7588f90a3cdb0de02ae8bb', 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

@@ -87,7 +87,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '5697b5e318914b8866bc6ad2fb2009e5f8c8d80f' }, h("input", { key: '3370d11bc6e5a49f28dd2e95bf1d92ee7a0dd892', 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: 'd3aa78cd75de1a781c8100c121933122c6db599b' }, h("input", { key: '7ac01ecc01ca776cd6928a3a1d1e0b2baa4b8965', 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

@@ -77,10 +77,10 @@ export class IframeInput {
         return params;
     }
     render() {
-        return (h(Host, { key: 'e85f5a2417ccc46ac8df23a695c6ef3fcd71577e', class: "form-group d-flex flex-column" }, h("div", { key: '02878f7fb1e720aa97a67e72d5f1711e0fbd0668', style: {
+        return (h(Host, { key: 'a3039409160cb6fd7dd2e7bf189e241f34ddeca6', class: "form-group d-flex flex-column" }, h("div", { key: 'dab356c30fedca21f6092cfbaf576e23df36b318', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '57c46b739fb284c4ee618594f04cc5ff128bf16c', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '4634650c721673a52ea55e331154a624c19266dc', 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: 'facd226e399f41537657603c50c45887c1177c42', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '0469fb973476f92cd5b275b62e4a462521448273', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'd91253d593d700279c0d869b34d3d4f5d572759a', 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: '2a3676ad3d25daedccaa0cb2297f505641b47497', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -90,7 +90,7 @@ export class IframeInput {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: '73c34b9ab89a21e6b3203904988bf8a542eb01f8', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: 'e54b9c1a7ef5da3bed2eb62e25a28c91865f1f40', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {

package/dist/collection/ui-components/internal-button.js

@@ -6,7 +6,7 @@ export class InternalButton {
         this.type = 'button';
     }
     render() {
-        return (h(Button, { key: '5257c5d43fe6f14dddf688ad979e91c8594014a9', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle, hidden: this.hidden }, this.text));
+        return (h(Button, { key: 'b9c53e47ed16f09a34b2d28c9edc275de6f375c1', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle, hidden: this.hidden }, this.text));
     }
     static get is() { return "internal-button"; }
     static get properties() {

package/dist/collection/ui-components/radio-list-item.js

@@ -9,7 +9,7 @@ export class RadioListItem {
         };
     }
     render() {
-        return (h(Host, { key: 'df05a770b3b220ec3c11de2e3edfc3605c0ca909' }, h("div", { key: 'a349e3b2e2b464ed100cee165b8a0e60f25d2e97', class: `radio-list-item p-3 ${this.class || ''}`, part: radioListItem, onClick: this.handleClick, hidden: this.hidden }, h("form-control-radio", { key: 'df8a2643c0d236a0524ccde524396bf08597aee6', name: this.name, value: this.value, checked: this.checked, label: this.label, inputHandler: () => null }))));
+        return (h(Host, { key: '72ed5a0699e0777e0e9fe64fcf4384ee3a6f1d1b' }, h("div", { key: '0f6565adcc8fecd970e44ee5cd06f15d21cd2feb', class: `radio-list-item p-3 ${this.class || ''}`, part: radioListItem, onClick: this.handleClick, hidden: this.hidden }, h("form-control-radio", { key: '017390d5dc479fb85b3d4fa493f3aaf292bce7b5', name: this.name, value: this.value, checked: this.checked, label: this.label, inputHandler: () => null }))));
     }
     static get is() { return "radio-list-item"; }
     static get properties() {

package/dist/collection/ui-components/shadow-dom-components/justifi-button.js

@@ -6,7 +6,7 @@ export class JustifiButton {
         this.type = 'button';
     }
     render() {
-        return (h(StyledHost, { key: 'cb0fe35e791df60fcc8198bcda789bf8be205873' }, h("internal-button", { key: '26f0f44419d1d72e7ccd1240e88057333d927a36', text: this.text, variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, type: this.type, disabled: this.disabled, class: this.class, customStyle: this.customStyle, hidden: this.hidden })));
+        return (h(StyledHost, { key: 'f1ac17863df571d72e7db9b748b1980218145322' }, h("internal-button", { key: '0b7052d216fb79ed5d9f90aacff97d39dce87473', text: this.text, variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, type: this.type, disabled: this.disabled, class: this.class, customStyle: this.customStyle, hidden: this.hidden })));
     }
     static get is() { return "justifi-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/ui-components/shadow-dom-components/justifi-header.js

@@ -14,7 +14,7 @@ export class JustifiHeader {
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (h(StyledHost, { key: '47b96a1e22395349811c97d4e914fa4d77102591' }, h(HeaderComponent, { key: '2ac2e58d15c9c92d01fae0ffba9ea6511cc1ac53', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: '879e301ec35e7cc536dec135e11daf140c67eeed' }, h(HeaderComponent, { key: '1766cb9a4d84bee1b3365b4df93515274cf31565', text: this.text, class: this.class })));
     }
     static get is() { return "justifi-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/ui-components/shadow-dom-components/justifi-skeleton.js

@@ -3,7 +3,7 @@ import { StyledHost } from "../styled-host/styled-host";
 import { Skeleton } from "../skeleton";
 export class JustifiSkeleton {
     render() {
-        return (h(StyledHost, { key: 'd19fcf55df4b5b001d31af93c263fef39fc0d160' }, h(Skeleton, { key: '9ab49d76aa71146287fff2013050e008342f0275', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
+        return (h(StyledHost, { key: 'c995981caeae785829f1ef75454b2759243e8adb' }, h(Skeleton, { key: '9c63cf385499820bb1acd3503e126363485684f6', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
     }
     static get is() { return "justifi-skeleton"; }
     static get encapsulation() { return "shadow"; }