@justifi/webcomponents 5.4.0 → 5.4.2

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

@@ -3,13 +3,14 @@ import { debounce } from "lodash";
 import { filterParams, propsParams, clearParams } from "./terminals-list-params-state";
 import { StyledHost } from "../../ui-components";
 import { ITerminalStatus } from "../../api";
-import { terminalsListFilterMenu, terminalIdTerminalsListFilterParam, terminalStatusTerminalsListFilterParam } from "../../styles/parts";
+import { terminalsListFilterMenu, terminalIdTerminalsListFilterParam, terminalOrderIdTerminalsListFilterParam, terminalStatusTerminalsListFilterParam } from "../../styles/parts";
 export class TerminalsListFilters {
     constructor() {
         this.setParamsOnChange = (name, value) => {
             filterParams[name] = value;
         };
         this.terminalId = undefined;
+        this.terminalOrderId = undefined;
         this.terminalStatus = undefined;
     }
     componentWillLoad() {
@@ -18,6 +19,7 @@ export class TerminalsListFilters {
         const propsToSet = {
             terminal_id: this.terminalId,
             status: this.terminalStatus,
+            terminal_order_id: this.terminalOrderId
         };
         Object.entries(propsToSet).forEach(([key, value]) => {
             if (value) {
@@ -31,11 +33,12 @@ export class TerminalsListFilters {
             { label: 'Connected', value: ITerminalStatus.connected },
             { label: 'Disconnected', value: ITerminalStatus.disconnected },
             { label: 'Unknown', value: ITerminalStatus.unknown },
+            { label: 'Pending Configuration', value: ITerminalStatus.pending_configuration }
         ];
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'b731afdb3ffb0c9bc35c5e04177b0db9bc5b9a69' }, h("table-filters-menu", { key: '8ee2d6e6f4e12e03a8236b35aae3132f5a72c204', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: 'a8b6adb28c43a2f528554ee9ae582001bddcaac5', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '08cc61200740cb6fac0b123bd2005942ea9d6c3f', class: "p-2" }, h("form-control-text", { key: 'd0f572c893e3d44256d482e791b93588422bcf86', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: 'a498de1139b122bad5416267ecc949debc43491d', class: "p-2" }, h("form-control-select", { key: '6235e893b62882e993e798b9a3cc1fafc84f215c', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
+        return (h(StyledHost, { key: '390b8788e785bc81711a1b0f68203fce5a348c4c' }, h("table-filters-menu", { key: 'ab37f284aad5b828c2a3d0ce78e5c49fe86c8ec7', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '9f06d2199885d1cb8d9a4310fc94366717ca092c', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '146fb3fa0a146c8011e1fc609f885ec3de0af8bf', class: "p-2" }, h("form-control-text", { key: 'f9d33f3facd5af88761033256e9bcdee772d187b', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '59b8af61f98c01e0cd04299780817b9a497d33bc', class: "p-2" }, h("form-control-text", { key: '80c6ed5f37f4429aac0451f1b2c76fd99c52d246', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: terminalOrderIdTerminalsListFilterParam })), h("div", { key: '4452ff9cbeb157408fdd8569af5792d32f0d1aa9', class: "p-2" }, h("form-control-select", { key: '52406f154a9d5f7a01831047eedf09b909d1bc0d', 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"; }
@@ -58,12 +61,29 @@ export class TerminalsListFilters {
                 "attribute": "terminal-id",
                 "reflect": false
             },
+            "terminalOrderId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "terminal-order-id",
+                "reflect": false
+            },
             "terminalStatus": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "ITerminalStatus",
-                    "resolved": "ITerminalStatus.connected | ITerminalStatus.disconnected | ITerminalStatus.unknown",
+                    "resolved": "ITerminalStatus.connected | ITerminalStatus.disconnected | ITerminalStatus.pending_configuration | ITerminalStatus.unknown",
                     "references": {
                         "ITerminalStatus": {
                             "location": "import",

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

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

@@ -17,6 +17,11 @@ export const MapTerminalStatusToBadge = (status) => {
             title: 'The status of this terminal is unknown',
             text: 'Unknown',
         },
+        pending_configuration: {
+            variant: BadgeVariant.WARNING,
+            title: 'This terminal is pending configuration',
+            text: 'Pending configuration',
+        },
     };
     const badgeProps = statusToBadgeProps[status];
     return h(Badge, Object.assign({}, badgeProps));

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

@@ -1,9 +1,13 @@
 import { h } from "@stencil/core";
 import { MapTerminalStatusToBadge } from "./terminals-status";
 import { getAlternateTableCellPart, tableHeadCell } from "../../styles/parts";
+import { capitalFirstLetter } from "../../utils/utils";
 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")),
+    model_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The model name of the terminal" }, "Model Name")),
+    id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The ID of the terminal" }, "ID")),
+    provider: () => (h("th", { part: tableHeadCell, scope: "col", title: "The provider of the terminal" }, "Provider")),
     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")),
@@ -11,6 +15,9 @@ export const terminalTableColumns = {
 };
 export const terminalTableCells = {
     nickname: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminal.nickname)),
+    model_name: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminal.model_name)),
+    id: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminal.id)),
+    provider: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, capitalFirstLetter(terminal.provider))),
     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)),

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: 'b4c878459fb1601d429140d80ce02b898d6ca2ed' }, h("form", { key: '11917b591a4116e5711c0afd3e68b6599d064cae' }, h("fieldset", { key: 'b3c4ad0c42a424091a433e9aa8375108831e6c47' }, h("div", { key: 'bee2fa3c6c5de31d25cb102185fc977a5436a53b', class: "row gy-3" }, h("div", { key: 'fb32aa9f47716077a3dad2bfd7bfc950200014ba', class: "col-12" }, h("justifi-payment-method-options", { key: 'dca7ac67609a13e1b14bdc042eb131a07305e0d8', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, authToken: this.authToken, "account-id": this.accountId, iframeOrigin: this.iframeOrigin })), h("div", { key: '2218cb2eac22fd6187da4d205fc2437a980fa2a5', class: "col-12" }, h(Button, { key: '1299a5a10261b375cfec1b2599cc6de7f606bad9', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText || 'Submit')))))));
+        return (h(StyledHost, { key: '270b2dce491c95fd6a372bf4e59d4829c91290fa' }, h("form", { key: '7e68afbac49260a92bb6c9e3bd08125129ab196c' }, h("fieldset", { key: '95f911fa066f7fea0b36e4c99cb1c5008b4a886d' }, h("div", { key: 'aec8576644731d5960a1e041960076c503aa4a17', class: "row gy-3" }, h("div", { key: '51436afb0c10e189d079226dd0a8e7b18580fd69', class: "col-12" }, h("justifi-payment-method-options", { key: '59777ac37f44bfe9ef98d3b22a6e485f06db303d', 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: 'ef37939fb4d8e0225f98f0c3874a83206307f671', class: "col-12" }, h(Button, { key: '4b193d76ad540cae97a2423948e18d60f6db0679', 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"; }
@@ -316,8 +316,8 @@ export class TokenizePaymentMethod {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../billing-forms/billing-form-schema",
-                            "id": "src/components/billing-forms/billing-form-schema.ts::BillingFormFields"
+                            "path": "../../components",
+                            "id": "src/components.d.ts::BillingFormFields"
                         }
                     },
                     "return": "Promise<void>"

package/dist/collection/styles/parts.js

@@ -111,6 +111,7 @@ export const paymentModeCheckoutsListFilterParam = `${checkoutsListFilterParam}
 export const terminalsListFilterMenu = `${filterMenu} terminals-list-filter-menu`;
 export const terminalsListFilterParam = `terminals-list-filter-param`;
 export const terminalIdTerminalsListFilterParam = `${terminalsListFilterParam} terminal-id-terminals-list-filter-param`;
+export const terminalOrderIdTerminalsListFilterParam = `${terminalsListFilterParam} terminal-order-id-terminals-list-filter-param`;
 export const terminalStatusTerminalsListFilterParam = `${terminalsListFilterParam} terminal-status-terminals-list-filter-param`;
 // Terminal Orders List Filters
 export const terminalOrdersListFilterMenu = `${filterMenu} terminal-orders-list-filter-menu`;

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: '0da182c59e8285f0ab76d2f667218c378a402518' }, h("style", { key: 'a5cec35dd7cbe6474627f22837703e53711c104b' }, `
+        return (h("div", { key: '8c840ff88bde2fd2cb7be39772e2b49699d32844' }, h("style", { key: 'b5b1bd1fa8b6f6c76723d014bf96e2ee09fe60f4' }, `
           .popper-content {
             display: none;
           }
@@ -89,7 +89,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '657fcfafffda783f7b57af10256fb45c7c8720c9', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '4cf71afd1ef0e9a24a7d56c118e420d27de31e26' }))));
+          `), h("div", { key: '80b0e169b33d6679f372f0d34cd2320013485e10', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '4892f58a1fb5a98212f6b651f4cecc03ad7c84a2' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

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

@@ -23,7 +23,7 @@ export class TableFiltersMenu {
         this.showClearButton = hasFilters(this.params);
     }
     render() {
-        return (h("div", { key: 'b55be2aa2f9d4677989da12bb114f620a9ec2e45', class: "d-flex gap-2" }, h("div", { key: 'dffb2be68ead3abb60a8740869e48bb48bbf558c', class: "dropdown pb-3" }, h(Button, { key: '2e7b2d3afc80963abfe9c8c2690a61b911a1b747', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '9e2b1b988bc5440f18d26c5b8402f5e30e73cdad', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '573161a7515d1b16665138ba739133379b9b6850', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '9597e79f125e1e41c343fa3d2d583b5cf7ab9c31' })))), h("div", { key: '67ed29ac8e10f3ae1380514ae1a1e1e8aed7d9b6' }, h(Button, { key: '9b3dc6176c11226e82ecb1f9f88705ad40bf6e32', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'c077391d1358cd6ad02857e05a56aab3e1d10018', class: "d-flex gap-2" }, h("div", { key: 'd28773f0b202b1fcbe19bc5bace1cbf17f5538f7', class: "dropdown pb-3" }, h(Button, { key: '0ad326c9539d5c93573001f6c98486bbbe7a4eaf', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '9ebcaad716bd3b38233a2e78aa219f397c821472', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'ca88fa944c5e9ac23f6ebee6c771603516b83f85', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '7cc23a56a5db363ebdf375d41a758db534c9b9a7' })))), h("div", { key: '7047b1659d9f854ccb5e00f53fa03d4d42d7c550' }, h(Button, { key: '73e413af21cc39818ec8156d736ffdf72bc844d3', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get is() { return "table-filters-menu"; }
     static get properties() {

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

@@ -38,10 +38,10 @@ export class CheckboxInput {
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: '36192fe5f4e99ccc8cb77b6a0058d68427b6dc79' }, h("div", { key: '3fd77dbca4264579b0e4293bc537dea99a9e325b', class: 'form-group d-flex flex-column' }, h("div", { key: '737b2076e66604ce3fc1b141deb1909a8ac2be27', class: "form-check" }, h("input", { key: '3d606b0c14eda0ffba58bd844b75e3ca23f0a611', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '3c0c0210457da250712c3eddf587ddb939b6cca7' }, h("div", { key: '9f73f8f1498d43cffc200ef326ead11bc5c2b8bd', class: 'form-group d-flex flex-column' }, h("div", { key: 'a126f90ae5ca483310593816dfed878582331395', class: "form-check" }, h("input", { key: '2c7243c56c3110e199fae658513cd2b1bde96678', 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: '2a8af56e9bee18f4252ea436ae76d65128ee1648', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '013c9b143992a088692de81b623bffb6b4e5f06f', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '0b6814622ff6d0a61d251aea399600ead731ad1a', errorText: this.errorText, name: this.name }))));
+            }, 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: '35d662a8e14e56514589fe7d08fae470896a6d65', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '80d0558981f8ed95746a7f8f3be319b4817a00c9', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'fbbda937fbf1144d5560b44719c251bdd56a6154', 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: '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: () => {
+        return (h(Host, { key: '0f6bd0cc62a7023483a304ff30b272f5110fd2d3' }, h("div", { key: '6ebf0fe799c7a1b74a6c875ca8bed386949fb2fe', class: "form-group d-flex flex-column" }, h("div", { key: '370b2fadb488a3cca203b8e7ab267ee629b70b8f', class: "d-flex gap-2" }, h("label", { key: '828fa9324aac9d218e1c857ce4fdc064dddc0b12', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '42adaa5e8c7b568284e5f3129ec7edc200047f73', helpText: this.helpText })), h("input", { key: '49ae4bd3455935d9ca459dfdb53d2bfd27201e60', 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: '783b7b021819a5c26441a438be7b83dabb4cfce1', 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: '81d1ecc4135b2f7a76e3c70d8dddc7539a7dd670', 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

@@ -12,7 +12,7 @@ export class FileInput {
         this.disabled = undefined;
     }
     render() {
-        return (h(Host, { key: '4dff12fa7d0cb33919c39db34bbc0957fdd5653f', exportparts: "label,input,input-invalid" }, h("div", { key: 'ae39b30919625c00463cbbd5bf5172a93b7bd9f1', class: "form-group d-flex flex-column" }, h("div", { key: 'f0d20dd0d0c3bed154c220722598dfe41dc4cc45', class: "d-flex align-items-start gap-2" }, h("label", { key: '768f21bee9cf3e87caacd08ebd7506d01550f206', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ee446659b7b9503678c16f14a49d564ca8caf27a', helpText: this.helpText })), h("input", { key: 'c7eee6e890f87be8a3af204fcdb1cd5d032e5419', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: '5a87d616b1b4be16b32b69d315f07b05d8d060bc', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '1671eaeeec71bcbcbd8898856f2d397a10abce97', exportparts: "label,input,input-invalid" }, h("div", { key: 'dca1e07456d2dc7f018fc25ccd2743ba87897fda', class: "form-group d-flex flex-column" }, h("div", { key: '5a8f2a9600f27a7554a8096977413263f8f7b942', class: "d-flex align-items-start gap-2" }, h("label", { key: '7ef6391bc3bd46d61463c37ccdfc27bc02027909', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e1992a02fb94bdf71ad46fbf387bdcf0c5ca09b2', helpText: this.helpText })), h("input", { key: 'eb4e4bfcee93ca40c945db9c8d960b069b066645', 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: '125a576d63f4a3735397fe3b27cf2e258b86c073', 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: 'ffd39ec9c5c98ba6d51f30fe3f0877807b9218a2' }, h("div", { key: '8d95c947132661088128a20350cb8823eb50aaa1', class: "form-group d-flex flex-column" }, h("div", { key: 'c494f917ca23d99c6dafded70156a62610764223', class: "d-flex align-items-start gap-2" }, h("label", { key: '8a6ba2787312c3a6e1e531bc05e4459aaecb6229', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '5b68e00507d2211fcc481f007c701179eb4bed78', helpText: this.helpText })), h("input", { key: 'd75a0df1951b215b60cee837b102f1b0522cc810', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'a70c3c2b62599cdedf34c837e29f53011e56e018' }, h("div", { key: 'ae42cd54552d7e2b95c619acf25c4b24a0c29dc9', class: "form-group d-flex flex-column" }, h("div", { key: '7b3b935921448a4e46d864dc933f5fd7c63ead93', class: "d-flex align-items-start gap-2" }, h("label", { key: '5f1e6608b4bed90aadbf8ee6c45d6f92fa40d429', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '831be18cf54359800498a91ff4d0f8111feb0603', helpText: this.helpText })), h("input", { key: '5541ad6ba3a84e1bced7b61429c93b1d3b3632df', 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: '10231eb3448127011aca32c2e653d7974ab27e2e', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: '7c93f4e7fc3354479bd688e9a386948dc3b349de', 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

@@ -1,82 +1,69 @@
 import { Host, h, } from "@stencil/core";
-import IMask from "imask";
-import { CURRENCY_MASK } from "../../utils/form-input-masks";
-import { FormControlErrorText, FormControlHelpText } from "../../ui-components";
-import { inputDisabled, inputFocused, inputGroup, inputInvalid, label, text } from "../../styles/parts";
+import { FormControlErrorText, FormControlHelpText } from "..";
+import { input, inputDisabled, inputFocused, inputInvalid, label, text } from "../../styles/parts";
+import { formatCurrency } from "../../utils/utils";
 export class MonetaryInput {
     constructor() {
-        this.imask = null;
-        this.initializeIMask = () => {
-            if (!this.textInput)
-                return;
-            this.imask = IMask(this.textInput, this.maskOptions);
-            this.imask.on('accept', () => {
-                const rawValue = this.imask.unmaskedValue;
-                this.inputHandler(this.name, rawValue);
-                this.formControlInput.emit({ name: this.name, value: rawValue });
-            });
-            this.textInput.addEventListener('blur', () => this.formControlBlur.emit());
+        this.formatRawValue = (value) => {
+            // Remove everything from that is not a number.
+            // This will parse out our display formatting as well as prevent users from entering non-numeric characters.
+            const formattedValue = value.replace(/\D/g, '');
+            return formattedValue;
         };
-        this.handleFormControlInput = (event) => {
-            const target = event.target;
-            const name = target.getAttribute('name');
-            const rawValue = this.imask.unmaskedValue;
-            this.formControlInput.emit({ name: name, value: rawValue });
+        this.formatDisplayValue = (value) => {
+            return formatCurrency(+value, undefined, true);
         };
         this.updateInput = (newValue) => {
-            if (this.imask) {
-                this.imask.value = String(newValue);
-            }
+            const name = this.formControl.name;
+            const formatRawValue = this.formatRawValue(newValue); // "100000"
+            this.formControl.value = this.formatDisplayValue(formatRawValue); // "1,000.00"
+            this.inputHandler(name, formatRawValue);
+            this.formControlInput.emit({ name: name, value: formatRawValue });
         };
         this.isFocused = false;
-        this.label = undefined;
         this.name = undefined;
+        this.label = undefined;
+        this.inputHandler = undefined;
+        this.defaultValue = '0';
         this.helpText = undefined;
         this.errorText = undefined;
-        this.defaultValue = undefined;
-        this.inputHandler = undefined;
-        this.maskOptions = CURRENCY_MASK.DECIMAL;
+        this.maxLength = undefined;
+        this.keyDownHandler = undefined;
         this.disabled = undefined;
     }
     handleDefaultValueChange(newValue) {
         this.updateInput(newValue);
     }
     componentDidLoad() {
-        this.initializeIMask();
         this.updateInput(this.defaultValue);
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
-    }
     get part() {
-        let part = inputGroup;
         if (this.errorText) {
-            part = inputInvalid;
+            return inputInvalid;
         }
         if (this.disabled) {
-            part = inputDisabled;
+            return inputDisabled;
         }
         if (this.isFocused) {
-            part = inputFocused;
+            return inputFocused;
         }
-        return part;
+        return input;
     }
     render() {
-        return (h(Host, { key: '8389bbed996b97a2e4c7536a3f31f8b4873651e4' }, h("div", { key: '0cc9d812e034c7017ea49fdb91bcd399ac3112cc', class: "form-group d-flex flex-column" }, h("label", { key: '04bf1b6ab410d6236a8d2ea47364c844a557f3fc', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: 'bc77863e0a0dc4472c62d98fbca50da4b683b14d', class: "input-group" }, h("span", { key: '28e7f0f65529fab762846711cf681b105546a04d', class: "input-group-text", part: text }, "$"), h("input", { key: 'edfac6a9f10b1914299a6f42497ebb26659717d3', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '58676b687868b5a2d242bc929cae09afb5ae6fbf' }, h("div", { key: '8046cc1e2fa66c5601e370e6dccfa25714649823', class: "form-group d-flex flex-column" }, h("label", { key: 'e4b085b30ee0c7b884204fa9bf467875247bcac0', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '79bf26bc54c9cc94fedd3af56779de1554e62ce2', name: this.name, helpText: this.helpText }), h("div", { key: '453cb229e64e9429a26b38ffa62693793e5e48f8', class: "input-group" }, h("span", { key: '663753b8d9c6a098326bd325822586c704624bc4', class: "input-group-text", part: text }, "$"), h("input", { key: '9314ad2b99762df1a46c0e0f4632da4a091c59ef', ref: el => this.formControl = 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: '9c28f25c98432c07678698e53b219d17d3d847a7', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '8cd3f89e1efd87fd0209cb5e6cd525b916de073a', errorText: this.errorText, name: this.name }))));
+            }, onInput: (event) => this.updateInput(event.target.value), 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: '382864114f66187237ce08c12afb13abed2c298d', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {
         return {
-            "label": {
-                "type": "string",
+            "name": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
@@ -85,10 +72,10 @@ export class MonetaryInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "attribute": "name",
                 "reflect": false
             },
-            "name": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -102,10 +89,25 @@ export class MonetaryInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "name",
+                "attribute": "label",
                 "reflect": false
             },
-            "helpText": {
+            "inputHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(name: string, value: string) => void",
+                    "resolved": "(name: string, value: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "defaultValue": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -119,10 +121,11 @@ export class MonetaryInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "help-text",
-                "reflect": false
+                "attribute": "default-value",
+                "reflect": false,
+                "defaultValue": "'0'"
             },
-            "errorText": {
+            "helpText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -136,10 +139,10 @@ export class MonetaryInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-text",
+                "attribute": "help-text",
                 "reflect": false
             },
-            "defaultValue": {
+            "errorText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -148,46 +151,45 @@ export class MonetaryInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "default-value",
+                "attribute": "error-text",
                 "reflect": false
             },
-            "inputHandler": {
-                "type": "unknown",
+            "maxLength": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "(name: string, value: string) => void",
-                    "resolved": "(name: string, value: string) => void",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "attribute": "max-length",
+                "reflect": false
             },
-            "maskOptions": {
-                "type": "any",
+            "keyDownHandler": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "(event: any) => void",
+                    "resolved": "(event: any) => void",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
-                },
-                "attribute": "mask-options",
-                "reflect": false,
-                "defaultValue": "CURRENCY_MASK.DECIMAL"
+                }
             },
             "disabled": {
                 "type": "boolean",
@@ -198,7 +200,7 @@ export class MonetaryInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""

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: '33803369123a612e3a59159eca88fa851cc4bdda' }, h("div", { key: '4ec22ee1c45e050bb3c82465620f4195f0ee9f78', class: "form-group d-flex flex-column" }, h("div", { key: '54f8150c131f9e1d591e893ff850014f986ca4ce', class: "d-flex align-items-start gap-2" }, h("label", { key: '10adc8be977ddc13488f86e62d43e15cc27e8061', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'db05a1e10871fcb9cf7bf425963b57a802e8258b', helpText: this.helpText })), h("input", { key: '05e6000baf931e6bd51eb44a149613bdad453080', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: '66b0cdf1f36db4f18500eefb0886259be01baa3c' }, h("div", { key: '8ea85512273929a0bccca3528863dc8aef57dd1b', class: "form-group d-flex flex-column" }, h("div", { key: '88db52b833bc4ad284316eedcd966425ed915daf', class: "d-flex align-items-start gap-2" }, h("label", { key: 'afbf8d666bbd2f81800b4e19461e64fed9af5167', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '9735983927db2fe6922a2058262b9aeb6df94d73', helpText: this.helpText })), h("input", { key: 'afec9c2a3fb573a5b86839a241ff9de0f59f65be', 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: '82ec36209485f448694614454cbddfffa1acca9e', 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: 'af0e7ae5efb2821634428f3fea22f16a7e58b430', 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: 'bd8c24f0c1209334fde787d8dc7402e75ea1d91b' }, h("div", { key: 'd49ef47d17045ab070005a04a9edc5b11ba1b879', class: 'form-group d-flex flex-column' }, h("label", { key: '49bfca8efbaa753dae1f862f5490ab8943c6a9fd', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '3b4ef4300374a4cdd37f85e2155fcc26d357fdca', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '30aed88fe8d8ecf3a8fa36b8d8cd615b82e4cc01' }, h("div", { key: '025ac654d3de4869242a0ce294e95d7aa83e4e01', class: 'form-group d-flex flex-column' }, h("label", { key: 'fecb388595436046b1719870b4745c685d39eccc', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '95033125ca4973a6e7484d60b57350250647e3cc', 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: '4bdb8dc58c7143ccdbcd50568784b62217459ba9', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '0e5a0df13a356fe03dc389fc4bf6eba9000597fc', 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: '471b88b189e0046871010e780ccd560c80f1c764', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'b0d1b87f51482daa6ded4eeedcaffda8e863b3af', 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: '6ac053e94a211ac008c55ae97f3e1b22d76a9557', class: 'form-group d-flex flex-column' }, h("div", { key: 'fe44896b709219947f63d47ea3c8318bd7649bc0', class: "form-check" }, h("input", { key: 'c56759dc4c85da7cbb2e62b6a7eb2648cd42c278', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'e226d9098a8b2790320222699b3efcd510d6aa88', class: 'form-group d-flex flex-column' }, h("div", { key: '2a295d96e1f4dc8a8aaa71fbf07a10af65801366', class: "form-check" }, h("input", { key: 'f564dfc06ea6b86103c39340d63911ba1a9b7f1e', 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: '97949ce6465290e528e21575d3fbd4785c3568a7', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: 'd521e8eae3d7602f59934373c36dab803fcdefd3', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2851bc02a7fbb665086e54f2fade679c357d34e6', errorText: this.errorText, name: this.name })));
+            }, 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: '7c44f86c6320e5abdf1215982ba77e0d02daef35', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '20f3ddc825fab11e35fd96f6a5b708650f168e23', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '12c7997266c559850c431bb3091504c419b7f5de', 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

@@ -43,10 +43,10 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'f55283c73225466b10cec78e6e5ff1c268142d1b' }, h("div", { key: '48beb377ca664b867598f8e472a3bb4825aecf9b', class: "form-group d-flex flex-column" }, h("div", { key: '13debfb6a725d7f247eb5601e3361a3964b826e9', class: "d-flex align-items-start gap-2" }, h("label", { key: '15ac64fb03a5c1cb8f55c18bd7eb41d66328e599', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3d8b43ed6e997234f7c64daf41b2286bec93340e', helpText: this.helpText })), h("select", { key: '1c3eb5699a0b76c694a02fe50e8070483b2960e6', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'af57c4172958175f90c0b4fc60c7a0b6c5f16b70' }, h("div", { key: '96f1889ffdfd2501e0f598ef4d73634f88301f8d', class: "form-group d-flex flex-column" }, h("div", { key: '3ad3e13eb068b829974d3a738a9ffd9432ea74bc', class: "d-flex align-items-start gap-2" }, h("label", { key: '1effbf4eeb10922f49af14627aef2cee5ed2f23e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a1b9cb3152356f8e3d762b72dc8e7862183e925f', helpText: this.helpText })), h("select", { key: 'd2cfee2048fc3f3f352f065d6c1979b617baf805', 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: 'd223fd1fad44de99812b0e3a3429e3931b798c2c', 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: '036090be3ce8ab66abe46395fae7d680c5730783', 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

@@ -45,10 +45,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'fde1ad44fc7048a5387f1b4cbaef5e33a4c835e9' }, h("div", { key: '6b91df1b992a5505b490fff460d21f4a9d12a816', class: "form-group d-flex flex-column" }, h("div", { key: '2605c7cbe333c8b68f861c44ca72e4b0cbd647c8', class: "d-flex align-items-start gap-2" }, h("label", { key: '603202cacc1ae6ea0210e6600791f7a9c9e87777', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a3024f26b2ab58737422f644714cc2ee36933ac0', helpText: this.helpText })), h("input", { key: '46c19900a311b88b41c25533d6a6d4cbbb727be5', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '1dec875457354695f83386e1644e60590c12779e' }, h("div", { key: '78f295fddd56b9696077ad3a2fcb766b9b6135bd', class: "form-group d-flex flex-column" }, h("div", { key: '5c758bbca8097ec33596366638adff845f4f7b46', class: "d-flex align-items-start gap-2" }, h("label", { key: '31576778adaf535b52584b1643e1cae3699e76c4', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '328deeda6bbedb37624aad6730d7dd3a9dcc0f1a', helpText: this.helpText })), h("input", { key: 'ac141a2e464e1b0caf10c1434f03744c4e2c557c', 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: '1f4d9ba0fe5df28d0c576b5501df94350eeddeee', 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: '2e826f44513b7f1c8a2eb40cf6141f3e34509ec7', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {