@justifi/webcomponents 6.10.4 → 6.12.0

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

@@ -81,7 +81,7 @@ export class TerminalOrdersListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '165e4a32d1a9c08e52576b5bc29ccfcefe36c901' }, h(TableComponent, { key: '6fec3d331f481b0fe6488280a92218e5d8fc1f77' }, h(TableHead, { key: 'be6a58cf42340c57a69d318505303b2b57dda95f' }, h(TableHeadRow, { key: '9494a04cae6813f97aa12ed4e55c895e94b65bbc' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: '565f3c2926faf4ae3df467a2cb821d2eefeb3aeb' }, h(TableLoadingState, { key: 'efe1df2bb6f265f55c32f00eb96db9de0345b4fa', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'eefada1295540978a343b57e9c9f8db682d8e253', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: 'd9573a23d48c3f9fa9ae058fed10c9ff86b0f8d1', 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: 'e2886d185e242403135d728462cfa662e505eaf6' }, h(TableFootRow, { key: 'febff4f8d1c4a5788af0e6516089fb8e6a834225' }, h(TableFootCell, { key: 'd2a8c50a3180677d369994a1696a32ab53dbe062', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '5aa06ad17ef486e90057df7665e872ea86ecc097', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'f5539d7232ffae0622211694f56cccb41138c02d' }, h(TableComponent, { key: '1bc37edeb7bc456c911037f36fef12104ad10f7e' }, h(TableHead, { key: '2996ee96df8a41716a8439e73079198883a9995a' }, h(TableHeadRow, { key: '8553c2e768f8c7e45b81ca5bc58854f83b924510' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: '480a71ee3bd46b05529d5f13559623aff0fbcc9e' }, h(TableLoadingState, { key: '1d8775dc53fc2ce68eef0cd2a74507f2ca761966', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '85d296df5357b39d367c18483b95671cda80c584', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '234dca2f99c174127834fd0c0709771e0a8e0fd8', 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: '3f8867b439f2e258f2b861b363e4e6ddcc519425' }, h(TableFootRow, { key: 'c9b64263c7047b28eb4a4319a7285bee7898fc56' }, h(TableFootCell, { key: '98c6a8a9d429e5d67657fcc20ffe1304c1312459', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: 'f7ebd8cb669c409581ccee316effd0745afacb13', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "terminal-orders-list-core"; }
     static get properties() {

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

@@ -4,8 +4,8 @@ import { convertToLocal, convertToUTC } from "../../utils/utils";
 import { filterParams, propsParams, clearParams } from "./terminals-list-params-state";
 import { StyledHost } from "../../ui-components";
 import { ITerminalStatus } from "../../api";
-import { terminalsListFilterMenu, terminalIdTerminalsListFilterParam, terminalOrderIdTerminalsListFilterParam, terminalStatusTerminalsListFilterParam, createdAfterTerminalsListFilterParam, createdBeforeTerminalsListFilterParam } from "../../styles/parts";
-export class TerminalsListFilters {
+import { filterMenu, filterParam } from "../../styles/parts";
+export class JustifiTerminalsListFilters {
     constructor() {
         this.setParamsOnChange = (name, value) => {
             filterParams[name] = value;
@@ -22,6 +22,8 @@ export class TerminalsListFilters {
             terminal_id: this.terminalId,
             status: this.terminalStatus,
             terminal_order_id: this.terminalOrderId,
+            provider_id: this.providerId,
+            serial_number: this.serialNumber,
             created_after: this.createdAfter,
             created_before: this.createdBefore
         };
@@ -43,7 +45,7 @@ export class TerminalsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '0d4ac75610bd23b78f079d4f4eaf45345fa48cd4' }, h("table-filters-menu", { key: 'c580d67c2c1c95fdbfaa50ea355206d8772c8440', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '9d2d456d0806c48f73c9a035ca0f8f618390c644', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '93e926024eaaa5bc511c8c51daa8bab9704d8c89', class: "p-2" }, h("form-control-text", { key: 'c19f3177124b48882245ce4d11ef7735bb9cfd28', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '78fc5aa6166a6e1a7f768584e73212dca1348461', class: "p-2" }, h("form-control-text", { key: 'd1ab7159dff99ca779fd4e3cd19e1c247cea2ec4', 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: '379f81c0242ceffc472cb5d502cebb0606f2d8c3', class: "p-2" }, h("form-control-select", { key: 'f5e7ed2157eacef4ab8ae560c15680b66049a044', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status || '', disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam })), h("div", { key: 'dc39eea94a616f40e896e9ce4c19e1d812419188', class: "p-2" }, h("form-control-date", { key: '403667bf603268954cc3982ba66d47badbcce911', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter || filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterTerminalsListFilterParam })), h("div", { key: '8a5ac2f05771f42b971e721277476194e2e92f4e', class: "p-2" }, h("form-control-date", { key: 'ae4d9ef25a06a319bdddda5c7023a69b9610ad49', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore || filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforeTerminalsListFilterParam }))))));
+        return (h(StyledHost, { key: 'a74ed2422b669401402664c77542412f3763ba76' }, h("table-filters-menu", { key: '9158ca6884cb610dc712fb1b3a69ca6803a7dce7', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: 'e24cfc9c7f078f9eb7d5f1f5b4d5cef8374378ce', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'cce1419064f7e7cdc687437416327f7daebe5eae', class: "p-2" }, h("form-control-text", { key: '750c30bc7e281f40646bdfaf0a29393d0ce7f72b', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: filterParam })), h("div", { key: '512ccc43edb3aab2ec6ab7d9c76bebf6369df73d', class: "p-2" }, h("form-control-text", { key: '6320c75ecd89ad00162c764998c1c703a5965787', 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: '6f0d58b200a36516ede61609aad03ca191f240c2', class: "p-2" }, h("form-control-text", { key: 'f786e9fbbd7c9604429c5f43935121245f2943d2', name: "provider_id", label: "Device ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.providerId || filterParams.provider_id, disabled: !!this.providerId, part: filterParam })), h("div", { key: 'b4d84761c2f5de192669012acc41bb5ba2b76750', class: "p-2" }, h("form-control-text", { key: 'deb1c3b5cc3b72b2724a296b1024f8f66ae69683', name: "serial_number", label: "Serial Number", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.serialNumber || filterParams.serial_number, disabled: !!this.serialNumber, part: filterParam })), h("div", { key: 'b90c15ba9fa6bbe5eac425152753d1cb508b1710', class: "p-2" }, h("form-control-select", { key: 'beb78ebcd076b7b26a0cb5115ae9b619584fc307', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status || '', disabled: !!this.terminalStatus, part: filterParam })), h("div", { key: 'e6109b7758b998d41d2ff555bf26ee9de1011c94', class: "p-2" }, h("form-control-date", { key: 'e407111678baea094666e8789175ce15d40c2ee8', 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: 'edc59eb19b58592803ffba665adae26d34fdfe0c', class: "p-2" }, h("form-control-date", { key: '21c995d7eef08082ca7996eaf9286aeaa80fd2e9', 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"; }
@@ -87,6 +89,44 @@ export class TerminalsListFilters {
                 "reflect": false,
                 "attribute": "terminal-order-id"
             },
+            "providerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "provider-id"
+            },
+            "serialNumber": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "serial-number"
+            },
             "terminalStatus": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/terminals-list/{terminals-list.js → justifi-terminals-list.js}

@@ -8,7 +8,7 @@ import { SubAccountService } from "../../api/services/subaccounts.service";
 import { StyledHost } from "../../ui-components";
 import { defaultColumnsKeys } from "./terminals-table";
 import { makeGetSubAccounts } from "../../actions/sub-account/get-subaccounts";
-export class TerminalsList {
+export class JustifiTerminalsList {
     constructor() {
         this.errorMessage = null;
         this.columns = defaultColumnsKeys;
@@ -61,7 +61,7 @@ export class TerminalsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'dde640eb10f9e0f8e817afed66410042642b47e6' }, h("terminals-list-core", { key: '7e6a67f075c10cdedcd6e133aeedcd2fa9ba45ad', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '4e900ef9f56434c1e7dcb905d9110ab85d995dca' }, h("terminals-list-core", { key: 'ea56fdc9c9274b092ed370a1b5d67eaefd893c21', 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-list-core.js

@@ -118,7 +118,7 @@ export class TerminalsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '73696e93d767ca2ce57663c49e5db63a0f4978c2' }, h(TableComponent, { key: '4a70e805379f666560fce4d0c4f98217e6f371cc' }, h(TableHead, { key: '8dd564e628a29b076ee896289abd7952933694ee' }, h(TableHeadRow, { key: '99672e6b3df7d9105b29bfcf8881669c79d522ef' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: '347c3cf280897589cbe616bd19af68fad3c83bc0' }, h(TableLoadingState, { key: 'd82d2bb2c34aa673b6a9f307c18184b6ca51047f', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'df70204e1a316aa7208407880e1b37305a74f018', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '2078ff1f374cb352069a5efee111303d18fac65f', 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: 'b1ff579488cf7d238373c347066bf8537f6aebb1' }, h(TableFootRow, { key: '04d02b83cda0d175f13c8848db19c5cb9b9682a1' }, h(TableFootCell, { key: 'ac311f37baabc3ea2cb0d60bc5b1c54f4638a8e2', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: 'deeab93ca320e3cc3a33926468b9652f3a9aa3a5', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '02998f36781eed9ef569cc2214b257beac0948fd' }, h(TableComponent, { key: '02f9eae9ac123b8147648f2f17eb2d4835fbf62c' }, h(TableHead, { key: '212c06a2f14cd1407d653d03d00bfff1eeb7e254' }, h(TableHeadRow, { key: '2bc532ffe62e4fba60ae4545102ea156e31c01fc' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: '0791432813e6ed171d39d0615e61e8083544c0ab' }, h(TableLoadingState, { key: 'f21849ccae8af62b3710b826afc2742b68c0556f', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '61ce65b0a5f7fde9fffec510fe139586e3422a50', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '90981407df2e2f815ad8c91cec6c98db13e4a95c', 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: 'a3756808eb67e6d7cb38dac53d31b781c5aea090' }, h(TableFootRow, { key: '6526d2d7e29c1bcbb0613ebe1cf1317d643885c8' }, h(TableFootCell, { key: '270b17f77ddb10bc1ee5356b113049771819b908', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '94e8ce60d5a9576708a51a1ce02c50f3609cc7af', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "terminals-list-core"; }
     static get properties() {

package/dist/collection/components/tokenize-payment-method/{internal-tokenize-payment-method.js → justifi-tokenize-payment-method.js}

@@ -16,7 +16,7 @@ const ERROR_MESSAGES = {
     FORM_NOT_READY: 'Payment form not ready',
     VALIDATION_ERROR: 'Validation error',
 };
-export class InternalTokenizePaymentMethod {
+export class JustifiTokenizePaymentMethod {
     constructor() {
         this.computedHideSubmitButton = false;
         this.isLoading = false;
@@ -44,10 +44,6 @@ export class InternalTokenizePaymentMethod {
         this.selectedPaymentMethod = event.detail;
         checkoutStore.selectedPaymentMethod = { type: event.detail };
     }
-    async fillBillingForm(fields) {
-        var _a;
-        (_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
-    }
     async tokenizePaymentMethod(event) {
         event === null || event === void 0 ? void 0 : event.preventDefault();
         this.validateRequiredProps();
@@ -85,6 +81,9 @@ export class InternalTokenizePaymentMethod {
             this.isLoading = false;
         }
     }
+    async fillBillingForm(fields) {
+        checkoutStore.billingFormFields = fields;
+    }
     async validate() {
         if (!this.areFormsReady()) {
             return { isValid: false, errors: { general: ERROR_MESSAGES.FORM_NOT_READY } };
@@ -99,6 +98,9 @@ export class InternalTokenizePaymentMethod {
         };
         return result;
     }
+    async getValues() {
+        return this.billingFormRef.getValues();
+    }
     async tokenize() {
         try {
             const billingFormFieldValues = await this.billingFormRef.getValues();
@@ -107,7 +109,8 @@ export class InternalTokenizePaymentMethod {
                 account: this.accountId || checkoutStore.accountId,
                 paymentMethodMetadata: this.buildPaymentMethodMetadata(billingFormFieldValues),
             };
-            return await this.paymentMethodFormRef.tokenize(config);
+            const result = await this.paymentMethodFormRef.tokenize(config);
+            return result;
         }
         catch (error) {
             return error;
@@ -218,10 +221,11 @@ export class InternalTokenizePaymentMethod {
             return { error: tokenizeResponse.error };
         }
         const tokenizeResponseData = tokenizeResponse.data;
-        return {
+        const result = {
             token: ((_a = tokenizeResponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeResponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token),
             data: tokenizeResponseData,
         };
+        return result;
     }
     buildPaymentMethodMetadata(billingFormFieldValues) {
         return this.shouldSavePaymentMethod
@@ -238,18 +242,28 @@ export class InternalTokenizePaymentMethod {
     }
     renderPaymentMethodOption(paymentMethodType) {
         const isSelected = this.selectedPaymentMethod === paymentMethodType && checkoutStore.selectedPaymentMethod.id === undefined;
-        return (h("div", { class: "payment-method" }, h("justifi-radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
+        return (h("div", { class: "payment-method" }, h("radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
     }
     renderSelectedPaymentMethodForm(paymentMethodType) {
-        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodType), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType })), h("div", { class: "mt-4" }, h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID, label: this.savePaymentMethodLabel }))));
+        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodType), h("div", { class: "mt-4" }, h("billing-form", { ref: (el) => {
+                if (el)
+                    this.billingFormRef = el;
+            }, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType })), h("div", { class: "mt-4" }, h("save-new-payment-method", { hidden: !this.paymentMethodGroupID, label: this.savePaymentMethodLabel }))));
     }
     renderPaymentMethodForm(paymentMethodType) {
-        return paymentMethodType === PAYMENT_METHODS.NEW_CARD ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
+        return paymentMethodType === PAYMENT_METHODS.NEW_CARD ? (h("card-form", { ref: (el) => {
+                if (el)
+                    this.paymentMethodFormRef = el;
+            } })) : (h("bank-account-form", { ref: (el) => {
+                if (el)
+                    this.paymentMethodFormRef = el;
+            } }));
     }
     render() {
-        return (h(StyledHost, { key: 'bb6a2e0eec485c96a756c504a278670804be0634' }, h("form", { key: 'f12f65c8fbe45e86418be9d3c2ff1107e292c86d' }, h("fieldset", { key: 'becda77faf80fd8b1e6d967cc4ead3d4adc3b6e8' }, h("div", { key: '0419c1843747f59e68800ae3e2c78096b32605b0', class: "row gy-3" }, h("div", { key: '8724f40a13bc62808f6e99cced2f8d7419b22d53', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'ec9c0e2f6a85976d68e3dc939cd2826bfbd840d8', class: "col-12" }, h("justifi-button", { key: '1c4b6a83c8357e15eaba071ea2fb8ba82b4c978c', 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 "internal-tokenize-payment-method"; }
+    static get is() { return "justifi-tokenize-payment-method"; }
+    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "accountId": {
@@ -499,12 +513,12 @@ export class InternalTokenizePaymentMethod {
     }
     static get methods() {
         return {
-            "fillBillingForm": {
+            "tokenizePaymentMethod": {
                 "complexType": {
-                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "signature": "(event?: MouseEvent) => Promise<PaymentMethodPayload>",
                     "parameters": [{
-                            "name": "fields",
-                            "type": "BillingFormFields",
+                            "name": "event",
+                            "type": "MouseEvent",
                             "docs": ""
                         }],
                     "references": {
@@ -512,25 +526,34 @@ export class InternalTokenizePaymentMethod {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "BillingFormFields": {
+                        "PaymentMethodPayload": {
+                            "location": "import",
+                            "path": "../checkout/payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
+                        },
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        },
+                        "ComponentErrorCodes": {
                             "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::BillingFormFields"
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorCodes"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<PaymentMethodPayload>"
                 },
                 "docs": {
                     "text": "",
                     "tags": []
                 }
             },
-            "tokenizePaymentMethod": {
+            "fillBillingForm": {
                 "complexType": {
-                    "signature": "(event?: MouseEvent) => Promise<PaymentMethodPayload>",
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
                     "parameters": [{
-                            "name": "event",
-                            "type": "MouseEvent",
+                            "name": "fields",
+                            "type": "BillingFormFields",
                             "docs": ""
                         }],
                     "references": {
@@ -538,22 +561,13 @@ export class InternalTokenizePaymentMethod {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "PaymentMethodPayload": {
-                            "location": "import",
-                            "path": "../checkout/payment-method-payload",
-                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
-                        },
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        },
-                        "ComponentErrorCodes": {
+                        "BillingFormFields": {
                             "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::ComponentErrorCodes"
+                            "path": "../checkout/billing-form/billing-form-schema",
+                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },
-                    "return": "Promise<PaymentMethodPayload>"
+                    "return": "Promise<void>"
                 },
                 "docs": {
                     "text": "",
@@ -581,6 +595,28 @@ export class InternalTokenizePaymentMethod {
                     "tags": []
                 }
             },
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<BillingFormFields>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../checkout/billing-form/billing-form-schema",
+                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<BillingFormFields>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "tokenize": {
                 "complexType": {
                     "signature": "() => Promise<any>",

package/dist/collection/styles/parts.js

@@ -111,43 +111,4 @@ export const billingForm = `billing-form`;
 export const checkoutSummary = `checkout-summary`;
 // Filters
 export const filterMenu = `filter-menu`;
-// Payments List Filters
-export const paymentsListFilterMenu = `${filterMenu} payments-list-filter-menu`;
-export const paymentsListFilterParam = `payments-list-filter-param`;
-export const paymentIdPaymentsListFilterParam = `${paymentsListFilterParam} payment-id-payments-list-filter-param`;
-export const terminalIdPaymentsListFilterParam = `${paymentsListFilterParam} terminal-id-payments-list-filter-param`;
-export const paymentStatusPaymentsListFilterParam = `${paymentsListFilterParam} payment-status-payments-list-filter-param`;
-export const paymentModePaymentsListFilterParam = `${paymentsListFilterParam} payment-mode-payments-list-filter-param`;
-export const checkoutIdPaymentsListFilterParam = `${paymentsListFilterParam} checkout-id-payments-list-filter-param`;
-export const accountHolderPaymentsListFilterParam = `${paymentsListFilterParam} account-holder-payments-list-filter-param`;
-export const createdAfterPaymentsListFilterParam = `${paymentsListFilterParam} created-after-payments-list-filter-param`;
-export const createdBeforePaymentsListFilterParam = `${paymentsListFilterParam} created-before-payments-list-filter-param`;
-// Payouts List Filters
-export const payoutsListFilterMenu = `${filterMenu} payouts-list-filter-menu`;
-export const payoutsListFilterParam = `payouts-list-filter-param`;
-export const statusPayoutsListFilterParam = `${payoutsListFilterParam} status-payouts-list-filter-param`;
-export const createdAfterPayoutsListFilterParam = `${payoutsListFilterParam} created-after-payouts-list-filter-param`;
-export const createdBeforePayoutsListFilterParam = `${payoutsListFilterParam} created-before-payouts-list-filter-param`;
-// Checkouts List Filters
-export const checkoutsListFilterMenu = `${filterMenu} checkouts-list-filter-menu`;
-export const checkoutsListFilterParam = `checkouts-list-filter-param`;
-export const statusCheckoutsListFilterParam = `${checkoutsListFilterParam} checkout-status-checkouts-list-filter-param`;
-export const paymentModeCheckoutsListFilterParam = `${checkoutsListFilterParam} payment-mode-checkouts-list-filter-param`;
-export const checkoutIdCheckoutsListFilterParam = `${checkoutsListFilterParam} checkout-id-checkouts-list-filter-param`;
-export const createdAfterCheckoutsListFilterParam = `${checkoutsListFilterParam} created-after-checkouts-list-filter-param`;
-export const createdBeforeCheckoutsListFilterParam = `${checkoutsListFilterParam} created-before-checkouts-list-filter-param`;
-// Terminals List Filters
-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`;
-export const createdAfterTerminalsListFilterParam = `${terminalsListFilterParam} created-after-terminals-list-filter-param`;
-export const createdBeforeTerminalsListFilterParam = `${terminalsListFilterParam} created-before-terminals-list-filter-param`;
-// Terminal Orders List Filters
-export const terminalOrdersListFilterMenu = `${filterMenu} terminal-orders-list-filter-menu`;
-export const terminalOrdersListFilterParam = `terminal-orders-list-filter-param`;
-export const orderStatusTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} order-status-terminal-orders-list-filter-param`;
-export const orderTypeTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} order-type-terminal-orders-list-filter-param`;
-export const createdAfterTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} created-after-terminal-orders-list-filter-param`;
-export const createdBeforeTerminalOrdersListFilterParam = `${terminalOrdersListFilterParam} created-before-terminal-orders-list-filter-param`;
+export const filterParam = `filter-param`;

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: '5f2a199c8ba46d671aecf3353d0a5e9f097ae624' }, h("style", { key: '16d49b4c455c3adc137f8084d0030198cc77addb' }, `
+        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: '6722fe951e327d7f9671df0c30a82c42887169f7', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '53f6a2dbcdf62bc4b958f3abcaa357ec86fad8cf' }))));
+          `), 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/details/{details.js → justifi-details.js}

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import { ErrorState } from "./utils";
-export class Details {
+export class JustifiDetails {
     render() {
-        return (h("div", { key: '77d9c172a85e392d3c21d7d789dd2c264858f571' }, this.errorMessage ?
+        return (h("div", { key: 'b91f85e2f62f1ea80409367208117f805299c397' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));

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

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlHelpText, FormControlErrorText } from "../../ui-components";
 import { inputCheckbox, inputCheckboxChecked, inputCheckboxCheckedFocused, inputCheckboxFocused, inputCheckboxInvalid, label } from "../../styles/parts";
-export class CheckboxInput {
+export class FormControlCheckbox {
     constructor() {
         this.isFocused = false;
         this.errorText = '';
@@ -34,10 +34,10 @@ export class CheckboxInput {
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: '56962751d91674cfeb2716ba90bb9e9751ea4f66' }, h("div", { key: 'e3bb3cac2bf8ae03fc72558b3c00ef32ee56f61d', class: 'form-group d-flex flex-column' }, h("div", { key: '7be82e8be1da073c8f0e5ca7d609ce1d29c82c5e', class: "form-check" }, h("input", { key: 'f6b5f0ed365937feeb6ee0d885c55a27f21eaec0', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'dc2fdbd7fd92a0205b15e4b302458d8f0d775b35' }, h("div", { key: 'f32f7d5cb559282cece071f3623bdab80998bc04', class: 'form-group d-flex flex-column' }, h("div", { key: '5481439484b97ad733a0051f1722a5c3ed45778d', class: "form-check" }, h("input", { key: '9e96a563e5b0b1a9589dff7eb4f3eb3038d4918b', 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: 'dda8703d86506cdd5a3b3549f3c54296830ff20f', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'a4260e0cc463ad937128d46a3eb251191319473d', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'de41ad6865a3d0414fa850ee5439cc11abf31f4f', 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: '11a27a415d7741d8a29dde8d1fd029c2e143f235', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '3e0ef15182200a48d3cf3142c3511a0ad8095db3', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'e85175ea76f6073d7ee813a3f2d8eaecc044601a', 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

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "../../ui-components";
 import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
-export class DateInput {
+export class FormControlDate {
     constructor() {
         this.isFocused = false;
         this.maxDate = this.currentDate;
@@ -42,10 +42,10 @@ export class DateInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '85a09c6f209dbfbf3fd319953e65c189a9b7459b' }, h("div", { key: 'e133720b466b49bcdfd79bf84e865b4d99d5d37d', class: "form-group d-flex flex-column" }, h("div", { key: '80e2986fb137ab7067451a9c62e685e340e32976', class: "d-flex gap-2" }, h("label", { key: 'c6402fdecf21a836987b5a8ddb597d90e21a1926', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '314f8cb1d8715da046c47b66815bf37c1506ed3e', helpText: this.helpText })), h("input", { key: '5591aa3f855ae88394fabaf127ae1fe587c7e0a5', 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: '4bde5edec967df1c66865f5f20d24fa386e261ff' }, h("div", { key: 'fa0a944cd5d06f7e705737bd7fa98d80b8fd1555', class: "form-group d-flex flex-column" }, h("div", { key: '44dcf29339d380087fe7a98173a2033d16ad6764', class: "d-flex gap-2" }, h("label", { key: '8a0a38ace6f4a3db0388013f12381d4afec000bd', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'c9105a132a81408c304ab24f08c559289d68648b', helpText: this.helpText })), h("input", { key: '7938856aa5c1dca7d6c1ce89b3318eec3055348a', 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: '39864e02b813e9a4a46f9d42c5288dea14f934b7', 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: '5e523b911d4b4810c7512c4dda63a3204eabb11a', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

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

@@ -1,13 +1,13 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "./form-helpers/form-control-error-text";
-export class FileInput {
+export class FormControlFileV2 {
     constructor() {
         this.errorText = '';
         this.inputHandler = () => { };
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '9ae20e0fa6175e68642be79ada4f3464631be680', exportparts: "label,input,input-invalid" }, h("div", { key: '607cd1269298725d8f4300f1b56adb945c361067', class: "form-group d-flex flex-column" }, h("div", { key: '5490713d71075bf5a273ec1e39d3a7db525d11ff', class: "d-flex align-items-start gap-2" }, h("label", { key: '1fcac0b30532d33c296884133991d72dfdbddd37', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e06af0a48fb6dacc82f3730fb7f39b180a3375a3', helpText: this.helpText })), h("input", { key: '7ec47dbbad4a53b3ac6f513e82c67c27ce54498c', 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: '265cfe1af1dcebdca02b538872b4f2c4a6c57309', 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

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "../../ui-components";
 import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
-export class FileInput {
+export class FormControlFile {
     constructor() {
         this.isFocused = false;
         this.errorText = '';
@@ -40,10 +40,10 @@ export class FileInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '8172f7df27c42c6d5211d29ef595dd2e4dbd9def' }, h("div", { key: '99740d980c280502242ee1cdcee2a3df6ba53146', class: "form-group d-flex flex-column" }, h("div", { key: '5fb94f2b710d5fd734172ee91b59621d736e129b', class: "d-flex align-items-start gap-2" }, h("label", { key: '12fedf016c7d789fad8692c7ae03975481964005', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '6d59be5a27d3c9a171292244fc9e9bb598b9ecce', helpText: this.helpText })), h("input", { key: '64c7d9eaa46f95714d5527cf94d28c206065a411', 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: '9610c0676934fd616fbdac08e98a102240773084', 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

@@ -2,7 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { FormControlErrorText, FormControlHelpText } from "..";
 import { input, inputDisabled, inputFocused, inputInvalid, label, inputAdornment } from "../../styles/parts";
 import { formatCurrency } from "../../utils/utils";
-export class MonetaryInput {
+export class FormControlMonetary {
     constructor() {
         this.isFocused = false;
         this.defaultValue = '0';
@@ -42,10 +42,10 @@ export class MonetaryInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '9fcce717caf2a14382e8a66c07a023ec31bffce0' }, h("div", { key: 'a5ef7195ec5904764f69c2987b1d1878a2d5be8d', class: "form-group d-flex flex-column" }, h("label", { key: '75cf2a0d4790426df3956a69ea2483aba3e232ec', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'daabe1b4779cea9af67b5bafcc8244d32bcc4775', name: this.name, helpText: this.helpText }), h("div", { key: 'fbe335cf9e131842e9218befcf51535d1012f4f1', class: "input-group" }, h("span", { key: '389b0a9697af6e81b350c41956bc36033dc151a2', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '28a854f05c8a2476002b22baf5c5958fac9a4ec2', 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: 'cfbdf17dcc9d55951ec39951f236cb0a5242e8cc', 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

@@ -2,7 +2,7 @@ import { Host, h, } from "@stencil/core";
 import IMask from "imask";
 import { FormControlErrorText } from "../../ui-components";
 import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
-export class NumberInputMasked {
+export class FormControlNumberMasked {
     constructor() {
         this.imask = null;
         this.isFocused = false;
@@ -63,10 +63,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: '6fc95da2f8a43f319b11205b6d27b5e24b1e2586' }, h("div", { key: 'b51ae7976fee61e38d6f00f31cfaa835733db5f3', class: "form-group d-flex flex-column" }, h("div", { key: '16aed34d97424e168fa74d1fdb5757537f56b4b1', class: "d-flex align-items-start gap-2" }, h("label", { key: '7b1fdf28df1ab377b1b756746fb73f42085baa42', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '391b4373fcb966ba8c65c617167f044bd0d901f1', helpText: this.helpText })), h("input", { key: 'fb893ef4da1e43f72031baef93aa2c5a3a1632b9', 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: 'b67a3581cb5058971fb2f356a181ca8f0de2a9eb', 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

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText, FormControlHelpText } from "../../ui-components";
 import { input, inputFocused, inputInvalid, inputInvalidAndFocused, label } from "../../styles/parts";
-export class NumberInput {
+export class FormControlNumber {
     constructor() {
         this.isFocused = false;
         this.disabled = false;
@@ -37,10 +37,10 @@ export class NumberInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '3438aa7e29c62b01f202cfb83f3b23c6b71d9a83' }, h("div", { key: '2af4fa9f963e16f68fe0d3a4a7ff73165946306e', class: 'form-group d-flex flex-column' }, h("label", { key: '1d7bf268b70b9be39256020873978aac019a17b7', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '4dbb9f25278df06fd483e25ba4d9855943186090', 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: 'fd72f2218b307641bcb8f3584f3b5db11303cfff', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'fb9c995763d6c3193777586a1cb485447323cd98', 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() {