@justifi/webcomponents 6.4.0 → 6.4.1

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

@@ -1,255 +1,13 @@
 import { h } from "@stencil/core";
-import { StyledHost } from "../../ui-components";
-import { checkPkgVersion } from "../../utils/check-pkg-version";
-import JustifiAnalytics from "../../api/Analytics";
-import { ComponentErrorCodes, ComponentErrorSeverity, } from "../../api";
-import { checkoutStore } from "../../store/checkout.store";
-import { PAYMENT_METHODS } from "../modular-checkout/ModularCheckout";
-// Constants
-const PAYMENT_METHOD_TYPE_LABELS = {
-    [PAYMENT_METHODS.NEW_BANK_ACCOUNT]: 'New bank account',
-    [PAYMENT_METHODS.NEW_CARD]: 'New credit or debit card',
-};
-const ERROR_MESSAGES = {
-    AUTH_TOKEN_REQUIRED: 'Auth token is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
-    ACCOUNT_ID_REQUIRED: 'Account ID is required when using the tokenize-payment-method component not slotted in justifi-modular-checkout',
-    FORM_NOT_READY: 'Payment form not ready',
-    VALIDATION_ERROR: 'Validation error',
-};
 export class TokenizePaymentMethod {
     constructor() {
-        this.computedHideSubmitButton = false;
-        this.isLoading = false;
         this.submitButtonText = 'Submit';
     }
-    paymentMethodsChanged() {
-        this.setDefaultSelectedPaymentMethod();
-    }
-    connectedCallback() {
-        this.setDefaultSelectedPaymentMethod();
-        this.setComputedHideSubmitButton();
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
-        if (this.unsubscribeFromStore) {
-            this.unsubscribeFromStore();
-        }
-    }
-    componentWillLoad() {
-        checkPkgVersion();
-        this.analytics = new JustifiAnalytics(this);
-    }
-    handleRadioClick(event) {
-        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();
-        this.isLoading = true;
-        try {
-            const validation = await this.validate();
-            if (!validation.isValid) {
-                this.errorEvent.emit({
-                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                    message: ERROR_MESSAGES.VALIDATION_ERROR,
-                });
-                this.isLoading = false;
-                return;
-            }
-            const tokenizeResponse = await this.resolvePaymentMethod({ isValid: true });
-            if (tokenizeResponse.error) {
-                this.emitError({
-                    errorCode: tokenizeResponse.error.code,
-                    message: tokenizeResponse.error.message,
-                });
-            }
-            this.submitEvent.emit({ response: tokenizeResponse });
-            return tokenizeResponse;
-        }
-        catch (error) {
-            const errorResponse = this.createErrorResponse(ComponentErrorCodes.TOKENIZE_ERROR, error.message);
-            this.emitError({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: error.message,
-            });
-            this.submitEvent.emit({ response: errorResponse });
-            return errorResponse;
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    async validate() {
-        if (!this.areFormsReady()) {
-            return { isValid: false, errors: { general: ERROR_MESSAGES.FORM_NOT_READY } };
-        }
-        const [billingValidation, paymentMethodValidation] = await Promise.all([
-            this.billingFormRef.validate(),
-            this.paymentMethodFormRef.validate(),
-        ]);
-        const result = {
-            isValid: billingValidation.isValid && paymentMethodValidation.isValid,
-            errors: Object.assign(Object.assign({}, billingValidation.errors), paymentMethodValidation.errors),
-        };
-        return result;
-    }
-    async tokenize() {
-        try {
-            const billingFormFieldValues = await this.billingFormRef.getValues();
-            const config = {
-                clientId: this.authToken || checkoutStore.authToken,
-                account: this.accountId || checkoutStore.accountId,
-                paymentMethodMetadata: this.buildPaymentMethodMetadata(billingFormFieldValues),
-            };
-            return await this.paymentMethodFormRef.tokenize(config);
-        }
-        catch (error) {
-            return error;
-        }
-    }
-    // 9. Local methods
-    validateRequiredProps() {
-        if (!this.authToken && !checkoutStore.authToken) {
-            this.emitError({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: ERROR_MESSAGES.AUTH_TOKEN_REQUIRED,
-            });
-        }
-        if (!this.accountId && !checkoutStore.accountId) {
-            this.emitError({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: ERROR_MESSAGES.ACCOUNT_ID_REQUIRED,
-            });
-        }
-    }
-    setDefaultSelectedPaymentMethod() {
-        if (this.selectedPaymentMethod) {
-            return;
-        }
-        if (!this.disableCreditCard) {
-            this.selectedPaymentMethod = PAYMENT_METHODS.NEW_CARD;
-            checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.NEW_CARD };
-        }
-        else if (!this.disableBankAccount) {
-            this.selectedPaymentMethod = PAYMENT_METHODS.NEW_BANK_ACCOUNT;
-            checkoutStore.selectedPaymentMethod = { type: PAYMENT_METHODS.NEW_BANK_ACCOUNT };
-        }
-    }
-    setComputedHideSubmitButton() {
-        // If hideSubmitButton prop is explicitly set, use that value
-        if (this.hideSubmitButton !== undefined) {
-            this.computedHideSubmitButton = this.hideSubmitButton;
-            return;
-        }
-        // Otherwise, auto-detect if component is slotted within modular-checkout
-        const isWithinModularCheckout = this.isSlottedWithinModularCheckout();
-        this.computedHideSubmitButton = isWithinModularCheckout;
-    }
-    isSlottedWithinModularCheckout() {
-        var _a;
-        let parent = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement;
-        while (parent) {
-            if (parent.tagName === 'JUSTIFI-MODULAR-CHECKOUT') {
-                return true;
-            }
-            parent = parent.parentElement;
-        }
-        return false;
-    }
-    get availablePaymentMethods() {
-        const methods = [];
-        if (!this.disableCreditCard) {
-            methods.push(PAYMENT_METHODS.NEW_CARD);
-        }
-        if (!this.disableBankAccount) {
-            methods.push(PAYMENT_METHODS.NEW_BANK_ACCOUNT);
-        }
-        return methods;
-    }
-    areFormsReady() {
-        return !!(this.billingFormRef && this.paymentMethodFormRef);
-    }
-    emitError(errorData) {
-        this.errorEvent.emit(Object.assign(Object.assign({}, errorData), { severity: ComponentErrorSeverity.ERROR }));
-    }
-    createErrorResponse(code, message) {
-        return {
-            error: {
-                code: code,
-                message,
-                decline_code: undefined,
-            },
-        };
-    }
-    async resolvePaymentMethod(insuranceValidation) {
-        if (!this.areFormsReady()) {
-            return this.createErrorResponse('form_not_ready', ERROR_MESSAGES.FORM_NOT_READY);
-        }
-        try {
-            const validation = await this.validate();
-            if (!validation.isValid || !insuranceValidation.isValid) {
-                const errorMessage = Object.values(validation.errors)[0] || ERROR_MESSAGES.VALIDATION_ERROR;
-                return {
-                    validationError: true,
-                    error: {
-                        code: 'validation_error',
-                        message: String(errorMessage),
-                        decline_code: undefined,
-                    },
-                };
-            }
-            const result = await this.performTokenization();
-            return result;
-        }
-        catch (error) {
-            return { error };
-        }
-    }
-    async performTokenization() {
-        var _a, _b;
-        const tokenizeResponse = await this.tokenize();
-        if (tokenizeResponse.error) {
-            return { error: tokenizeResponse.error };
-        }
-        const tokenizeResponseData = tokenizeResponse.data;
-        return {
-            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,
-        };
-    }
-    buildPaymentMethodMetadata(billingFormFieldValues) {
-        return this.shouldSavePaymentMethod
-            ? Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupID }) : Object.assign({}, billingFormFieldValues);
-    }
-    get paymentMethodGroupID() {
-        return this.paymentMethodGroupId || checkoutStore.paymentMethodGroupId;
-    }
-    get shouldSavePaymentMethod() {
-        return !!(this.paymentMethodGroupId || checkoutStore.savePaymentMethod);
-    }
-    get shouldHideRadioInput() {
-        return this.disableCreditCard || this.disableBankAccount;
-    }
-    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)));
-    }
-    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 }))));
-    }
-    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) }));
-    }
     render() {
-        return (h(StyledHost, { key: '805537f9c210dd7d2cd6fa101659c143d716e187' }, h("form", { key: 'c05caa0149784c7653021eb58b8eb41e1119e93c' }, h("fieldset", { key: '885abce69e70089d9841b9f866b41f9469a84437' }, h("div", { key: '0411d66e395077e3442dacab459f6c9150d16d4e', class: "row gy-3" }, h("div", { key: '1fa3dd928574a04b22ccca6a1727d4c8d602eea7', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'ec3db8e32cd0c6205992225df7e7c317e9d2a7b0', class: "col-12" }, h("justifi-button", { key: '0eaba5f83caaf693fb110dfabfb78e2898d946df', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+        return (h("internal-tokenize-payment-method", { key: 'beaba92e0f749536b4d8cabb2f58ed20dc056c8c', authToken: this.authToken, accountId: this.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: this.hideSubmitButton, paymentMethodGroupId: this.paymentMethodGroupId }));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
+    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "accountId": {
@@ -445,182 +203,4 @@ export class TokenizePaymentMethod {
             }
         };
     }
-    static get states() {
-        return {
-            "computedHideSubmitButton": {},
-            "isLoading": {},
-            "selectedPaymentMethod": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "errorEvent",
-                "name": "error-event",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "ComponentErrorEvent",
-                    "resolved": "ComponentErrorEvent",
-                    "references": {
-                        "ComponentErrorEvent": {
-                            "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::ComponentErrorEvent"
-                        }
-                    }
-                }
-            }, {
-                "method": "submitEvent",
-                "name": "submit-event",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "ComponentSubmitEvent",
-                    "resolved": "ComponentSubmitEvent",
-                    "references": {
-                        "ComponentSubmitEvent": {
-                            "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::ComponentSubmitEvent"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "fillBillingForm": {
-                "complexType": {
-                    "signature": "(fields: BillingFormFields) => Promise<void>",
-                    "parameters": [{
-                            "name": "fields",
-                            "type": "BillingFormFields",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "BillingFormFields": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::BillingFormFields"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "tokenizePaymentMethod": {
-                "complexType": {
-                    "signature": "(event?: MouseEvent) => Promise<PaymentMethodPayload>",
-                    "parameters": [{
-                            "name": "event",
-                            "type": "MouseEvent",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "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": {
-                            "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::ComponentErrorCodes"
-                        }
-                    },
-                    "return": "Promise<PaymentMethodPayload>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "validate": {
-                "complexType": {
-                    "signature": "() => Promise<ValidationResult>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "ValidationResult": {
-                            "location": "global",
-                            "id": "global::ValidationResult"
-                        }
-                    },
-                    "return": "Promise<ValidationResult>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "tokenize": {
-                "complexType": {
-                    "signature": "() => Promise<any>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "TokenizeConfig": {
-                            "location": "global",
-                            "id": "global::TokenizeConfig"
-                        }
-                    },
-                    "return": "Promise<any>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "disableCreditCard",
-                "methodName": "paymentMethodsChanged"
-            }, {
-                "propName": "disableBankAccount",
-                "methodName": "paymentMethodsChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "radio-click",
-                "method": "handleRadioClick",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

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

@@ -80,7 +80,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: 'e5ce1fb22e1929707428706dda084ffdbfe3010a' }, h("style", { key: '556af497b8ebd0b82b3e4a44483953243aa5cb0a' }, `
+        return (h("div", { key: '8f01710b6c352f39b35c5814cd6a876ab7e088c5' }, h("style", { key: 'e1885fe648eda95a8efa50a8f6cd46a09f59cc61' }, `
           .popper-content {
             display: none;
           }
@@ -88,7 +88,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '7765427c69a8d6c0c8e3c1f0db49009b05ac05b7', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '83226bf40f66021f7d628ee36ff6b501dc1ff97f' }))));
+          `), h("div", { key: 'b2d5d36d62207fceda79ad2d1d0d0680bee6a366', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '406218fe16ad4b65e3e80ca467c3c49a462dee18' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

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

@@ -2,7 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "./form-helpers/form-control-error-text";
 export class FileInput {
     render() {
-        return (h(Host, { key: '7ba26de4dc1fc18b3eec2ea364fe26b1036b4f51', exportparts: "label,input,input-invalid" }, h("div", { key: 'ca125e36caa36d14f7d18c3048d00699af79bf35', class: "form-group d-flex flex-column" }, h("div", { key: '07cefe5047839cf9ec35682c01ad5d89a691ac4f', class: "d-flex align-items-start gap-2" }, h("label", { key: '7aa93bf0faa4759f5e94bf8420e52f50cbe9c07e', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '88715a6ee07d8196602e951aa0054800f22ba942', helpText: this.helpText })), h("input", { key: '79c464c90f0f9ef4da01ac0d7703763749538191', 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: 'c979151bc382eaf2b542712d2725f6b7affd9bcb', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '3e9e35e7c4c1166866e3cf94dd18bfda6d64222d', exportparts: "label,input,input-invalid" }, h("div", { key: 'f951ee548b004edd55957f2b34a8ab4cddb59bc7', class: "form-group d-flex flex-column" }, h("div", { key: '9b28774efa7c53871c23b2e66ea8b6434af3d07b', class: "d-flex align-items-start gap-2" }, h("label", { key: '783eb33e72b44bb42d01f7e474998d7fa2b58093', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'bbc906ac8482e5cf21af56cf841932b78cd5e015', helpText: this.helpText })), h("input", { key: '3670f289b59e5464c11ba8b5ef66af0a3a2d65ca', 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: '11d9f49721bc8920c0fa917e6a406019aa29041e', 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

@@ -37,10 +37,10 @@ export class FileInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '6b5ab04b95a39c87e7d82f0c3e50dbbe53922388' }, h("div", { key: '923928a3fe76cb185a4baa9ba90c4ac11d4a480d', class: "form-group d-flex flex-column" }, h("div", { key: '695e3fbfa88486048203e41ce2de7d887c0fcdd3', class: "d-flex align-items-start gap-2" }, h("label", { key: '94df69c5039e85369e6422c12390fff1401d9b2b', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '4e9ca48d614a54a9d11eb0a66d64f24e96fd7105', helpText: this.helpText })), h("input", { key: 'b84f4f9e72369cf39f6899423520437ea2f2deb4', 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: 'c1d92b4464500d430ad828ce374b864f0abf79dc' }, h("div", { key: '7753e5875afe4c6da178a088721b62590e104039', class: "form-group d-flex flex-column" }, h("div", { key: '35732250f1da24e5d8af9d6c984360402aa8c749', class: "d-flex align-items-start gap-2" }, h("label", { key: '1dbdb4c74c82415714295d882a48ea3634265cae', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '132b4e5b01986aba2f1999db2f19373477b0af9d', helpText: this.helpText })), h("input", { key: '4c371be7c4d784fb7ba3dc3244aaab5ef7dea763', 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: '8024383aa421f8b787fde6ba0a39830c063e4a8d', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: 'f9c2a057b20ccf863331c90156a5a9df65bb85a6', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {

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

@@ -42,10 +42,10 @@ export class MonetaryInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'ae64aa9000fff01313371b755f0e20925fbd005b' }, h("div", { key: 'f40ae8e775f4ea3ab811f8f2985e30dca5c37c1e', class: "form-group d-flex flex-column" }, h("label", { key: '1f4283cc32579ef12c225ae5a1f1fff1c8142128', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'f991dae37527a94cc4b98ed766361a7d97b6214b', name: this.name, helpText: this.helpText }), h("div", { key: '86ecd5f81238c8675b59c7a0b6a3629b49a0109c', class: "input-group" }, h("span", { key: '04a5576a92c024926f320f7a121c34cf43ebcac8', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '76f05aa792ae96d1d3302ef627e35cab538a6fdb', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'dd501963b2b4c85eecd6c78ac8a1c38d6e30020c' }, h("div", { key: '4c130a5d956ab1caaab521930d29d666dfbfcf67', class: "form-group d-flex flex-column" }, h("label", { key: '59a59b0589b3555efcb509ebb0ca34a3cc01ce3a', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '0290105bb2d69ae83d1583f2495557e1e11b2939', name: this.name, helpText: this.helpText }), h("div", { key: 'cf80c69cc63137195ef179dd12f726f34bf35780', class: "input-group" }, h("span", { key: '5ecc2e144e7fe9fde5a64e48d8b8471d446fdb5d', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '585da3cd389904d002a545c01b4322c9aa9ea74e', 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: 'b28032e69108ff37485080e2e9f284cc30d10697', 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: '52a6fef8192278acb9a3eb854f5cea8834ed5d0f', 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

@@ -61,10 +61,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: 'c9dab9ba56a1b41607de674822120ed24b3ad7f6' }, h("div", { key: 'd08134d142c810576417f0cfdabe957cd7a29c10', class: "form-group d-flex flex-column" }, h("div", { key: '2103a3d5680ee3fccb8d17421b460eb142001ae8', class: "d-flex align-items-start gap-2" }, h("label", { key: '2f09b7eefbd6c5cd831cbb1e717bc1740971c508', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '6c0417df2d3610be4d875c330ef6237734a88448', helpText: this.helpText })), h("input", { key: '321ba8e05dcf152d6f4236b4dc28430c8a200f70', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: '5252b2a1d8f6275cdaaa803c1c3a58294b35ef5c' }, h("div", { key: '7fe65f7797268ebc964a1b02ac61166254a0c409', class: "form-group d-flex flex-column" }, h("div", { key: '843bf1cf8ff7bf245760d0f65ea844768aa78ad2', class: "d-flex align-items-start gap-2" }, h("label", { key: '2ba6512c6a6dfa9aa4105f069809173f01262c60', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ec179bc366c9286246134133510bcd35fd9de891', helpText: this.helpText })), h("input", { key: '546e50189acc596e7b1c1826edb7473084f93754', 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: '34a37fcce3f7fe66d1632596b660fd8524aae5fb', 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: '6da86dcebd7e427cce68d7b88d07b94daec26f21', 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

@@ -36,10 +36,10 @@ export class NumberInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'c07e38fb8e29b370384a0f0e205f5a88a1e6196e' }, h("div", { key: 'ad468ff917437598440706926b3f1ddb122ac58c', class: 'form-group d-flex flex-column' }, h("label", { key: '97d0f82fd9af770e89e6fb8d4a378dffcd94a52f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '044d3c7dd7537595e7d878b2e3d79820d567eaf6', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '4272ba30cf80097abd67fd184b927f4d41b3091b' }, h("div", { key: '567b2b04d354e5c3352dd42431c92bd84fdb4d9d', class: 'form-group d-flex flex-column' }, h("label", { key: '0d3ee096554d638896e03002ed908f7379e406fd', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '59ffd3ffe0beba8af97de7dd7ee12a2589c0d722', 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: 'e13cb9e5f745aea81e3ac4f12bcfe2c1baad6468', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '02a1b55b70646abd319b10cc051be9803c525886', 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: '891b76120f5985007ad9101379a818e9e095cb46', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '974fb8971bd4a369fb3dc838a2af03ca11d1f650', 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

@@ -26,10 +26,10 @@ export class RadioInput {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: '0e904c8de95f266bc709f9b3c1fb7c58c303a24c', class: 'form-group d-flex flex-column' }, h("div", { key: '24dd45066d45495f108aa30262d2e74f257c3d4a', class: "form-check" }, h("input", { key: '12b5f8e62d22a4c0a4f54fc6842911c3a6664106', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '1b798d4c7a78475795a0b667839e82bbc402749c', class: 'form-group d-flex flex-column' }, h("div", { key: 'df37525372c220bb0fcbc54bc89d28b55c5b5407', class: "form-check" }, h("input", { key: 'af923ae2cb8677fd9e943c912ef9c117dc8eb9d5', 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: 'dad68c4bb27faeeb5c94a92d89ed747bbd865e78', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '6c3cbe742fb61272e10c7d615c744853151bc5dc', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '9e2f85f6065e418f5b8a58bbaae86d44f6da9859', 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: '06aec18092d38c386cb3dbeb7712a356f6615f82', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '63356fa988cecc235ff01b7f9eb4c344d62a18c0', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '61c5b0fac0b21856660dd6b9c64c2202f82324b2', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {

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

@@ -36,10 +36,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '8fa1333a0d4d7f50ce2e415f8ba24317e33e6a08' }, h("div", { key: 'ed36e5fa440070d759aa830056c8a6cbdcc916d4', class: "form-group d-flex flex-column" }, h("div", { key: 'e773415acf7f067c8c1076198be94302c547bb80', class: "d-flex align-items-start gap-2" }, h("label", { key: '9a163545aed306bdc3abed71cd875804f3c4aa32', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '8d6e13cff374cb5c92ce0af3238c636238617cba', helpText: this.helpText })), h("input", { key: '3d7c95603d79f3e7919a879308f312053ce01f12', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'bf68ea270c8dee6a9e572f0d2fdfc9308c8c106f' }, h("div", { key: '8e315377092c55c7c1a48c5528dba67f0d4a6f1c', class: "form-group d-flex flex-column" }, h("div", { key: 'c507734dadd643a306a22ce2e9df63a54422a7ab', class: "d-flex align-items-start gap-2" }, h("label", { key: '7e9ca4266d86bfb0e33e5951a07599a7a17c0c31', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a3f1737b361144e9df92c706c6b5a1c4e1e2fc34', helpText: this.helpText })), h("input", { key: '657edb006b902ad815cd65e426d74a306328a0cb', 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: 'e79de48854230e9b8e25a48e805784a454207065', 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: '1ebb690623549e319972fe5ea0221966a9982cac', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {

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

@@ -38,10 +38,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'e503ec4d39ce25b22cc252967ac0753982bad436' }, h("div", { key: '2d2d0d587a4ac57b62f27532b5adb47b36ebd3b7', class: "form-group d-flex flex-column" }, h("label", { key: '0ee84c2fb75c6a51bba1a0a70f06f66576366a77', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '81318a2cf2f0ccb3ba0deb74f52ec8d7e001cbc7', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '1e41c053b809f4bda982850125e00e9897470d54' }, h("div", { key: 'c87bf55b62aea28d4eee19235c6a49ba5e14d9d7', class: "form-group d-flex flex-column" }, h("label", { key: 'be4dd8515c80b016e8d0cb88d8a50a53f570e239', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: 'da24a7b98a098a71683a79bc1a4c77da64d9f3dc', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: 'dd3d7c2a8caaf1dcd3b4b488977d44c6033e7213', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '103c3bb5f0579d940ed2152fcf5eb5a17a1e3640', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '6af10143701fec60501ebc5bcbff614638d3c9a9', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '3a56898b53e89041e5947d3ffcd9f827a6b925fe', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-textarea"; }
     static get properties() {

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

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

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

@@ -77,10 +77,10 @@ export class IframeInput {
         return params;
     }
     render() {
-        return (h(Host, { key: '6a9a148def6119cf6038a940e1d24998f0de8139', class: "form-group d-flex flex-column" }, h("div", { key: 'dd8e4f676545658c2faaf23f42ef96def263a603', style: {
+        return (h(Host, { key: '0c3f4427120c3405bf47f60dd3bde638f0c3176e', class: "form-group d-flex flex-column" }, h("div", { key: '6ba2a62c8df9db7b01341ea06fbe1df25a87e604', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: 'd9a8dac1e7ea15b602dbdb17d141dafcacedfa6a', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '2d2532b0a83f9449b7687fa95798e3fa1d055e97', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '524eec0a405f0a58b7b1c81f10532244478f749b', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: 'cc7dfd2299382e473f6ce279c5ffe61794d56e59', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '62406d7581a21dcdec52c993edc2a03cd8fce1ef', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '7c804be15e9029e003684bea21f93578269bdac7', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -90,7 +90,7 @@ export class IframeInput {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: '40393084f556c3f0c648d89c1b4f41ed93cd0b1a', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '2cb6be114be8cea65d880b6c21eacdf46052468c', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {

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

@@ -7,7 +7,7 @@ export class JustifiButton {
         this.type = 'button';
     }
     render() {
-        return (h(StyledHost, { key: '4303daf453d356b8111a2a00f821bc83cdd658c5' }, h(Button, { key: '7c1b0a71ac3274bb03218a8d921d5dc39bc48528', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
+        return (h(StyledHost, { key: 'e3b353dac8bf4c078fed17a4854c6ee1891df140' }, h(Button, { key: '76bfcc8763775a3442fe7f8c307400c1fa829da0', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
     }
     static get is() { return "justifi-button"; }
     static get encapsulation() { return "shadow"; }